ADD resume material dark

README.md

@@ -9,6 +9,7 @@ A collection of multiple beautiful resumes build with LESS and Mustache Template
 
 ## Resumes
 
+<a href="public/preview/resume-material-dark.png"><img src="public/preview/resume-material-dark.png" width="150"/></a>
 <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-material-blue.png"><img src="public/preview/resume-material-blue.png" width="150"/></a>

public/js/gen/javascript.js

@@ -5,7 +5,7 @@
  * @return {HTMLElement[]} DOM-elements
  */
 var getAllDOMElements = function getAllDOMElements() {
-    return document.getElementsByTagName('*');
+  return document.getElementsByTagName('*');
 };
 
 /**
@@ -14,7 +14,7 @@ var getAllDOMElements = function getAllDOMElements() {
  * @return {HTMLElement}
  */
 var getResumeDOMElement = function getResumeDOMElement(page) {
-    return page.children[0];
+  return page.children[0];
 };
 
 /**
@@ -22,7 +22,7 @@ var getResumeDOMElement = function getResumeDOMElement(page) {
  * @return {HTMLElement}
  */
 var getPageDOMElement = function getPageDOMElement() {
-    return document.getElementsByTagName('page')[0];
+  return document.getElementsByTagName('page')[0];
 };
 
 /**
@@ -31,7 +31,7 @@ var getPageDOMElement = function getPageDOMElement() {
  * @return {boolean}
  */
 var autoFontEnabled = function autoFontEnabled(resume) {
-    return resume.hasAttribute('autofont');
+  return resume.hasAttribute('autofont');
 };
 
 /**
@@ -41,9 +41,9 @@ var autoFontEnabled = function autoFontEnabled(resume) {
  * @return {boolean}        false if content fits to page
  */
 var contentIsGreaterThanPage = function contentIsGreaterThanPage(resume, page) {
-    var pageHeight = page.offsetHeight;
-    var resumeHeight = resume.offsetHeight;
-    if (pageHeight < resumeHeight) return true;else return false;
+  var pageHeight = page.offsetHeight;
+  var resumeHeight = resume.offsetHeight;
+  if (pageHeight < resumeHeight) return true;else return false;
 };
 
 /**
@@ -52,8 +52,8 @@ var contentIsGreaterThanPage = function contentIsGreaterThanPage(resume, page) {
  * @return {number}         font size of element
  */
 var getFontSizeOfElement = function getFontSizeOfElement(element) {
-    var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
-    return parseFloat(style);
+  var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
+  return parseFloat(style);
 };
 
 /**
@@ -61,9 +61,9 @@ var getFontSizeOfElement = function getFontSizeOfElement(element) {
  * @param {HTMLElement[]}
  */
 var calcNewFontSizes = function calcNewFontSizes(elements) {
-    return elements.map(function (el) {
-        return getFontSizeOfElement(el) * 0.99;
-    });
+  return elements.map(function (el) {
+    return getFontSizeOfElement(el) * 0.99;
+  });
 };
 
 /**
@@ -72,8 +72,8 @@ var calcNewFontSizes = function calcNewFontSizes(elements) {
  * @return {string} '' if no shadow, otherwise shadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
  */
 var hasBoxShadow = function hasBoxShadow(element) {
-    var style = window.getComputedStyle(element, null).getPropertyValue('box-shadow');
-    if (style != 'none') return style;else return '';
+  var style = window.getComputedStyle(element, null).getPropertyValue('box-shadow');
+  if (style != 'none') return style;else return '';
 };
 
 /**
@@ -82,10 +82,10 @@ var hasBoxShadow = function hasBoxShadow(element) {
  * @return {{}}
  */
 var getAbsolutePositionOfElement = function getAbsolutePositionOfElement(element) {
-    return {
-        top: element.getBoundingClientRect().top,
-        left: element.getBoundingClientRect().left
-    };
+  return {
+    top: element.getBoundingClientRect().top,
+    left: element.getBoundingClientRect().left
+  };
 };
 
 /**
@@ -94,7 +94,7 @@ var getAbsolutePositionOfElement = function getAbsolutePositionOfElement(element
  * @return {string}         e.g. '50%'
  */
 var getBorderRadiusOfElement = function getBorderRadiusOfElement(element) {
-    return window.getComputedStyle(element, null).getPropertyValue('border-radius');
+  return window.getComputedStyle(element, null).getPropertyValue('border-radius');
 };
 
 /**
@@ -104,17 +104,17 @@ var getBorderRadiusOfElement = function getBorderRadiusOfElement(element) {
  * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
  */
 var addNewBoxShadow = function addNewBoxShadow(element, position, boxShadow) {
-    var div = document.createElement('div');
-    div.style.height = element.offsetHeight;
-    div.style.width = element.offsetWidth;
-    div.style.borderRadius = getBorderRadiusOfElement(element);
-    div.style.position = 'absolute';
-    div.style.boxShadow = boxShadow;
-    div.style.webkitPrintColorAdjust = 'exact';
-    div.style.webkitFilter = 'opacity(1)';
-    div.style.top = position.top;
-    div.style.left = position.left;
-    document.getElementsByTagName('body')[0].appendChild(div);
+  var div = document.createElement('div');
+  div.style.height = element.offsetHeight;
+  div.style.width = element.offsetWidth;
+  div.style.borderRadius = getBorderRadiusOfElement(element);
+  div.style.position = 'absolute';
+  div.style.boxShadow = boxShadow;
+  div.style.webkitPrintColorAdjust = 'exact';
+  div.style.webkitFilter = 'opacity(1)';
+  div.style.top = position.top;
+  div.style.left = position.left;
+  document.getElementsByTagName('body')[0].appendChild(div);
 };
 
 /**
@@ -123,15 +123,15 @@ var addNewBoxShadow = function addNewBoxShadow(element, position, boxShadow) {
  * @return {HTMLElement[]} elements with shadows
  */
 var getElementsWithShadows = function getElementsWithShadows(elements) {
-    var ar = [].slice.call(elements);
-    return ar.filter(function (el) {
-        return hasBoxShadow(el) != '';
-    }).map(function (el) {
-        return {
-            element: el,
-            shadow: hasBoxShadow(el)
-        };
-    });
+  var ar = [].slice.call(elements);
+  return ar.filter(function (el) {
+    return hasBoxShadow(el) != '';
+  }).map(function (el) {
+    return {
+      element: el,
+      shadow: hasBoxShadow(el)
+    };
+  });
 };
 
 /**
@@ -139,13 +139,13 @@ var getElementsWithShadows = function getElementsWithShadows(elements) {
  * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome
  */
 var fixBoxShadows = function fixBoxShadows() {
-    var elements = getAllDOMElements();
-    var elementsWithShadow = getElementsWithShadows(elements);
-    elementsWithShadow.forEach(function (element) {
-        var position = getAbsolutePositionOfElement(element.element);
-        element.element.style.boxShadow = 'none';
-        addNewBoxShadow(element.element, position, element.shadow);
-    });
+  var elements = getAllDOMElements();
+  var elementsWithShadow = getElementsWithShadows(elements);
+  elementsWithShadow.forEach(function (element) {
+    var position = getAbsolutePositionOfElement(element.element);
+    element.element.style.boxShadow = 'none';
+    addNewBoxShadow(element.element, position, element.shadow);
+  });
 };
 
 /**
@@ -153,38 +153,39 @@ var fixBoxShadows = function fixBoxShadows() {
  * @return {Boolean} true if page contains resume
  */
 var isResume = function isResume() {
-    if (document.getElementsByTagName('page')[0]) return true;else return false;
+  if (document.getElementsByTagName('page')[0]) return true;else return false;
 };
 
 /**
  * checks whether font needs to be fixed, and if fixes it
  */
 var checkFont = function checkFont() {
-    var page = getPageDOMElement();
-    var resume = getResumeDOMElement(page);
-    var fixFont = function fixFont(resume, page) {
-        var elements = getAllDOMElements();
-        var elementsAr = [].slice.call(elements);
-        var newFontSizes = calcNewFontSizes(elementsAr);
-        elementsAr.forEach(function (el, i) {
-            return el.style.fontSize = newFontSizes[i] + 'px';
-        });
-        if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
-    };
-    if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
+  var page = getPageDOMElement();
+  var resume = getResumeDOMElement(page);
+  var fixFont = function fixFont(resume, page) {
+    var elements = getAllDOMElements();
+    var elementsAr = [].slice.call(elements);
+    var newFontSizes = calcNewFontSizes(elementsAr);
+    elementsAr.forEach(function (el, i) {
+      return el.style.fontSize = newFontSizes[i] + 'px';
+    });
+    if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
+  };
+  if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
 };
 
 var isElectron = function isElectron() {
-    return window && window.process && window.process.type;
+  return window && window.process && window.process.type;
 };
 
 /**
  * fixes resume
  */
 var fixResume = function fixResume() {
-    if (!isResume()) return;
-    checkFont();
-    if (isElectron()) fixBoxShadows();
+  console.log('aaaaaaa');
+  if (!isResume()) return;
+  checkFont();
+  if (isElectron()) fixBoxShadows();
 };
 
 fixResume();

public/js/javascript.js

@@ -3,7 +3,7 @@
  * @return {HTMLElement[]} DOM-elements
  */
 const getAllDOMElements = () => {
-    return document.getElementsByTagName('*');
+  return document.getElementsByTagName('*');
 };
 
 /**
@@ -12,7 +12,7 @@ const getAllDOMElements = () => {
  * @return {HTMLElement}
  */
 const getResumeDOMElement = page => {
-    return page.children[0];
+  return page.children[0];
 };
 
 /**
@@ -20,7 +20,7 @@ const getResumeDOMElement = page => {
  * @return {HTMLElement}
  */
 const getPageDOMElement = () => {
-    return document.getElementsByTagName('page')[0];
+  return document.getElementsByTagName('page')[0];
 };
 
 /**
@@ -29,7 +29,7 @@ const getPageDOMElement = () => {
  * @return {boolean}
  */
 const autoFontEnabled = resume => {
-    return resume.hasAttribute('autofont');
+  return resume.hasAttribute('autofont');
 };
 
 /**
@@ -39,10 +39,10 @@ const autoFontEnabled = resume => {
  * @return {boolean}        false if content fits to page
  */
 const contentIsGreaterThanPage = (resume, page) => {
-    const pageHeight = page.offsetHeight;
-    const resumeHeight = resume.offsetHeight;
-    if (pageHeight < resumeHeight) return true;
-    else return false;
+  const pageHeight = page.offsetHeight;
+  const resumeHeight = resume.offsetHeight;
+  if (pageHeight < resumeHeight) return true;
+  else return false;
 };
 
 /**
@@ -51,8 +51,8 @@ const contentIsGreaterThanPage = (resume, page) => {
  * @return {number}         font size of element
  */
 const getFontSizeOfElement = element => {
-    const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
-    return parseFloat(style);
+  const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
+  return parseFloat(style);
 };
 
 /**
@@ -60,8 +60,8 @@ const getFontSizeOfElement = element => {
  * @param {HTMLElement[]}
  */
 const calcNewFontSizes = elements => {
-    return elements
-        .map(el => getFontSizeOfElement(el) * 0.99);
+  return elements
+    .map(el => getFontSizeOfElement(el) * 0.99);
 };
 
 
@@ -71,11 +71,11 @@ const calcNewFontSizes = elements => {
  * @return {string} '' if no shadow, otherwise shadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
  */
 const hasBoxShadow = element => {
-    const style = window
-        .getComputedStyle(element, null)
-        .getPropertyValue('box-shadow');
-    if (style != 'none') return style;
-    else return '';
+  const style = window
+    .getComputedStyle(element, null)
+    .getPropertyValue('box-shadow');
+  if (style != 'none') return style;
+  else return '';
 };
 
 /**
@@ -84,10 +84,10 @@ const hasBoxShadow = element => {
  * @return {{}}
  */
 const getAbsolutePositionOfElement = element => {
-    return {
-        top: element.getBoundingClientRect().top,
-        left: element.getBoundingClientRect().left
-    };
+  return {
+    top: element.getBoundingClientRect().top,
+    left: element.getBoundingClientRect().left
+  };
 };
 
 /**
@@ -96,9 +96,9 @@ const getAbsolutePositionOfElement = element => {
  * @return {string}         e.g. '50%'
  */
 const getBorderRadiusOfElement = element => {
-    return window
-        .getComputedStyle(element, null)
-        .getPropertyValue('border-radius');
+  return window
+    .getComputedStyle(element, null)
+    .getPropertyValue('border-radius');
 };
 
 /**
@@ -108,17 +108,17 @@ const getBorderRadiusOfElement = element => {
  * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
  */
 const addNewBoxShadow = (element, position, boxShadow) => {
-    let div = document.createElement('div');
-    div.style.height = element.offsetHeight;
-    div.style.width = element.offsetWidth;
-    div.style.borderRadius = getBorderRadiusOfElement(element);
-    div.style.position = 'absolute';
-    div.style.boxShadow = boxShadow;
-    div.style.webkitPrintColorAdjust = 'exact';
-    div.style.webkitFilter = 'opacity(1)';
-    div.style.top = position.top;
-    div.style.left = position.left;
-    document.getElementsByTagName('body')[0].appendChild(div);
+  let div = document.createElement('div');
+  div.style.height = element.offsetHeight;
+  div.style.width = element.offsetWidth;
+  div.style.borderRadius = getBorderRadiusOfElement(element);
+  div.style.position = 'absolute';
+  div.style.boxShadow = boxShadow;
+  div.style.webkitPrintColorAdjust = 'exact';
+  div.style.webkitFilter = 'opacity(1)';
+  div.style.top = position.top;
+  div.style.left = position.left;
+  document.getElementsByTagName('body')[0].appendChild(div);
 };
 
 /**
@@ -127,15 +127,15 @@ const addNewBoxShadow = (element, position, boxShadow) => {
  * @return {HTMLElement[]} elements with shadows
  */
 const getElementsWithShadows = elements => {
-    const ar = [].slice.call(elements);
-    return ar
-        .filter(el => hasBoxShadow(el) != '')
-        .map(el => {
-            return {
-                element: el,
-                shadow: hasBoxShadow(el)
-            };
-        });
+  const ar = [].slice.call(elements);
+  return ar
+    .filter(el => hasBoxShadow(el) != '')
+    .map(el => {
+      return {
+        element: el,
+        shadow: hasBoxShadow(el)
+      };
+    });
 };
 
 /**
@@ -143,13 +143,13 @@ const getElementsWithShadows = elements => {
  * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome
  */
 const fixBoxShadows = () => {
-    const elements = getAllDOMElements();
-    const elementsWithShadow = getElementsWithShadows(elements);
-    elementsWithShadow.forEach(element => {
-        const position = getAbsolutePositionOfElement(element.element);
-        element.element.style.boxShadow = 'none';
-        addNewBoxShadow(element.element, position, element.shadow);
-    });
+  const elements = getAllDOMElements();
+  const elementsWithShadow = getElementsWithShadows(elements);
+  elementsWithShadow.forEach(element => {
+    const position = getAbsolutePositionOfElement(element.element);
+    element.element.style.boxShadow = 'none';
+    addNewBoxShadow(element.element, position, element.shadow);
+  });
 };
 
 /**
@@ -157,40 +157,41 @@ const fixBoxShadows = () => {
  * @return {Boolean} true if page contains resume
  */
 const isResume = () => {
-    if (document.getElementsByTagName('page')[0]) return true;
-    else return false;
+  if (document.getElementsByTagName('page')[0]) return true;
+  else return false;
 };
 
 /**
  * checks whether font needs to be fixed, and if fixes it
  */
 const checkFont = () => {
-    const page = getPageDOMElement();
-    const resume = getResumeDOMElement(page);
-    const fixFont = function(resume, page) {
-        const elements = getAllDOMElements();
-        const elementsAr = [].slice.call(elements);
-        const newFontSizes = calcNewFontSizes(elementsAr);
-        elementsAr.forEach((el, i) => el.style.fontSize = newFontSizes[i] + 'px');
-        if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
-    };
-    if (
-        autoFontEnabled(resume) &&
-        contentIsGreaterThanPage(resume, page)
-    ) fixFont(resume, page);
+  const page = getPageDOMElement();
+  const resume = getResumeDOMElement(page);
+  const fixFont = function(resume, page) {
+    const elements = getAllDOMElements();
+    const elementsAr = [].slice.call(elements);
+    const newFontSizes = calcNewFontSizes(elementsAr);
+    elementsAr.forEach((el, i) => el.style.fontSize = newFontSizes[i] + 'px');
+    if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
+  };
+  if (
+    autoFontEnabled(resume) &&
+    contentIsGreaterThanPage(resume, page)
+  ) fixFont(resume, page);
 };
 
 const isElectron = () => {
-    return window && window.process && window.process.type;
+  return window && window.process && window.process.type;
 }
 
 /**
  * fixes resume
  */
 const fixResume = () => {
-    if (!isResume()) return;
-    checkFont();
-    if (isElectron()) fixBoxShadows();
+  console.log('aaaaaaa');
+  if (!isResume()) return;
+  checkFont();
+  if (isElectron()) fixBoxShadows();
 };
 
 fixResume();

public/styles/resume-material-violet.min.css

@@ -0,0 +1 @@
+.resume-material-violet{background:#fff;font-family:Roboto}.row{width:100%}.row.dark{height:19.5%;background:#16151c;position:relative}.row.main{height:80.5%}.section{margin:20px}.section .section-headline{text-transform:uppercase;font-weight:500;letter-spacing:3px;font-size:10pt;opacity:.8;margin-top:40px;margin-bottom:20px}.working-experience .paper{margin-bottom:10px}.working-experience .paper:last-of-type{margin-bottom:0}.working-experience .position{color:rgba(0,0,0,.870588);display:inline-block;font-size:15px;font-weight:300;width:100%}.working-experience .company{color:rgba(0,0,0,.541176);display:inline-block;font-weight:300;font-size:14px;width:100%;padding-bottom:20px}.working-experience .description{width:100%;font-size:14px;display:inline-block;color:rgba(0,0,0,.870588);padding-bottom:10px}.working-experience .skills{display:inline-block}.working-experience .chip{border:10px;box-sizing:border-box;display:flex;font-family:Roboto,sans-serif;-webkit-tap-highlight-color:transparent;cursor:default;text-decoration:none;margin:0;padding:0;outline:0;font-size:inherit;font-weight:inherit;position:relative;z-index:1;background-color:#e0e0e0;border-radius:16px;width:-webkit-fit-content;color:rgba(0,0,0,.870588);font-size:14px;font-weight:400;line-height:32px;padding-left:12px;padding-right:12px;user-select:none;white-space:nowrap;margin-right:10px;margin-bottom:10px;float:left}.header-description{top:50%;position:absolute;transform:translateY(-50%);width:62%;right:0}.header-description .name{letter-spacing:9px;text-transform:uppercase;font-weight:300;color:#fff}.header-description .position{text-transform:uppercase;font-weight:300;font-size:.67em;letter-spacing:2px;color:#fff;padding-bottom:0;margin-bottom:0}.img-wrapper{height:100%;position:relative}.img-wrapper .image{width:38%;top:50%;position:absolute;transform:translateY(-50%)}.img-wrapper .image .img{width:100px;height:100px;margin-left:auto;margin-right:40px;border-radius:50%;background:url(/person.jpg);background-repeat:none;background-position:center;background-size:cover}.part{width:50%;height:100%;display:inline-block}.part.left{float:left}.part.left .section{margin-left:40px}.part.right{float:right}.part.right .section{margin-right:40px}.paper{box-shadow:rgba(0,0,0,.117647) 0 1px 6px,rgba(0,0,0,.117647) 0 1px 4px;background:#fff;padding:20px}.education .paper{margin-bottom:10px}.education .paper:last-of-type{margin-bottom:0}.education .degree{color:rgba(0,0,0,.870588);display:inline-block;font-size:15px;font-weight:300;width:100%}.education .timeperiod{color:rgba(0,0,0,.541176);display:inline-block;font-weight:300;font-size:14px;width:100%;padding-bottom:20px}.education .description{width:100%;font-size:14px;display:inline-block;color:rgba(0,0,0,.870588);padding-bottom:10px}.skills .skill-description{width:100%;font-size:14px;display:inline-block;color:rgba(0,0,0,.870588);padding-bottom:10px;margin-top:20px;text-align:justify}.skills .skill-entry{display:inline-block;text-align:center;width:24%}.skills .skill-entry .skill{margin-top:10px;margin-bottom:10px;font-size:14px;padding-bottom:10px;color:rgba(0,0,0,.870588);display:inline-block;font-size:15px;font-weight:300;width:100%}div.doughnut{width:300px;height:300px;top:0;right:0;bottom:0;left:0;margin:auto;position:absolute;background:#e0e0e0 linear-gradient(to right,#e0e0e0 50%,#d8ab94 50%);color:#d8ab94;border-radius:50%;animation-delay:-35s;position:relative;width:50px;height:50px}@keyframes spin{to{transform:rotate(180deg)}}@keyframes background{50%{background-color:currentColor}}div.doughnut::after{content:'';position:absolute;width:80%;height:80%;top:0;right:0;bottom:0;left:0;margin:auto;background:#fff;border-radius:50%}div.doughnut::before{content:'';position:absolute;display:block;background-color:inherit;height:100%;width:50%;bottom:0;right:0;border-radius:0 100% 100% 0/50%;transform:rotate(0);transform-origin:0 50%;animation:50s spin infinite linear,100s background infinite step-end;animation-play-state:paused;animation-delay:inherit}.contact table td{vertical-align:middle;padding-bottom:10px}.contact .info{color:rgba(0,0,0,.870588);display:inline-block;font-size:15px;font-weight:300;width:100%}.contact .description{color:rgba(0,0,0,.541176);display:inline-block;font-weight:300;font-size:14px;width:100%}.contact .icon{color:#d8ab94;display:inline-block;margin-right:20px}.contact .icon i{font-size:30px}.contact .icon i.fa{font-size:34px}

resumes/resume-material-dark/index.mustache

@@ -0,0 +1,131 @@
+<page class="a4" id="material-blue">
+  <div class="resume leftCol m_box">
+    <div class="shadow"></div>
+    <div class="heading" id="myselfpic">
+    </div>
+    <div class="section-headline">
+      Contact
+    </div>
+    <div class="item">
+      <div class="icon">
+        <i class="material-icons">account_circle</i>
+      </div>
+      <div class="text">
+        <ul>
+          <li> Born {{person.birth.year}} in {{person.birth.location}}</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="item">
+      <div class="icon">
+        <i class="material-icons">location_city</i>
+      </div>
+      <div class="text">
+        <ul>
+          <li>{{person.contact.street}}</li>
+          <li>{{person.contact.city}}</li>
+        </ul>
+      </div>
+    </div>
+
+    <a href="tel:{{person.contact.phone}}">
+      <div class="item">
+        <div class="icon">
+          <i class="material-icons">phone</i>
+        </div>
+        <div class="text">
+          {{person.contact.phone}}
+        </div>
+      </div>
+    </a>
+
+    <a href="mailto:{{person.contact.email}}">
+      <div class="item">
+        <div class="icon">
+          <i class="material-icons">email</i>
+        </div>
+        <div class="text">
+          {{person.contact.email}}
+        </div>
+      </div>
+    </a>
+
+    <a href="https://github.com/{{person.contact.github}}" target="_blank">
+      <div class="item">
+        <div class="icon">
+          <i class="fa fa-github"></i>
+        </div>
+        <div class="text">
+          <span>@{{person.contact.github}}</span>
+          <span>github.com/{{person.contact.github}}</span>
+        </div>
+      </div>
+    </a>
+
+    <a href="{{person.contact.website}}" target="_blank">
+      <div class="item">
+        <div class="icon">
+          <i class="material-icons">language</i>
+        </div>
+        <div class="text">
+          <span>{{person.contact.website}}m</span>
+        </div>
+      </div>
+    </a>
+
+    <div class="item last">
+      <div class="section-headline">
+        Skills
+      </div>
+      {{#person.skills}}
+        <div class="skill">
+          <div class="right">
+            <span>{{name}}</span>
+            <div class="progress">
+              <div class="determinate" style="width: {{level}}%;">
+                <i class="fa fa-circle"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/person.skills}}
+    </div>
+  </div>
+
+  <div class="rightCol">
+    <div class="title">
+      <h2>{{person.name.first}}  {{person.name.last}}</h2>
+      <div>{{person.position}}</div>
+    </div>
+
+    <div class="section-headline">Working experience</div>
+
+
+    {{#person.experience}}
+      <div class="block">
+        <div class="block-helper"></div>
+        <div class="headline">{{position}} - {{company}}</h3>
+          <div class="subheadline">{{timeperiod}}</div>
+          <p class="info">
+            {{description}}
+          </p>
+        </div>
+      </div>
+    {{/person.experience}}
+
+    <div class="section-headline">Education</div>
+
+    {{#person.education}}
+      <div class="block">
+        <div class="block-helper"></div>
+        <div class="headline">{{degree}}</div>
+        <p class="info">
+          {{timeperiod}}, {{description}}
+        </p>
+      </div>
+    {{/person.education}}
+  </div>
+  <div style="clear:both;"></div>
+
+</page>

resumes/resume-material-dark/style.less

@@ -0,0 +1,388 @@
+@main: #d8ab94;
+@dark: #16151c;
+@red: #a80202;
+@determinate: #78909C;
+
+body {
+  font-family: Roboto !important;
+}
+
+a {
+  cursor: pointer;
+}
+
+.description-personal {
+  margin-let: 20px;
+  margin-top: 20px;
+  padding-right: 40px;
+  text-align: justify;
+  font-family: Roboto;
+}
+
+.title {
+  right: 25px;
+  padding-left: 20px;
+  padding-top: 20px;
+  bottom: 25px;
+
+  h2 {
+    letter-spacing: 10px;
+    text-transform: uppercase;
+    display: block;
+    font-size: 1.17em;
+    -webkit-margin-before: 1em;
+    -webkit-margin-after: 1em;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
+    color: white;
+    padding-top: 0;
+    margin-top: 0;
+    letter-spacing: 10px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  div {
+    margin-top: -5px;
+    font-size: 10pt;
+    margin: 0;
+    padding: 0;
+    line-height: 15pt;
+    font-weight: 300;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: white;
+    display: block;
+    font-size: 0.67em;
+    -webkit-margin-before: 2.33em;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
+    padding-top: 0;
+    margin-top: 0;
+    color: #16151c;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 3px;
+    font-size: 10pt;
+    opacity: 0.8;
+    color: rgba(63, 61, 60, 0.71);
+  }
+}
+
+.section-headline {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 3px;
+  font-size: 10pt;
+  opacity: 0.8;
+  margin-left: 20px;
+  margin-top: 40px;
+  margin-bottom: 20px;
+  color: #3f3d3c;
+}
+
+#material-blue {
+  .c {
+    clear: both;
+  }
+  font-family: Roboto, sans-serif !important;
+  background-color: #ccc;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #767270;
+  letter-spacing: 0.072em;
+  font-weight: normal;
+
+  li,
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  li {
+    padding-top: 9px;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 25px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    font-size: 10pt;
+    line-height: 17pt;
+  }
+
+  .m_box {
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  }
+
+  .fa,
+  .material-icons {
+    display: inline-block;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 26px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 400;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 22pt;
+    line-height: 37pt;
+    margin: 0;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 12pt;
+    line-height: 20pt;
+    opacity: 1;
+  }
+
+  .rightCol {
+    width: 63.5%;
+    height: 100%;
+    float: right;
+    display: flex;
+    flex-direction: column;
+
+    .block {
+      width: 90%;
+      position: relative;
+      background-color: #fff;
+      padding: 20px;
+      margin-top: 5px;
+      margin-bottom: 5px;
+      display: inline-block;
+
+      .headline {
+        font-weight: 300;
+        display: block;
+        font-size: 15px;
+        color: rgba(0, 0, 0, 0.870588);
+      }
+
+      .subheadline {
+        color: rgba(0, 0, 0, 0.541176);
+        display: block;
+        font-size: 14px;
+        font-weight: 300;
+      }
+
+      .info {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.870588);
+        margin-bottom: 0;
+        padding-top: 20px;
+      }
+
+      .icon {
+        width: 16%;
+        float: left;
+        margin-left: 0;
+
+        .fa,
+        .material-icons {
+          text-align: center;
+          display: block;
+          font-size: 30pt;
+        }
+      }
+
+      .content {
+        width: 80%;
+        position: absolute;
+        height: 96%;
+        left: 17%;
+        padding-right: 3%;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+
+        .item {
+          border-bottom: 1px solid #bdbdbd;
+          flex: 1;
+          width: 97%;
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: left;
+          padding-top: 0;
+
+          span {
+            color: @main;
+            margin-top: 0;
+            font-size: 10pt;
+            line-height: 16pt;
+          }
+
+          p {
+            margin-top: 5px;
+          }
+
+          &:last-of-type {
+            border-bottom-style: none;
+          }
+        }
+
+        .item:last-of-type {
+          border-bottom-style: none;
+        }
+      }
+    }
+  }
+
+  .leftCol {
+    width: 35%;
+    height: 100%;
+    float: left;
+    padding: 0;
+    text-align: left;
+    color: #ffffff;
+    background-color: @dark;
+    overflow: hidden;
+    display: block;
+    color: rgba(255, 255, 255, 0.59);
+
+    .shadow {}
+
+    .section-headline {
+      color: rgba(255, 255, 255, 0.54);
+    }
+
+    a {
+      color: rgba(255, 255, 255, 0.59);
+      text-decoration: none;
+    }
+
+    .heading {
+      background-color: white;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      width: 100%;
+      height: 277px;
+    }
+    @paddingVertical: 13px;
+
+    .item {
+      width: 100%;
+      margin-top: @paddingVertical;
+      float: left;
+
+      .icon {
+        width: 20%;
+        float: left;
+      }
+
+      .fa,
+      .material-icons {
+        display: inherit;
+        text-align: center;
+      }
+
+      .text {
+        float: right;
+        width: 69%;
+        padding-right: 10%;
+        padding-top: 0;
+        display: block;
+        font-size: 15px;
+        font-weight: 300;
+
+        li {
+          padding-top: 0;
+          display: block;
+          font-size: 15px;
+          font-weight: 300;
+        }
+      }
+
+      span {
+        font-weight: 300;
+      }
+
+      .skill {
+        clear: both;
+        width: 97%;
+        padding-top: 4px;
+
+        .left {
+          float: left;
+          width: 10%;
+          padding-top: 3px;
+
+          i {}
+
+          i:nth-child(2) {
+            float: left;
+            padding-top: 4px;
+          }
+        }
+
+        .right {
+          float: right;
+          width: 93%;
+
+          .progress {
+            float: left;
+            position: relative;
+            height: 2px;
+            display: block;
+            width: 95%;
+            background-color: rgba(255, 255, 255, 0.19);
+            border-radius: 2px;
+            margin: 0.5rem 0 1rem;
+            overflow: visible;
+            margin-bottom: 10px;
+
+            .determinate {
+              background-color: @determinate;
+              position: absolute;
+              top: 0;
+              bottom: 0;
+
+              .fa,
+              .material-icons {
+                font-size: 13px;
+                position: absolute;
+                top: -4px;
+                right: -2px;
+                margin-left: 50%;
+                color: white;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .item.last .text {
+      border-bottom-style: none;
+      padding-bottom: 0;
+    }
+  }
+
+  #myselfpic {
+    background-image: url("/person.jpg");
+    color: black;
+  }
+
+  #githubIcon {
+    width: 25px;
+    padding-left: 17px;
+  }
+}

src/person.js

@@ -1,85 +1,85 @@
 /* eslint-disable */
 module.exports = {
-    name: {
-        first: 'John',
-        last: 'Doe',
+  name: {
+    first: 'John',
+    last: 'Doe',
+  },
+  position: 'Software Developer',
+  birth: {
+    year: 1990,
+    location: 'New York'
+  },
+  experience: [{
+      company: 'Company A',
+      position: 'Developer',
+      timeperiod: 'since January 2016',
+      description: 'Programming and watching cute cat videos.'
     },
-    position: 'Software Developer',
-    birth: {
-      year: 1990,
-      location: 'New York'
+    {
+      company: 'Company B',
+      position: 'Frontend Developer',
+      timeperiod: 'January 2015 - December 2015',
+      description: 'Fulfillment of extremly important tasks.'
     },
-    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',
-            timeperiod: 'March 2012 - December 2013',
-            description: 'Major in Hacking and Computer Penetration, University A, New York, USA.'
-        },
-        {
-            degree: 'Bachelor of Science',
-            timeperiod: 'March 2009 - December 2011',
-            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: 'johnyD'
+    {
+      company: 'Company C',
+      position: 'Trainee',
+      timeperiod: 'March 2014 - December 2014',
+      description: 'Making coffee and baking cookies.'
     }
+  ],
+  education: [{
+      degree: 'Master of Arts',
+      timeperiod: 'March 2012 - December 2013',
+      description: 'Major in Hacking and Computer Penetration, University A, New York, USA.'
+    },
+    {
+      degree: 'Bachelor of Science',
+      timeperiod: 'March 2009 - December 2011',
+      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: 'johnyD'
+  }
 };