├── .gitignore
├── .npmignore
├── README.md
├── index.js
├── package.json
├── partials
    ├── awards.hbs
    ├── basics.hbs
    ├── education.hbs
    ├── interests.hbs
    ├── languages.hbs
    ├── publications.hbs
    ├── references.hbs
    ├── skills.hbs
    ├── volunteer.hbs
    └── work.hbs
├── resume.hbs
└── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | resume.html
4 | resume.pdf
5 | resume.json
6 | .DS_Store
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | resume.html
4 | resume.pdf
5 | resume.json
6 | .DS_Store
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Boilerplate theme [![](https://badge.fury.io/js/jsonresume-theme-boilerplate.svg)](https://www.npmjs.org/package/jsonresume-theme-boilerplate)
  2 | 
  3 | This is the boilerplate theme for [JSON Resume](http://jsonresume.org/).
  4 | 
  5 | ## Getting started
  6 | 
  7 | To get started with theme development, this is what you'll need:
  8 | 
  9 | - [node.js](http://howtonode.org/how-to-install-nodejs)
 10 | - [npm](http://howtonode.org/introduction-to-npm)
 11 | 
 12 | If you're on Linux, you can simply run:
 13 | 
 14 | ```
 15 | sudo apt-get install nodejs-legacy npm
 16 | ```
 17 | 
 18 | Or if you're on OSX and got [Homebrew](http://brew.sh/) installed:
 19 | ```
 20 | brew install node
 21 | ```
 22 | 
 23 | ### Install the command line
 24 | 
 25 | We're going to use the official [resume-cli](https://github.com/jsonresume/resume-cli) to run our development server.
 26 | 
 27 | Go ahead and install it:
 28 | 
 29 | ```
 30 | sudo npm install -g resume-cli
 31 | ```
 32 | 
 33 | ### Download theme
 34 | 
 35 | Lets go ahead and download a [copy of the repository](https://github.com/jsonresume/jsonresume-theme-boilerplate/archive/master.zip).
 36 | 
 37 | ### Install npm packages
 38 | 
 39 | We need to install the dependencies. `cd` into the theme folder we just downloaded and run:
 40 | 
 41 | ```bash
 42 | sudo npm install
 43 | ```
 44 | 
 45 | This will read the local `package.json` and install the packages listed under `dependencies`.
 46 | 
 47 | ### Serve theme
 48 | 
 49 | While inside the theme folder, simply run:
 50 | 
 51 | ```
 52 | resume serve
 53 | ```
 54 | 
 55 | You should now see this message:
 56 | 
 57 | ```
 58 | Preview: http://localhost:4000
 59 | Press ctrl-c to stop
 60 | ```
 61 | 
 62 | Congratulations, you've made it!
 63 | 
 64 | __The theme development can now begin.__
 65 | 
 66 | ## Development
 67 | 
 68 | ### Overview
 69 | 
 70 | Now that you have your boilerplate theme installed, go through a quick overview of each of the files needed for your JSONResume theme:
 71 | 
 72 | * `package.json`: Your package.json is required by all npm packages. Everytime you want to release a new update of your theme, you'll need to update it's version number.
 73 | * `index.js`: This is the file that will return the needed HTML to the theme server. You can use it to process some things with your theme first, but we'll talk about that a bit later.
 74 | * `resume.hbs`: This is your actual template. This file is sent to the `index.js` for it to send to the theme server.
 75 | * `style.css`: This is where all the CSS of your project goes. Since the `index.js` only returns HTML, the contents of this file are put between `<style>` tags in your `resume.hbs` file.
 76 | 
 77 | In order to get values from an actual JSONResume, you'll need to use a templating system, such as [Mustache](http://mustache.github.io/) or [Handlebars](http://handlebarsjs.com/). The default boilerplate theme uses Handlebars.
 78 | 
 79 | ### package.json
 80 | 
 81 | Because you'll need to publish this as your own soon, you'll need to change some of the fields. You can replace the name field with your own theme name, so long as it starts with `jsonresume-theme-`. This prefix will allow your theme to be found by the theme server during deployment.
 82 | 
 83 | Next, you'll want to change the description and author. You can change the description to anything you'd like, and the author should be your name.
 84 | 
 85 | If you are also putting your theme up on Github, you'll probably want to keep the repository field, but replace the url with your own.
 86 | 
 87 | Lastly, you can put all of your theme dependencies in the `dependencies` field. As you can see, we already have [Handlebars](http://handlebarsjs.com/) as one of the dependencies. If you wish not to use Handlebars, you may remove this, and replace it with another templating system.
 88 | 
 89 | ### index.js
 90 | 
 91 | The `index.js` is where all the compiliing of your theme, and neccessary edits will go.
 92 | 
 93 | At the top, you can already see the Node.js `require` function being used with the dependencies. You can obviously add own dependencies, if you are planning on using a different templating system, you can remove it.
 94 | 
 95 | The most important part of `index.js` is the `render` function. This is where all the compilation goes. This render function is expected to take a resume object (from a `resume.json`), and should return HTML. In this case, it is returning a compiled Handlebars document. If you removed the Handlebars dependency, you'll want to remove it and replace it with your own templating system compilation.
 96 | 
 97 | Above the `return` line are css and template variables. Using the Node.js `fs` module, it reads first the `style.css` and the `resume.hbs`.
 98 | 
 99 | ### resume.hbs
100 | 
101 | The `resume.hbs` file is where the actual template is. It contains all of the markup needed for your resume. By default, this is a Handlebars document, but it can obviously be changed into a different templating document.
102 | 
103 | ### style.css
104 | 
105 | Last but not least, the `style.css` defines your styles. Technically, this is completely optional, as you could just write all of your styles in the `<style>` tags of your `resume.hbs`. As the `index.js`, the contents of the `style.css` are put into the `<style>` tags of your compiled theme later, yet again, this is something can change.
106 | 
107 | ## Deployment
108 | 
109 | If you are familar with NPM, you should be done with this in no time.
110 | 
111 | If you already have an NPM account, you can run `npm login` and enter your username and password. If not, you can run `npm adduser` and fill in the proper fields.
112 | 
113 | If you changed the dependencies or added new ones, you'll want to run `npm install` again, and just to make sure, run `npm update` to get the latest version of each dependency.
114 | 
115 | When you are done with that, you may go into your package.json, and edit the version number. When all of the above is finished, you may run `npm publish` to release your theme to the public. Now everyone can use your theme with their resume.
116 | 
117 | When updating your theme, you'll need to change the version number and run `npm publish` again.
118 | 
119 | ## License
120 | 
121 | Available under [the MIT license](http://mths.be/mit).
122 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var fs = require("fs");
 2 | var path = require('path');
 3 | var Handlebars = require("handlebars");
 4 | 
 5 | function render(resume) {
 6 | 	var css = fs.readFileSync(__dirname + "/style.css", "utf-8");
 7 | 	var tpl = fs.readFileSync(__dirname + "/resume.hbs", "utf-8");
 8 | 	var partialsDir = path.join(__dirname, 'partials');
 9 | 	var filenames = fs.readdirSync(partialsDir);
10 | 
11 | 	filenames.forEach(function (filename) {
12 | 	  var matches = /^([^.]+).hbs$/.exec(filename);
13 | 	  if (!matches) {
14 | 	    return;
15 | 	  }
16 | 	  var name = matches[1];
17 | 	  var filepath = path.join(partialsDir, filename)
18 | 	  var template = fs.readFileSync(filepath, 'utf8');
19 | 
20 | 	  Handlebars.registerPartial(name, template);
21 | 	});
22 | 	return Handlebars.compile(tpl)({
23 | 		css: css,
24 | 		resume: resume
25 | 	});
26 | }
27 | 
28 | module.exports = {
29 | 	render: render
30 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jsonresume-theme-boilerplate",
 3 |   "version": "0.1.2",
 4 |   "description": "Boilerplate theme for JSON Resume",
 5 |   "author": "Mattias Erming",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/erming/jsonresume-theme-boilerplate"
 9 |   },
10 |   "license": "MIT",
11 |   "dependencies": {
12 |     "handlebars": "^2.0.0-alpha.4"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/partials/awards.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.awards.length}}
 2 | <section id="awards">
 3 | 	<h2>Awards</h2>
 4 | 	{{#each resume.awards}}
 5 | 	<div class="item">
 6 | 		{{#if title}}
 7 | 		<div class="title">
 8 | 			{{title}}
 9 | 		</div>
10 | 		{{/if}}
11 | 		{{#if date}}
12 | 		<div class="date">
13 | 			{{date}}
14 | 		</div>
15 | 		{{/if}}
16 | 		{{#if awarder}}
17 | 		<div class="awarder">
18 | 			{{awarder}}
19 | 		</div>
20 | 		{{/if}}
21 | 		{{#if summary}}
22 | 		<div class="summary">
23 | 			<p>{{summary}}</p>
24 | 		</div>
25 | 		{{/if}}
26 | 	</div>
27 | 	{{/each}}
28 | </section>
29 | {{/if}}


--------------------------------------------------------------------------------
/partials/basics.hbs:
--------------------------------------------------------------------------------
 1 | {{#resume.basics}}
 2 | 	<h1>{{name}}</h1>
 3 | 	<h2>{{label}}</h2>
 4 | 	<section id="basics">
 5 | 		<div class="contact">
 6 | 		{{#if website}}
 7 | 		<div class="website">
 8 | 			<strong>Website</strong>
 9 | 			{{website}}
10 | 		</div>
11 | 		{{/if}}
12 | 		{{#if email}}
13 | 		<div class="email">
14 | 			<strong>Email</strong>
15 | 			{{email}}
16 | 		</div>
17 | 		{{/if}}
18 | 		{{#if phone}}
19 | 		<div class="phone">
20 | 			<strong>Phone</strong>
21 | 			{{phone}}
22 | 		</div>
23 | 		{{/if}}
24 | 		</div>
25 | 		{{#if summary}}
26 | 		<div class="summary">
27 | 			<p>{{summary}}</p>
28 | 		</div>
29 | 		{{/if}}
30 | 		{{#location}}
31 | 		<h3>Location</h3>
32 | 		<section id="location">
33 | 			{{#if address}}
34 | 			<div class="address">
35 | 				<strong>Address</strong>
36 | 				{{address}}
37 | 			</div>
38 | 			{{/if}}
39 | 			{{#if postalCode}}
40 | 			<div class="postalCode">
41 | 				<strong>Postal code</strong>
42 | 				{{postalCode}}
43 | 			</div>
44 | 			{{/if}}
45 | 			{{#if city}}
46 | 			<div class="city">
47 | 				<strong>City</strong>
48 | 				{{city}}
49 | 			</div>
50 | 			{{/if}}
51 | 			{{#if countryCode}}
52 | 			<div class="countryCode">
53 | 				<strong>Country code</strong>
54 | 				{{countryCode}}
55 | 			</div>
56 | 			{{/if}}
57 | 			{{#if region}}
58 | 			<div class="region">
59 | 				<strong>Region</strong>
60 | 				{{region}}
61 | 			</div>
62 | 			{{/if}}
63 | 		</section>
64 | 		{{/location}}
65 | 		{{#if profiles.length}}
66 | 		<h3>Profiles</h3>
67 | 		<section id="profiles">
68 | 			{{#each profiles}}
69 | 			<div class="item">
70 | 				{{#if network}}
71 | 				<strong class="network">
72 | 					{{network}}
73 | 				</strong>
74 | 				{{/if}}
75 | 				{{#if username}}
76 | 				<div class="username">
77 | 					{{username}}
78 | 				</div>
79 | 				{{/if}}
80 | 				{{#if url}}
81 | 				<div class="url">
82 | 					<a href="{{url}}">Link</a>
83 | 				</div>
84 | 				{{/if}}
85 | 			</div>
86 | 			{{/each}}
87 | 		</section>
88 | 		{{/if}}
89 | 	</section>
90 | {{/resume.basics}}


--------------------------------------------------------------------------------
/partials/education.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.education.length}}
 2 | <section id="education">
 3 | 	<h2>Education</h2>
 4 | 	{{#each resume.education}}
 5 | 	<div class="item">
 6 | 		<div class="date">
 7 | 			{{#if startDate}}
 8 | 			<span class="startDate">
 9 | 				{{startDate}}
10 | 			</span>
11 | 			{{/if}}
12 | 			{{#if endDate}}
13 | 			<span class="endDate">
14 | 				- {{endDate}}
15 | 			</span>
16 | 			{{else}}
17 | 			<span class="endDate">
18 | 				- Present
19 | 			</span>
20 | 			{{/if}}
21 | 		</div>
22 | 		{{#if institution}}
23 | 		<div class="institution">
24 | 			{{institution}}
25 | 		</div>
26 | 		{{/if}}
27 | 		{{#if area}}
28 | 		<div class="area">
29 | 			{{area}}
30 | 		</div>
31 | 		{{/if}}
32 | 		{{#if studyType}}
33 | 		<div class="studyType">
34 | 			{{studyType}}
35 | 		</div>
36 | 		{{/if}}
37 | 		{{#if gpa}}
38 | 		<div class="gpa">
39 | 			GPA: {{gpa}}
40 | 		</div>
41 | 		{{/if}}
42 | 		{{#if courses.length}}
43 | 		<ul class="courses">
44 | 			{{#each courses}}
45 | 			<li>{{.}}</li>
46 | 			{{/each}}
47 | 		</ul>
48 | 		{{/if}}
49 | 	</div>
50 | 	{{/each}}
51 | </section>
52 | {{/if}}


--------------------------------------------------------------------------------
/partials/interests.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.interests.length}}
 2 | <section id="interests">
 3 | 	<h2>Interests</h2>
 4 | 	{{#each resume.interests}}
 5 | 	<div class="item">
 6 | 		{{#if name}}
 7 | 		<div class="name">
 8 | 			{{name}}
 9 | 		</div>
10 | 		{{/if}}
11 | 		{{#if keywords.length}}
12 | 		<ul class="keywords">
13 | 			{{#each keywords}}
14 | 			<li>{{.}}</li>
15 | 			{{/each}}
16 | 		</ul>
17 | 		{{/if}}
18 | 	</div>
19 | 	{{/each}}
20 | </section>
21 | {{/if}}


--------------------------------------------------------------------------------
/partials/languages.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.languages.length}}
 2 | <section id="languages">
 3 | 	<h2>Languages</h2>
 4 | 	{{#each resume.languages}}
 5 | 	<div class="item">
 6 | 		{{#if language}}
 7 | 		<div class="language">
 8 | 			{{language}}
 9 | 		</div>
10 | 		{{/if}}
11 | 		{{#if fluency}}
12 | 		<div class="fluency">
13 | 			<em>{{fluency}}</em>
14 | 		</div>
15 | 		{{/if}}
16 | 	</div>
17 | 	{{/each}}
18 | </section>
19 | {{/if}}


--------------------------------------------------------------------------------
/partials/publications.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.publications.length}}
 2 | <section id="publications">
 3 | 	<h2>Publications</h2>
 4 | 	{{#each resume.publications}}
 5 | 	<div class="item">
 6 | 		{{#if name}}
 7 | 		<div class="name">
 8 | 			{{name}}
 9 | 		</div>
10 | 		{{/if}}
11 | 		{{#if publisher}}
12 | 		<div class="publisher">
13 | 			{{publisher}}
14 | 		</div>
15 | 		{{/if}}
16 | 		{{#if releaseDate}}
17 | 		<div class="releaseDate">
18 | 			{{releaseDate}}
19 | 		</div>
20 | 		{{/if}}
21 | 		{{#if website}}
22 | 		<div class="website">
23 | 			<a href="{{website}}">Link</a>
24 | 		</div>
25 | 		{{/if}}
26 | 		{{#if summary}}
27 | 		<div class="summary">
28 | 			<p>{{summary}}</p>
29 | 		</div>
30 | 		{{/if}}
31 | 	</div>
32 | 	{{/each}}
33 | </section>
34 | {{/if}}


--------------------------------------------------------------------------------
/partials/references.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.references.length}}
 2 | <section id="references">
 3 | 	<h2>References</h2>
 4 | 	{{#each resume.references}}
 5 | 	<div class="item">
 6 | 		{{#if reference}}
 7 | 		<blockquote class="reference">
 8 | 			{{reference}}
 9 | 		</blockquote>
10 | 		{{/if}}
11 | 		{{#if name}}
12 | 		<div class="name">
13 | 			— {{name}}
14 | 		</div>
15 | 		{{/if}}
16 | 	</div>
17 | 	{{/each}}
18 | </section>
19 | {{/if}}


--------------------------------------------------------------------------------
/partials/skills.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.skills.length}}
 2 | <section id="skills">
 3 | 	<h2>Skills</h2>
 4 | 	{{#each resume.skills}}
 5 | 	<div class="item">
 6 | 		{{#if name}}
 7 | 		<div class="name">
 8 | 			{{name}}
 9 | 		</div>
10 | 		{{/if}}
11 | 		{{#if level}}
12 | 		<div class="level">
13 | 			<em>{{level}}</em>
14 | 		</div>
15 | 		{{/if}}
16 | 		{{#if keywords.length}}
17 | 		<ul class="keywords">
18 | 			{{#each keywords}}
19 | 			<li>{{.}}</li>
20 | 			{{/each}}
21 | 		</ul>
22 | 		{{/if}}
23 | 	</div>
24 | 	{{/each}}
25 | </section>
26 | {{/if}}


--------------------------------------------------------------------------------
/partials/volunteer.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.volunteer.length}}
 2 | <section id="volunteer">
 3 | 	<h2>Volunteer</h2>
 4 | 	{{#each resume.volunteer}}
 5 | 	<div class="item">
 6 | 		{{#if organization}}
 7 | 		<h3 class="company">
 8 | 			{{organization}}
 9 | 		</h3>
10 | 		{{/if}}
11 | 		<div class="date">
12 | 			{{#if startDate}}
13 | 			<span class="startDate">
14 | 				{{startDate}}
15 | 			</span>
16 | 			{{/if}}
17 | 			{{#if endDate}}
18 | 			<span class="endDate">
19 | 				- {{endDate}}
20 | 			</span>
21 | 			{{else}}
22 | 			<span class="endDate">
23 | 				- Present
24 | 			</span>
25 | 			{{/if}}
26 | 		</div>
27 | 		{{#if position}}
28 | 		<div class="position">
29 | 			{{position}}
30 | 		</div>
31 | 		{{/if}}
32 | 		{{#if website}}
33 | 		<div class="website">
34 | 			<a href="{{website}}">{{website}}</a>
35 | 		</div>
36 | 		{{/if}}
37 | 		{{#if summary}}
38 | 		<div class="summary">
39 | 			<p>{{summary}}</p>
40 | 		</div>
41 | 		{{/if}}
42 | 		{{#if highlights.length}}
43 | 		<ul class="highlights">
44 | 			{{#each highlights}}
45 | 			<li>{{.}}</li>
46 | 			{{/each}}
47 | 		</ul>
48 | 		{{/if}}
49 | 	</div>
50 | 	{{/each}}
51 | </section>
52 | {{/if}}


--------------------------------------------------------------------------------
/partials/work.hbs:
--------------------------------------------------------------------------------
 1 | {{#if resume.work.length}}
 2 | <section id="work">
 3 | 	<h2>Work</h2>
 4 | 	{{#each resume.work}}
 5 | 	<div class="item">
 6 | 		{{#if company}}
 7 | 		<h3 class="name">
 8 | 			{{company}}
 9 | 		</h3>
10 | 		{{/if}}
11 | 		<div class="date">
12 | 			{{#if startDate}}
13 | 			<span class="startDate">
14 | 				{{startDate}}
15 | 			</span>
16 | 			{{/if}}
17 | 			{{#if endDate}}
18 | 			<span class="endDate">
19 | 				- {{endDate}}
20 | 			</span>
21 | 			{{else}}
22 | 			<span class="endDate">
23 | 				- Present
24 | 			</span>
25 | 			{{/if}}
26 | 		</div>
27 | 		{{#if position}}
28 | 		<div class="position">
29 | 			{{position}}
30 | 		</div>
31 | 		{{/if}}
32 | 		{{#if website}}
33 | 		<div class="website">
34 | 			<a href="{{website}}">{{website}}</a>
35 | 		</div>
36 | 		{{/if}}
37 | 		{{#if summary}}
38 | 		<div class="summary">
39 | 			<p>{{summary}}</p>
40 | 		</div>
41 | 		{{/if}}
42 | 		{{#if highlights.length}}
43 | 		<ul class="highlights">
44 | 			{{#each highlights}}
45 | 			<li>{{.}}</li>
46 | 			{{/each}}
47 | 		</ul>
48 | 		{{/if}}
49 | 	</div>
50 | 	{{/each}}
51 | </section>
52 | {{/if}}


--------------------------------------------------------------------------------
/resume.hbs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 	
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
 7 | 	
 8 | 	<title>{{#resume.basics}}{{name}}{{/resume.basics}}</title>
 9 | 
10 | 	<style>
11 | 	{{{css}}}
12 | 	</style>
13 | 	
14 | 	</head>
15 | 	<body>
16 | 	
17 | 	<div id="resume">
18 | 		{{> basics }}
19 | 		{{> work }}
20 | 		{{> volunteer }}
21 | 		{{> education }}
22 | 		{{> awards }}
23 | 		{{> publications }}
24 | 		{{> skills }}
25 | 		{{> languages }}
26 | 		{{> interests }}
27 | 		{{> references }}
28 | 	</body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	background: #fff;
 3 | 	font: 15px Arial, Helvetica, sans-serif;
 4 | 	line-height: 1.4;
 5 | 	margin: 50px 0;
 6 | 	margin-bottom: 100px;
 7 | }
 8 | em {
 9 | 	color: #999;
10 | }
11 | p {
12 | 	line-height: 1.4;
13 | }
14 | ul {
15 | 	margin-bottom: 0;
16 | }
17 | section {
18 | 	margin-bottom: 2em;
19 | }
20 | blockquote {
21 | 	margin: 0;
22 | 	margin-bottom: 1em;
23 | }
24 | .item {
25 | 	margin-bottom: 1em;
26 | }
27 | #resume {
28 | 	margin: 0 auto;
29 | 	max-width: 480px;
30 | 	padding: 0 20px;
31 | }
32 | #basics {
33 | 	margin-bottom: -10px;
34 | }
35 | #basics h3 {
36 | 	margin-top: 1.5em;
37 | }
38 | #basics .contact strong,
39 | #location strong {
40 | 	clear: both;
41 | 	float: left;
42 | 	line-height: 1.3;
43 | 	width: 120px;
44 | }
45 | #profiles,
46 | #skills {
47 | 	overflow: hidden;
48 | }
49 | #profiles .item,
50 | #skills .item {
51 | 	float: left;
52 | 	width: 50%;
53 | }
54 | 
55 | 


--------------------------------------------------------------------------------