About the artist

Katie Boyd is a photographer and Fine Arts student based in New Jersey. She’s keen on shooting surrealist, conceptual photography, but you can also find her snapping portraits, landscapes, and the like. Aside from working the camera, she also enjoys making paper sculptures from books and has recently taken up some graphic design projects on the side.

On the website

With her senior project finished and on display at The Richard Stockton College of New Jersey, we decided it was time for a major redesign of her website. We had an HTML5 canvas-based website in the works for some time, but we scratched it and started new. This website is the culmination of a couple long nights of hacking, just in time for her Senior Project Exhibition reception.

Notable features

Aside from serving as a portfolio, Katie’s website is also an experiment of some of the latest CSS features, with a little Javascript goodness baked in. Some of the neat things about this website:

• The front book cover is built using CSS 3D transforms to construct the front, inner cover side, and edge.
• CSS transitions + CSS 3D transforms are used to achieve a 3D opening for the front cover. No 3D glasses required (unless you want to wear them, I won’t stop you).
• The postcard and polaroid tucked under the book are clickable. They use CSS animations to slide out and center. The top navigation bar also initiates the same animations respective to each element.
• Images and photosets are hosted on Flickr. They’re automatically pulled at start and arranged by photoset as a menu on the polaroid. We used Fancybox for a rockin' lightbox gallery.
• We integrate some sweet browser history features. Navigate through the site and try hitting your browser’s Back button!
• The different page sections are bookmark-friendly. Hitting http://katieboydphotography.com/#gallery will automagically pull up the Gallery section for you. Neato.

Browser support

The site uses some new CSS3 features to achieve a pretty sweet interactive experience. You’ll need to view the page in a modern web browser, such as the following:

• Chrome
• Firefox 10.0+
• Safari 5.0+
• iOS Safari and Android browser 3.0+ (Supported, but not tested on touch devices yet)

Unsupported browsers get redirected to the old version of the site, which you can still check out here. A new fallback page is in development for better degradation with unsupported browsers.