resume/json-resume/themes/tan-responsive.html

589 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resume of Bree LaPointe</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300' rel='stylesheet' type='text/css'>
<style type="text/css">
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
html, body {background: #181818; font-family: 'Lato', helvetica, arial, sans-serif; font-size: 16px; color: #222;}
.clear {clear: both;}
p {
font-size: 1em;
line-height: 1.4em;
margin-bottom: 20px;
color: #444;
}
#cv {
width: 90%;
max-width: 1000px;
background: #f3f3f3;
margin: 30px auto;
}
.mainDetails {
padding: 25px 35px;
border-bottom: 2px solid #cf8a05;
background: #ededed;
}
#name h1 {
font-size: 3.3em;
font-weight: 700;
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
margin-bottom: -6px;
}
#name h2 {
font-size: 2.6em;
margin-left: 2px;
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}
#mainArea {
padding: 0 40px;
}
#headshot {
width: 20%;
float: left;
margin-right: 30px;
}
#headshot img {
width: 100%;
height: auto;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#name {
float: left;
}
#contactDetails {
float: right;
width: 38%;
}
#contactDetails ul {
list-style-type: none;
font-size: 0.9em;
margin-top: 2px;
}
#contactDetails ul li {
margin-bottom: 3px;
color: #444;
}
#contactDetails ul li a, a[href^=tel] {
color: #444;
text-decoration: none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#contactDetails ul li a:hover {
color: #cf8a05;
}
section {
border-top: 1px solid #dedede;
padding: 20px 0 0;
}
section:first-child {
border-top: 0;
}
section:last-child {
padding: 20px 0 10px;
}
.sectionTitle {
float: left;
width: 25%;
}
.sectionContent {
float: right;
width: 72.5%;
}
.sectionTitle h1 {
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 1.5em;
color: #cf8a05;
}
.sectionContent h2 {
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
font-size: 1.5em;
margin-bottom: -2px;
}
.subDetails {
font-size: 0.8em;
font-style: italic;
margin-bottom: 3px;
}
.keySkills {
list-style-type: none;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
margin-bottom: 20px;
font-size: 1em;
color: #444;
}
.keySkills ul li {
margin-bottom: 3px;
}
.contact-item{
width: 100%;
float: left;
}
.contact-item .icon{
padding: 10px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #32475c;
background: #eee;
}
.contact-item:last-child .icon{
border-bottom: none;
}
.contact-item .title{
width: 80%;
width: calc(100% - 55px);
font-weight: 700;
opacity: 0.9;
}
.contact-item .title.only{
margin-top: 10px;
}
.contact-item .description{
width: 80%;
width: calc(100% - 55px);
color: #334960;
}
.badge{
color: #fff;
display: inline-block;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px 10px;
background: #32475C;
position: relative;
font-size: 1em;
font-weight: bold;
font-style: normal;
}
@media all and (min-width: 602px) and (max-width: 800px) {
#headshot {
display: none;
}
.keySkills {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
}
}
@media all and (max-width: 601px) {
#cv {
width: 95%;
margin: 10px auto;
min-width: 280px;
}
#headshot {
display: none;
}
#name, #contactDetails {
float: none;
width: 100%;
text-align: center;
}
.sectionTitle, .sectionContent {
float: none;
width: 100%;
}
.sectionTitle {
margin-left: -2px;
font-size: 1.25em;
}
.keySkills {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
}
}
@media all and (max-width: 480px) {
.mainDetails {
padding: 15px 15px;
}
section {
padding: 15px 0 0;
}
#mainArea {
padding: 0 25px;
}
.keySkills {
-moz-column-count:1;
-webkit-column-count:1;
column-count:1;
}
#name h1 {
line-height: .8em;
margin-bottom: 4px;
}
}
@media print {
#cv {
width: 100%;
}
html, body {
width:100%;
height:auto;
margin:inherit;
padding:0;
}
a[href]:after {
content: none !important;
}
}
@-webkit-keyframes reset {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes reset {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fade-in {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes reset {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.instaFade {
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: ease-in;
animation-name: reset, fade-in;
animation-duration: 1.5s;
animation-timing-function: ease-in;
}
.quickFade {
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: 2.5s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 2.5s;
-moz-animation-timing-function: ease-in;
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
}
.delayOne {
-webkit-animation-delay: 0, .5s;
-moz-animation-delay: 0, .5s;
animation-delay: 0, .5s;
}
.delayTwo {
-webkit-animation-delay: 0, 1s;
-moz-animation-delay: 0, 1s;
animation-delay: 0, 1s;
}
.delayThree {
-webkit-animation-delay: 0, 1.5s;
-moz-animation-delay: 0, 1.5s;
animation-delay: 0, 1.5s;
}
.delayFour {
-webkit-animation-delay: 0, 2s;
-moz-animation-delay: 0, 2s;
animation-delay: 0, 2s;
}
.delayFive {
-webkit-animation-delay: 0, 2.5s;
-moz-animation-delay: 0, 2.5s;
animation-delay: 0, 2.5s;
}
</style>
</head>
<body id="top">
<div id="cv" class="instaFade">
<div class="mainDetails">
<div id="headshot" class="quickFade">
<img src="" alt="avatar" />
</div>
<div id="name">
<h1 class="quickFade delayTwo">Bree LaPointe</h1>
<h2 class="quickFade delayThree">Programmer</h2>
</div>
<div id="contactDetails" class="quickFade delayFour">
<div class="contact-item">
<div class="icon pull-left text-center"><span class="fa fa-map-marker fa-fw"></span></div>
<div class="title pull-right">2712 Broadway St</div>
<div class="title pull-right">San Francisco, California CA 94115 US</div>
</div>
<div class="contact-item">
<div class="icon pull-left text-center"><span class="fa fa-phone fa-fw"></span></div>
<div class="title only pull-right">(912) 555-4321</div>
</div>
<div class="contact-item">
<div class="icon pull-left text-center"><span class="fa fa-envelope fa-fw"></span></div>
<div class="title only pull-right"><a href="mailto:contact@blapointe.com" target="_blank">contact@blapointe.com</a></div>
</div>
<div class="contact-item">
<div class="icon pull-left text-center"><span class="fa fa-twitter fa-fw"></span></div>
<div class="description pull-right"><a href="" target="_blank">neutralthoughts</a></div>
</div>
<div class="contact-item">
<div class="icon pull-left text-center"><span class="fa fa-soundcloud fa-fw"></span></div>
<div class="description pull-right"><a href="https:&#x2F;&#x2F;soundcloud.example.com&#x2F;dandymusicnl" target="_blank">dandymusicnl</a></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="mainArea" class="quickFade delayFive">
<section>
<article>
<div class="sectionTitle">
<h1>About</h1>
</div>
<div class="sectionContent">
<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>
</article>
<div class="clear"></div>
</section>
<section>
<div class="sectionTitle">
<h1><B>WORK EXPERIENCE</B></h1>
</div>
<div class="sectionContent">
<article>
<h2>CEO&#x2F;President at , Palo Alto, CA</h2>
<p class="subDetails">December 2013 December 2014</p>
<ul class="info">
<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>
<br/>
</article>
<br>
</div>
<div class="clear"></div>
</section>
<section>
<div class="sectionTitle">
<h1><B>CERTIFICATIONS</B></h1>
</div>
<div class="sectionContent">
<article>
</article>
<br>
</div>
<div class="clear"></div>
</section>
<section>
<div class="sectionTitle">
<h1><B>PROJECTS</B></h1>
</div>
<div class="sectionContent">
<article>
<h2>Miss Direction</h2>
<p class="subDetails">August 2016 August 2016</p>
<ul class="info">
<li>Won award at AIHacks 2016</li>
<li>Built by all women team of newbie programmers</li>
<li>Using modern technologies such as GoogleMaps, Chrome Extension and Javascript</li>
</ul>
<br/>
</article>
<br>
</div>
<div class="clear"></div>
</section>
<section>
<div class="sectionTitle">
<h1><B>SKILLS</B></h1>
</div>
<div class="sectionContent">
<article>
<div class="info">
<br/><h2>Web Development</h2>
<div class="info">
<span class="skill-level">Master</span>
</div>
<div class="col-sm-offset-1 col-sm-12 subDetails">
<span class= "skill badge">HTML </span>
<span class= "skill badge">CSS </span>
<span class= "skill badge">Javascript </span>
</div>
</div>
</article>
<article>
<div class="info">
<br/><h2>Compression</h2>
<div class="info">
<span class="skill-level">Master</span>
</div>
<div class="col-sm-offset-1 col-sm-12 subDetails">
<span class= "skill badge">Mpeg </span>
<span class= "skill badge">MP4 </span>
<span class= "skill badge">GIF </span>
</div>
</div>
</article>
</div>
<div class="clear"></div>
</section>
<section>
<!-- EDUCATION -->
<div class="sectionTitle">
<h1><B>EDUCATION</B></h1>
</div>
<div class="sectionContent">
<article>
<h2>University of Oklahoma</h2>
<p class="subDetails">Bachelor in Information Technology</p>
<p class="subDetails">2011 - 2014</p>
<div class="subDetails">Courses</div>
<ul class="info">
<li>DB1101 - Basic SQL</li>
<li>CS2011 - Java Introduction</li>
</ul>
</article>
<br>
</div>
<div class="clear" />
</section>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3753241-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>