moved theme sampling to json-resume/themes
This commit is contained in:
Bel LaPointe
620
json-resume/themes/wraypro.html
Normal file
620
json-resume/themes/wraypro.html
Normal file
@@ -0,0 +1,620 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
|
||||
|
||||
<title>Bree LaPointe</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
|
||||
|
||||
<style type="text/css">
|
||||
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Playfair+Display+SC|Open+Sans+Condensed:300,300italic,700);
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-family: 'Playfair Display', serif;
|
||||
margin: 0 0 80px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1c89ff;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #1c89ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p+p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0.2em 0;
|
||||
font-family: 'Playfair Display SC', serif;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 6em;
|
||||
margin: 0.07em 0;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
font-size: 16px;
|
||||
font-family: 'Playfair Display', serif;
|
||||
/* color: #95a5a6;*/
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.8;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li:before {
|
||||
content: "\f111";
|
||||
float: left;
|
||||
font: 7px Font Awesome\ 5 Free;
|
||||
font-weight: 900;
|
||||
margin-top: 11px;
|
||||
margin-left: -16px;
|
||||
opacity: .1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #e7e9ec;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #95a5a6;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h4 span:first-child {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 750px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.column.is-6 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.column.is-12 h4 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.column.is-12 + .column.is-12 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#header {
|
||||
/*background: #f4f6f6;*/
|
||||
box-sizing: border-box;
|
||||
border-bottom: rgba(0,0,0,0.03) solid 1px;
|
||||
padding: 40px 0;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
|
||||
#content h3 {
|
||||
color: #000;
|
||||
font-size: 26px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#content aside {
|
||||
text-align: right;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
/*#profiles .network {
|
||||
text-transform: capitalize;
|
||||
}*/
|
||||
|
||||
#work .position,
|
||||
#volunteer .position {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#education .area {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#education .area:before {
|
||||
content: "\f19c";
|
||||
font: 14px Font Awesome\ 5 Free;
|
||||
font-weight: 900;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
#education .studyType {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
#awards .summary,
|
||||
#publications .summary {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#publications .website a:before {
|
||||
content: attr(href);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.strike-through {
|
||||
border-top: 1px solid #f4f6f6;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: -2px;
|
||||
position: relative;
|
||||
}
|
||||
.strike-through span,
|
||||
.strike-through a {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
}
|
||||
.strike-through span:first-child {
|
||||
padding-right: 20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
.strike-through span+span {
|
||||
font-size: 14px;
|
||||
margin-top: -10px;
|
||||
padding-left: 20px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.title-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.column.is-6:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#content aside {
|
||||
margin: 30px 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#publications .website a:before {
|
||||
content: "View publication";
|
||||
}
|
||||
|
||||
.column.title-container {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.column.title-container + .column {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
.date {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.strike-through span:first-child {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.strike-through span {
|
||||
display: block;
|
||||
}
|
||||
#header {
|
||||
margin-bottom: 10px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
#actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.columns.piece-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.piece {
|
||||
/*page-break-before: always;
|
||||
page-break-after: always;*/
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
pre, blockquote {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header id="header">
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1>
|
||||
Bree LaPointe
|
||||
</h1>
|
||||
<h2>
|
||||
Programmer
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="content" class="container">
|
||||
|
||||
<section id="contact" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Contact</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<strong>Email</strong>
|
||||
<div class="email">contact@blapointe.com</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<strong>Phone</strong>
|
||||
<div class="phone">(912) 555-4321</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="about" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>About</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<p>Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) 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>
|
||||
</section>
|
||||
<section id="profiles" class="columns is-multiline">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Profiles</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<strong class="network">
|
||||
Twitter
|
||||
</strong>
|
||||
<div class="username">
|
||||
neutralthoughts
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<strong class="network">
|
||||
SoundCloud
|
||||
</strong>
|
||||
<div class="username">
|
||||
<div class="url">
|
||||
<a href="https://soundcloud.example.com/dandymusicnl" target="_blank" rel="noopener">dandymusicnl</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Work</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-12 piece">
|
||||
<h4 class="strike-through">
|
||||
<span></span>
|
||||
<span class="date">
|
||||
2013-12-01 — 2014-12-01
|
||||
</span>
|
||||
</h4>
|
||||
<div class="columns is-gapless is-marginless is-mobile">
|
||||
<div class="column is-6">
|
||||
<div class="position">
|
||||
CEO/President
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<p>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>
|
||||
</div>
|
||||
<h4>Highlights</h4>
|
||||
<ul class="highlights">
|
||||
<li class="bullet">Build an algorithm for artist to detect if their music was violating copy right infringement laws</li>
|
||||
<li class="bullet">Successfully won Techcrunch Disrupt</li>
|
||||
<li class="bullet">Optimized an algorithm that holds the current world record for Weisman Scores</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="volunteer" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Community</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-12 piece">
|
||||
<h4 class="strike-through">
|
||||
<span>CoderDojo</span>
|
||||
<span class="date">
|
||||
2012-01-01 — 2013-01-01
|
||||
</span>
|
||||
</h4>
|
||||
<div class="columns is-gapless is-marginless is-mobile">
|
||||
<div class="column is-6">
|
||||
<div class="position">
|
||||
Teacher
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<p>Global movement of free coding clubs for young people.</p>
|
||||
</div>
|
||||
<h4>Highlights</h4>
|
||||
<ul class="highlights">
|
||||
<li class="bullet">Awarded 'Teacher of the Month'</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="education" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Education</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-12 piece">
|
||||
<h4 class="strike-through">
|
||||
<span>University of Oklahoma</span>
|
||||
<span class="date">
|
||||
2011-06-01 — 2014-01-01
|
||||
</span>
|
||||
</h4>
|
||||
<div class="area">
|
||||
Information Technology
|
||||
</div>
|
||||
<div class="studyType">
|
||||
Bachelor
|
||||
</div>
|
||||
<h4>Courses</h4>
|
||||
<ul class="courses">
|
||||
<li>DB1101 - Basic SQL</li>
|
||||
<li>CS2011 - Java Introduction</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="awards" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Awards</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-12 piece">
|
||||
<h4 class="strike-through">
|
||||
<span>Digital Compression Pioneer Award</span>
|
||||
</h4>
|
||||
<div class="columns is-gapless is-marginless is-mobile">
|
||||
<div class="column is-6">
|
||||
<div class="awarder">
|
||||
<em>by</em>
|
||||
<strong>Techcrunch</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="date has-text-right">
|
||||
<em>Awarded</em>
|
||||
2014-11-01
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
There is no spoon.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="publications" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Publications</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-12 piece">
|
||||
<h4 class="strike-through">
|
||||
<span>Video compression for 3d media</span>
|
||||
<span class="date">
|
||||
2014-10-01
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="columns is-gapless is-marginless is-mobile">
|
||||
<div class="column is-6">
|
||||
<div class="publisher">
|
||||
<em>Published by</em>
|
||||
<strong>Hooli</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<p>Innovative middle-out compression algorithm that changes the way we store data.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="skills" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Skills</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-6 piece">
|
||||
<div class="name">
|
||||
<h4>Web Development</h4>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Javascript</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column is-6 piece">
|
||||
<div class="name">
|
||||
<h4>Compression</h4>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li>Mpeg</li>
|
||||
<li>MP4</li>
|
||||
<li>GIF</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="languages" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Languages</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-6 piece">
|
||||
<div class="language">
|
||||
<strong>English</strong>
|
||||
</div>
|
||||
<div class="fluency">
|
||||
Native speaker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="interests" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>Interests</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6 piece">
|
||||
<div class="name">
|
||||
<h4>Wildlife</h4>
|
||||
</div>
|
||||
<ul class="keywords">
|
||||
<li>Ferrets</li>
|
||||
<li>Unicorns</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="references" class="columns">
|
||||
<aside class="column is-3 title-container">
|
||||
<h3>References</h3>
|
||||
</aside>
|
||||
<div class="column is-9">
|
||||
<div class="columns is-multiline piece-container">
|
||||
<div class="column is-12 piece">
|
||||
<blockquote class="reference">
|
||||
<p>It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.</p>
|
||||
<p class="name">
|
||||
<strong>— Erlich Bachman</strong>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user