The objective of this project was to develope a good-looking single page curriculum vitae template with the automation tool gulp that automates painful or time-consuming tasks in a development workflow.
This template depends on:
- node 8.x
- gulp
- Google Fonts (Josefin-Sans and Raleway)
The project uses phantomjs to transform HTML to PDF. Unfortunately phantomjs can't handle custom fonts defined with @font-face property. To get phantomjs to render HTML files correctly you will need to install fonts on your system.
- Download and install the LTS version of Node
- Download and unzip the cv-template-master
- Open the terminal (cmd.exe) and run commands:
cd cv-template-master
npm install
npm install gulp-cli -g- Now setup fonts. Change to the folder cv-template-master/app/assets/fonts/. Open the folder Raleway. Select all fonts in there and click on the selection with the right mouse button, than choose install. Do the same with Josefin_Sans.
The easiest way to install node is via the package manager:
If you use Ubuntu/Debian run:
curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -
sudo apt-get install nodejsDownload the cv-template-master, unpack the zip file and run:
cd ~/Downloads/cv-template-master
npm install
sudo npm install gulp-cli -g cp -r ~/Downloads/cv-template-master/app/assets/fonts ~/.fonts cd ~/Downloads/cv-template-master
gulpYou can view generated files in the folder ~/Downloads/cv-template-master/app/build/
# after you make any changes to the template you have to run gulp to rebuild PDF files
gulpThe content of the cv-template is stored in ~/Downloads/cv-template-master/app/contents/index.html.js.
To change the profile photo replace profile-photo.jpg and profile-photo-light.jpg by your own images in the folder ~/Downloads/cv-template-master/app/assets/images/.
You can change or add custom icons in the "INTERESTS" section by putting your own graphics (svg, png, jpg) to the folder ~/Downloads/cv-template-master/app/assets/images/icons/. Finally you will need to edit the file ~/Downloads/cv-template-master/app/contents/index.html.js and change the value of the icon attribute by entering "icon--" and "file name" without extension.
interests: {
title: 'Interests',
item1: {
icon: 'icon--terminal',
caption: 'Coding'
},
item2: {
icon: 'icon--game-controller',
caption: 'Games'
},
item3: {
icon: 'icon--compass',
caption: 'Hiking'
},
item4: {
icon: 'icon--saddle',
caption: 'Cycling'
}
}Page Options are placed in the file ~/Downloads/cv-template-master/app/assets/styles/base/_variables.css.
/* page options */
$pageZoom: 1; /* scales page */
$pageZoomOnWindows: 1.333; /* scales page on Windows */
$pageBorder: 0px; /* sets the border size of the page */I've noticed that phantomjs renders HTML pages differently depending on the operating systems it runs on. If PDF files are not correctly rendered on your OS you can fix it by adjusting the variable $pageZoom or $pageZoomOnWindows (on Windows OS).
By default the page border is set to 0px. If your printer cuts off the page content you can fix it by increasing the value of the variable $pageBorder.
The Live Preview is very usefull if you want to view template changes in your browser on the fly, without runnig gulp every time. This will only work if you make changes to index.html, index.html.js files and CSS files in ~/Downloads/cv-template-master/app/assets/styles/ directory. If you make changes to other files you still need to run gulp. You can run gulp in a separate terminal without stopping the Live Preview.
Run with:
gulp watch... and stop it by pressing ctrl + c.
Now copy the local url that you see in the terminal output to the address bar in your browser. In my case it is http://localhost:3000. Here is my output:
[12:13:42] Starting 'watch'...
[12:13:42] Finished 'watch' after 69 ms
[Browsersync] Access URLs:
----------------------------
Local: http://localhost:3000
----------------------------
UI: http://localhost:3001
----------------------------
[Browsersync] Serving files from: app/build
MIT