mirror of
https://github.com/JuanCanham/fresh-themes.git
synced 2024-11-22 16:20:11 +00:00
documentation, rename employment section work
This commit is contained in:
softwarerero
parent
04842537bd
commit
04cc09a54c
@ -7,3 +7,4 @@ FRESH resume themes live here, one per folder.
|
|||||||
- [`compact`](compact): A compact theme.
|
- [`compact`](compact): A compact theme.
|
||||||
- [`positive`](positive): A theme that partakes of that which is positive.
|
- [`positive`](positive): A theme that partakes of that which is positive.
|
||||||
- [`awesome`][awesome]: A LaTeX theme based on Awesome-CV.
|
- [`awesome`][awesome]: A LaTeX theme based on Awesome-CV.
|
||||||
|
- [`modern-lancer`](modern-lancer): A theme based on modern with some tweaks for freelancers.
|
||||||
|
|||||||
@ -1,8 +1,10 @@
|
|||||||
Theme: Modern
|
Theme: Modern
|
||||||
===============
|
===============
|
||||||
A contemporary technical résumé theme. Features colored progress bars
|
A contemporary technical résumé theme with tweaks for freelancers. Features colored progress bars
|
||||||
representing skill levels and Font Awesome icons for section headers.
|
representing skill levels and Font Awesome icons for section headers.
|
||||||
Adds a picture and projects to the standard modern theme.
|
Adds a picture and projects to the standard modern theme.
|
||||||
|
Also adds social info to contact data for Github/Bitbucket and the like, puts an image to the right,
|
||||||
|
renames the employment section to work, adds a section for languages and extracurricular.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,95 +1,23 @@
|
|||||||
{{! <!--
|
|
||||||
|
|
||||||
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,
|
|
||||||
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>
|
<title>{{ RAW.name }}</title>
|
||||||
|
|
||||||
{{!<!-- TODO: Optimize Google Fonts and Font Awesome access. -->}}
|
{{!<!-- 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.5.0/css/font-awesome.min.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-html.css"}}}
|
{{{styleSheet "modern-html.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>
|
</head>
|
||||||
|
|
||||||
{{!<!--
|
|
||||||
So much for the <head> element. Now let's tackle the <body>.
|
|
||||||
-->}}
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main id="main"> {{!<!-- Use your container markup of choice here -->}}
|
<main id="main"> {{!<!-- Use your container markup of choice here -->}}
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<header>
|
<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.
|
|
||||||
--> }}
|
|
||||||
|
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<h1>{{{ r.name }}}</h1>
|
<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">
|
<div id="contact">
|
||||||
{{#if r.contact.email}}<div><span class="fa fa-lg fa-envelope"></span> <a href="mailto:{{{ RAW.contact.email }}}">{{ RAW.contact.email }}</a></div>{{/if}}
|
{{#if r.contact.email}}<div><span class="fa fa-lg fa-envelope"></span> <a href="mailto:{{{ RAW.contact.email }}}">{{ RAW.contact.email }}</a></div>{{/if}}
|
||||||
{{#if r.contact.website}}<div><span class="fa fa-lg fa-firefox"></span> <a href="{{{ RAW.contact.website }}}">{{ RAW.contact.website }}</a></div>{{/if}}
|
{{#if r.contact.website}}<div><span class="fa fa-lg fa-firefox"></span> <a href="{{{ RAW.contact.website }}}">{{ RAW.contact.website }}</a></div>{{/if}}
|
||||||
@ -105,30 +33,9 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
{{!<!--
|
|
||||||
Now let's emit the candidate's summary, overriding the icon.
|
|
||||||
-->}}
|
|
||||||
|
|
||||||
{{#*inline "icon-info"}}<span class="fa fa-lg fa-info"></span>{{/inline}}
|
{{#*inline "icon-info"}}<span class="fa fa-lg fa-info"></span>{{/inline}}
|
||||||
{{> section/info _icon="icon-info" }}
|
{{> 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' }}
|
{{#section 'skills' }}
|
||||||
<hr>
|
<hr>
|
||||||
<section id="skills">
|
<section id="skills">
|
||||||
@ -181,49 +88,11 @@
|
|||||||
|
|
||||||
{{> section/projects _icon="icon-projects"}}
|
{{> section/projects _icon="icon-projects"}}
|
||||||
|
|
||||||
{{! <!--
|
|
||||||
|
|
||||||
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}}
|
{{#*inline "icon-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}}
|
||||||
|
{{#*inline "header-employment" }}
|
||||||
|
{{> header-icon _title="WORK" _section="work" _hdricon=(lookup . '_icon') }}
|
||||||
{{!<!--
|
{{/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>,
|
||||||
@ -232,36 +101,16 @@ also doesn't render any content.
|
|||||||
{{else}}
|
{{else}}
|
||||||
{{ employer }}
|
{{ employer }}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</h3>
|
</h3>
|
||||||
<span class="tenure">{{dateRange .}}</span>
|
<span class="tenure">{{dateRange .}}</span>
|
||||||
{{#if keywords}}
|
{{#if keywords}}
|
||||||
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
|
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<p>{{{ summary }}}</p>
|
<p>{{{ summary }}}</p>
|
||||||
{{> highlights }}
|
{{> highlights }}
|
||||||
</div>
|
</div>
|
||||||
{{/inline}}
|
{{/inline}}
|
||||||
|
{{> section/employment _icon="icon-employment"}}
|
||||||
{{! <!--
|
|
||||||
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" _title="Work"}}
|
|
||||||
|
|
||||||
|
|
||||||
{{! <!--
|
|
||||||
Move on to the PROJECTS section, giving it the same treatment we gave the
|
|
||||||
EMPLOYMENT section.
|
|
||||||
--> }}
|
|
||||||
|
|
||||||
|
|
||||||
{{! <!--
|
|
||||||
Move on to the EDUCATION section, giving it the same treatment we gave the
|
|
||||||
EMPLOYMENT section.
|
|
||||||
--> }}
|
|
||||||
|
|
||||||
|
|
||||||
{{#*inline "body-education" }}
|
{{#*inline "body-education" }}
|
||||||
@ -299,10 +148,6 @@ also doesn't render any content.
|
|||||||
</section>
|
</section>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{! <!--
|
|
||||||
Move on to the GOVERNANCE section, giving it the same treatment we gave the
|
|
||||||
EMPLOYMENT section.
|
|
||||||
--> }}
|
|
||||||
|
|
||||||
{{#*inline "body-governance" }}
|
{{#*inline "body-governance" }}
|
||||||
<div>
|
<div>
|
||||||
@ -327,11 +172,6 @@ also doesn't render any content.
|
|||||||
{{> section/governance _icon="icon-governance"}}
|
{{> 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-service"}}<span class="fa fa-lg fa-child"></span>{{/inline}}
|
||||||
{{#*inline "icon-affiliation"}}<span class="fa fa-lg fa-share-alt"></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-samples"}}<span class="fa fa-lg fa-share"></span>{{/inline}}
|
||||||
@ -343,11 +183,6 @@ also doesn't render any content.
|
|||||||
{{#*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}}
|
||||||
{{#*inline "icon-interests"}}<span class="fa fa-lg fa-bicycle"></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/service _icon="icon-service"}}
|
||||||
{{> section/affiliation _icon="icon-affiliation"}}
|
{{> section/affiliation _icon="icon-affiliation"}}
|
||||||
{{> section/samples _icon="icon-samples"}}
|
{{> section/samples _icon="icon-samples"}}
|
||||||
|
|||||||
@ -224,6 +224,9 @@ contents to the markup we'd like to use for the body section of each job. This
|
|||||||
also doesn't render any content.
|
also doesn't render any content.
|
||||||
-->}}
|
-->}}
|
||||||
|
|
||||||
|
{{#*inline "header-employment" }}
|
||||||
|
{{> header-icon _title="WORK" _section="work" _hdricon=(lookup . '_icon') }}
|
||||||
|
{{/inline}}
|
||||||
{{#*inline "body-employment" }}
|
{{#*inline "body-employment" }}
|
||||||
<div>
|
<div>
|
||||||
<h3><em>{{ position }}</em>,
|
<h3><em>{{ position }}</em>,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user