diff --git a/README.md b/README.md index 0dd4f78..ccde416 100755 --- a/README.md +++ b/README.md @@ -23,24 +23,20 @@ A collection of multiple beautiful resumes build with LESS and Mustache Template Follow these instructions to set up this project and create your own CV. - +

### Prerequisites -To run this project, please install node. - -See: -- https://nodejs.org/en/download/package-manager/ -- https://nodejs.org/en/download/ - +To run this project, please install node. (See https://nodejs.org/en/download/package-manager/ and https://nodejs.org/en/download/) +

### Installation - Clone this repository. - Switch to project directory and run `npm install`. - +

### Adjusting your personal information @@ -50,7 +46,7 @@ See: 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 @@ -58,7 +54,7 @@ With `npm run pdf` the resumes can be exported. You will find all resumes as 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 @@ -66,13 +62,13 @@ This project uses LESS. Under `/less` global stylings are defined. You will find 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](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets. - +

### CSS3 Box-Shadows @@ -92,7 +88,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. - +

### Adding fonts @@ -121,14 +117,15 @@ Import new less file in `/less/fonts.less`: @import "fonts/roboto.less"; ``` - +

## Adding a template -TODO +Follow these steps: - add folder in resumes, convention: 'resume-X' -- add `style.less` and `index.mustache` with same naming +- add `style.less` and `index.mustache` with same naming inside new folder +Sample content of `index.mustache`: ```html
@@ -136,10 +133,10 @@ TODO
``` -- url - +For further reference, check out existing templates. +

## Contribute diff --git a/index.html b/index.html index 8d590c6..f40bed6 100755 --- a/index.html +++ b/index.html @@ -25,18 +25,16 @@

Getting Started

Follow these instructions to set up this project and create your own CV.

+



Prerequisites

-

To run this project, please install node.

-

See:

- +

To run this project, please install node. (See https://nodejs.org/en/download/package-manager/ and https://nodejs.org/en/download/)

+



Installation

+



Adjusting your personal information

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

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

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;
@@ -65,6 +67,7 @@
 
  • 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.
    
+


    
 
    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:
    
@@ -84,21 +87,22 @@
 @import "fonts/material-design-icons.less";
 @import "fonts/roboto.less";
    +



    Adding a template

    -

    TODO

    +

    Follow these steps:

    +

    Sample content of index.mustache:

    <page class="a4">
     <div id="resume1" class="resume">
       <!-- Content goes here -->
     </div>
 </page>
    - +

    For further reference, check out existing templates.

    +



    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 styling of github Pages in /less/githubPages.less.