Material Résumé

Introduction

Professional Résumés and Curriculum Vitae formalities follow conventions from as early as the 1500’s. Material Resume is a fresh take on how this old formality can be improved to meet the current recipient’s expectations using Google’s Material Design visual language.
Built using modern web development workflow tools, such as:

Bower for package management,
Gulp and plugins for web development task management,
Jade as HTML template language
Materialize SASS as CSS scaffolding
And JSON for content layer

With these simple instruction, you’ll be able to impress any hiring manager and learn some neat tricks about the latest design and front-end development tools.

Preview the result of this workflow at http://paiva.cc

Designed in Sketch App

The sketch template containing the design for this resume, along with Material Design visual elements, symbols, icons – and much more, can be found in the design folder.

Collaborate and Learn

1. Fork this repo

Help improving this template further. The experience of using – and learning – the latest design/development workflow with collaborators alike can only help you become a better designer/developer.
Click on the Fork button on the top of this page.

Get Going with Git

if you are hanging around GitHub, you’re already familiar with Git. If you are not, there are simple and quick ways to learn:

GitHub Client for Mac
GitHub Client for Windows
Try Git – Free Course at Code School

2. Clone your fork

Assuming you already have Git installed in your machine, go into your project folder and clone your fork repository locally by adding the following command:

$ git clone https://github.com/[YOUR_USERNAME]/material-resume.git

Go into your new Git folder:

$ cd material-resume

3. Requirements

In order to take the most of the Gulp automation included in this template, you will need to have the following installed before moving forward.

Node.js and NPM – manages the development dependencies, like Gulp, Bower and plugins
Bower – takes care of production components and libraries used to display the web page, such as Materialize, jQuery, Bootstrap, etc.
LiveReload – monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Getting Started

Let’s shift gears and install the NPM/Bower modules. This will be surprisingly easy!

As Easy As 1,2,3

With only 3 commands you will be editing the code like a wizard:

1. Install NPM modules:

$ npm install

This could take a few seconds, hang tight. It will install all the dependencies included in the package.json, mostly Gulp plugins and they will be added to the “node_modules” folder

2. Install Bower Components

$ bower install

This step takes care of the components dependencies included in the bower.json, in our case just Materialize (jQuery comes with it) and it will be added to your “bower_components” folder.

3. Start gulp and behold!

$ gulp

This simple command you will run the default task in the gulpfile.js, which includes the following:

It will create the builds/development folder, where your index.html resides
Copy Bower components into the lib/ folder
Converts SASS into CSS
Converts Jade templates into index.html
Copy and Optimize images from assets into images folder
Copy any assets into downloads folder
Finally, it keeps a watch in your src folder for any future changes.

LiveReload Instructions

be sure to have the LiveReload Browser Extension installed.
Load the index.html in the builds/development folder
Make sure LiveReload 2 is running
Click the LiveReload toolbar button to enable or disable LiveReload.

HTML and Jade Templates

Jade ( http://jade-lang.com) is a very cool HTML template language that brings a number of features to allow front-end developers to leverage DRY practices with variables, data-binding, mixins, includes, etc.
To learn more about Jade, check out this Tuts+ video by Kezz Bracey @KezzBracey
After you are familiar with Jade, take a closer look in the “_src/templates” folder and the .jade files

Content Layer via JSON

For obvious reasons, it is important to keep the content of your resume decoupled from your presentation layer. The combination of Gulp and Jade allows to connect the templates with a JSON file.
Inside the _src/templates/content folder, you’ll find the mpaiva.json containing the sections and content structure of the Material Resume template.
This file is serviced via the gulpfile.js.
A variable containing with path to data source:

19 // JSON containing the content for jade templates
20 var resumeData = require('./_src/templates/content/mpaiva.json')

is passed to the gulp-jade plugin via the locals option. See example below:

var jade = require('gulp-jade');
 
gulp.task('templates', function() {
  var resumeData = require('./_src/templates/content/mpaiva.json')
 
  gulp.src('./lib/*.jade')
    .pipe(jade({
      locals: resumeData
    }))
    .pipe(gulp.dest('./dist/'))
});

Then, you can bind any data node from the JSON file with #{locals.name}. See example below:
JSON node:

{
  "name": "Marcelo Paiva",
  "title": "User Experience Director",
  "photo": "images/mpaiva2.jpg"
}

Jade template: _portrait-card.jade_

.card.portrait
	.card-image
		img(src="#{locals.photo}")
		.portrait-wrapper
			h4 #{locals.name}
			h6 #{locals.title}

That’s it! Really.

With these initial instructions you should be able to get going in no time.

Have fun and Contribute!

if you have any questions or suggestions, please leave us note on the Issues Page
.