113 lines
7.5 KiB
HTML
Executable File
113 lines
7.5 KiB
HTML
Executable File
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="public/style.min.css" rel=" stylesheet">
|
|
<title> Best resume ever </title>
|
|
</head>
|
|
|
|
<body>
|
|
<a href="https://github.com/SalamiMitPizza/best-resume-ever" target="_blank">
|
|
<div id="forkme">View on Github <img src="public/github.png" /></div>
|
|
</a>
|
|
<div id="readme">
|
|
<h1 id="bestresumeever">best-resume-ever</h1>
|
|
<p>Build your best resume ever!</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-left-right.png"><img src="public/preview/resume-left-right.png" width="150"/></a>
|
|
<a href="public/preview/resume-side-bar.png"><img src="public/preview/resume-side-bar.png" width="150"/></a>
|
|
<a href="public/preview/resume-oblique.png"><img src="public/preview/resume-oblique.png" width="150"/></a>
|
|
<a href="public/preview/resume-wanted.png"><img src="public/preview/resume-wanted.png" width="150"/></a>
|
|
<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></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>
|
|
</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 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. 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>
|
|
<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;
|
|
-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="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>
|
|
<pre><code class="less language-less">@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/roboto-fontface/fonts/Roboto/Roboto-Thin.eot');
|
|
src: local('Roboto Thin'), local('Roboto-Thin'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.woff') format('woff'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.ttf') format('truetype')
|
|
font-weight: 100;
|
|
font-style: normal;
|
|
}
|
|
</code></pre>
|
|
<p>Import new less file in <code>/less/fonts.less</code>:</p>
|
|
<pre><code class="less language-less">@import "fonts/opensans.less";
|
|
@import "fonts/montserrat.less";
|
|
@import "fonts/raleway.less";
|
|
@import "fonts/opensans-condensed.less";
|
|
@import "fonts/material-design-icons.less";
|
|
@import "fonts/roboto.less";
|
|
</code></pre>
|
|
<h2 id="addingatemplate">Adding a template</h2>
|
|
<p>TODO</p>
|
|
<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>
|
|
</div>
|
|
<script>
|
|
var headline = document.getElementsByTagName('h1')[0];
|
|
headline.innerHTML += '<img src="public/suitcase.png" width="150" />';
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|