Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

swapped in github, instagram, and pinboard social icons

  • Loading branch information...
commit 5e36ad224e131193adb2f12c48ca7c582854877d 1 parent 31f2cfa
Jason Long authored
7 README.md
View
@@ -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.
@@ -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.
@@ -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
BIN  public/images/icon-github.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  public/images/icon-instagram.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  public/images/icon-pinboard.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 templates/index.html
View
@@ -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">
@@ -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>
@@ -88,25 +88,25 @@
<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>
@@ -130,19 +130,19 @@
<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">
@@ -174,7 +174,7 @@
</div>
</div>
-
+
<div id="thanks">
<h5>Thanks for your message!</h5>
<p>I'll be in touch shortly.</p>
@@ -183,25 +183,25 @@
<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">
@@ -228,15 +228,15 @@
<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() {
Please sign in to comment.
Something went wrong with that request. Please try again.