Skip to content

Instantly share code, notes, and snippets.

@mrtriangle

mrtriangle/index.html

Created April 5, 2016 19:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrtriangle/7b0fa0890468f56a334dd4f9176f7751 to your computer and use it in GitHub Desktop.
Save mrtriangle/7b0fa0890468f56a334dd4f9176f7751 to your computer and use it in GitHub Desktop.
Download ZIP
Mike Peltzer Resume
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Michael Peltzer's Resume</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
body {
font-family: "Lato", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 860px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
p {
padding: 0px 10px 10px;
}
h4 {
margin-left:10px;
}
h1 {
font-weight: 300;
}
.corner {
font-weight: 300;
padding-top:10px;
text-align: right;
}
.container-div {
padding-top: 15px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
#left{
width: 390px;
float: left;
margin-left: 0;
padding-right: 80px;
text-align: left;
}
#right{
width: 390px;
float: left;
margin-left: 0;
text-align: left;
}
.job.highlight {
color:#000000
}
.big_line{
background-color:#484848;
width:900px;
position: center;
height: 2px;
display:block;
}
.line{
width:390px;
height:2px;
display:block;
}
.b1{
background-color:#cccc99;
}
.b2{
background-color:#ffcc99;
}
.b3{
background-color:#9999cc;
}
.b4{
background-color:#d0ebe9;
}
.b5{
background-color:#f9a482;
}
.b6{
background-color:#eb9ca1;
}
.b7{
background-color:#6ECFF6;
}
#left {
float: left;
}
#right {
float: right;
}
</style>
</head>
<body>
<div id="header">
<div id="left"><h1>Michael Peltzer</h1></div>
<div id="right"><p class="corner">714.869.5713<br> mspeltzer[at]gmail.com<br> http://www.github.com/mrtriangle </p>
</div>
<div style="clear:both;"></div>
</div>
<div>
<svg width="960" height="500">
<circle class="little" cx="375" cy="430" r="70"></circle>
<circle class="little" cx="375" cy="430" r="50" fill="white"></circle>
<text x="309" y="433" font-family="Lato" font-size="60" fill="white">-09</text>
<text x="312" y="402" transform="rotate(30 312 404 )" font-family="Lato" font-size="60" fill="white">-10</text>
<text x="329" y="388" transform="rotate(50 340 385)" font-family="Lato" font-size="60" fill="white">-11</text>
<text x="348" y="353" transform="rotate(75 345 365)" font-family="Lato" font-size="60" fill="white">-12</text>
<text x="347" y="355" transform="rotate(105 364 375)" font-family="Lato" font-size="60" fill="white">-13</text>
<text x="332" y="335" transform="rotate(130 364 375)" font-family="Lato" font-size="60" fill="white">-14</text>
<text x="315" y="320" transform="rotate(151 364 375)" font-family="Lato" font-size="60" fill="white">-15</text>
<text x="287" y="323" transform="rotate(180 364 375)" font-family="Lato" font-size="60" fill="white">-16</text>
</svg>
</div>
<div class="container-div">
<div id="left">
<div id="CloudPassage" class="job" >
<div class="line b7"></div>
<h4>CloudPassage Software Engineer 2014-2016</h4>
<p>Angular/Flux Javascript Developer<br>Migrate and rebuild front-end from Backbone.js to Angular/Flux<br>Design, prototype and implement production level data visualization based dashboards</p>
</div>
<div id="TheRealReal" class="job" >
<div class="line b1"></div>
<h4>TheRealReal Software Engineer 2013-2014</h4>
<p>Full Stack Ruby on Rails Developer<br>Own development of Mobile Web experience and functionality<br>Work on Internal Analytics tools for business development</p>
</div>
<div id="Jamlabs" class="job" >
<div class="line b3"></div>
<h4>JAMLabs Dev/Project Manager 2012-2013</h4>
<p>Oversee design and implementation of Rails Backend for iOS app<br>Manage Dev team consisting of one iOS developer and three Rails developers using Campfire and Pivotal Tracker<br></p>
</div>
</div>
<div id="right">
<div id="AMR">
<div class="line b4"></div>
<h4>AMR Marketing(Contractor)2012-2013</h4>
<p>Long term contract with AMR to develop email and web campaigns for D-Link and Toshiba</p>
</div>
<div id="Freelancer">
<div class="line b2"></div>
<h4>Freelancer 2011-Present</h4>
<p>Develop Sentiment Analysis Prototype for Seagate<br>Website design and development as well as
CMS training for various small businesses in Santa Cruz, Ca.</p>
</div>
<div id="Connection">
<div class="line b5"></div>
<h4>Connection Rio 2010-2011</h4>
<p>Manage online presence and SEO<br>Oversee 100% growth in business size during employment</p>
</div>
</div>
</body>
</html>
<script>
var resume_dataset =
[
{job:"#Connection", start:2009, end: 2011, color: "#f9a482"},
{job:"#AMR", start:2012, end: 2013.25, color: "#d0ebe9"},
{job:"#Freelancer", start:2011, end: 2012, color:"#ffcc99"},
{job:"#Jamlabs", start:2012.50, end: 2013.50, color: "#9999cc"},
{job:"#TheRealReal", start:2013, end: 2014, color:"#cccc99"},
{job:"#CloudPassage", start:2014, end: 2016, color:"#6ECFF6"}
];
function year_to_angle(year) {
return ((year - 2009)*Math.PI)/7-(Math.PI/2.0);
}
var width = 750,
height = 500,
radius = Math.min(width, height) / 2;
function highlight(job)
{
$(job.job).css("background-color", job.color);
$(job.job).attr("class", "job highlight")
}
function unhighlight(job)
{
$(job.job).css("background-color", "white");
$(job.job).attr("class", "job");
}
var degree = Math.PI/180;
var arc = d3.svg.arc()
.innerRadius(radius - 180)
.outerRadius(function(datum, i) { if(i != undefined){datum._i = i}; return radius - 30 + datum._i *10} );
var job_arc = d3.svg.arc()
.innerRadius(radius - 180)
.outerRadius(function(d){return radius - 30 + 20*(d.start-2009)})
.startAngle(function(d){return year_to_angle(d.start)})
.endAngle(function(d){return year_to_angle(d.end)});
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height - 70) + ")");
var path = svg.selectAll("path")
.data(resume_dataset)
.enter().append("path")
.on("mouseover", function(d){d3.select(this).style("opacity", 1); highlight(d)})
.on("mouseout", function(d){d3.select(this).style("opacity", 0.7); unhighlight(d)})
.attr("fill", function(d){return d.color})
.attr("opacity", 0.7)
.transition().duration(2000).attrTween("d", sweep);
function sweep(a) {
var i = d3.interpolate({start:2009, end: 2009},a);
return function(t) {
return job_arc(i(t));
};
}
var margin = {top: 20, right: 30, bottom: 30, left: 0},
width = 900,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, .1);
var y = d3.scale.linear()
.range([height, 0]);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment