UPDATE readme
This commit is contained in:
unpregnant
parent
a3a4a0075f
commit
6a35599e31
97
README.md
97
README.md
@ -2,7 +2,7 @@
|
||||
|
||||
Build your best resume ever!
|
||||
|
||||
A collection of beautiful resumes build with LESS and Mustache Templates. Choose your favorite Curriculum Vitae and easily export it as pdf.
|
||||
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,39 +13,108 @@ A collection of beautiful resumes build with LESS and Mustache Templates. Choose
|
||||
<a href="public/preview/resume-5.png"><img src="public/preview/resume-5.png" width="150"/></a>
|
||||
<a href="public/preview/resume-6.png"><img src="public/preview/resume-6.png" width="150"/></a>
|
||||
|
||||
## How to generate your resumes
|
||||
## Getting Started
|
||||
|
||||
Follow these instructions to create your own CV:
|
||||
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/
|
||||
|
||||
### 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>.
|
||||
- Feel free to adjust styles in `/less` according to your needs.
|
||||
|
||||
If you adjust the less files or `/src/person.js`, restart application with `npm start` to view changes.
|
||||
If you adjust your data in `/src/person.js`, please stop application with `CTRL + C` and restart with `npm start`.
|
||||
|
||||
- When finished, run `npm run pdf` to generate all CVs as pdf. You will find the generated pdfs in `/pdf`.
|
||||
### 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 the all resumes as PDFs in `/pdf`.
|
||||
|
||||
### Adjusting stylings and layout
|
||||
|
||||
Feel free to adjust stylings. This project uses LESS. Under `/less` global stylings are defined. Concerning the resumes, you will find here imported fonts and the page layout. To see how to adjust the page layout see 'Page size'. To add fonts see 'Add fonts'.
|
||||
|
||||
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. Therefore please read: XX and XX.
|
||||
|
||||
#### 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
|
||||
```
|
||||
|
||||
If you do not want the font-size of an element to adjust automatically, please use `!important`:
|
||||
|
||||
```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
|
||||
|
||||
Due to this [Chrome bug](http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome), CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows:
|
||||
|
||||
```css
|
||||
-webkit-print-color-adjust:exact;
|
||||
-webkit-filter:opacity(1);
|
||||
```
|
||||
|
||||
Unfortunately, fonts and images get blurred and lose quality. Therefore `fixBoxShadows()` in `/public/javascript.js` fixes this bug, by
|
||||
1. searching for all elements with a box-shadow,
|
||||
2. removing the box-shadow,
|
||||
3. adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body,
|
||||
4. 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;
|
||||
|
||||
|
||||
### Adjusting PDF-generation and page size
|
||||
|
||||
[mixu/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 PDF equals A4. For more PDF settings check [mixu/electroshot](https://github.com/mixu/electroshot).
|
||||
|
||||
### Adding fonts
|
||||
|
||||
TODO
|
||||
|
||||
## Adding a template
|
||||
|
||||
TODO
|
||||
|
||||
### Handle box-shadows and drop-shadow
|
||||
## Build With
|
||||
|
||||
TODO
|
||||
|
||||
### How to add a font
|
||||
|
||||
TODO
|
||||
- LESS
|
||||
- Mustache
|
||||
- Babel
|
||||
- electroshot
|
||||
- Node.js, JavaScript.
|
||||
|
||||
TODO add readme to html!
|
||||
|
||||
## Contribute
|
||||
|
||||
Feel free to create your own templates!
|
||||
|
||||
|
||||
TODO add contribute.md on how to contribute
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
|
||||
74
index.html
74
index.html
@ -15,7 +15,7 @@
|
||||
<div id="readme">
|
||||
<h1 id="bestresumeever">best-resume-ever</h1>
|
||||
<p>Build your best resume ever!</p>
|
||||
<p>A collection of beautiful resumes build with LESS and Mustache Templates. Choose your favorite Curriculum Vitae and easily export it as pdf.</p>
|
||||
<p>A collection of multiple beautiful resumes build with LESS and Mustache Templates. Choose your favorite Curriculum Vitae and easily export it as PDF.</p>
|
||||
<h2 id="resumes">Resumes</h2>
|
||||
<p><a href="public/preview/resume-1.png"><img src="public/preview/resume-1.png" width="150"/></a>
|
||||
<a href="public/preview/resume-2.png"><img src="public/preview/resume-2.png" width="150"/></a>
|
||||
@ -23,28 +23,76 @@
|
||||
<a href="public/preview/resume-4.png"><img src="public/preview/resume-4.png" width="150"/></a>
|
||||
<a href="public/preview/resume-5.png"><img src="public/preview/resume-5.png" width="150"/></a>
|
||||
<a href="public/preview/resume-6.png"><img src="public/preview/resume-6.png" width="150"/></a></p>
|
||||
<h2 id="howtogenerateyourresumes">How to generate your resumes</h2>
|
||||
<p>Follow these instructions to create your own CV:</p>
|
||||
<h2 id="gettingstarted">Getting Started</h2>
|
||||
<p>Follow these instructions to set up this project and create your own CV.</p>
|
||||
<h3 id="prerequisites">Prerequisites</h3>
|
||||
<p>To run this project, please install node.</p>
|
||||
<p>See:</p>
|
||||
<ul>
|
||||
<li>https://nodejs.org/en/download/package-manager/</li>
|
||||
<li>https://nodejs.org/en/download/</li>
|
||||
</ul>
|
||||
<h3 id="installation">Installation</h3>
|
||||
<ul>
|
||||
<li>Clone this repository.</li>
|
||||
<li>Switch to project directory and run <code>npm install</code>.</li>
|
||||
</ul>
|
||||
<h3 id="adjustingyourpersonalinformation">Adjusting your personal information</h3>
|
||||
<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>Feel free to adjust styles in <code>/less</code> according to your needs.</li>
|
||||
</ul>
|
||||
<p>If you adjust the less files or <code>/src/person.js</code>, restart application with <code>npm start</code> to view changes.</p>
|
||||
<ul>
|
||||
<li>When finished, run <code>npm run pdf</code> to generate all CVs as pdf. You will find the generated pdfs in <code>/pdf</code>.</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>
|
||||
<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 the all resumes as PDFs in <code>/pdf</code>.</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. Concerning the resumes, you will find here imported fonts and the page layout. To see how to adjust the page layout see 'Page size'. To add fonts see 'Add fonts'.</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. Therefore please read: XX and XX.</p>
|
||||
<h4 id="fontsizes">Font-Sizes</h4>
|
||||
<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>
|
||||
<h4 id="css3boxshadows">CSS3 Box-Shadows</h4>
|
||||
<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;
|
||||
-webkit-filter:opacity(1);
|
||||
</code></pre>
|
||||
<p>Unfortunately, fonts and images get blurred and lose quality. Therefore <code>fixBoxShadows()</code> in <code>/public/javascript.js</code> fixes this bug, by</p>
|
||||
<ol>
|
||||
<li>searching for all elements with a box-shadow,</li>
|
||||
<li>removing the box-shadow,</li>
|
||||
<li>adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body,</li>
|
||||
<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="adjustingpdfgenerationandpagesize">Adjusting PDF-generation and page size</h3>
|
||||
<p><a href="https://github.com/mixu/electroshot">mixu/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 PDF equals A4. For more PDF settings check <a href="https://github.com/mixu/electroshot">mixu/electroshot</a>.</p>
|
||||
<h3 id="addingfonts">Adding fonts</h3>
|
||||
<p>TODO</p>
|
||||
<h2 id="addingatemplate">Adding a template</h2>
|
||||
<p>TODO</p>
|
||||
<h3 id="handleboxshadowsanddropshadow">Handle box-shadows and drop-shadow</h3>
|
||||
<p>TODO</p>
|
||||
<h3 id="howtoaddafont">How to add a font</h3>
|
||||
<p>TODO</p>
|
||||
<h2 id="buildwith">Build With</h2>
|
||||
<ul>
|
||||
<li>LESS</li>
|
||||
<li>Mustache</li>
|
||||
<li>Babel</li>
|
||||
<li>electroshot</li>
|
||||
<li>Node.js, JavaScript.</li>
|
||||
</ul>
|
||||
<p>TODO add readme to html!</p>
|
||||
<h2 id="contribute">Contribute</h2>
|
||||
<p>Feel free to create your own templates!</p>
|
||||
<p>Feel free to create your own templates!
|
||||
TODO add contribute.md on how to contribute</p>
|
||||
<hr />
|
||||
<p>Icons made by <a href="http://www.flaticon.com/authors/vectors-market" title="Vectors Market">Vectors Market</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC 3.0 BY</a>.</p>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user