mirror of
https://github.com/JuanCanham/fresh-theme-elegant.git
synced 2025-06-06 04:16:15 +01:00
Initial commit
This commit is contained in:
BackIsBachus
13
src/partials/about.html
Normal file
13
src/partials/about.html
Normal file
@ -0,0 +1,13 @@
|
||||
{{#if r.info.brief}}
|
||||
<div id="about" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-user" aria-hidden="true"></i><span class="mobile-title">About</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">About</h4>
|
||||
<div class="card card-nested">
|
||||
<div itemprop="description" class="content mop-wrapper">
|
||||
<p>{{r.info.brief}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
17
src/partials/background.html
Normal file
17
src/partials/background.html
Normal file
@ -0,0 +1,17 @@
|
||||
<section class="col-md-9 card-wrapper pull-right">
|
||||
<div class="card background-card">
|
||||
<h4 class="text-uppercase">Background</h4>
|
||||
<hr/>
|
||||
<div class="background-details">
|
||||
{{> about}}
|
||||
{{> experience}}
|
||||
{{> skills}}
|
||||
{{> education}}
|
||||
{{> projects}}
|
||||
{{> volunteer}}
|
||||
{{> interests}}
|
||||
{{> recognition}}
|
||||
{{> references}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
8
src/partials/body.html
Normal file
8
src/partials/body.html
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row main clearfix">
|
||||
{{> nav}}
|
||||
{{> profile}}
|
||||
{{> background}}
|
||||
</div>
|
||||
</div>
|
||||
{{> bottom-script}}
|
||||
47
src/partials/bottom-script.html
Normal file
47
src/partials/bottom-script.html
Normal file
@ -0,0 +1,47 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/tooltip.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/collapse.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var toggleFloatingMenu = function() {
|
||||
$('.js-floating-nav').toggleClass('is-visible');
|
||||
$('.js-floating-nav-trigger').toggleClass('is-open');
|
||||
};
|
||||
|
||||
$(".background-card").css("min-height", window.screen.availHeight + "px");
|
||||
$("[rel=tooltip]").tooltip();
|
||||
$('.js-floating-nav-trigger').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
toggleFloatingMenu();
|
||||
});
|
||||
$('.js-floating-nav a').on('click', toggleFloatingMenu);
|
||||
|
||||
$("#remaining-profiles").on('show.bs.collapse', function() {
|
||||
$('.js-profiles-collapse > i')
|
||||
.removeClass('fa-chevron-down')
|
||||
.addClass('fa-chevron-up');
|
||||
});
|
||||
|
||||
$("#remaining-profiles").on('hidden.bs.collapse', function() {
|
||||
$('.js-profiles-collapse > i')
|
||||
.removeClass('fa-chevron-up')
|
||||
.addClass('fa-chevron-down');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
WebFontConfig = {
|
||||
google: {
|
||||
families: ['Lato:300,400,700:latin']
|
||||
}
|
||||
};
|
||||
(function() {
|
||||
var wf = document.createElement('script');
|
||||
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
|
||||
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
|
||||
wf.type = 'text/javascript';
|
||||
wf.async = 'true';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(wf, s);
|
||||
})();
|
||||
</script>
|
||||
1
src/partials/date.html
Normal file
1
src/partials/date.html
Normal file
@ -0,0 +1 @@
|
||||
<p class="text-muted"><small><span class="space-right">{{dateRange this}}</span>{{#if location}}{{location}}{{/if}}</small></p>
|
||||
26
src/partials/education.html
Normal file
26
src/partials/education.html
Normal file
@ -0,0 +1,26 @@
|
||||
{{#if r.education}}
|
||||
<div id="education" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-graduation-cap"></i><span class="mobile-title">Education</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Education</h4>
|
||||
<div class="content">
|
||||
<ul class="list-unstyled">
|
||||
{{#each r.education.history}}
|
||||
<li class="card card-nested">
|
||||
<div class="content">
|
||||
<p class="clear-margin relative"><strong>{{area}}{{title}}{{#if studyType}} ({{studyType}}){{/if}}, </strong><a href="{{url}}" target="_blank">{{institution}}</a></p>
|
||||
{{> date}}
|
||||
<div class="space-top labels">
|
||||
{{#each curriculum}}
|
||||
<span class="label label-keyword">{{this}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{> highlights}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
21
src/partials/experience.html
Normal file
21
src/partials/experience.html
Normal file
@ -0,0 +1,21 @@
|
||||
{{#if r.employment}}
|
||||
<div id="work-experience" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-building"></i><span class="mobile-title">Work Experience</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Work Experience</h4>
|
||||
<p>{{r.employment.summary}}</p>
|
||||
<ul class="list-unstyled">
|
||||
{{#each r.employment.history}}
|
||||
<li class="card card-nested clearfix">
|
||||
<div class="content">
|
||||
<p class="clear-margin relative"><strong>{{{position}}}</strong>, <a href="{{url}}" target="_blank">{{employer}}</a></p>
|
||||
{{> date}}
|
||||
{{{summary}}}
|
||||
{{> highlights}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
7
src/partials/head.html
Normal file
7
src/partials/head.html
Normal file
@ -0,0 +1,7 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Jean-Sébastien Renaud</title>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-aNUYGqSUL9wG/vP7+cWZ5QOM4gsQou3sBfWRr/8S3R1Lv0rysEmnwsRKMbhiQX/O" crossorigin="anonymous" />
|
||||
{{> style}}
|
||||
5
src/partials/highlights.html
Normal file
5
src/partials/highlights.html
Normal file
@ -0,0 +1,5 @@
|
||||
<ul>
|
||||
{{#each highlights}}
|
||||
<li>{{this}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
23
src/partials/interests.html
Normal file
23
src/partials/interests.html
Normal file
@ -0,0 +1,23 @@
|
||||
{{#if r.interests}}
|
||||
<div id="interests" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-heart"></i><span class="mobile-title">Interests</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Interests</h4>
|
||||
<div class="content">
|
||||
<ul class="list-unstyled">
|
||||
{{#each r.interests}}
|
||||
<li class="card card-nested">
|
||||
<p><strong>{{name}}</strong></p>
|
||||
{{{summary}}}
|
||||
<div class="space-top labels">
|
||||
{{#each keywords}}
|
||||
<span class="label label-keyword">{{this}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
14
src/partials/nav.html
Normal file
14
src/partials/nav.html
Normal file
@ -0,0 +1,14 @@
|
||||
<a href="#" class="js-floating-nav-trigger floating-nav-trigger"><i class="fa fa-bars"></i><span class="close-icon">×</span></a>
|
||||
<nav class="floating-nav js-floating-nav">
|
||||
<ul class="list-unstyled">
|
||||
{{#if r.info.brief}}<li><a href="#about"><i class="mr-10 fa fa-user"></i>About</a></li>{{/if}}
|
||||
{{#if r.employment}}<li><a href="#work-experience"><i class="mr-10 fa fa-building"></i>Work Experience</a></li>{{/if}}
|
||||
{{#if r.skills}}<li><a href="#skills"><i class="mr-10 fa fa-gears"></i>Skills</a></li>{{/if}}
|
||||
{{#if r.education}}<li><a href="#education"><i class="mr-10 fa fa-graduation-cap"></i>Education</a></li>{{/if}}
|
||||
{{#if r.projects}}<li><a href="#projects"><i class="mr-10 fa fa-star"></i>Projects</a></li>{{/if}}
|
||||
{{#if r.service}}<li><a href="#volunteer-work"><i class="mr-10 fa fa-child"></i>Volunteer Work</a></li>{{/if}}
|
||||
{{#if r.interests}}<li><a href="#interests"><i class="mr-10 fa fa-heart"></i>Interests</a></li>{{/if}}
|
||||
{{#if r.recognition}}<li><a href="#awards"><i class="mr-10 fa fa-trophy"></i>Awards</a></li>{{/if}}
|
||||
{{#if r.references}}<li><a href="#references"><i class="mr-10 fa fa-thumbs-up"></i>References</a></li>{{/if}}
|
||||
</ul>
|
||||
</nav>
|
||||
27
src/partials/profile.html
Normal file
27
src/partials/profile.html
Normal file
@ -0,0 +1,27 @@
|
||||
<section class="col-md-3 card-wrapper profile-card-wrapper affix">
|
||||
<div class="card profile-card"><span class="profile-pic-container">
|
||||
<div class="profile-pic">
|
||||
{{#if r.info.image}}
|
||||
<img data-src="holder.js/100x100" alt="{{{r.name}}}" src="{{r.info.image}}" itemprop="image" class="media-object img-circle center-block"/>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="name-and-profession text-center"><h3 itemprop="name"><b>{{{r.name}}}</b></h3><h5 itemprop="jobTitle" class="text-muted">{{r.info.label}}</h5></div></span>
|
||||
<hr/>
|
||||
<div class="contact-details clearfix">
|
||||
{{#if r.location.city}}<div class="detail"><span class="icon"><i class="icon fs-lg fa fa-map-marker"></i></span><span class="info">{{#if r.location.address}}{{r.location.address}}, {{/if}}{{r.location.city}}{{#if r.location.region}}, {{r.location.region}}{{/if}}{{#if r.location.country}}, {{r.location.country}}{{/if}}</span></div>{{/if}}
|
||||
<div class="detail"><span class="icon"><i class="icon fs-lg fa fa-phone"></i></span><span itemprop="telephone" class="info">{{r.contact.phone}}</span></div>
|
||||
<div class="detail"><span class="icon"><i class="icon fs-lg fa fa-envelope-o"></i></span><span class="info"><a href="mailto:{{{r.contact.email}}}" itemprop="email" class="link-disguise">{{{r.contact.email}}}</a></span>
|
||||
</div>
|
||||
<div class="detail"><span class="icon"><i class="icon fs-lg fa fa-link"></i></span><span class="info">{{{r.contact.website}}}</span></div>
|
||||
<div class="detail"><span title="Languages I speak" class="icon"><i class="icon fs-lg fa fa-language"></i></span><span class="info">{{#each r.languages}}{{language}}{{#unless @last}}, {{/unless}}{{/each}}</span></div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="social-links text-center">
|
||||
<div>
|
||||
{{#each r.social}}
|
||||
<a href="{{url}}" target="_blank" data-toggle="tooltip" title="{{../r.name}} on {{network}}" class="fs-2x social-link"><i class="link-{{toLower network}} fa fa-{{toLower network}}"></i></a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
20
src/partials/projects.html
Normal file
20
src/partials/projects.html
Normal file
@ -0,0 +1,20 @@
|
||||
{{#if r.projects}}
|
||||
<div id="projects" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-star"></i><span class="mobile-title">Projects</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Projects</h4>
|
||||
<ul class="list-unstyled">
|
||||
{{#each r.projects}}
|
||||
<li class="card card-nested clearfix">
|
||||
<div class="content">
|
||||
<p class="clear-margin relative"><strong>{{role}}</strong>, <a href="{{url}}" target="_blank">{{title}}</a></p>
|
||||
{{> date}}
|
||||
{{{summary}}}
|
||||
{{> highlights}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
23
src/partials/recognition.html
Normal file
23
src/partials/recognition.html
Normal file
@ -0,0 +1,23 @@
|
||||
{{#if r.recognition}}
|
||||
<div id="awards" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-trophy"></i><span class="mobile-title">Awards</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Awards</h4>
|
||||
<div class="content">
|
||||
<ul class="list-unstyled clear-margin">
|
||||
{{#each r.recognition}}
|
||||
<li class="card card-nested">
|
||||
<div class="content">
|
||||
<p itemprop="award" class="clear-margin"><strong>{{title}} </strong><a href="{{url}}" target="_blank">{{from}}</a></p>
|
||||
<p class="text-muted"><small>Awarded on: {{date}}</small></p>
|
||||
<div class="mop-wrapper">
|
||||
{{{summary}}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
23
src/partials/references.html
Normal file
23
src/partials/references.html
Normal file
@ -0,0 +1,23 @@
|
||||
{{#if r.references}}
|
||||
<div id="references" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-thumbs-up"></i><span class="mobile-title">References</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">References</h4>
|
||||
<div class="content">
|
||||
<ul class="list-unstyled clear-margin">
|
||||
{{#each r.references}}
|
||||
{{#unless private}}
|
||||
<li class="card card-nested"><strong>{{name}}, </strong>{{role}}
|
||||
<blockquote class="quote">
|
||||
<div class="mop-wrapper">
|
||||
{{{summary}}}
|
||||
</div>
|
||||
</blockquote>
|
||||
</li>
|
||||
{{/unless}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
36
src/partials/skills.html
Normal file
36
src/partials/skills.html
Normal file
@ -0,0 +1,36 @@
|
||||
<div id="skills" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-cogs"></i><span class="mobile-title">Skills</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Skills</h4>
|
||||
<div class="content">
|
||||
<ul class="list-unstyled">
|
||||
{{#each r.skills.sets}}
|
||||
<li class="card card-nested card-skills">
|
||||
<div rel="tooltip" title="{{level}}" data-placement="left" class="skill-level">
|
||||
<div class="skill-progress {{toLower level}}"></div>
|
||||
</div>
|
||||
<div class="skill-info"><strong>{{name}}</strong>
|
||||
<div class="space-top labels">
|
||||
{{#each skills}}
|
||||
<span class="label label-keyword">{{this}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each r.skills.list}}
|
||||
<li class="card card-nested card-skills">
|
||||
<div rel="tooltip" title="{{level}}" data-placement="left" class="skill-level">
|
||||
<div class="skill-progress {{toLower level}}"></div>
|
||||
</div>
|
||||
<div class="skill-info"><strong>{{name}} ({{years}} years)</strong>
|
||||
<div class="space-top">
|
||||
<p>{{summary}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
698
src/partials/style.html
Normal file
698
src/partials/style.html
Normal file
@ -0,0 +1,698 @@
|
||||
<style>
|
||||
..relative {
|
||||
position: relative;
|
||||
}
|
||||
.clear-margin {
|
||||
margin: 0;
|
||||
}
|
||||
.space-top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.space-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mr-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.ml-5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.labels {
|
||||
line-height: 2;
|
||||
}
|
||||
.label-keyword {
|
||||
display: inline-block;
|
||||
background: #7eb0db;
|
||||
color: white;
|
||||
font-size: 0.9em;
|
||||
padding: 5px;
|
||||
border: 1px solid #357ebd;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.label-keyword:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.link-disguise {
|
||||
color: inherit;
|
||||
}
|
||||
.link-disguise:hover {
|
||||
color: inherit;
|
||||
}
|
||||
.clear-margin {
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.clear-margin-sm {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.fs-lg {
|
||||
font-size: 1.33333333em;
|
||||
line-height: .75em;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
.fs-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
.fs-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
.fs-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
.btn-circle-sm {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
outline: none !important;
|
||||
}
|
||||
body {
|
||||
font-family: 'Lato';
|
||||
background: #f0f0f0;
|
||||
color: #333333;
|
||||
}
|
||||
.main {
|
||||
padding: 5px;
|
||||
}
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
min-height: 300px;
|
||||
padding: 10px;
|
||||
}
|
||||
.card-nested {
|
||||
min-height: 0;
|
||||
margin-bottom: 10px;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
.card-nested:before,
|
||||
.card-nested:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.card-nested:after {
|
||||
clear: both;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.card-nested {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
.background-card {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.card-wrapper {
|
||||
padding: 5px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.card-wrapper {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
.background-details .detail {
|
||||
display: table;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.background-details .detail .icon {
|
||||
min-width: 45px;
|
||||
max-width: 45px;
|
||||
text-align: center;
|
||||
}
|
||||
.background-details .detail .info {
|
||||
width: 100%;
|
||||
}
|
||||
.background-details .detail .title,
|
||||
.background-details .detail .icon {
|
||||
color: #707070;
|
||||
}
|
||||
.background-details .detail .mobile-title {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.background-details .detail .mobile-title {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.background-details .detail .icon,
|
||||
.background-details .detail .info {
|
||||
display: table-cell;
|
||||
padding: 0 10px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.background-details .detail {
|
||||
display: block;
|
||||
}
|
||||
.background-details .detail .icon {
|
||||
max-width: inherit;
|
||||
min-width: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
.background-details .detail .icon,
|
||||
.background-details .detail .info {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.background-details .detail .title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.info .content.has-sidebar {
|
||||
width: 80%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
border-right: 1px solid #cdcdcd;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.info .content.has-sidebar {
|
||||
width: 100%;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.info .content.has-sidebar {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
.info .sidebar {
|
||||
margin-left: 80%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
ul {
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
.current-event {
|
||||
font-size: 8px;
|
||||
color: #5ACE24;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 4px;
|
||||
left: -10px;
|
||||
}
|
||||
/*
|
||||
Credits: http://codyhouse.co/demo/smart-fixed-navigation/index.html
|
||||
*/
|
||||
.floating-nav-trigger {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
-o-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
font-size: 1.5em;
|
||||
color: #357ebd;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.floating-nav-trigger > [class^="fa-"],
|
||||
.floating-nav-trigger [class*=" fa-"],
|
||||
.floating-nav-trigger > .close-icon {
|
||||
line-height: 50px;
|
||||
}
|
||||
.floating-nav-trigger .close-icon {
|
||||
display: none;
|
||||
}
|
||||
.floating-nav-trigger:hover {
|
||||
color: #1f496e;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.floating-nav-trigger.is-open {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.floating-nav-trigger.is-open .close-icon {
|
||||
display: inherit;
|
||||
}
|
||||
.floating-nav-trigger.is-open .fa-bars {
|
||||
display: none;
|
||||
}
|
||||
.floating-nav-trigger.is-open:hover {
|
||||
background-color: white;
|
||||
}
|
||||
.floating-nav {
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
-moz-transform-origin: 100% 100%;
|
||||
-ms-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-transition: transform 0.3s, visibility 0s 0.3s;
|
||||
-o-transition: transform 0.3s, visibility 0s 0.3s;
|
||||
transition: transform 0.3s, visibility 0s 0.3s;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
background-color: white;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
.floating-nav ul {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
}
|
||||
.floating-nav ul li {
|
||||
border-bottom: 1px solid #eff2f6;
|
||||
}
|
||||
.floating-nav ul li a {
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
color: #357ebd;
|
||||
display: block;
|
||||
}
|
||||
.floating-nav ul li a:hover {
|
||||
color: #1f496e;
|
||||
}
|
||||
.floating-nav ul li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.floating-nav.is-visible {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: transform 0.3s, visibility 0s 0s;
|
||||
-o-transition: transform 0.3s, visibility 0s 0s;
|
||||
transition: transform 0.3s, visibility 0s 0s;
|
||||
visibility: visible;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.profile-card-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.profile-pic {
|
||||
padding: 20px 0;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.profile-pic {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
.profile-pic img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.name {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contact-details {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.contact-details .detail {
|
||||
display: table;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.contact-details .detail .icon {
|
||||
padding: 0 10px;
|
||||
color: #707070;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.contact-details .detail .icon {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
.contact-details .detail .info {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.contact-details .detail .icon,
|
||||
.contact-details .detail .info {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contact-details .detail {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.contact-details .detail {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.contact-details .detail .icon,
|
||||
.contact-details .detail .info {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) and (min-width: 768px) {
|
||||
.contact-details .detail {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.social-links {
|
||||
line-height: 2.5;
|
||||
}
|
||||
.social-link {
|
||||
margin-left: 5px;
|
||||
min-width: 35px;
|
||||
display: inline-block;
|
||||
}
|
||||
.social-link:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.social-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-github {
|
||||
color: #454545;
|
||||
}
|
||||
.link-github:hover,
|
||||
.link-github:focus {
|
||||
text-decoration: none;
|
||||
color: #2b2b2b;
|
||||
}
|
||||
.link-twitter {
|
||||
color: #33ccff;
|
||||
}
|
||||
.link-twitter:hover,
|
||||
.link-twitter:focus {
|
||||
text-decoration: none;
|
||||
color: #00bfff;
|
||||
}
|
||||
.link-blog {
|
||||
color: #f36f24;
|
||||
}
|
||||
.link-blog:hover,
|
||||
.link-blog:focus {
|
||||
text-decoration: none;
|
||||
color: #d8560c;
|
||||
}
|
||||
.link-linkedin {
|
||||
color: #007bb6;
|
||||
}
|
||||
.link-linkedin:hover,
|
||||
.link-linkedin:focus {
|
||||
text-decoration: none;
|
||||
color: #005983;
|
||||
}
|
||||
.link-skype {
|
||||
color: #12a5f4;
|
||||
}
|
||||
.link-skype:hover,
|
||||
.link-skype:focus {
|
||||
text-decoration: none;
|
||||
color: #0986ca;
|
||||
}
|
||||
.link-instagram {
|
||||
color: #3f729b;
|
||||
}
|
||||
.link-instagram:hover,
|
||||
.link-instagram:focus {
|
||||
text-decoration: none;
|
||||
color: #305777;
|
||||
}
|
||||
.link-stackoverflow {
|
||||
color: #8e8e92;
|
||||
}
|
||||
.link-stackoverflow:hover,
|
||||
.link-stackoverflow:focus {
|
||||
text-decoration: none;
|
||||
color: #747479;
|
||||
}
|
||||
.link-stackexchange {
|
||||
color: #62b0df;
|
||||
}
|
||||
.link-stackexchange:hover,
|
||||
.link-stackexchange:focus {
|
||||
text-decoration: none;
|
||||
color: #389bd6;
|
||||
}
|
||||
.link-lastfm {
|
||||
color: #d12127;
|
||||
}
|
||||
.link-lastfm:hover,
|
||||
.link-lastfm:focus {
|
||||
text-decoration: none;
|
||||
color: #a51a1f;
|
||||
}
|
||||
.link-soundcloud {
|
||||
color: #e8822d;
|
||||
}
|
||||
.link-soundcloud:hover,
|
||||
.link-soundcloud:focus {
|
||||
text-decoration: none;
|
||||
color: #cc6916;
|
||||
}
|
||||
.link-googleplus {
|
||||
color: #dd4b39;
|
||||
}
|
||||
.link-googleplus:hover,
|
||||
.link-googleplus:focus {
|
||||
text-decoration: none;
|
||||
color: #c23321;
|
||||
}
|
||||
.link-youtube {
|
||||
color: #dd4b39;
|
||||
}
|
||||
.link-youtube:hover,
|
||||
.link-youtube:focus {
|
||||
text-decoration: none;
|
||||
color: #c23321;
|
||||
}
|
||||
.link-pinterest {
|
||||
color: #bd091f;
|
||||
}
|
||||
.link-pinterest:hover,
|
||||
.link-pinterest:focus {
|
||||
text-decoration: none;
|
||||
color: #8c0717;
|
||||
}
|
||||
.link-gratipay {
|
||||
color: #663300;
|
||||
}
|
||||
.link-gratipay:hover,
|
||||
.link-gratipay:focus {
|
||||
text-decoration: none;
|
||||
color: #331a00;
|
||||
}
|
||||
.link-vimeo {
|
||||
color: #17b3e8;
|
||||
}
|
||||
.link-vimeo:hover,
|
||||
.link-vimeo:focus {
|
||||
text-decoration: none;
|
||||
color: #128fba;
|
||||
}
|
||||
.link-behance {
|
||||
color: #2c98cf;
|
||||
}
|
||||
.link-behance:hover,
|
||||
.link-behance:focus {
|
||||
text-decoration: none;
|
||||
color: #2379a5;
|
||||
}
|
||||
.link-codepen {
|
||||
color: #1c1c1c;
|
||||
}
|
||||
.link-codepen:hover,
|
||||
.link-codepen:focus {
|
||||
text-decoration: none;
|
||||
color: #020202;
|
||||
}
|
||||
.link-foursquare {
|
||||
color: #fa4778;
|
||||
}
|
||||
.link-foursquare:hover,
|
||||
.link-foursquare:focus {
|
||||
text-decoration: none;
|
||||
color: #f91554;
|
||||
}
|
||||
.link-reddit {
|
||||
color: #545454;
|
||||
}
|
||||
.link-reddit:hover,
|
||||
.link-reddit:focus {
|
||||
text-decoration: none;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
.link-spotify {
|
||||
color: #acd200;
|
||||
}
|
||||
.link-spotify:hover,
|
||||
.link-spotify:focus {
|
||||
text-decoration: none;
|
||||
color: #829f00;
|
||||
}
|
||||
.link-tumblr {
|
||||
color: #2d4661;
|
||||
}
|
||||
.link-tumblr:hover,
|
||||
.link-tumblr:focus {
|
||||
text-decoration: none;
|
||||
color: #1d2d3e;
|
||||
}
|
||||
.link-dribbble {
|
||||
color: #ce366f;
|
||||
}
|
||||
.link-dribbble:hover,
|
||||
.link-dribbble:focus {
|
||||
text-decoration: none;
|
||||
color: #a82959;
|
||||
}
|
||||
.link-facebook {
|
||||
color: #4b6daa;
|
||||
}
|
||||
.link-facebook:hover,
|
||||
.link-facebook:focus {
|
||||
text-decoration: none;
|
||||
color: #3b5687;
|
||||
}
|
||||
.link-angellist {
|
||||
color: #000000;
|
||||
}
|
||||
.link-angellist:hover,
|
||||
.link-angellist:focus {
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
}
|
||||
.link-bitbucket {
|
||||
color: #205081;
|
||||
}
|
||||
.link-bitbucket:hover,
|
||||
.link-bitbucket:focus {
|
||||
text-decoration: none;
|
||||
color: #163758;
|
||||
}
|
||||
.link-hackernews {
|
||||
color: #ff6600;
|
||||
}
|
||||
.link-hackernews:hover,
|
||||
.link-hackernews:focus {
|
||||
text-decoration: none;
|
||||
color: #cc5200;
|
||||
}
|
||||
.link-exercism {
|
||||
color: #d81d4e;
|
||||
}
|
||||
.link-exercism:hover,
|
||||
.link-exercism:focus {
|
||||
text-decoration: none;
|
||||
color: #ab173e;
|
||||
}
|
||||
.card-skills {
|
||||
position: relative;
|
||||
}
|
||||
.skill-level {
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.skill-level .skill-progress {
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
-webkit-transition: height 1s ease;
|
||||
}
|
||||
.skill-level .skill-progress.beginner {
|
||||
height: 50%;
|
||||
background: #e74c3c;
|
||||
}
|
||||
.skill-level .skill-progress.intermediate {
|
||||
height: 70%;
|
||||
background: #f1c40f;
|
||||
}
|
||||
.skill-level .skill-progress.advanced {
|
||||
height: 80%;
|
||||
background: #428bca;
|
||||
}
|
||||
.skill-level .skill-progress.master {
|
||||
height: 95%;
|
||||
background: #5cb85c;
|
||||
}
|
||||
.skill-info {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.skill-info {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.quote {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
a[href]:after {
|
||||
content: none !important;
|
||||
}
|
||||
.profile-card {
|
||||
text-align: center;
|
||||
}
|
||||
.profile-pic {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.profile-pic img {
|
||||
border-radius: 0;
|
||||
}
|
||||
.name-and-profession {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.contact-details .detail {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 25%;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
.floating-nav,
|
||||
.floating-nav-trigger {
|
||||
display: none;
|
||||
}
|
||||
.pagebreak {
|
||||
page-break-before: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/partials/volunteer.html
Normal file
22
src/partials/volunteer.html
Normal file
@ -0,0 +1,22 @@
|
||||
{{#if r.service}}
|
||||
<div id="volunteer-work" class="detail">
|
||||
<div class="icon"><i class="fs-lg fa fa-child"></i><span class="mobile-title">Volunteer Work</span></div>
|
||||
<div class="info">
|
||||
<h4 class="title text-uppercase">Volunteer Work</h4>
|
||||
<div class="content">
|
||||
<ul class="list-unstyled">
|
||||
{{#each r.service.history}}
|
||||
<li class="card card-nested">
|
||||
<div class="content">
|
||||
<p class="clear-margin relative"><strong>{{position}}, </strong><a href="{{url}}" target="_blank">{{organization}}</a></p>
|
||||
{{> date}}
|
||||
{{{summary}}}
|
||||
{{> highlights}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
10
src/template-html.html
Normal file
10
src/template-html.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{> head}}
|
||||
</head>
|
||||
<body itemscope="itemscope" itemtype="http://schema.org/Person">
|
||||
{{> body}}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user