I recently redesigned this site with the primary goal of improving my photography portfolio. If you don’t care about web dev you can stop reading now and just go take a look at the photos. Let me know what you think.

Ok, so here are some tech notes on the implementation, though this is all pretty standard these days.

For the photos page I wanted to make use of the HTML5 History APIs. But rather than make the photo page standalone I decided to “Ajaxify” the whole site. The site dynamically loads content, avoiding full page loads, using similar patterns to the ones we employed in Gmail and Google+.

If you navigate directly to a certain page it will be rendered on the server. Once the page has loaded, the JavaScript will listen for clicks, intercept any links that can be handled client side, request the page contents via an XMLHttpRequest, update the UI, and change the browser location using history.pushState. For all pages except the photos page, the XHR simply requests the page with ?mode=body which tells the sever not to render the chrome.

This was made simpler by the fact that I’d already written a small library (Surface) that does all the heavy lifting and simplifies the management of single-page applications. The trickiest part was getting WordPress to work properly and unfortunately meant changes that will need to be reintegrated after every WordPress update.

The photos page is all rendered client-side and simply requests the photo data from the server. The photos are stored on Flickr and I actually use the Flickr API to get the list of photos for each album rather than hard coding them.

The top navigation uses Raleway from the Google Web Fonts archive.

The site works best in the latest Chrome and Firefox builds, but IE degrades to using full page navigations, though the photos page only works in IE9+.