JuanCanham/fresh-themes
1
0
Fork 0
mirror of https://github.com/JuanCanham/fresh-themes.git synced 2024-11-22 08:10:10 +00:00
Code Issues Releases Wiki Activity

Modern: HTML: Update annotations.

Browse Source
This commit is contained in:
hacksalot 2016-01-12 23:20:21 -05:00
parent b57272ef4c
commit 48f7bbaf6f
1 changed files with 112 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
themes/modern/src/modern-html.html
View File

@ -1,15 +1,41 @@
{{! <!--
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.
--> }}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{{! <!-- {{! <!--
Set the document title to the candidate's name. We use RAW.name here, 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*. 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 double bracket notation automatically encodes this value. If we wanted
the unencoded raw value, we'd use triple brackets as in the unencoded raw value, we'd use triple brackets as in
((( RAW.name ))). ((( RAW.name ))).
--> }} --> }}
<title>{{ RAW.name }}</title> <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 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.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
@ -22,18 +48,27 @@
{{{styleSheet "modern-html.css"}}} {{{styleSheet "modern-html.css"}}}
{{! <!-- {{! <!--
If the user passes "css embed" via the command line, any styles present Now, depending on options, "modern-html.css" will either be embedded
in "html.css" will be embedded into the document via the <style></style> via <style> stags, or linked via <link>. Users can control this via
tag. OTOH, if the user passes "css link" via the command line, then (for example) the --css option in HackMyResume.
"html.css" will be referenced via a standard <link> tag. If no "css"
parameter is given, HackMyResume defaults to CSS embedding via <style>, Why might you want to embed CSS into <style> tags when most CSS guides
because even if it's not as "correct" as <link>, it helps produce a more instruct you to use <link>? Because embedded CSS creates a more hardened
"standalone" resume with fewer external dependencies. "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> </head>
{{!<!--
So much for the <head> element. Now let's tackle the <body>.
-->}}
<body> <body>
<main id="main"> <main id="main"> {{!<!-- Use your container markup of choice here -->}}
<div id="container"> <div id="container">
<header> <header>
@ -96,6 +131,7 @@
</section> </section>
{{/has}} {{/has}}
{{! <!-- {{! <!--
Okay, let's create a custom SKILLS section with colored skill bars. Okay, let's create a custom SKILLS section with colored skill bars.
@ -104,40 +140,46 @@
omitted from the resume if either a) the section is empty or b) the user omitted from the resume if either a) the section is empty or b) the user
tells us to hide it. tells us to hide it.
Always wrap your sections with the "section"! 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' }} {{#section 'skills' }}
<hr> <hr>
<section id="skills"> <section id="skills">
<header> <header>
<h2>{{{sectionTitle "Skills"}}}</h2> <h2>{{{sectionTitle "Skills"}}}</h2>
</header> </header>
<span class="fa fa-lg fa-code"></span> <span class="fa fa-lg fa-code"></span>
<ul class="list-unstyled"> <ul class="list-unstyled">
{{#each r.skills.sets}} {{#each r.skills.sets}}
<li class="card card-nested card-skills"> <li class="card card-nested card-skills">
<div class="skill-level" rel="tooltip" title="{{ level }}" data-placement="left"> <div class="skill-level" rel="tooltip" title="{{ level }}" data-placement="left">
<div class="skill-progress {{toLower level }}"></div> <div class="skill-progress {{toLower level }}"></div>
</div> </div>
<div class="skill-info"> <div class="skill-info">
<strong>{{ name }}</strong> <strong>{{ name }}</strong>
<div class="space-top labels"> <div class="space-top labels">
{{#if skills}} {{#if skills}}
{{#each skills}} {{#each skills}}
<span class="label label-keyword">{{ this }}</span> <span class="label label-keyword">{{ this }}</span>
{{/each}} {{/each}}
{{/if}} {{/if}}
</div> </div>
</div> </div>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</section> </section>
{{/section}} {{/section}}
{{! <!-- {{! <!--
Now let's render the EMPLOYMENT 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 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. section, but let's take advantage of some predefined partials instead.
@ -155,16 +197,29 @@
((> section/skills )) ((> section/skills ))
However, in this case we also want to override the heading icon used (Replace the parentheses with brackets). However, in this case we want to
in the global partial. So we also declare what's known as an INLINE override the heading icon used in the global partial as well as its content.
PARTIAL, using ((#*inline "icon-skills")), and set its content to the That is, we want to use the "section/employment" partial, but selectively
icon we'd like to display for the SKILLS section. The global partial override portions of it with our own markup.
will reference this template by name, so it allows us to selectively
override that part of the global partial.
--> }} --> }}
{{!<!--
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}} {{#*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" }} {{#*inline "body-employment" }}
<div> <div>
<h3><em>{{ position }}</em>, <h3><em>{{ position }}</em>,
@ -183,12 +238,22 @@
</div> </div>
{{/inline}} {{/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"}} {{> section/employment _icon="icon-employment"}}
{{! <!-- {{! <!--
Do the same thing (roughly) with the PROJECT section. Move on to the PROJECTS section, giving it the same treatment we gave the
EMPLOYMENT section.
--> }} --> }}
{{#*inline "body-projects" }} {{#*inline "body-projects" }}
<div> <div>
<h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}} <h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}}
@ -214,10 +279,7 @@
{{! <!-- {{! <!--
We'll override all section heading icons the same way, for the rest of the We'll override all section heading icons the same way, for the rest of the
resume, using the same inline template technique. Keep in mind that these resume, using the same inline template technique.
inline templates do not, by themselves, create any markup. They emit markup
only when referenced by another template. Which template? In this case, the
global partial for each section.
--> }} --> }}
{{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}} {{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}}
@ -230,9 +292,8 @@
{{#*inline "icon-references"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}} {{#*inline "icon-references"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}}
{{! <!-- {{! <!--
Use the predefined global partials for the rest of the resume sections as-is. And we're done with the customizations. For the rest of the resume, we'll
Note: we can still customize the style of these via CSS. But we'll use the use the default section partials and style them with whatever CSS we like.
default markup.
--> }} --> }}
{{> section/education _icon="icon-education"}} {{> section/education _icon="icon-education"}}