Skip to content

Instantly share code, notes, and snippets.

@jhsu

jhsu/index.html

Created November 6, 2012 20:29
Show Gist options
  • Save jhsu/4027309 to your computer and use it in GitHub Desktop.
Save jhsu/4027309 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Joseph Hsu.
Raw
index.html
<html>
<body data-type="background" speed="8">
<div id="content">
<section id="whoami">
<article>
<h2>Joseph <abbr title="/shoe/">Hsu</abbr></h2>
<p>
<strong>Web Developer</strong>.
</p>
</article>
</section>
<section id="contact" data-type="background" data-speed="1.2">
<article>
<h2>Contact</h2>
<p class="code">
Email: [email protected]<br />
Twitter: <a href="http://twitter.com/jhsu">@jhsu</a><br />
Skype: <a href="skype:jhsu.joe?add">jhsu.joe</a><br />
Phone: (607) 279-5044<br />
Github: <a href="http://github.com/jhsu">github.com/jhsu</a>
</p>
</article>
</section>
<section id="experience">
<article>
<h2>Experience</h2>
<h3>Academic Software Plus</h3>
<p>Jaunuary 2010 - Present, Web Developer</p>
<div class="expandable">
<p><strong>Developing features from spec to production.</strong> Was part of our initial team of about 5 developers, migrating legacy products from the desktop to Ruby on Rails web applications. Involved in major decisions from development to deployment.</p>
<p><strong>Slow processes are painful.</strong> In an <abbr title="Extrac Translate Load">ETL</abbr> process, I was able to refactor the extraction process for easier use as a script instead of a rake task with flag options and increase performance by two-fold.</p>
<p><strong>Active mentor.</strong> Actively work with more junior developers to help them address pains, approach problems and care about their development environment..</p>
<p><strong>Pursue proposed initiatives.</strong> Found pain points in our deployment process and migrated from our previous deployment scripts (bdsm, sm-deploy) to a set of capistrano recipes. Created an IRC bot to help with some daily tasks, such as leaving memos for coworkers, linking to tickets in our ticket tracker and some fun things such as tracking who is going out for lunch. Implemented Tuesday Talks, where each week, someone gives a topic of interest, from TDD to things about postgres you might not have known.</p>
<p><strong>Commit statistics in our main rails application:</strong> 2,701 commits / <span class="green">75,233 ++</span> / <span class="red">85,875 --</span></p>
<h4>Technologies</h4>
<ul class="tags">
<li>Ruby</li>
<li>Ruby on Rails</li>
<li>Postgres</li>
<li>Redis &amp; Resque</li>
<li>git</li>
</ul>
</div>
<h3>Academic Software Plus</h3>
<p>August 2009 - January 2010, Web Developer Intern</p>
<div class="expandable">
<p>
Worked on an existing Rails application dealing with surveys and a lottery system to assign people to sites.
</p>
<p>
Heavily involved in the creation of the company's current rails app product line.
</p>
<p>Paired with senior developers and was able to quickly work on my own</p>
</div>
<h3>Viralogy</h3>
<p>2008 - 2009, Web Designer and Developer</p>
<div class="expandable">
<p><strong>Designed several pages from mocks to production.</strong> Iterated several designs for the front page and dashboard views. Integrated the designs to our php (codeigniter) application.</p>
<p>Worked on backend code for searching blogs on the site</p>
<h4>Technologies</h4>
<ul class="tags">
<li>PHP</li>
<li>CodeIgniter</li>
<li>Mysql</li>
<li>SVN</li>
</ul>
</div>
</article>
</section>
<section id="education" data-type="background" data-speed="1.2">
<article>
<h2>Education</h2>
<p>
<strong>University at Buffalo, SUNY.</strong> Bachelor of Arts Communcation, 2005-2010
</p>
</article>
</section>
<section id="skills" data-type="background" data-speed="1.2">
<article>
<h2>Skills</h2>
<ul>
<li>Ruby</li>
<li>Web Frameworks (such as Ruby on Rails and Sinatra) </li>
<li>Capistrano deployments</li>
<li>Node.js (mainly for an irc bot using github/hubot)</li>
<li>Front-end: HTML, CSS and Javascript</li>
<li>D3.js (<a href="http://bl.ocks.org/1885497" title="sparkline d3.js example">simple sparkline</a>)</li>
<li>Linux (mainly Archlinux and Ubuntu)</li>
</ul>
</article>
</section>
<section id="education" data-type="background" data-speed="1.2">
<article>
<h2>Extra</h2>
<p>
<strong>Rails Rumble,</strong> 2012 entrant <a href="http://railsrumble.com/entries/364-wny-ruby-represent">"Bring-a-Thing"</a> and 2009 entrant.
</p>
<p>
<strong>WNY Ruby meetup,</strong> organizer.
</p>
<p>
<strong>RaspberryPi,</strong> Rabbit Cam using Raspbian distribution, Motion and a custom ruby twitter updater.
</p>
<p>
<strong>Personal Blog,</strong> <a href="http://josephhsu.com" title="Blog">josephhsu.com</a>.
</p>
</article>
</section>
</div>
</body>
</html>
Raw
script.coffeescript
$(document).ready ->
$("[data-type]").each ->
$(@).data('y-offset', parseInt($(@).attr('data-y-offset')))
$(@).data('speed', $(@).attr('data-speed'))
$window = $(window)
$('section[data-type="background"]').each ->
$(this).data('speed', parseInt($(this).attr('data-speed')))
$self = $(this)
$window.scroll ->
offset = $self.offset()
yoffset = offset.top
windowtop = $window.scrollTop() + $window.height()
if (windowtop > offset.top) && ((offset.top + $self.height()) > $window.scrollTop())
yPos = -($window.scrollTop() / $self.data('speed'))
if ($self.data('y-offset'))
yPos += $self.data('y-offset')
coords = '50% '+ yPos + 'px'
$self.css backgroundPosition: coords
$('#experience h3').click ->
$(this).siblings(".expandable").slideDown(1000)
Raw
style.css
html, body { padding:0; margin: 0; margin-bottom:}
body {
font-family: Verdana, sans-serif;
background-color: #ececec;
}
#content {
padding-bottom: 100px;
background-color: #fff;
margin: 50px auto;
border-top: 8px solid #1AA292;
}
@media only screen
and (min-width : 1224px) {
#content { margin-right: auto; margin-left: auto; width: 800px;}
#contact { width: 500px;}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#content {width: 100%px; margin: 0;}
}
abbr { cursor: help;
border-bottom: 1px dotted #ccc;
}
h1, h2, h3, h4, h5 {
color: #1AA292;
}
strong {
}
a {
text-decoration: none;
border-bottom: 1px dotted #DCB502;
color: #16B81C;
}
section {
color: #060606;
padding: 1em;
}
ul li {
line-height: 1.8;
font-size: 14px;
}
p {
line-height: 1.6;
font-size: 14px;
max-width: 800px;
}
#whoami {
/* background: url("http://distilleryimage0.s3.amazonaws.com/cc63432cd35e11e19f481231380fd1fd_7.jpg") no-repeat left top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
min-height: auto;
}
#contact {
}
#contact article {
margin-left: 1em;
}
#contact .code {
line-height: 1.4;
font-family: monospace;
}
#experience {
/*
background: url("http://dl.dropbox.com/u/114389/pics/boat_blur.jpg") no-repeat left top fixed;
*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#experience h3 { }
#experience div.expandable {
/* display: none;
overflow: hidden; */
}
#education {
}
.green {color: green;}
.red {color: red;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment