ilia/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE readme

Browse Source
This commit is contained in:
unpregnant 2017-02-13 20:28:28 +01:00
parent dfce28dc9d
commit 4cec5f21cb
2 changed files with 44 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
README.md
View File

@ -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
<a href="public/preview/resume-left-right.png"><img src="public/preview/resume-left-right.png" width="150"/></a>
@ -13,10 +16,15 @@ A collection of multiple beautiful resumes build with LESS and Mustache Template
<a href="public/preview/resume-grey-boxes.png"><img src="public/preview/resume-grey-boxes.png" width="150"/></a>
<a href="public/preview/resume-spotify.png"><img src="public/preview/resume-spotify.png" width="150"/></a>
## 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 <http://localhost:3000>.
- To preview your CV run `npm run dev`. Check out <http://localhost:3000>.
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
<page class="a4">
@ -137,8 +136,11 @@ TODO
</div>
</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`.

36
index.html
View File

@ -41,27 +41,17 @@
<ul>
<li>Adjust your personal information in <code>/src/person.js</code>.</li>
<li>Replace placeholder image <code>/public/person.jpg</code> with your portrait.</li>
<li>To preview your CV run <code>npm start</code>. Check out <a href="http://localhost:3000">http://localhost:3000</a>.</li>
<li>To preview your CV run <code>npm run dev</code>. Check out <a href="http://localhost:3000">http://localhost:3000</a>.</li>
</ul>
<p>If you adjust your data in <code>/src/person.js</code>, please stop application with <code>CTRL + C</code> and restart with <code>npm start</code>.</p>
<p>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!</p>
<h3 id="exportingresumesaspdf">Exporting resumes as PDF</h3>
<p>When finished, run <code>npm start</code> and run <code>npm run PDF</code> in a new console window to generate resumes as PDF. You will find all resumes as PDFs in <code>/pdf</code>.</p>
<p>With <code>npm run pdf</code> the resumes can be exported. You will find all resumes as PDFs in <code>/pdf</code>.</p>
<p><a href="https://github.com/mixu/electroshot">electroshot</a> is used to generate PDFs. <code>convertToPdf()</code> in <code>/src/htmlToPdf.js</code> runs a short bash script for each resume running under <code>localhost:3000/resumes/resume-X</code>. By default the PDF size is A4. For more PDF settings check <a href="https://github.com/mixu/electroshot">mixu/electroshot</a>.</p>
<h3 id="adjustingstylingsandlayout">Adjusting stylings and layout</h3>
<p>Feel free to adjust stylings. This project uses LESS. Under <code>/less</code> global stylings are defined. You will find here imported fonts and the page layout.</p>
<p>Each resume has its own directory. For example 'resume-1' is under <code>/resumes/resume-1</code>. Each resume directory contains a Mustache template and a less-file. Font-sizes and box-shadows are being adjusted automatically.</p>
<h3 id="fontsizes">Font-Sizes</h3>
<p>Font-sizes adjust automatically depending on how much content your resume has. The bottom margin of the content is defined in <code>/public/javascript.js</code>:</p>
<pre><code class="javascript language-javascript">// minimum margin of content to bottom of page
var marginBottom = 50; // in px
</code></pre>
<p>If you do not want the font-size of an element to adjust automatically, please use <code>!important</code>:</p>
<pre><code class="css language-css">.anyFont {
font-size: 12px !important;
}
</code></pre>
<p>If you want to deactivate the automatic font adjustment just remove this line from <code>/public/javascript.js</code>:</p>
<pre><code class="javascript language-javascript">checkFont();
</code></pre>
<p>This project uses LESS. Under <code>/less</code> global stylings are defined. You will find here imported fonts and the page layout.</p>
<p>Each resume has its own directory. For example 'resume-1' is under <code>/resumes/resume-1</code>. Each resume directory contains a Mustache template and a less-file.</p>
<h3 id="icons">Icons</h3>
<p>This project contains the <a href="https://material.io/icons/">Google Material</a> and <a href="http://fontawesome.io/icons/">fontawesome</a> icon sets.</p>
<h3 id="css3boxshadows">CSS3 Box-Shadows</h3>
<p>Due to this <a href="http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome">Chrome bug</a>, CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows:</p>
<pre><code class="css language-css">-webkit-print-color-adjust:exact;
@ -75,10 +65,6 @@ var marginBottom = 50; // in px
<li>and adding the stylings for <code>-webkit-print-color-adjust</code> and <code>-webkit-filter</code> to the new element.</li>
</ol>
<p>If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning.</p>
<h3 id="icons">Icons</h3>
<p>This project contains the <a href="https://material.io/icons/">Google Material</a> and <a href="http://fontawesome.io/icons/">fontawesome</a> icon sets.</p>
<h3 id="adjustingpdfgenerationandpagesize">Adjusting PDF-generation and page size</h3>
<p><a href="https://github.com/mixu/electroshot">electroshot</a> is used to generate PDFs. <code>convertToPdf()</code> in <code>/src/htmlToPdf.js</code> runs a short bash script for each resume running under <code>localhost:3000/resumes/resume-X</code>. By default the PDF size is A4. For more PDF settings check <a href="https://github.com/mixu/electroshot">mixu/electroshot</a>.</p>
<h3 id="addingfonts">Adding fonts</h3>
<p>To add a font to the project, search for the npm-module of the desired font, e.g. <a href="https://www.npmjs.com/package/roboto-fontface">roboto-fontface</a> for 'Roboto'. Add dependency to <code>package.json</code> with <code>npm i --save</code>, e.g. <code>npm i --save roboto-fontface</code>.</p>
<p>Create a new less file in <code>/less/fonts</code>, e.g. 'roboto.less'. <code>/node_modules</code> are accessable through localhost:3000. That means if the corresponding woff-file is under <code>/node_modules/roboto-fontface/anyFont.woff</code> the source url needs to equal <code>/roboto-fontface/anyFont.woff</code>:</p>
@ -102,7 +88,7 @@ var marginBottom = 50; // in px
<p>TODO</p>
<ul>
<li>add folder in resumes, convention: 'resume-X'</li>
<li>add .less and .mustache with same naming</li>
<li>add <code>style.less</code> and <code>index.mustache</code> with same naming</li>
</ul>
<pre><code class="html language-html">&lt;page class="a4"&gt;
&lt;div id="resume1" class="resume"&gt;
@ -111,10 +97,10 @@ var marginBottom = 50; // in px
&lt;/page&gt;
</code></pre>
<ul>
<li>url </li>
<li>url</li>
</ul>
<h2 id="contribute">Contribute</h2>
<p>Feel free to create your own templates. Please read this documentation carefully. After adding your template please add a preview as in <code>/public/preview</code> and add it to the README. Compile index.html for github Pages with <code>npm run readme</code>. If needed adjust github Pages styling in <code>/less/githubPages.less</code>.</p>
<p>Feel free to create your own templates. Please read this documentation carefully. After adding your template please add a preview as in <code>/public/preview</code> and add it to the README. Compile index.html for github Pages with <code>npm run readme</code>. If needed, adjust styling of github Pages in <code>/less/githubPages.less</code>.</p>
</div>
<script>
var headline = document.getElementsByTagName('h1')[0];