@@ -13,10 +16,15 @@ A collection of multiple beautiful resumes build with LESS and Mustache Template
+
+
+
## Getting Started
Follow these instructions to set up this project and create your own CV.
+
+
### Prerequisites
To run this project, please install node.
@@ -25,51 +33,46 @@ See:
- https://nodejs.org/en/download/package-manager/
- https://nodejs.org/en/download/
+
+
### Installation
- Clone this repository.
- Switch to project directory and run `npm install`.
+
+
### Adjusting your personal information
- Adjust your personal information in `/src/person.js`.
- Replace placeholder image `/public/person.jpg` with your portrait.
-- To preview your CV run `npm start`. Check out /src/person.js./public/person.jpg with your portrait.npm start. Check out http://localhost:3000.npm run dev. Check out http://localhost:3000.If you adjust your data in /src/person.js, please stop application with CTRL + C and restart with npm start.
Everytime you make changes, the app recompiles automatically. This may take a short while. Feel free to adjust font-sizes and other stylings to fit your needs!
When finished, run npm start and run npm run PDF in a new console window to generate resumes as PDF. You will find all resumes as PDFs in /pdf.
With npm run pdf the resumes can be exported. You will find all resumes as PDFs in /pdf.
electroshot is used to generate PDFs. convertToPdf() in /src/htmlToPdf.js runs a short bash script for each resume running under localhost:3000/resumes/resume-X. By default the PDF size is A4. For more PDF settings check mixu/electroshot.
Feel free to adjust stylings. This project uses LESS. Under /less global stylings are defined. You will find here imported fonts and the page layout.
Each resume has its own directory. For example 'resume-1' is under /resumes/resume-1. Each resume directory contains a Mustache template and a less-file. Font-sizes and box-shadows are being adjusted automatically.
Font-sizes adjust automatically depending on how much content your resume has. The bottom margin of the content is defined in /public/javascript.js:
// minimum margin of content to bottom of page
-var marginBottom = 50; // in px
-If you do not want the font-size of an element to adjust automatically, please use !important:
.anyFont {
- font-size: 12px !important;
-}
-If you want to deactivate the automatic font adjustment just remove this line from /public/javascript.js:
checkFont();
-This project uses LESS. Under /less global stylings are defined. You will find here imported fonts and the page layout.
Each resume has its own directory. For example 'resume-1' is under /resumes/resume-1. Each resume directory contains a Mustache template and a less-file.
This project contains the Google Material and fontawesome icon sets.
Due to this Chrome bug, CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows:
-webkit-print-color-adjust:exact;
@@ -75,10 +65,6 @@ var marginBottom = 50; // in px
and adding the stylings for -webkit-print-color-adjust and -webkit-filter to the new element.
If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning.
-Icons
-This project contains the Google Material and fontawesome icon sets.
-Adjusting PDF-generation and page size
-electroshot is used to generate PDFs. convertToPdf() in /src/htmlToPdf.js runs a short bash script for each resume running under localhost:3000/resumes/resume-X. By default the PDF size is A4. For more PDF settings check mixu/electroshot.
Adding fonts
To add a font to the project, search for the npm-module of the desired font, e.g. roboto-fontface for 'Roboto'. Add dependency to package.json with npm i --save, e.g. npm i --save roboto-fontface.
Create a new less file in /less/fonts, e.g. 'roboto.less'. /node_modules are accessable through localhost:3000. That means if the corresponding woff-file is under /node_modules/roboto-fontface/anyFont.woff the source url needs to equal /roboto-fontface/anyFont.woff:
@@ -102,7 +88,7 @@ var marginBottom = 50; // in px
TODO
- add folder in resumes, convention: 'resume-X'
-- add .less and .mustache with same naming
+- add
style.less and index.mustache with same naming
<page class="a4">
<div id="resume1" class="resume">
@@ -111,10 +97,10 @@ var marginBottom = 50; // in px
</page>
-- url
+- url
Contribute
-Feel free to create your own templates. Please read this documentation carefully. After adding your template please add a preview as in /public/preview and add it to the README. Compile index.html for github Pages with npm run readme. If needed adjust github Pages styling in /less/githubPages.less.
+Feel free to create your own templates. Please read this documentation carefully. After adding your template please add a preview as in /public/preview and add it to the README. Compile index.html for github Pages with npm run readme. If needed, adjust styling of github Pages in /less/githubPages.less.