Discover a revolutionary way to tailor your resume with precision using our innovative Resume Designer tool. Harness the power of markup language to create a resume that perfectly suits your unique career journey. Our user-friendly platform empowers you to control every detail, ensuring your resume shines brightly. Customize effortlessly, fine-tune the layout, and download your masterpiece in PDF format.
To create your resume, you'll need to input a markup language code into the code editor like in the below example.
Hello, world!
This is my resume.
The code will be automatically translated into a resume and you will see the result immediately. Try typing in the above window and see how it works.
Hello, world! This is my resume. |
The markup language is very simple, intuitive and does not require any programming skills. Check out the rest of the topics to familiarize yourself with its features.
Regions are logical blocks that are started with #
(hash sign). Those blocks can be collapsed and expanded in the code editor. Try clicking the triangle on line number one or three.
#settings
#resume
Hello, world!
This is my resume.
The second line contains a comment. Comments start with //
(double slash). Both regions and comments do not affect the resume rendering.
They can be used to make the source code easier for humans to read and understand. As you can see, the code editor uses a faded color for regions and comments which visually makes it clear that those elements are of an auxiliary nature.
Each resume is a table filled with a content. Each table consists of rows and columns that form table cells. Use the following syntax to define the table (layout) and cell contents:
xxxxxxxxxx
// layout
+-------+---+
| | |
+---+---+ |
| | | |
| +---+---+
| | |
+---+-------+
// cells with content
----------
One
----------
Two
----------
Three
----------
Four
----------
Five
Cells are counted from left to right from top to bottom. You can use --
(double dash) to separate cells, but having more dashes like ----------
makes cell borders more visible.
Each element of a resume can be styled. To add style to an element, place it between {}
(curly brackets) right after the element. An element can have multiple styling attributes separated by ;
(semicolon).
xxxxxxxxxx
// layout
+-------+---+
| | |
+---+---+ |
| | | |
| +---+---+
| | |
+---+-------+{font-italic}
// cells with content
----------{background-aquamarine}
One
----------{background-mediumturquoise; text-end}
Two
----------{background-khaki}
Three
----------{background-lightpink; font-bold; text-center}
Four
----------{background-peru; text-end}
Five
Now we changed font style in our resume and colored the cells.
You will know what styles are applicable for what elements in the next sections, but below are some general styles that can be used for the layout and cells.
background-{color}
where {color}
can be a name or a code. Find colors names and codes here.width-{value}
defines a cell width. It can be a number like width-200
that means 200 pixels, or a percentage value like width-30%
.height-{value}
defines a cells height and can be specified similarly to width.font-{size}
defines a font size. Available values are font-xxxx-large
, font-xxx-large
, font-xx-large
, font-x-large
, font-large
, font-medium
, font-small
, font-x-small
, font-xx-small
, font-xxx-small
.font-{style}
defines a font style. Available values are font-bold
, font-italic
.text-{alignment}
defines a text alignment. Available values are text-start
, text-center
, text-end
.Last but not least, if you are familiar with Bootstrap and CSS you can use them for styling your resume as well. Next section have some examples.
A text in a resume can be styled by placing it between **
(double asterisk) and specifying styling attributes in parentheses.
xxxxxxxxxx
*I'm small*{font-small}
*I'm big and red*{font-xx-large; color-red}
*I'm strikethrough*{text-decoration-line-through}
*I'm XXL Georgia*{font-family: Georgia, serif; font-xx-large}
You can find some built-in text styles in Adding style section. And you might have noticed that using Bootstrap styles and CSS styles is also possible.
To put an image into your resume from the Internet place its link between !!
(double exclamation mark).
xxxxxxxxxx
!https://a4resume.com/images/peter-glebsky.png!{width-200}
You can use Litterbox by Catbox (or any other simialar website) to upload your photo to the Internet without registration.
To add an icon into your text place its name between ::
(double colon).
xxxxxxxxxx
Follow me on :facebook:{color-#3b5998}
:fa-brands fa-twitter:{color-#00acee} and Twitter
Although there are some built-in icon aliases (location
, email
, phone
, linkedin
, facebook
, briefcase
, graduation
, trend
), we recommend using Font Awesome icons as demonstrated in the second line.
To add a progress bar into your resume place []
(square brackets) and specify a percentage value inside it.
xxxxxxxxxx
[30%]
Bar with a label [40%]
Bar with a custom style [50%]{background-white; bar-background-black; bar-height-2}
Short rounded bar [60%]{width-100; rounded; bar-rounded; background-white; bar-background-dodgerblue}
Use styles to customize progress bars to match the appearance of your resume. A progress bar will have a label if you place if prior to []
.
Place -
(dash) in the beginning of a line to create a list item.
xxxxxxxxxx
This is a list of items:
-*Item one;*{fw-semibold}
-Item two;
-Item three.
As you may have noticed, list items can be styled similarly to text.
Lists can also be in the form of a timeline. Start a line with =
(equal sign) to create a timelime list item.
xxxxxxxxxx
This is a timeline list:
=Today
I'm skiing
=Yesterday
I was swimming
=Day before yesterday.
I was dancing
A timeline list item can include multiple lines.
Use __
(double underscore) to add a horizontal divider between lines.
xxxxxxxxxx
Divide me from
__
this
__{width-50%; border: 10px solid chocolate}
As you may have noticed, horizontal dividers can be styled.