ADD auto adjust font size

less/style.less

@@ -22,6 +22,11 @@ body {
         display: block;
         page-break-after: auto;
         overflow: hidden;
+
+        .resume {
+            display: inline-block;
+            width: 100%;
+        }
     }
 
     #forkme {

lib/htmlToPdf.js

@@ -1,58 +0,0 @@
-let convertToPdf = (() => {
-    var _ref = _asyncToGenerator(function* () {
-        const layoutTemplate = yield readFileContent('views/layout.mustache');
-        for (let resume of directories) {
-            const resumeTemplate = yield readFileContent(resume + '/' + resume + '.mustache');
-            const html = Mustache.render(layoutTemplate, {
-                person: person
-            }, {
-                content: resumeTemplate
-            });
-            yield generatePdf(html, resume + '.pdf');
-        }
-        console.log('Generated resumes into /pdf.');
-    });
-
-    return function convertToPdf() {
-        return _ref.apply(this, arguments);
-    };
-})();
-
-function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
-
-const person = require('./person.js');
-const Mustache = require('mustache');
-const pdf = require('html-pdf');
-const fs = require('fs');
-const path = require('path');
-
-const dir = __dirname.replace('lib', '');
-const directories = getDirectories(dir + '/resumes');
-
-function getDirectories(srcpath) {
-    return fs.readdirSync(srcpath).filter(file => file.includes('resume-'));
-}
-
-function readFileContent(fileName) {
-    const dir = path.join(__dirname, '../resumes/' + fileName);
-    return new Promise((res, rej) => {
-        fs.readFile(dir, 'utf8', (err, template) => {
-            if (err) rej(err);else res(template);
-        });
-    });
-}
-
-function generatePdf(html, fileName) {
-    const dir = path.join(__dirname, '../pdf/' + fileName);
-    return new Promise((resolve, rej) => {
-        pdf.create(html, {
-            'type': 'pdf',
-            'format': 'A4',
-            'base': 'http://localhost:3000'
-        }).toFile(dir, function (err, res) {
-            if (err) rej(err);else resolve();
-        });
-    });
-}
-
-convertToPdf();

lib/person.js

@@ -1,62 +0,0 @@
-module.exports = {
-    name: 'John Doe',
-    position: 'Software Developer',
-    experience: [{
-        company: 'Company A',
-        position: 'Developer',
-        timeperiod: 'since January 2016',
-        description: 'Programming and watching cute cat videos.'
-    }, {
-        company: 'Company B',
-        position: 'Frontend Developer',
-        timeperiod: 'January 2015 - December 2015',
-        description: 'Fulfillment of extremly important tasks.'
-    }, {
-        company: 'Company C',
-        position: 'Trainee',
-        timeperiod: 'March 2014 - December 2014',
-        description: 'Making coffee and baking cookies.'
-    }],
-    education: [{
-        degree: 'Master of Arts',
-        description: 'Major in Hacking and Computer Penetration, University A, New York, USA.'
-    }, {
-        degree: 'Bachelor of Science',
-        description: 'Major in Engineering, University B, Los Angeles, USA.'
-    }],
-    // skill level goes 0 to 100
-    skills: [{
-        name: 'HTML5',
-        level: '99'
-    }, {
-        name: 'CSS3',
-        level: '95'
-    }, {
-        name: 'JavaScript',
-        level: '97'
-    }, {
-        name: 'Node.js',
-        level: '93'
-    }, {
-        name: 'Angular 2',
-        level: '60'
-    }, {
-        name: 'TypeScript',
-        level: '80'
-    }, {
-        name: 'ES.Next',
-        level: '70'
-    }, {
-        name: 'Docker',
-        level: '99'
-    }],
-    skillDescription: 'Also proficient in Adobe Photoshop and Illustrator, grew up bilingual (English and Klingon).',
-    contact: {
-        email: 'john.doe@email.com',
-        phone: '0123 456789',
-        street: '1234 Broadway',
-        city: 'New York',
-        website: 'johndoe.com',
-        github: 'github.com/JohnDoe'
-    }
-};

lib/renderReadMe.js

@@ -1,36 +0,0 @@
-let renderReadMe = (() => {
-    var _ref = _asyncToGenerator(function* () {
-        const readme = yield readFileContent('README.md');
-        const githubPagesTemplate = yield readFileContent('resumes/views/githubPages.mustache');
-        var html = Mustache.render(githubPagesTemplate, {
-            content: readme
-        });
-        writeFile('index.html', html, function (err) {
-            if (err) console.log(err);else console.log('Github pages index.html was successfully generated from README.');
-        });
-    });
-
-    return function renderReadMe() {
-        return _ref.apply(this, arguments);
-    };
-})();
-
-function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
-
-const showdown = require('showdown');
-const converter = new showdown.Converter();
-const fs = require('fs');
-const path = require('path');
-const Mustache = require('mustache');
-const writeFile = require('write');
-
-function readFileContent(fileName) {
-    const dir = path.join(__dirname, '../' + fileName);
-    return new Promise((res, rej) => {
-        fs.readFile(dir, 'utf8', (err, template) => {
-            if (err) rej(err);else res(template);
-        });
-    });
-}
-
-renderReadMe();

lib/server.js

@@ -1,40 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const person = require('./person.js');
-const express = require('express');
-const mustacheExpress = require('mustache-express');
-
-let app = express();
-app.set('views', path.join(__dirname, '../resumes'));
-app.engine('mustache', require('hogan-express'));
-app.set('view engine', 'mustache');
-app.use(express.static(path.join(__dirname, '../public')));
-app.use(express.static(path.join(__dirname, '../node_modules')));
-
-const dir = __dirname.replace('lib', '');
-const directories = getDirectories(dir + '/resumes');
-
-function getDirectories(srcpath) {
-    return fs.readdirSync(srcpath).filter(file => file.includes('resume-'));
-}
-
-app.get('/', (req, res) => {
-    res.render('views/layout', {
-        partials: {
-            content: 'views/index'
-        }
-    });
-});
-
-for (let resume of directories) {
-    app.get('/' + resume, (req, res) => {
-        res.render('views/layout', {
-            partials: {
-                content: resume + '/' + resume
-            },
-            person: person
-        });
-    });
-}
-
-app.listen(3000, '0.0.0.0', () => console.log('Listening on localhost:3000!'));

public/javascript.js

@@ -0,0 +1,92 @@
+// minimum margin of content to bottom of page
+var marginBottom = 50;
+// DOM-element of <page></page>
+var page;
+
+/**
+ * gets all DOM-elements on page
+ * @return {HTMLElement[]} DOM-elements
+ */
+function getAllDOMElements() {
+    return document.getElementsByTagName('*');
+}
+
+/**
+ * gets DOM-element of #resumeX
+ * @return {HTMLElement}
+ */
+function getResumeDOMElement() {
+    return page.children[0];
+}
+
+/**
+ * sets variable "page" to DOM-element of <page></page>
+ */
+function setPageDOMElement() {
+    page = document.getElementsByTagName('page')[0];
+}
+
+/**
+ * checks whether font needs to be fixed, and if fixes it
+ */
+function checkFont() {
+    var resume = getResumeDOMElement();
+    if (contentIsGreaterThanPage(resume)) fixFont();
+}
+
+/**
+ * checks whether content is greater than page
+ * @param  {HTMLElement} resume
+ * @return {Boolean}        false if content fits to page
+ */
+function contentIsGreaterThanPage(resume) {
+    var pageHeight = page.offsetHeight;
+    var resumeHeight = resume.offsetHeight + marginBottom;
+    if (pageHeight < resumeHeight) return true;
+    else return false;
+}
+
+/**
+ * gets font size of DOM-elemnt
+ * @param  {HTMLElement} element
+ * @return {Number}         font size of element
+ */
+function getFontSizeOfElement(element) {
+    var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
+    return parseFloat(style);
+}
+
+/**
+ * sets font size of DOM-element
+ * @param {HTMLElement} element
+ * @param {Number} fontSize
+ */
+function setFontSizeOfElement(element, fontSize) {
+    element.style.fontSize = fontSize + 'px';
+}
+
+/**
+ * decreases font size of all DOM-elements
+ */
+function decreaseFontSizes() {
+    var elements = getAllDOMElements();
+    var current;
+    for (var i = 0; i < elements.length; i++) {
+        current = elements[i];
+        console.log(getFontSizeOfElement(current));
+        newFontSize = getFontSizeOfElement(current) * 0.99;
+        setFontSizeOfElement(current, newFontSize);
+    }
+}
+
+/**
+ * decreases font size until content fits to page
+ */
+function fixFont() {
+    decreaseFontSizes();
+    var resume = getResumeDOMElement();
+    if (contentIsGreaterThanPage(resume)) fixFont();
+}
+
+setPageDOMElement();
+checkFont();

resumes/resume-1/resume-1.less

@@ -58,8 +58,8 @@
         margin-bottom: 5px;
         font-family: 'Open Sans', sans-serif;
         font-size: 35px;
-        font-weight: bold;
-        letter-spacing: 5px;
+        font-weight: 600;
+        letter-spacing: 10px;
     }
 
     .position {

resumes/resume-1/resume-1.mustache

@@ -1,5 +1,5 @@
 <page class="a4">
-    <div id="resume1">
+    <div id="resume1" class="resume">
         <div class="row text-center">
             <span class="name">{{person.name}}</span>
         </div>

resumes/resume-2/resume-2.less

@@ -2,7 +2,6 @@
 
 #resume2 {
     font-family: 'Raleway', sans-serif;
-    font-weight: 200;
 
     h3 {
         text-transform: uppercase;
@@ -106,7 +105,6 @@
 
             .row {
                 &:first-child {
-                    font-size: 19px;
                     margin-bottom: 3px;
                 }
 
@@ -114,6 +112,10 @@
                     text-transform: uppercase;
                     font-size: 19px;
                 }
+
+                .job-title {
+                    font-size: 19px;
+                }
             }
         }
 

resumes/resume-2/resume-2.mustache

@@ -1,5 +1,5 @@
 <page class="a4">
-    <div id="resume2">
+    <div id="resume2" class="resume">
         <div class="top-row">
             <span class="person-name">  {{person.name}}    </span>
             <span class="person-position">  {{person.position}}    </span>

resumes/resume-3/resume-3.mustache

@@ -1,6 +1,6 @@
 <page class="a4">
 
-    <div id="resume3">
+    <div id="resume3" class="resume">
         <div class="resume-header">
             <div class="triangle"></div>
             <div class="person-header">

resumes/resume-4/resume-4.less

@@ -15,6 +15,7 @@
     a:focus,
     a:hover {
         color: @textDark;
+        text-decoration: none;
     }
 
     .card {

resumes/resume-4/resume-4.mustache

@@ -1,6 +1,6 @@
 <page class="a4 resume4">
 
-    <div id="resume4">
+    <div id="resume4" class="resume">
         <div class="resume-header">
             <div class="box"></div>
             <div class="person-header">

resumes/resume-5/resume-5.mustache

@@ -1,5 +1,5 @@
 <page class="a4 resume4">
-    <div id="resume5">
+    <div id="resume5" class="resume">
         <div class="introduction">
             <div class="wrapper">
                 <div class="img">

resumes/resume-6/resume-6.less

@@ -3,6 +3,7 @@
     font-family: 'TypoPRO Montserrat';
     font-weight: 300;
 }
+@fontSize: 20px;
 
 #resume6 {
     color: white;
@@ -42,7 +43,7 @@
                 .person-name {
                     width: 100%;
                     margin-bottom: 10px;
-                    font-size: 20px;
+                    font-size: @fontSize;
                 }
 
                 .person-position {
@@ -65,6 +66,7 @@
 
         .skills-other {
             color: rgba(154,154,154,.8);
+            text-align: center;
         }
 
         .skills-block {
@@ -119,7 +121,7 @@
 
             .education-block,
             .experience-block {
-                font-size: 20px;
+                font-size: @fontSize;
                 padding: 20px;
                 border-bottom: 1px #262626 solid;
                 color: rgba(154, 154, 154, 0.8);
@@ -138,7 +140,7 @@
             table {
                 color: #9a9a9a;
                 padding: 20px;
-                font-size: 20px;
+                font-size: @fontSize;
                 font-weight: 300;
 
                 a,

resumes/resume-6/resume-6.mustache

@@ -1,5 +1,5 @@
 <page class="a4 resume6">
-    <div id="resume6">
+    <div id="resume6" class="resume">
         <div class="left-col">
             <div class="person-box">
                 <div class="img"></div>

resumes/views/layout.mustache

@@ -13,6 +13,7 @@
 
     {{>content}}
 
+    <script src="/javascript.js"></script>
 </body>
 
 </html>