Short theme version 1
This commit is contained in:
Graeme Maciver
10
index.js
10
index.js
@@ -4,6 +4,16 @@ var Handlebars = require("handlebars");
|
||||
function render(resume) {
|
||||
var css = fs.readFileSync(__dirname + "/style.css", "utf-8");
|
||||
var template = fs.readFileSync(__dirname + "/resume.template", "utf-8");
|
||||
// var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
// Nicer dates
|
||||
Handlebars.registerHelper('date', function(date) {
|
||||
var theDate = new Date(date);
|
||||
|
||||
return months[theDate.getMonth()] + ' ' + theDate.getFullYear();
|
||||
});
|
||||
|
||||
return Handlebars.compile(template)({
|
||||
css: css,
|
||||
resume: resume
|
||||
|
||||
10
package.json
10
package.json
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "jsonresume-theme-boilerplate",
|
||||
"version": "0.1.1",
|
||||
"description": "Boilerplate theme for JSON Resume",
|
||||
"author": "Mattias Erming",
|
||||
"name": "jsonresume-theme-short",
|
||||
"version": "0.1.0",
|
||||
"description": "Simple to the point theme for JSON Resume",
|
||||
"author": "Graeme Maciver",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/erming/jsonresume-theme-boilerplate"
|
||||
"url": "https://github.com/isnotahippy/jsonresume-theme-short"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
426
resume.template
426
resume.template
@@ -1,426 +0,0 @@
|
||||
<!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>
|
||||
|
||||
<style>
|
||||
{{{css}}}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resume">
|
||||
|
||||
{{#resume.basics}}
|
||||
<h1>{{name}}</h1>
|
||||
<h2>{{label}}</h2>
|
||||
<section id="basics">
|
||||
<div class="contact">
|
||||
{{#if website}}
|
||||
<div class="website">
|
||||
<strong>Website</strong>
|
||||
{{website}}
|
||||
</div>
|
||||
{{/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>
|
||||
{{/if}}
|
||||
{{#if city}}
|
||||
<div class="city">
|
||||
<strong>City</strong>
|
||||
{{city}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if countryCode}}
|
||||
<div class="countryCode">
|
||||
<strong>Country code</strong>
|
||||
{{countryCode}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if region}}
|
||||
<div class="region">
|
||||
<strong>Region</strong>
|
||||
{{region}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
{{/location}}
|
||||
{{#if profiles.length}}
|
||||
<h3>Profiles</h3>
|
||||
<section id="profiles">
|
||||
{{#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>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
</section>
|
||||
{{/resume.basics}}
|
||||
|
||||
{{#if resume.work.length}}
|
||||
<section id="work">
|
||||
<h2>Work</h2>
|
||||
{{#each resume.work}}
|
||||
<div class="item">
|
||||
{{#if company}}
|
||||
<h3 class="name">
|
||||
{{company}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
<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 position}}
|
||||
<div class="position">
|
||||
{{position}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if website}}
|
||||
<div class="website">
|
||||
<a href="{{website}}">{{website}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if summary}}
|
||||
<div class="summary">
|
||||
<p>{{summary}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if highlights.length}}
|
||||
<ul class="highlights">
|
||||
{{#each highlights}}
|
||||
<li>{{.}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.volunteer.length}}
|
||||
<section id="volunteer">
|
||||
<h2>Volunteer</h2>
|
||||
{{#each resume.volunteer}}
|
||||
<div class="item">
|
||||
{{#if organization}}
|
||||
<h3 class="company">
|
||||
{{organization}}
|
||||
</h3>
|
||||
{{/if}}
|
||||
<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 position}}
|
||||
<div class="position">
|
||||
{{position}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if website}}
|
||||
<div class="website">
|
||||
<a href="{{website}}">{{website}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if summary}}
|
||||
<div class="summary">
|
||||
<p>{{summary}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if highlights.length}}
|
||||
<ul class="highlights">
|
||||
{{#each highlights}}
|
||||
<li>{{.}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.education.length}}
|
||||
<section id="education">
|
||||
<h2>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}}
|
||||
{{#if area}}
|
||||
<div class="area">
|
||||
{{area}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if studyType}}
|
||||
<div class="studyType">
|
||||
{{studyType}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if gpa}}
|
||||
<div class="gpa">
|
||||
GPA: {{gpa}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if courses.length}}
|
||||
<ul class="courses">
|
||||
{{#each courses}}
|
||||
<li>{{.}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.awards.length}}
|
||||
<section id="awards">
|
||||
<h2>Awards</h2>
|
||||
{{#each resume.awards}}
|
||||
<div class="item">
|
||||
{{#if title}}
|
||||
<div class="title">
|
||||
{{title}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if date}}
|
||||
<div class="date">
|
||||
{{date}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if awarder}}
|
||||
<div class="awarder">
|
||||
{{awarder}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if summary}}
|
||||
<div class="summary">
|
||||
<p>{{summary}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.publications.length}}
|
||||
<section id="publications">
|
||||
<h2>Publications</h2>
|
||||
{{#each resume.publications}}
|
||||
<div class="item">
|
||||
{{#if name}}
|
||||
<div class="name">
|
||||
{{name}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if publisher}}
|
||||
<div class="publisher">
|
||||
{{publisher}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if releaseDate}}
|
||||
<div class="releaseDate">
|
||||
{{releaseDate}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if website}}
|
||||
<div class="website">
|
||||
<a href="{{website}}">Link</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if summary}}
|
||||
<div class="summary">
|
||||
<p>{{summary}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.skills.length}}
|
||||
<section id="skills">
|
||||
<h2>Skills</h2>
|
||||
{{#each resume.skills}}
|
||||
<div class="item">
|
||||
{{#if name}}
|
||||
<div class="name">
|
||||
{{name}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if level}}
|
||||
<div class="level">
|
||||
<em>{{level}}</em>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if keywords.length}}
|
||||
<ul class="keywords">
|
||||
{{#each keywords}}
|
||||
<li>{{.}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.languages.length}}
|
||||
<section id="languages">
|
||||
<h2>Languages</h2>
|
||||
{{#each resume.languages}}
|
||||
<div class="item">
|
||||
{{#if language}}
|
||||
<div class="language">
|
||||
{{language}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if fluency}}
|
||||
<div class="fluency">
|
||||
<em>{{fluency}}</em>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.interests.length}}
|
||||
<section id="interests">
|
||||
<h2>Interests</h2>
|
||||
{{#each resume.interests}}
|
||||
<div class="item">
|
||||
{{#if name}}
|
||||
<div class="name">
|
||||
{{name}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if keywords.length}}
|
||||
<ul class="keywords">
|
||||
{{#each keywords}}
|
||||
<li>{{.}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
{{#if resume.references.length}}
|
||||
<section id="references">
|
||||
<h2>References</h2>
|
||||
{{#each resume.references}}
|
||||
<div class="item">
|
||||
{{#if reference}}
|
||||
<blockquote class="reference">
|
||||
{{reference}}
|
||||
</blockquote>
|
||||
{{/if}}
|
||||
{{#if name}}
|
||||
<div class="name">
|
||||
— {{name}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
style.css
150
style.css
@@ -1,54 +1,144 @@
|
||||
body {
|
||||
background: #fff;
|
||||
font: 15px Arial, Helvetica, sans-serif;
|
||||
font: 14px 'Open Sans' Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4;
|
||||
margin: 50px 0;
|
||||
margin: 0 0;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
em {
|
||||
color: #999;
|
||||
}
|
||||
p {
|
||||
line-height: 1.4;
|
||||
line-height: 1.6;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2C85B1;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 2em;
|
||||
margin: 1em 0 2em;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.item {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#resume {
|
||||
margin: 0 auto;
|
||||
max-width: 480px;
|
||||
margin: 2em 2em 2em 2.5em;
|
||||
max-width: 960px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
#basics {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
#basics h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
#basics .contact strong,
|
||||
#location strong {
|
||||
clear: both;
|
||||
float: left;
|
||||
line-height: 1.3;
|
||||
width: 120px;
|
||||
}
|
||||
#profiles,
|
||||
#skills {
|
||||
overflow: hidden;
|
||||
}
|
||||
#profiles .item,
|
||||
#skills .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
/* Resume heading */
|
||||
.heading header {
|
||||
|
||||
}
|
||||
|
||||
.heading header h1 {
|
||||
font-size: 180%;
|
||||
margin: 0.5em 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.heading header h2 {
|
||||
font-size: 140%;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.heading header .contact .detail {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#profiles .profile {
|
||||
display: inline-block;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#profiles .profile strong,
|
||||
#profiles .profile span {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
/* section / line breaks */
|
||||
section h2 {
|
||||
font-size: 140%;
|
||||
margin: 0 0 1em;
|
||||
text-transform: uppercase;
|
||||
color: #BC1B39;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Experience items */
|
||||
.item {
|
||||
margin: 0 0 1em;
|
||||
padding: 0 0 1em;
|
||||
border-bottom: 1px solid #F2EBEC;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
.item header h3 {
|
||||
margin: 0.2em 1em 0.2em 0;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item header a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item .position {
|
||||
font-weight: 600;
|
||||
font-size: 100%;
|
||||
margin: 0.2em 1em 0.2em 0;
|
||||
}
|
||||
|
||||
.item .startDate,
|
||||
.item .endDate {
|
||||
color: #6B6B6B;
|
||||
}
|
||||
|
||||
.item .summary {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.item .highlights {
|
||||
list-style: square;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
/* skills */
|
||||
#skills .item {
|
||||
margin: 0.4em 0;
|
||||
padding: 0;
|
||||
font-size: 90%;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#skills .item .name {
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#skills .item .keywords {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* education */
|
||||
#education .item {
|
||||
display: inline-block;
|
||||
width: 49.5%;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user