Skip to content

Commit

Permalink
swapped in github, instagram, and pinboard social icons
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason Long committed Jan 13, 2013
1 parent 31f2cfa commit 5e36ad2
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 59 deletions.
7 changes: 4 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
## Overview

I've made this repo public so that it might help others learn from how it is put together. And better yet, maybe someone will let me know about things that could be improved (though I have a list of improvements to make already). Please feel free to download the code or fork it for your own spelunking, but please don't copy it wholesale as if you built it.

The site is built on Stacey (<http://staceyapp.com>). This is a great little CMS that doesn't require a backend database. All of the content and assets are stored in directories. It's a perfect system for lightweight portfolio sites.
Expand All @@ -9,12 +10,12 @@ A few of the things you may find nifty:

* Page content fades in once TypeKit fonts load (to avoid "flash of unstyled content").
* Pseudo-parallax effect for the background while scrolling.
* Animated portfolio section - lots 'o animation and AJAX via MooTools.
* Animated portfolio section - lots 'o animation and AJAX via MooTools.
* Animated contact form (3D transform for flipping the form in WebKit).
* Modernizr for detecting browser capabilities (ie. supplying fallback effect for 3D transforms).
* Contact form uses inline validation via MooTools.
* Contact form spam detection with Akismet
* -webkit-transitions for subtle hover state transitions
* -webkit-transitions for subtle hover state transitions
* Sass for generating CSS (I use the sass-watch script).
* hCard microformat for contact info.
* Capistrano used for simple deployment.
Expand All @@ -23,5 +24,5 @@ A few of the things you may find nifty:

* Add HTML5 History API for portfolio navigation (see <http://html5demos.com/history>)
* Create mobile version.
* Create larger pool of entries for Play section and pull 4 random ones.
* Create larger pool of entries for Play section and pull 4 random ones.
* Refactor giant/fugly JS functions
Binary file added public/images/icon-github.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/icon-instagram.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/icon-pinboard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 56 additions & 56 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
<!DOCTYPE html>
<!--
c :.
'o .0. .d:c.
'. .; .;okO0000K0d:. .O; o:cccc:;'.
;. : .;;,';OKKKKKKKKKKKKKKo .Od.ckKKKKKKKKKKOo.
: 'O0KKKKKKKK0KKKKKKKKKKKK0lOKkKKKKKKKKKKKKKKK0;
; lKKKKKKKKKc.0KKOxd:kKKKKKKKKKKKKKKKKKKKKKKKKK0.
.; ,KKKKKKKKKOkdKKKc:. 'OKKKKl.lKKKKKKKKKKKKKKKKO'
: oKKKKKKKk, x0KK0.; oKK0Oodc,;coxO0KKKK0xl'
olcKK0x:. c:x,'., . c ..x;.
; .'. ;.x. '. ;. ,c ..
.' ;.': , ;;
... .. . , :.
.; . ',
,: . .,
,. ' ..
c :.
'o .0. .d:c.
'. .; .;okO0000K0d:. .O; o:cccc:;'.
;. : .;;,';OKKKKKKKKKKKKKKo .Od.ckKKKKKKKKKKOo.
: 'O0KKKKKKKK0KKKKKKKKKKKK0lOKkKKKKKKKKKKKKKKK0;
; lKKKKKKKKKc.0KKOxd:kKKKKKKKKKKKKKKKKKKKKKKKKK0.
.; ,KKKKKKKKKOkdKKKc:. 'OKKKKl.lKKKKKKKKKKKKKKKKO'
: oKKKKKKKk, x0KK0.; oKK0Oodc,;coxO0KKKK0xl'
olcKK0x:. c:x,'., . c ..x;.
; .'. ;.x. '. ;. ,c ..
.' ;.': , ;;
... .. . , :.
.; . ',
,: . .,
,. ' ..
.. .. .
.,
-->
.,
-->
<html lang="en">
<head>
<title>Black Ant Media &middot; Portfolio of Jason Long &middot; Web &amp; UI Design &middot; Columbus, Ohio</title>
<title>Black Ant Media &middot; Portfolio of Jason Long &middot; Web &amp; UI Design &middot; Columbus, Ohio</title>
<meta charset="utf-8" />
<meta name="description" content="Portfolio of web developer and designer Jason Long." />
<meta name="author" content="Jason Long" />
<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="https://blackant.myopenid.com" />
<link rel="stylesheet" href="/min/index.php?g=css">
<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="https://blackant.myopenid.com" />
<link rel="stylesheet" href="/min/index.php?g=css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<![endif]-->
</head>

<body>
<!-- Asynchronous tracking code - placed at the top of the body tag per Google's recommendations -->
<script type="text/javascript">
<!-- Asynchronous tracking code - placed at the top of the body tag per Google's recommendations -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-584195-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
<img src="/images/bg.jpg" id="bg" />

<img src="/images/bg.jpg" id="bg" />
<div id="wrapper">
<div id="github-banner">As of March 26, 2012 I'm working full-time for GitHub and no longer doing freelance work.</div>
<div id="content">
Expand All @@ -62,23 +62,23 @@
<li><a href="http://thestrake.com" rel="external">Blog</a></li>
</ul>
</nav>

<h1>I’m Jason Long, an independent front-end developer <em>&amp;</em> UI designer in Columbus, Ohio.</h1>
<p>
<span>I pride myself on creating</span> <em>innovative application designs</em> <span>and solving</span> <em>challenging interface problems</em>.<br />
<span>I love to</span> <em>collaborate</em> <span>with other</span> <em>passionate developers and designers</em> <span>on exciting projects.</span>
</p>
</header>

<section id="work">
<h2>Work</h2>
<h2>Work</h2>

<div id="portfolio-wrapper"></div>
</section>

<section id="play">
<h2>Play</h2>

<p>
These are a few of the experiments and concepts that I’ve posted to <a href="http://thestrake.com">my blog</a> and <a href="http://dribbble.com/jasonlong">Dribbble</a>. I have a site called <a href="http://houseofbuttons.tumblr.com">House of Buttons</a> that you might like if you share my fetish for beautiful user interface buttons. Oh, and you can <a href="http://twitter.com/jasonlong">follow me on Twitter</a> if you're into that sort of thing.
</p>
Expand All @@ -88,25 +88,25 @@ <h2>Play</h2>
<ul id="social-names">
<li class="heading">Elsewhere on the Interwebs</li>
<li>Twitter</li>
<li>My Blog</li>
<li>Goodreads</li>
<li>Flickr</li>
<li>GitHub</li>
<li>Instagram</li>
<li>Dribbble</li>
<li>Mlkshk</li>
<li>Rdio</li>
<li>Last.fm</li>
<li>Goodreads</li>
<li>Pinboard</li>
</ul>
</div>

<ul id="social-icons">
<li><a href="http://twitter.com/jasonlong"><img src="/images/_.gif" data-defer-src="/images/icon-twitter.png" width="55" height="54" alt="Twitter" /></a></li>
<li><a href="http://thestrake.com"><img src="/images/_.gif" data-defer-src="/images/icon-rss.png" width="55" height="54" alt="My Blog" /></a></li>
<li><a href="http://www.goodreads.com/user/show/1207492-jason-long"><img src="/images/_.gif" data-defer-src="/images/icon-goodreads.png" width="54" height="54" alt="Goodreads" /></a></li>
<li><a href="http://flickr.com/photos/jasonlong/"><img src="/images/_.gif" data-defer-src="/images/icon-flickr.png" width="54" height="54" alt="Flickr" /></a></li>
<li><a href="http://github.com/jasonlong"><img src="/images/_.gif" data-defer-src="/images/icon-github.png" width="55" height="54" alt="GitHub" /></a></li>
<li><a href="http://instagram.com/iamjasonlong"><img src="/images/_.gif" data-defer-src="/images/icon-instagram.png" width="55" height="54" alt="Instagram" /></a></li>
<li><a href="http://dribbble.com/jasonlong"><img src="/images/_.gif" data-defer-src="/images/icon-dribbble.png" width="56" height="56" alt="Dribbble" /></a></li>
<li><a href="http://mlkshk.com/user/jasonlong"><img src="/images/_.gif" data-defer-src="/images/icon-mlkshk.png" width="56" height="55" alt="Mlkshk" /></a></li>
<li><a href="http://www.rdio.com/#/people/blackant/"><img src="/images/_.gif" data-defer-src="/images/icon-rdio.png" width="55" height="54" alt="Rdio" /></a></li>
<li><a href="http://www.last.fm/user/blackant"><img src="/images/_.gif" data-defer-src="/images/icon-lastfm.png" width="54" height="55" alt="Last.fm" /></a></li>
<li><a href="http://www.goodreads.com/user/show/1207492-jason-long"><img src="/images/_.gif" data-defer-src="/images/icon-goodreads.png" width="54" height="54" alt="Goodreads" /></a></li>
<li><a href="http://pinboard.in/u:blackant/"><img src="/images/_.gif" data-defer-src="/images/icon-pinboard.png" width="55" height="54" alt="Pinboard" /></a></li>
</ul>

</div>
Expand All @@ -130,19 +130,19 @@ <h5>@title</h5>

<section id="about">
<h2>About</h2>

<p><img src="/images/_.gif" data-defer-src="/images/jason.jpg" width="180" height="187" alt="Jason" />I made my first website back in 1994 as Computer Science engineering student at The Ohio State University and I've been hooked ever since. WIth my technical background and passion for visual design, front-end web development and UI design is the perfect outlet for my skills and interests.</p>

<p>I love to collaborate with other talented people on exciting projects. Sometimes I supply hardcore development shops with some creative juice. Other times I work with pure design agencies and bring a much-needed propeller hat. For the right-sized project, I can be the one-man band that brings your idea to life.</p>

<p>I live in Columbus, Ohio where I've been married for over a dozen years and a dad for nearly ten. When I'm not pushing pixels or slinging code, I enjoy running and reading (preferably not at the same time).</p>


</section>

<section id="contact">
<h2>Contact</h2>

<div id="contact-wrapper">
<div class="inner">
<div class="card">
Expand Down Expand Up @@ -174,7 +174,7 @@ <h2>Contact</h2>

</div>
</div>

<div id="thanks">
<h5>Thanks for your message!</h5>
<p>I'll be in touch shortly.</p>
Expand All @@ -183,25 +183,25 @@ <h5>Thanks for your message!</h5>

<div id="error">
<h5>Uh oh!</h5>
<p>For some reason there was a problem sending your message.<p>
<p>For some reason there was a problem sending your message.<p>
<p>Please try using the email address to the right.</p>
</div>

</div>
<div id="mail-slot"></div>

<!-- hcard microformat: http://microformats.org/wiki/hcard -->
<div class="vcard">
<h3>Electronic Mail</h3>
<a href="mailto:hello@blackantmedia.com" class="email">hello@blackantmedia.com</a>
<h3>Snail Mail</h3>
<h3>Snail Mail</h3>
<div class="adr">
<span class="street-address">P.O. Box 424</span>
<span class="locality">Hilliard</span>, <span class="region">Ohio</span>
<span class="locality">Hilliard</span>, <span class="region">Ohio</span>
<span class="postal-code">43026</span>
</div>
</div>

</section>

<section id="colophon">
Expand All @@ -228,15 +228,15 @@ <h2>Colophon</h2>
<img src="/images/_.gif" data-defer-src="/images/html5-badge.png" width="79" height="26" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics">
</a>
</p>
</section>

</section>
</div>

</div>

<script src="http://use.typekit.com/seh1ghz.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script src="/min/index.php?g=js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script src="/min/index.php?g=js"></script>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
Expand Down

0 comments on commit 5e36ad2

Please sign in to comment.