ok sampler
This commit is contained in:
bel
588
json-resume/resume.tan-responsive.html
Normal file
588
json-resume/resume.tan-responsive.html
Normal file
@@ -0,0 +1,588 @@
|
||||
<!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://soundcloud.example.com/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/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>
|
||||
Reference in New Issue
Block a user