fresh-themes
Version:
Multiformat themes and templates for your résumé / CV.
352 lines (283 loc) • 12.1 kB
HTML
{{! <!--
Welcome to the annotated HTML template of the MODERN theme. This is the
template used to generate the output HTML format of your resume when you
choose the "modern" theme in HackMyResume or FluentCV.
These comments will be stripped when the resume is generated.
FRESH themes are just plain text documents with a bit of template magic
built in via Handlebars or Underscore (in this case, Handlebars). Here we're
buildng an HTML version of the theme, so we'll create an otherwise normal HTML
document, then inject data into it using special tags. Where does the data
come from? From our FRESH or JSON Resume-format resume, represented in this
template through the "r" and "RAW" objects.
r.some-propery
r.some-method
RAW.some-other-propery
So let's begin with a standard HTML 5 doctype and prelude.
--> }}
<html>
<head>
<meta charset="utf-8">
{{! <!--
Set the document <title> to the candidate's name. We use RAW.name here,
instead of r.name, because RAW gives us the text *as entered by the user*.
The double bracket notation automatically encodes this value. If we wanted
the unencoded raw value, we'd use triple brackets as in
((( RAW.name ))).
--> }}
<title>{{ RAW.name }}</title>
{{!<!-- TODO: Optimize Google Fonts and Font Awesome access. -->}}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
{{! <!--
Link in the resume's stylesheet. We could use a <link> tag here as above,
or dump the styles into <style></style>, but there's a handy helper
available that allows us to do either, conditionally.
--> }}
{{{styleSheet "modern-pdf.css"}}}
{{! <!--
Now, depending on options, "modern-html.css" will either be embedded
via <style> stags, or linked via <link>. Users can control this via
(for example) the --css option in HackMyResume.
Why might you want to embed CSS into <style> tags when most CSS guides
instruct you to use <link>? Because embedded CSS creates a more hardened
"standalone" resume with fewer external dependencies. This may not matter
in a typical web scenario, but HTML resumes are also used to drive PDF
generation, not to mention emailed, viewed locally, etc.
TL;DR Use the "styleSheet" helper whenever possible.
-->}}
</head>
{{!<!--
So much for the <head> element. Now let's tackle the <body>.
-->}}
<body>
<main id="main"> {{!<!-- Use your container markup of choice here -->}}
<div id="container">
<header>
{{! <!--
Display the candidate's name using "r" (the FRESH or JSON Resume
object). Keep in mind that "r" contains the MARKDOWNIFIED version
of the text in the user's FRESH or JRS resume because FRESH resume
themes support Markdown natively. If you want the un-Markdownified
text, you'd use RAW instead.
--> }}
<h1>{{{ r.name }}}</h1>
{{! <!--
Give some basic contact info. Here, the HAS helper is similar
to a normal IF, but provides a guaranteed-to-be-safe check against a
particular object path. That is, ((#if contact.email)) can error out
(throw an exception) if contact is null, depending on Handlebars
engine settings, but ((#has 'contact.email')) never will.
--> }}
<div id="contact">
{{#has 'contact.email'}}<div class="email"><a href="mailto:{{{ RAW.contact.email }}}">{{ RAW.contact.email }}</a></div>{{/has}}
{{#has 'contact.phone'}}<div class="phone">{{ RAW.contact.phone }}</div>{{/has}}
{{#has 'contact.website'}}<div class="website"><a href="{{{ RAW.contact.website }}}">{{ RAW.contact.website }}</a></div>{{/has}}
</div>
</header>
{{!<!--
Now let's emit the candidate's summary, overriding the icon.
-->}}
{{#*inline "icon-info"}}<span class="fa fa-lg fa-info"></span>{{/inline}}
{{> section/info _icon="icon-info" }}
{{! <!--
Okay, let's create a custom SKILLS section with colored skill bars.
Since this is an official resume section, we want to wrap it in the
"section" block helper. This allows the section to be selectively
omitted from the resume if either a) the section is empty or b) the user
tells us to hide it.
As fpr the colored bars, those are just standard HTML and CSS, with the
height and color of each bar linked to the candidate's skill "level" from
the resume.
TL;DR Always wrap your sections with the "section"!
--> }}
{{#section 'skills' }}
<hr>
<section id="skills">
<header>
<h2>{{{sectionTitle "Skills"}}}</h2>
</header>
<span class="fa fa-lg fa-code"></span>
<ul class="list-unstyled">
{{#each r.skills.sets}}
<li class="card card-nested card-skills">
<div class="skill-level" rel="tooltip" title="{{ level }}" data-placement="left">
<div class="skill-progress {{toLower level }}"></div>
</div>
<div class="skill-info">
<strong>{{ name }}</strong>
<div class="space-top labels">
{{#if skills}}
{{#each skills}}
<div class="label label-keyword">
<span class="kw">{{ this }}</span>
{{#ifHasSkill @root.r .}}
<span class="notes">{{skillYears . }} years</span>
{{/ifHasSkill}}
</div>
{{/each}}
{{/if}}
</div>
</div>
</li>
{{/each}}
</ul>
</section>
{{/section}}
{{! <!--
So much for SKILLS. Now let's render the EMPLOYMENT section.
We could do this manually with custom HTML, like we did with the SKILLS
section, but let's take advantage of some predefined partials instead.
FRESH provides global partials for all resume sections (employment, skills,
education, speaking, etc.). They're named like this:
section/skills
section/employment
section/service
section/recognition
etc..
So what we want to do is inject the "section/skills" global partial
and use it here in our theme. We can do that simply with:
((> section/skills ))
(Replace the parentheses with brackets). However, in this case we want to
override the heading icon used in the global partial as well as its content.
That is, we want to use the "section/employment" partial, but selectively
override portions of it with our own markup.
--> }}
{{!<!--
First, we create an inline partial called "icon-employment." The contents of
this partial will be referenced by the section/employment partial we invoke
below. This partial doesn't, by itself, render any content -- it's a template.
-->}}
{{#*inline "icon-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}}
{{!<!--
Next we create another inline partial called "body-employment" and set its
contents to the markup we'd like to use for the body section of each job. This
also doesn't render any content.
-->}}
{{#*inline "body-employment" }}
<div>
<h3><em>{{ position }}</em>,
{{#if url }}
<a href="{{{ url }}}">{{ employer }}</a>
{{else}}
{{ employer }}
{{/if}}
</h3>
<span class="tenure">{{dateRange .}}</span>
{{#if keywords}}
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
<p>{{{ summary }}}</p>
{{> highlights }}
</div>
{{/inline}}
{{! <!--
Actually render the employment section. Invoke the "section/employment"
partial (which lives at partials/html/section/employment.html). The header
icon and body of each employment stint will be rendered with the markup we
defined above.
--> }}
{{> section/employment _icon="icon-employment"}}
{{! <!--
Move on to the PROJECTS section, giving it the same treatment we gave the
EMPLOYMENT section.
--> }}
{{#*inline "body-projects" }}
<div>
<h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}}
{{#if url}}
<a href="{{{ url }}}">{{ title }}</a>
{{else}}
{{ title }}
{{/if}}
</h3>
{{#if start}}<span class="tenure">{{dateRange .}}</span>{{/if}}
{{#if keywords}}
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
{{{ summary }}}
{{> highlights }}
</div>
{{/inline}}
{{#*inline "icon-projects"}}<span class="fa fa-lg fa-star"></span>{{/inline}}
{{> section/projects _icon="icon-projects"}}
{{! <!--
Move on to the EDUCATION section, giving it the same treatment we gave the
EMPLOYMENT section.
--> }}
{{#*inline "body-education" }}
<div>
<h3>{{#if title}}<em>{{ title }}</em>,{{/if}}
{{#if url}}
<a href="{{{ url }}}">{{ institution }}</a>
{{else}}
{{ institution }}
{{/if}}
</h3>
{{#if start}}<span class="tenure">{{dateRange .}}</span>{{/if}}
{{#if curriculum}}
{{#if start}}| {{/if}}<span class="keywords">{{#each curriculum}}{{{ . }}} {{/each}}</span>
{{/if}}
{{{ summary }}}
{{> highlights }}
</div>
{{/inline}}
{{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}}
{{> section/education _icon="icon-education"}}
{{! <!--
Move on to the GOVERNANCE section, giving it the same treatment we gave the
EMPLOYMENT section.
--> }}
{{#*inline "body-governance" }}
<div>
<h3>{{#if role}}<em>{{{ role }}}</em>,{{/if}}
{{#if url}}
<a href="{{{ url }}}">{{{ organization }}}</a>
{{else}}
{{{ organization }}}
{{/if}}
</h3>
{{#if start}}<span class="tenure">{{dateRange .}}</span>{{/if}}
{{#if keywords}}
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
{{{ summary }}}
{{> highlights }}
</div>
{{/inline}}
{{#*inline "icon-governance"}}<span class="fa fa-lg fa-balance-scale"></span>{{/inline}}
{{> section/governance _icon="icon-governance"}}
{{! <!--
We'll override all section heading icons the same way, for the rest of the
resume, using the same inline template technique.
--> }}
{{#*inline "icon-service"}}<span class="fa fa-lg fa-child"></span>{{/inline}}
{{#*inline "icon-extracurricular"}}<span class="fa fa-lg fa-child"></span>{{/inline}}
{{#*inline "icon-affiliation"}}<span class="fa fa-lg fa-share-alt"></span>{{/inline}}
{{#*inline "icon-samples"}}<span class="fa fa-lg fa-share"></span>{{/inline}}
{{#*inline "icon-writing"}}<span class="fa fa-lg fa-pencil"></span>{{/inline}}
{{#*inline "icon-reading"}}<span class="fa fa-lg fa-book"></span>{{/inline}}
{{#*inline "icon-recognition"}}<span class="fa fa-lg fa-trophy"></span>{{/inline}}
{{#*inline "icon-speaking"}}<span class="fa fa-lg fa-users"></span>{{/inline}}
{{#*inline "icon-testimonials"}}<span class="fa fa-lg fa-quote-left"></span>{{/inline}}
{{#*inline "icon-references"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}}
{{#*inline "icon-interests"}}<span class="fa fa-lg fa-bicycle"></span>{{/inline}}
{{! <!--
And we're done with the customizations. For the rest of the resume, we'll
use the default section partials and style them with whatever CSS we like.
--> }}
{{> section/service _icon="icon-service"}}
{{> section/extracurricular _icon="icon-extracurricular"}}
{{> section/affiliation _icon="icon-affiliation"}}
{{> section/samples _icon="icon-samples"}}
{{> section/writing _icon="icon-writing"}}
{{> section/reading _icon="icon-reading"}}
{{> section/recognition _icon="icon-recognition"}}
{{> section/speaking _icon="icon-speaking"}}
{{> section/testimonials _icon="icon-testimonials"}}
{{> section/references _icon="icon-references"}}
{{> section/interests _icon="icon-interests"}}
</div>
</main>
</body>
</html>