From 4cec5f21cb100b5e055ec8d202d6ba7cf7171db4 Mon Sep 17 00:00:00 2001 From: unpregnant Date: Mon, 13 Feb 2017 20:28:28 +0100 Subject: [PATCH] UPDATE readme --- README.md | 64 ++++++++++++++++++++++++++++-------------------------- index.html | 36 ++++++++++-------------------- 2 files changed, 44 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index 832fe28..0dd4f78 100755 --- a/README.md +++ b/README.md @@ -4,6 +4,9 @@ Build your best resume ever! A collection of multiple beautiful resumes build with LESS and Mustache Templates. Choose your favorite Curriculum Vitae and easily export it as PDF. + + + ## Resumes @@ -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 . +- To preview your CV run `npm run dev`. Check out . + +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! + -If you adjust your data in `/src/person.js`, please stop application with `CTRL + C` and restart with `npm start`. ### Exporting resumes as PDF -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](https://github.com/mixu/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](https://github.com/mixu/electroshot). + + ### Adjusting stylings and layout -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. +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. +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 -Font-sizes adjust automatically depending on how much content your resume has. The bottom margin of the content is defined in `/public/javascript.js`: -```javascript -// minimum margin of content to bottom of page -var marginBottom = 50; // in px -``` +### Icons -If you do not want the font-size of an element to adjust automatically, please use `!important`: +This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets. -```css -.anyFont { - font-size: 12px !important; -} -``` -If you want to deactivate the automatic font adjustment just remove this line from `/public/javascript.js`: - -```javascript -checkFont(); -``` ### CSS3 Box-Shadows @@ -89,13 +92,7 @@ Unfortunately, fonts and images get blurred and lose quality. Therefore `fixBoxS 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](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets. - -### Adjusting PDF-generation and page size - -[electroshot](https://github.com/mixu/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](https://github.com/mixu/electroshot). ### Adding fonts @@ -124,11 +121,13 @@ Import new less file in `/less/fonts.less`: @import "fonts/roboto.less"; ``` + + ## Adding a template TODO - add folder in resumes, convention: 'resume-X' -- add .less and .mustache with same naming +- add `style.less` and `index.mustache` with same naming ```html @@ -137,8 +136,11 @@ TODO ``` -- 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`. diff --git a/index.html b/index.html index 962f4b4..8d590c6 100755 --- a/index.html +++ b/index.html @@ -41,27 +41,17 @@
  • 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 http://localhost:3000.
    • +
  • To preview your CV run 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!

Exporting resumes as PDF

-

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.

Adjusting stylings and layout

-

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

-

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.

+

Icons

+

This project contains the Google Material and fontawesome icon sets.

CSS3 Box-Shadows

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.