diff --git a/pdf/resume-wanted.pdf b/pdf/resume-wanted.pdf deleted file mode 100755 index 57fa623..0000000 Binary files a/pdf/resume-wanted.pdf and /dev/null differ diff --git a/public/javascript.js b/public/javascript.js index 9dfad3e..b3f9cc4 100755 --- a/public/javascript.js +++ b/public/javascript.js @@ -1,97 +1,187 @@ 'use strict'; -// minimum margin of content to bottom of page -var marginBottom = 0; -// DOM-element of -var page; - /** * gets all DOM-elements on page * @return {HTMLElement[]} DOM-elements */ -function getAllDOMElements() { +var getAllDOMElements = function getAllDOMElements() { return document.getElementsByTagName('*'); -} +}; /** * gets DOM-element of #resumeX + * @param {HTMLElement} page * @return {HTMLElement} */ -function getResumeDOMElement() { +var getResumeDOMElement = function getResumeDOMElement(page) { return page.children[0]; -} +}; /** - * sets variable "page" to DOM-element of + * returns DOM-element of + * @return {HTMLElement} */ -function setPageDOMElement() { - page = document.getElementsByTagName('page')[0]; -} +var getPageDOMElement = function getPageDOMElement() { + return document.getElementsByTagName('page')[0]; +}; -function autoFontEnabled(resume) { +/** + * checks whether auto-font adjustment is enabled for resume + * @param {HTMLElement} resume + * @return {boolean} + */ +var autoFontEnabled = function autoFontEnabled(resume) { return resume.hasAttribute('autofont'); -} - -/** - * checks whether font needs to be fixed, and if fixes it - */ -function checkFont() { - var resume = getResumeDOMElement(); - if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume)) fixFont(); -} +}; /** * checks whether content is greater than page * @param {HTMLElement} resume - * @return {Boolean} false if content fits to page + * @param {HTMLElement} page + * @return {boolean} false if content fits to page */ -function contentIsGreaterThanPage(resume) { +var contentIsGreaterThanPage = function contentIsGreaterThanPage(resume, page) { var pageHeight = page.offsetHeight; - var resumeHeight = resume.offsetHeight + marginBottom; + var resumeHeight = resume.offsetHeight; if (pageHeight < resumeHeight) return true;else return false; -} +}; /** * gets font size of DOM-elemnt * @param {HTMLElement} element - * @return {Number} font size of element + * @return {number} font size of element */ -function getFontSizeOfElement(element) { +var getFontSizeOfElement = function getFontSizeOfElement(element) { var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); return parseFloat(style); -} +}; /** - * sets font size of DOM-element + * calculates new font size of all DOM-elements + * @param {HTMLElement[]} + */ +var calcNewFontSizes = function calcNewFontSizes(elements) { + return elements.map(function (el) { + return getFontSizeOfElement(el) * 0.99; + }); +}; + +/** + * checks if DOM-element has box-shadow + * @param {HTMLElement} element + * @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 ''; +}; + +/** + * gets absolute position of element + * @param {HTMLElement} element + * @return {{}} + */ +var getAbsolutePositionOfElement = function getAbsolutePositionOfElement(element) { + return { + top: element.getBoundingClientRect().top, + left: element.getBoundingClientRect().left + }; +}; + +/** + * gets border radius of element + * @param {HTMLElement} element + * @return {string} e.g. '50%' + */ +var getBorderRadiusOfElement = function getBorderRadiusOfElement(element) { + return window.getComputedStyle(element, null).getPropertyValue('border-radius'); +}; + +/** + * adds new box shadow * @param {HTMLElement} element - * @param {Number} fontSize + * @param {{}} position e.g. { left: 10, top: 100} + * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' */ -function setFontSizeOfElement(element, fontSize) { - element.style.fontSize = fontSize + 'px'; -} +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); +}; /** - * decreases font size of all DOM-elements + * gets all elements with shadows + * @param {HTMLElement[]} elements on page + * @return {HTMLElement[]} elements with shadows */ -function decreaseFontSizes() { +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) + }; + }); +}; + +/** + * fixes shadows, since normal box-shadow cannot be printed in chrome, + * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome + */ +var fixBoxShadows = function fixBoxShadows() { var elements = getAllDOMElements(); - var current; - for (var i = 0; i < elements.length; i++) { - current = elements[i]; - var newFontSize = getFontSizeOfElement(current) * 0.99; - setFontSizeOfElement(current, newFontSize); - } -} + var elementsWithShadow = getElementsWithShadows(elements); + elementsWithShadow.forEach(function (element) { + var position = getAbsolutePositionOfElement(element.element); + element.element.style.boxShadow = 'none'; + addNewBoxShadow(element.element, position, element.shadow); + }); +}; /** - * decreases font size until content fits to page + * checks if the page contains a resume + * @return {Boolean} true if page contains resume */ -function fixFont() { - decreaseFontSizes(); - var resume = getResumeDOMElement(); - if (contentIsGreaterThanPage(resume)) fixFont(); -} +var isResume = function isResume() { + if (document.getElementsByTagName('page')[0]) return true;else return false; +}; -setPageDOMElement(); -checkFont(); +/** + * 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); +}; + +/** + * fixes resume + */ +var fixResume = function fixResume() { + if (!isResume()) return; + checkFont(); + fixBoxShadows(); +}; + +fixResume(); //# sourceMappingURL=javascript.js.map diff --git a/public/preview/resume-wanted.png b/public/preview/resume-wanted.png deleted file mode 100755 index a08ffb8..0000000 Binary files a/public/preview/resume-wanted.png and /dev/null differ diff --git a/public/styles/resume-wanted.min.css b/public/styles/resume-wanted.min.css deleted file mode 100755 index b670e0c..0000000 --- a/public/styles/resume-wanted.min.css +++ /dev/null @@ -1 +0,0 @@ -.resume4{background:#eaeaea}#resume4{font-family:Roboto,sans-serif;color:#223;padding-bottom:50px}#resume4 a,#resume4 a:focus,#resume4 a:hover{color:#223;text-decoration:none}#resume4 .card{border-radius:2px;border-radius:4px;margin-bottom:25px}#resume4 .card.contact,#resume4 .card.education{float:left}#resume4 .card.half{width:49%}#resume4 .card.half .card-content,#resume4 .card.half .card-header{padding:15px 8%;width:84%}#resume4 .card .card-header{width:92%;display:inline-block;padding:20px 4%;border-bottom:#ccc 1px solid}#resume4 .card .card-header i{float:left;font-size:32px;color:#545}#resume4 .card .card-header h3{margin:0;float:left;font-size:26px;font-weight:300;margin-left:10px;color:#545;margin-top:2px}#resume4 .card .card-content{width:92%;padding:20px 4%}#resume4 .resume-header .box{display:inline-block;background:#e56;height:150px;width:100%}#resume4 .resume-header .person-header{position:absolute;width:100%;top:50px}#resume4 .resume-header .person-header .img{background:url(/person.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;height:200px;width:200px;border-radius:50%;border:#eaeaea 3px solid;position:relative;margin-left:auto;margin-right:auto;filter:grayscale(100%)}#resume4 .resume-header .person-header .person-wrapper{margin-left:auto;margin-right:auto;text-align:center}#resume4 .resume-header .person-header .person-wrapper .name{color:#223;font-size:35px;margin-top:10px}#resume4 .resume-header .person-header .person-wrapper .position{color:#545}#resume4 .resume-content{margin-top:200px;padding-left:5%;padding-right:5%}#resume4 .resume-content .experience-block{margin-bottom:10px;color:#223}#resume4 .resume-content .experience-block:last-of-type{margin-bottom:0}#resume4 .resume-content .experience-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .experience-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .education{margin-right:2%}#resume4 .resume-content .education .education-block{margin-bottom:10px;color:#223}#resume4 .resume-content .education .education-block:last-of-type{margin-bottom:0}#resume4 .resume-content .education .education-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .education .education-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .skills{width:100%}#resume4 .resume-content .skills .wrapper{display:inline-block;width:100%}#resume4 .resume-content .skills .wrapper .skill{display:inline-block;float:left;width:50%;font-size:#223;color:#223}#resume4 .resume-content .skills .wrapper .skill i{margin-right:5px;font-size:12px}#resume4 .resume-content .contact{color:#223}#resume4 .resume-content .contact a,#resume4 .resume-content .contact span{padding-bottom:5px;display:inline-block} \ No newline at end of file diff --git a/resumes/resume-wanted/index.mustache b/resumes/resume-wanted/index.mustache deleted file mode 100755 index 6815b2d..0000000 --- a/resumes/resume-wanted/index.mustache +++ /dev/null @@ -1,101 +0,0 @@ - - -
-
-
-
-
-
-
-
{{person.name.first}} {{person.name.last}}
-
{{person.position}}
-
-
-
-
- -
- -
-
- work -

Experience

-
-
- - {{#person.experience}} -
-
- {{position}} - - {{company}} -
-
- - {{timeperiod}} - , {{description}} -
-
- {{/person.experience}} -
-
- -
-
- computer -

Skills

-
-
-
- {{#person.skills}} - check {{name}} - {{/person.skills}} -
-
-
- -
-
-
- school -

Education

-
-
- {{#person.education}} -
-
- {{degree}} -
-
- {{description}} -
-
- {{/person.education}} -
-
-
-
- perm_contact_calendar -

Contact

-
-
- {{person.contact.email}} -
- {{person.contact.phone}} -
- {{person.contact.street}}, {{person.contact.city}} -
- - {{person.contact.website}} - -
- - {{person.contact.github}} - -
-
- -
-
-
- - diff --git a/resumes/resume-wanted/style.less b/resumes/resume-wanted/style.less deleted file mode 100755 index cec3d74..0000000 --- a/resumes/resume-wanted/style.less +++ /dev/null @@ -1,210 +0,0 @@ -@main: #EE5566; -@textDark: #222233; -@textLight: #554455; -@page4: #eaeaea; -@cardHeader: #CCC; -@skill: #223; -@cardHeaderIconFontSize: 32px; -@cardHeaderFontSize: 26px; -@nameFontSize: 35px; -@experienceFirstRowFontSize: 18px; -@experienceSecondRowFontSize: 15px; -@educationFirstRowFontSize: 18px; -@educationSecondRowFontSize: 15px; -@skillIconFontSize: 12px; - -.resume4 { - background: @page4; -} - -#resume4 { - font-family: 'Roboto', sans-serif; - color: @textDark; - padding-bottom: 50px; - - a, - a:focus, - a:hover { - color: @textDark; - text-decoration: none; - } - - .card { - border-radius: 2px; - border-radius: 4px; - margin-bottom: 25px; - - &.contact, - &.education { - float: left; - } - - &.half { - width: 49%; - - .card-content, - .card-header { - padding: 15px 8%; - width: 84%; - } - } - - .card-header { - width: 92%; - display: inline-block; - padding: 20px 4%; - border-bottom: @cardHeader 1px solid; - - i { - float: left; - font-size: @cardHeaderIconFontSize; - color: @textLight; - } - - h3 { - margin: 0; - float: left; - font-size: @cardHeaderFontSize; - font-weight: 300; - margin-left: 10px; - color: @textLight; - margin-top: 2px; - } - } - - .card-content { - width: 92%; - padding: 20px 4%; - } - } - - .resume-header { - .box { - display: inline-block; - background: @main; - height: 150px; - width: 100%; - } - - .person-header { - position: absolute; - width: 100%; - top: 50px; - - .img { - background: url('/person.jpg'); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - height: 200px; - width: 200px; - border-radius: 50%; - border: @page4 3px solid; - position: relative; - margin-left: auto; - margin-right: auto; - filter: grayscale(100%); - } - - .person-wrapper { - margin-left: auto; - margin-right: auto; - text-align: center; - - .name { - color: @textDark; - font-size: @nameFontSize; - margin-top: 10px; - } - - .position { - color: @textLight; - } - } - } - } - - .resume-content { - margin-top: 200px; - padding-left: 5%; - padding-right: 5%; - - .experience-block { - margin-bottom: 10px; - color: @textDark; - - &:last-of-type { - margin-bottom: 0; - } - - .row { - &:first-child { - font-size: @experienceFirstRowFontSize; - color: @textDark; - } - - &:nth-child(2) { - font-size: @experienceSecondRowFontSize; - color: @textLight; - } - } - } - - .education { - margin-right: 2%; - - .education-block { - margin-bottom: 10px; - color: @textDark; - - &:last-of-type { - margin-bottom: 0; - } - - .row { - &:first-child { - font-size: @educationFirstRowFontSize; - color: @textDark; - } - - &:nth-child(2) { - font-size: @educationSecondRowFontSize; - color: @textLight; - } - } - } - } - - .skills { - width: 100%; - - .wrapper { - display: inline-block; - width: 100%; - - .skill { - i { - margin-right: 5px; - font-size: @skillIconFontSize; - } - width: 50%; - display: inline-block; - float: left; - width: 50%; - font-size: @skill; - color: @skill; - } - } - } - - .contact { - color: @textDark; - - a, - span { - padding-bottom: 5px; - display: inline-block; - } - } - } -} diff --git a/src/public/javascript.js b/src/public/javascript.js index 5665d4b..3913642 100755 --- a/src/public/javascript.js +++ b/src/public/javascript.js @@ -1,95 +1,192 @@ -// minimum margin of content to bottom of page -var marginBottom = 0; -// DOM-element of -var page; - /** * gets all DOM-elements on page * @return {HTMLElement[]} DOM-elements */ -function getAllDOMElements() { +const getAllDOMElements = () => { return document.getElementsByTagName('*'); -} +}; /** * gets DOM-element of #resumeX + * @param {HTMLElement} page * @return {HTMLElement} */ -function getResumeDOMElement() { +const getResumeDOMElement = page => { return page.children[0]; -} +}; /** - * sets variable "page" to DOM-element of + * returns DOM-element of + * @return {HTMLElement} */ -function setPageDOMElement() { - page = document.getElementsByTagName('page')[0]; -} +const getPageDOMElement = () => { + return document.getElementsByTagName('page')[0]; +}; -function autoFontEnabled(resume) { +/** + * checks whether auto-font adjustment is enabled for resume + * @param {HTMLElement} resume + * @return {boolean} + */ +const autoFontEnabled = resume => { return resume.hasAttribute('autofont'); -} - -/** - * checks whether font needs to be fixed, and if fixes it - */ -function checkFont() { - var resume = getResumeDOMElement(); - if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume)) fixFont(); -} +}; /** * checks whether content is greater than page * @param {HTMLElement} resume - * @return {Boolean} false if content fits to page + * @param {HTMLElement} page + * @return {boolean} false if content fits to page */ -function contentIsGreaterThanPage(resume) { - var pageHeight = page.offsetHeight; - var resumeHeight = resume.offsetHeight + marginBottom; +const contentIsGreaterThanPage = (resume, page) => { + const pageHeight = page.offsetHeight; + const resumeHeight = resume.offsetHeight; if (pageHeight < resumeHeight) return true; else return false; -} +}; /** * gets font size of DOM-elemnt * @param {HTMLElement} element - * @return {Number} font size of element + * @return {number} font size of element */ -function getFontSizeOfElement(element) { - var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); +const getFontSizeOfElement = element => { + const style = window.getComputedStyle(element, null).getPropertyValue('font-size'); return parseFloat(style); -} +}; /** - * sets font size of DOM-element + * calculates new font size of all DOM-elements + * @param {HTMLElement[]} + */ +const calcNewFontSizes = elements => { + return elements + .map(el => getFontSizeOfElement(el) * 0.99); +}; + + +/** + * checks if DOM-element has box-shadow + * @param {HTMLElement} element + * @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 ''; +}; + +/** + * gets absolute position of element + * @param {HTMLElement} element + * @return {{}} + */ +const getAbsolutePositionOfElement = element => { + return { + top: element.getBoundingClientRect().top, + left: element.getBoundingClientRect().left + }; +}; + +/** + * gets border radius of element + * @param {HTMLElement} element + * @return {string} e.g. '50%' + */ +const getBorderRadiusOfElement = element => { + return window + .getComputedStyle(element, null) + .getPropertyValue('border-radius'); +}; + +/** + * adds new box shadow * @param {HTMLElement} element - * @param {Number} fontSize + * @param {{}} position e.g. { left: 10, top: 100} + * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' */ -function setFontSizeOfElement(element, fontSize) { - element.style.fontSize = fontSize + 'px'; -} +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); +}; /** - * decreases font size of all DOM-elements + * gets all elements with shadows + * @param {HTMLElement[]} elements on page + * @return {HTMLElement[]} elements with shadows */ -function decreaseFontSizes() { - var elements = getAllDOMElements(); - var current; - for (var i = 0; i < elements.length; i++) { - current = elements[i]; - var newFontSize = getFontSizeOfElement(current) * 0.99; - setFontSizeOfElement(current, newFontSize); - } -} +const getElementsWithShadows = elements => { + const ar = [].slice.call(elements); + return ar + .filter(el => hasBoxShadow(el) != '') + .map(el => { + return { + element: el, + shadow: hasBoxShadow(el) + }; + }); +}; /** - * decreases font size until content fits to page + * fixes shadows, since normal box-shadow cannot be printed in chrome, + * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome */ -function fixFont() { - decreaseFontSizes(); - var resume = getResumeDOMElement(); - if (contentIsGreaterThanPage(resume)) fixFont(); -} +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); + }); +}; -setPageDOMElement(); -checkFont(); +/** + * checks if the page contains a resume + * @return {Boolean} true if page contains resume + */ +const isResume = () => { + 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); +}; + +/** + * fixes resume + */ +const fixResume = () => { + if (!isResume()) return; + checkFont(); + fixBoxShadows(); +}; + +fixResume();