My personal web site began life as a static HTML site that I updated manually, but it has recently been adapted to use the Koken content management system. I built the entire existing design into the Koken template system which makes it far easier for me to add projects.

It's gone through several iterations since I began the site. You can see the evolution of the design in this album.

Header graphic 1

Header graphic 2

Header graphic 3

Mobile Responsive

I've been on the responsive bandwagon since I witnessed its power via Twitter's Bootstrap. When I built my personal site I used a device-centric approach to set my media queries. I've since begun letting content dictate where my media queries should be, and I'm much happier for it.

Interactivity & Animation

Interactivity & Animation

Not all of this functionality is still present on the site. I ended up paring back a bit when I moved the site to a CMS. In this iteration, featured projects had a neat way of revealing additional information to the user. This was achieved using divs with a width greater than 100% to put some of the content out of the viewport. jQuery was used to change the div's position revealing this content when the arrow was clicked.



The Expando was a jQuery plugin written to reveal additional content below my introductory paragraph. Although I no longer use it on the site, I'm still fond of the way it worked. When you click an Expando link, that link remains highlighted while the additional information was revealed. It would also move the most recently requested Expando to the top of the box.

Previous Iteration

You can follow the lineage from this original version of the site to its current incarnation. This older iteration has the sliding featured projects and the Expandos previously discussed.