changes ;)

This commit is contained in:
Stef Dunlap 2022-07-22 15:17:36 -04:00
parent 885e483881
commit 003643e9b0
13 changed files with 399 additions and 167 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ resume.html
resume.pdf
resume.json
.DS_Store
.log

View File

@ -5,26 +5,71 @@ var Handlebars = require("handlebars");
function render(resume) {
var css = fs.readFileSync(__dirname + "/style.css", "utf-8");
var tpl = fs.readFileSync(__dirname + "/resume.hbs", "utf-8");
var partialsDir = path.join(__dirname, 'partials');
var filenames = fs.readdirSync(partialsDir);
filenames.forEach(function (filename) {
var matches = /^([^.]+).hbs$/.exec(filename);
if (!matches) {
return;
}
var name = matches[1];
var filepath = path.join(partialsDir, filename)
var filepath = path.join(partialsDir, filename);
var template = fs.readFileSync(filepath, 'utf8');
Handlebars.registerPartial(name, template);
});
Handlebars.registerHelper('icon', iconHtml);
Handlebars.registerHelper('year-month', shortenDateYearMonth);
return Handlebars.compile(tpl)({
css: css,
resume: resume
});
}
function iconHtml(iconName) {
let classes = '';
switch (iconName) {
case 'GitHub':
return fontAwesomeHtml("fa-brands fa-github");
case 'Mastodon':
return fontAwesomeHtml("fa-brands fa-mastodon");
case 'Education':
return fontAwesomeHtml("fa-solid fa-graduation-cap");
case 'Hammer':
return fontAwesomeHtml("fa-solid fa-hammer");
case 'Language':
return fontAwesomeHtml("fa-solid fa-language");
case 'Lightbulb':
return fontAwesomeHtml("fa-solid fa-lightbulb");
case 'Paragraph':
return fontAwesomeHtml("fa-solid fa-paragraph");
case 'Briefcase':
return fontAwesomeHtml("fa-solid fa-briefcase");
case 'English':
return "🇬🇧";
case "German":
return "🇩🇪";
case "French":
return "🇫🇷";
default:
console.warn("Could not fine icon: ", iconName);
return fontAwesomeHtml('fa-solid fa-file');
}
}
function fontAwesomeHtml(classes) {
return new Handlebars.SafeString(`<i class="${classes}"></i>`);
}
function shortenDateYearMonth(date) {
return date.substring(0, 7);
}
module.exports = {
render: render
};
};

111
package-lock.json generated Normal file
View File

@ -0,0 +1,111 @@
{
"name": "jsonresume-theme-boilerplate",
"version": "0.1.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "jsonresume-theme-boilerplate",
"version": "0.1.2",
"license": "MIT",
"dependencies": {
"handlebars": "^4.7.7"
}
},
"node_modules/handlebars": {
"version": "4.7.7",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
"integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
"dependencies": {
"minimist": "^1.2.5",
"neo-async": "^2.6.0",
"source-map": "^0.6.1",
"wordwrap": "^1.0.0"
},
"bin": {
"handlebars": "bin/handlebars"
},
"engines": {
"node": ">=0.4.7"
},
"optionalDependencies": {
"uglify-js": "^3.1.4"
}
},
"node_modules/minimist": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
},
"node_modules/neo-async": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/uglify-js": {
"version": "3.16.2",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.16.2.tgz",
"integrity": "sha512-AaQNokTNgExWrkEYA24BTNMSjyqEXPSfhqoS0AxmHkCJ4U+Dyy5AvbGV/sqxuxficEfGGoX3zWw9R7QpLFfEsg==",
"optional": true,
"bin": {
"uglifyjs": "bin/uglifyjs"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/wordwrap": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
}
},
"dependencies": {
"handlebars": {
"version": "4.7.7",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
"integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
"requires": {
"minimist": "^1.2.5",
"neo-async": "^2.6.0",
"source-map": "^0.6.1",
"uglify-js": "^3.1.4",
"wordwrap": "^1.0.0"
}
},
"minimist": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
},
"neo-async": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"uglify-js": {
"version": "3.16.2",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.16.2.tgz",
"integrity": "sha512-AaQNokTNgExWrkEYA24BTNMSjyqEXPSfhqoS0AxmHkCJ4U+Dyy5AvbGV/sqxuxficEfGGoX3zWw9R7QpLFfEsg==",
"optional": true
},
"wordwrap": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
}
}
}

View File

@ -1,14 +1,14 @@
{
"name": "jsonresume-theme-boilerplate",
"version": "0.1.2",
"description": "Boilerplate theme for JSON Resume",
"author": "Mattias Erming",
"name": "jsonresume-theme-kindrobot",
"version": "0.1.0",
"description": "kindrobot's theme for JSON Resume",
"author": "Stef Dunlap",
"repository": {
"type": "git",
"url": "https://github.com/erming/jsonresume-theme-boilerplate"
"url": "https://github.com/motevets/jsonresume-theme-kindrobot"
},
"license": "MIT",
"dependencies": {
"handlebars": "^2.0.0-alpha.4"
"handlebars": "^4.7.7"
}
}

View File

@ -11,80 +11,57 @@
{{/if}}
{{#if email}}
<div class="email">
<strong>Email</strong>
{{email}}
</div>
{{/if}}
{{#if phone}}
<div class="phone">
<strong>Phone</strong>
{{phone}}
</div>
{{/if}}
</div>
{{#if summary}}
<div class="summary">
<p>{{summary}}</p>
</div>
{{/if}}
{{#location}}
<h3>Location</h3>
<section id="location">
{{#if address}}
<div class="address">
<strong>Address</strong>
{{address}}
</div>
{{/if}}
{{#if postalCode}}
<div class="postalCode">
<strong>Postal code</strong>
{{postalCode}}
</div>
{{address}}<br/>
{{/if}}
{{#if city}}
<div class="city">
<strong>City</strong>
{{city}}
</div>
{{/if}}
{{#if countryCode}}
<div class="countryCode">
<strong>Country code</strong>
{{countryCode}}
</div>
{{/if}}
{{city}},
{{/if}}
{{#if region}}
<div class="region">
<strong>Region</strong>
{{region}}
</div>
{{/if}}
{{region}},
{{/if}}
{{#if postalCode}}
{{postalCode}}<br/>
{{/if}}
{{#if countryCode}}
{{countryCode}}
{{/if}}
</section>
{{/location}}
{{#if profiles.length}}
<h3>Profiles</h3>
<section id="profiles">
<ul>
{{#each profiles}}
<div class="item">
{{#if network}}
<strong class="network">
{{network}}
</strong>
{{/if}}
{{#if username}}
<div class="username">
{{username}}
</div>
{{/if}}
{{#if url}}
<div class="url">
<a href="{{url}}">Link</a>
</div>
{{/if}}
</div>
<li>
<div class="network">
{{#if network}}
{{icon network}} {{network}}
{{/if}}
</div>
<div>
{{#if username}}
{{#if url}}
<a href="{{url}}">{{username}}</a>
{{else}}
{{username}}
{{/if}}
{{/if}}
</div>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</section>
{{/resume.basics}}
{{/resume.basics}}

View File

@ -1,39 +1,39 @@
{{#if resume.education.length}}
<section id="education">
<h2>Education</h2>
<h2>{{icon "Education"}} Education</h2>
{{#each resume.education}}
<div class="item">
<div class="date">
{{#if startDate}}
<span class="startDate">
{{startDate}}
</span>
{{/if}}
{{#if endDate}}
<span class="endDate">
- {{endDate}}
</span>
{{else}}
<span class="endDate">
- Present
</span>
{{/if}}
</div>
{{#if institution}}
<div class="institution">
{{institution}}
</div>
{{/if}}
<div class="date">
{{#if startDate}}
<span class="startDate">
{{year-month startDate}}
</span>
{{/if}}
{{#if endDate}}
<span class="endDate">
- {{year-month endDate}}
</span>
{{else}}
<span class="endDate">
- Present
</span>
{{/if}}
</div>
{{#if studyType}}
<div class="studyType">
{{studyType}}
</div>
{{/if}}
{{#if area}}
<div class="area">
{{area}}
</div>
{{/if}}
{{#if studyType}}
<div class="studyType">
{{studyType}}
</div>
{{/if}}
{{#if gpa}}
<div class="gpa">
GPA: {{gpa}}
@ -49,4 +49,4 @@
</div>
{{/each}}
</section>
{{/if}}
{{/if}}

View File

@ -1,6 +1,6 @@
{{#if resume.interests.length}}
<section id="interests">
<h2>Interests</h2>
<h2>{{icon "Lightbulb"}} Interests</h2>
{{#each resume.interests}}
<div class="item">
{{#if name}}
@ -18,4 +18,4 @@
</div>
{{/each}}
</section>
{{/if}}
{{/if}}

View File

@ -1,11 +1,13 @@
{{#if resume.languages.length}}
<section id="languages">
<h2>Languages</h2>
<h2>{{icon "Language"}} Languages</h2>
<div class="item">
<ul>
{{#each resume.languages}}
<div class="item">
<li>
{{#if language}}
<div class="language">
{{language}}
{{icon language}} {{language}}
</div>
{{/if}}
{{#if fluency}}
@ -13,7 +15,9 @@
<em>{{fluency}}</em>
</div>
{{/if}}
</div>
</li>
{{/each}}
</ul>
</div>
</section>
{{/if}}
{{/if}}

View File

@ -1,6 +1,6 @@
{{#if resume.skills.length}}
<section id="skills">
<h2>Skills</h2>
<h2>{{icon "Hammer"}} Skills</h2>
{{#each resume.skills}}
<div class="item">
{{#if name}}
@ -23,4 +23,4 @@
</div>
{{/each}}
</section>
{{/if}}
{{/if}}

10
partials/summary.hbs Normal file
View File

@ -0,0 +1,10 @@
{{#resume.basics}}
{{#if summary}}
<section id="summary">
<h2>{{icon "Paragraph"}} Summary</h2>
<div class="item">
<p>{{summary}}</p>
</div>
</section>
{{/if}}
{{/resume.basics}}

View File

@ -1,22 +1,22 @@
{{#if resume.work.length}}
<section id="work">
<h2>Work</h2>
<h2>{{icon "Briefcase"}} Work</h2>
{{#each resume.work}}
<div class="item">
{{#if company}}
{{#if name}}
<h3 class="name">
{{company}}
{{name}}
</h3>
{{/if}}
<div class="date">
{{#if startDate}}
<span class="startDate">
{{startDate}}
{{year-month startDate}}
</span>
{{/if}}
{{#if endDate}}
<span class="endDate">
- {{endDate}}
- {{year-month endDate}}
</span>
{{else}}
<span class="endDate">
@ -49,4 +49,4 @@
</div>
{{/each}}
</section>
{{/if}}
{{/if}}

View File

@ -1,29 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
<title>{{#resume.basics}}{{name}}{{/resume.basics}}</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
<title>{{#resume.basics}}{{name}}{{/resume.basics}}</title>
<style>
{{{css}}}
</style>
</head>
<body>
<div id="resume">
{{> basics }}
{{> work }}
{{> volunteer }}
{{> education }}
{{> awards }}
{{> publications }}
{{> skills }}
{{> languages }}
{{> interests }}
{{> references }}
</body>
<style>
{{{css}}}
</style>
<script src="https://kit.fontawesome.com/0e272f671c.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="resume">
<div id="sidebar">
{{> basics }}
{{> education }}
{{> skills }}
{{> languages }}
{{> interests }}
</div>
<div id="chronology">
{{> summary }}
{{> work }}
{{> volunteer }}
{{> publications }}
{{> awards }}
{{> references }}
</div>
</div>
</body>
</html>

160
style.css
View File

@ -1,54 +1,132 @@
body {
background: #fff;
font: 15px Arial, Helvetica, sans-serif;
line-height: 1.4;
margin: 50px 0;
margin-bottom: 100px;
:root {
--sidebar-bg: #222;
}
em {
color: #999;
/* BEGIN RESET CSS
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* END RESET CSS */
body {
background-image: linear-gradient(to right, var(--sidebar-bg) 50%, #fff 50%);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3;
}
p {
line-height: 1.4;
}
ul {
margin-bottom: 0;
section, div.item {
padding-top: 1em;
break-inside: avoid;
}
section {
margin-bottom: 2em;
}
blockquote {
margin: 0;
margin-bottom: 1em;
}
.item {
margin-bottom: 1em;
section#work{
break-inside: auto;
}
#resume {
margin: 0 auto;
max-width: 480px;
padding: 0 20px;
margin: 0 auto;
max-width: 8.5in;
display: flex;
padding: 20px 0;
}
#basics {
margin-bottom: -10px;
#sidebar, #chronology {
padding: 0 1em;
}
#basics h3 {
margin-top: 1.5em;
#sidebar {
background-color: var(--sidebar-bg);
color: #fff;
font-size: 0.9em;
}
#basics .contact strong,
#location strong {
clear: both;
float: left;
line-height: 1.3;
width: 120px;
#sidebar a {
color: #fff;
}
#profiles,
#skills {
overflow: hidden;
#profiles li {
margin-bottom: 0.5em;
}
#profiles .item,
#skills .item {
float: left;
width: 50%;
#profiles .network {
font-weight: bold;
}
#chronology {
background-color: #fff;
padding-left: 10px;
}
h1 {
font-size: 2.9em;
white-space: nowrap;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
.institution {
font-weight: bold;
}
.date {
font-style: italic;
}
#skills .name, #interests .name {
font-weight: bold;
}
#skills .level {
font-style: italic;
}
.keywords li {
display: inline-block;
border: #fff solid 1px;
padding: 0 2px;
border-radius: 5px;
margin-top: 5px;
}
#languages .language {
font-weight: bold;
}
#languages .fluency {
font-style: italic;
}
#work .position {
font-weight: bold;
}