Since I was bored of my old resume I designed a new one. One version I designed in HTML5 and CSS3. To make it as stable as possible I do not use any scripts (except for printing, if JavaScript is activated). A further version I designed in SVG (using inkscape). This one has been converted to PDF (if inkscape is installed, svg2pdf.py can be used for this purpose).
Four colors are available (to every color there is a corresponding css):
If your are Linux user you might have to install the font Trebuchet MS first:
sudo apt-get update
sudo apt-get install ttf-mscorefonts-installer
The best way to change the SVG is by the using the Inkscape GUI.
inkscape svg/orange.svg
You can get Inkscape from the website or - if you are running Ubuntu - by using Aptitude:
sudo apt-get install inkscape
To convert the SVG to PDF you can use the python script svg2pdf.py (which assumes that inkscape is installed):
cd svg
./svg2pdf.py
It automatically converts all SVG-files in the directory to PDF.
To get different colors you just have to edit the following lines in the header of index.html:
<link href="css/orange.css" media="screen" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/print_orange.css" media="print"/>
Replace orange.css and orange_print.css by
- blue.css and blue_print.css,
- red.css and red_print.css,
- or green.css and green_print.css.
For the right links to the linked PDFs, the path to the PDF-file in the printPDF-script in the beginning of index.html must be changed to the according color.
var page = window.open('../../svg/orange.pdf')
Also the initial path of the print link in index.html must be changed
<a class="north cboxElement" id="printLink" href="../../svg/orange.pdf" unselectable="on"><img class="north_img" src="images/print.svg" alt=""></a>
Having to change so many lines is a bit annoying. I will change that later on.
Print Icon: If JavaScript is activated, the PDF is opened in print-mode. If JavaScript is not activated, pressing the print-icon just follows a link to the PDF-version.
Browsers Print Tool: For styling the print-version print.css was written. In the case that the browsers internal print tool is used print.css hides all content of the website and embeds the SVG-version of the cv.
I am not an expert in these things, so I used Trebuchet MS font. It is popular and whitespread. Besides it is a good sans serif alternative to Arial, which makes a slight difference.
Thanks and all credits to Daniel Bruce for the beautiful pictograms. All of them (except countX.svg) have been taken from Daniels website — www.entypo.com.
The work is licensed under Creative Commons. You are free to use the templates, also for commersial use. A mention like “Resume Template by Andreas Gschossmann — https://github.com/nerdOmat/resume ” is considered acceptable attribution. You can place this in the footer of your website or in the code if you don’t wanna give it to much attention.
- add colors (blue.css, red.css, orange.css, green.css)
- automize content management (change both, html5 and svg/pdf by using single XML-file for content) (https://jsonresume.org)
- make two versions (with and without image)
- add print.css
- embed qr-code in SVG and PDF-version
- create business card