jsonresume-theme-caffeine
Version:
Caffeine theme for JSON Resume
552 lines (503 loc) • 19 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
<title>Richard Hendriks</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* Utils */
/*----- Colors -----*/
/*----- Fonts -----*/
/*----- Dimensions and sizes -----*/
/* Base */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 300;
src: local('Josefin Sans Light'), local('JosefinSans-Light'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04zwV_pQ1T3xN3K1c3sB361us.ttf) format('truetype');
}
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 700;
src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z306qf9KHRHwsVx7iw5MXmY.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 300;
src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v11/2HG_tEPiQ4Z6795cGfdivKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/LqowQDslGv4DmUBAfWa2Vw.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYEKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
body {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
background: #f8f8f8;
margin: 50px 0 100px;
letter-spacing: .3px;
color: #39424B; }
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
margin: 0; }
h1 {
font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: 1px; }
h2 {
font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 16px;
letter-spacing: .5px; }
h3 {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 14px;
letter-spacing: .4px; }
h3.bold {
font-weight: 700; }
h4 {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 12px; }
h4.bold {
font-weight: 700; }
h5 {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 11px; }
h5.italic {
font-style: italic; }
h6 {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 10px; }
a {
color: inherit;
text-decoration: inherit; }
a:hover {
color: #2895F1; }
a .fa-external-link {
font-size: 10px;
vertical-align: text-top; }
p,
li {
font-size: 11px; }
blockquote {
font-size: 11px;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
font-style: italic;
margin: 10px 25px; }
em {
color: #999; }
ul {
margin: 10px 0 0;
-webkit-padding-start: 25px; }
ul li {
padding-left: 10px; }
ul.minimal {
list-style: none;
padding: 0; }
ul.minimal li {
margin-bottom: 3px;
padding-left: 0; }
ul.two-column {
-webkit-column-count: 2;
-webkit-column-gap: 28px;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 28px;
column-gap: 28px; }
ul.two-column li {
padding-left: 0; }
@page {
size: A4; }
.container {
padding-top: 20px; }
.keyline {
width: 45px;
margin: 8px 0 10px;
border-top: 1px solid #56817A; }
.pull-left {
float: left; }
.pull-right {
float: right; }
.clearfix:after {
content: "";
display: table;
clear: both; }
.profile-pic {
margin-top: -5px;
margin-right: 18px; }
.profile-pic img {
height: 52px;
width: 52px;
border-radius: 50%;
border: 2px solid #56817A; }
.summary {
margin: 5px 0 5px; }
/* Layouts */
.page {
background: white;
width: 612px;
min-height: 792px;
display: block;
margin: 0 auto;
border-top: 10px solid #56817A;
padding: 36px 22px 30px 34px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.page:after {
content: "";
display: table;
clear: both; }
.left-column {
float: left;
width: 160px;
margin-right: 20px;
word-wrap: break-word; }
.right-column {
width: auto;
overflow: hidden; }
.item {
margin-bottom: 15px; }
.item:last-child {
margin-bottom: 0; }
@media print {
body {
margin: 0; }
.page {
width: 100%;
height: 100%;
margin: 0;
padding: 36px 0 30px;
box-shadow: none; }
.page .resume-header,
.page .resume-content {
padding: 0 22px 0 34px; }
.container {
page-break-inside: avoid; }
.work-container .item {
page-break-inside: avoid; }
.fa-external-link {
display: none; } }
/* Components */
.info-tag-container {
margin-bottom: 5px; }
.info-tag-container .fa {
font-size: 14px;
width: 12px;
margin-right: 5px;
text-align: center;
vertical-align: middle; }
.info-tag-container .fa.fa-map-marker {
font-size: 16px; }
.info-tag-container .fa.fa-mobile {
font-size: 18px; }
.info-tag-container .fa.fa-envelope-o {
font-size: 12px; }
.info-tag-container .fa.fa-desktop {
font-size: 11px; }
.info-tag-container .fa.fa-external-link {
width: auto;
font-size: inherit;
vertical-align: text-top; }
.info-tag-container .info-text {
font-size: 9px;
display: inline-block;
vertical-align: middle;
width: 139px; }
.references-container .fa {
font-size: 14px; }
</style>
</head>
<body>
<main id="resume" class="page">
<header class="resume-header clearfix">
<div class="profile-header pull-left">
<h1>Richard Hendriks</h1>
<h2>Programmer</h2>
</div>
<div class="profile-pic pull-right">
<img src="http://www.piedpiper.com/app/themes/pied-piper/dist/images/richard.png" alt="profile-pic">
</div>
</header>
<div class="resume-content">
<aside class="left-column">
<div class="container about-container">
<div class="title">
<h3>About</h3>
<div class="keyline"></div>
</div>
<div class="info-tag-container">
<i class="fa fa-map-marker"></i>
<h6 class="info-text">Newell Road<br/>Palo Alto, CA 94303</h6>
</div>
<div class="info-tag-container">
<i class="fa fa-envelope-o"></i>
<h6 class="info-text">richard.hendriks @piedpiper.com</h6>
</div>
<div class="info-tag-container">
<i class="fa fa-mobile"></i>
<h6 class="info-text">(912) 555-4321</h6>
</div>
<div class="info-tag-container">
<i class="fa fa-desktop"></i>
<h6 class="info-text">
<a href="http://piedpiper.com" target="_blank">
piedpiper.com <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h6>
</div>
<div class="info-tag-container">
<i class="fa fa-twitter"></i>
<h6 class="info-text">
<a href="https://twitter.com/siliconHBO" target="_blank">
siliconHBO <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h6>
</div> <div class="info-tag-container">
<i class="fa fa-facebook"></i>
<h6 class="info-text">
<a href="https://www.facebook.com/SiliconHBO" target="_blank">
SiliconHBO <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h6>
</div> <div class="info-tag-container">
<i class="fa fa-instagram"></i>
<h6 class="info-text">
<a href="https://www.instagram.com/siliconhbo/" target="_blank">
siliconhbo <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h6>
</div></section>
<div class="skills-container">
<section class="container">
<div class="title">
<h3>Web Development</h3>
<div class="keyline"></div>
</div> <h4 class="bold">Master</h4>
<ul class="minimal">
<li><h6>HTML</h6></li>
<li><h6>CSS</h6></li>
<li><h6>Javascript</h6></li>
</ul>
</section>
<section class="container">
<div class="title">
<h3>Compression</h3>
<div class="keyline"></div>
</div> <h4 class="bold">Master</h4>
<ul class="minimal">
<li><h6>Mpeg</h6></li>
<li><h6>MP4</h6></li>
<li><h6>GIF</h6></li>
</ul>
</section>
</div>
<div class="container languages-container">
<div class="title">
<h3>Languages</h3>
<div class="keyline"></div>
</div>
<ul class="minimal">
<li>
<h6>English <em>(Native speaker)</em></h6>
</li>
</ul>
</div>
<div class="container interests-container">
<div class="title">
<h3>Interests</h3>
<div class="keyline"></div>
</div>
<section class="item">
<h4 class="bold">Wildlife</h4>
<ul class="minimal">
<li>Ferrets</li>
<li>Unicorns</li>
</ul>
</section>
</div>
</aside>
<div class="right-column">
<div class="container summary-container">
<div class="title">
<h3>Summary</h3>
<div class="keyline"></div>
</div> <p class="summary">
Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinals!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!
</p>
</div>
<div class="container work-container">
<div class="title">
<h3>Experience</h3>
<div class="keyline"></div>
</div>
<section class="item">
<div class="section-header clearfix">
<h3 class="bold pull-left">
<a href="http://piedpiper.com" target="_blank">
Pied Piper <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h3>
<h5 class="italic pull-right">
<span class="startDate">04/2014</span>
<span class="endDate"> - Present</span>
</h5>
</div>
<h4>CEO/President</h4>
<p class="summary">Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
<ul>
<li>Build an algorithm for artist to detect if their music was violating copy right infringement laws</li>
<li>Successfully won Techcrunch Disrupt</li>
<li>Optimized an algorithm that holds the current world record for Weisman Scores</li>
</ul>
</section>
<section class="item">
<div class="section-header clearfix">
<h3 class="bold pull-left">
<a href="http://www.hooli.xyz/" target="_blank">
Hooli <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h3>
<h5 class="italic pull-right">
<span class="startDate">01/2013</span>
<span class="endDate"> - 04/2014</span>
</h5>
</div>
<h4>Software Engineer</h4>
<p class="summary">Worked on optimizing the backend algorithms for Hooli</p>
</section>
</div>
<div class="container volunteer-container">
<div class="title">
<h3>Volunteer</h3>
<div class="keyline"></div>
</div>
<section class="item">
<div class="section-header clearfix">
<h3 class="bold pull-left">
<a href="http://coderdojo.com/" target="_blank">
CoderDojo <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h3>
<h5 class="italic pull-right">
<span class="startDate">01/2012</span>
<span class="endDate"> - 01/2013</span>
</h5>
</div> <h5>Teacher</h5>
<p class="summary">Global movement of free coding clubs for young people.</p>
<ul>
<li>Awarded 'Teacher of the Month'</li>
</ul>
</section>
</div>
<div class="container education-container">
<div class="title">
<h3>Education</h3>
<div class="keyline"></div>
</div>
<section class="item">
<div class="section-header clearfix">
<h3 class="bold pull-left">
Stanford
</h3>
<h5 class="italic pull-right">
<span class="startDate">06/2011</span>
<span class="endDate"> - 01/2014</span>
</h5>
</div>
<h4>B.S Computer Science</h4>
<h5>GPA 4.0</h5>
<ul class="two-column">
<li>DB1101 - Basic SQL</li>
<li>CS2011 - Java Introduction</li>
</ul>
</section>
</div>
<div class="container awards-container">
<div class="title">
<h3>Awards</h3>
<div class="keyline"></div>
</div>
<section class="item">
<div class="section-header clearfix">
<h3 class="bold pull-left">
Digital Compression Pioneer Award
</h3>
<h5 class="italic pull-right">
</h5>
</div>
<h5 class="awarder">Techcrunch</h5>
<p class="summary">There is no spoon.</p>
</section>
</div>
<div class="container publications-container">
<div class="title">
<h3>Publications</h3>
<div class="keyline"></div>
</div>
<section class="item">
<div class="section-header clearfix">
<h3 class="bold pull-left">
<a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)" target="_blank">
Video compression for 3d media <i class="fa fa-external-link" aria-hidden="true"></i>
</a>
</h3>
<h5 class="italic pull-right">
10/2014
</h5>
</div>
<h5 class="awarder">Hooli</h5>
<p class="summary">Innovative middle-out compression algorithm that changes the way we store data.</p>
</section>
</div>
<div class="container references-container">
<div class="title">
<h3>References</h3>
<div class="keyline"></div>
</div>
<section class="item clearfix">
<i class="fa fa-quote-left pull-left" aria-hidden="true"></i>
<blockquote>
It is my pleasure to recommend Richard. That is all.
</blockquote>
<h5 class="pull-right"> — Erlich Bachman</h5>
</section>
</div>
</div>
</div>
</main>
</body>
</html>