Portfolio Website

 
    // History manipulation
 
    $('.workLink, .menuLink, #backLink').live('click', function(e)  {
 
        var link = $(this).attr('href'),
            pageTitle = $(this).attr('title'),
            state = {
                title: pageTitle,
                url: link
            };
 
        loadProject(link, pageTitle);
        history.pushState(state, pageTitle, link);
        e.preventDefault();
    });                                                                                       
 

Portfolio Website

• role: developer/designer
• tech: HTML5 History, CSS3, jQuery
• live: You're looking at it

This was a great chance to work with some new tech that I haven't worked with before.

First off, I didn't want to use images in the design. Besides the obvious portfolio images, there are no images used in the design, other than the 3kb striped image used in the background. The towers in the header are a canvas element, with @fontface and CSS3 skewing/rotating for the text, and CSS3 gradients abound. Even the 'spotlights' are just simply skewed divs. The site's design was constructed with several layers: background green/blue gradient, canvas art deco imagery and then the translucent repeating pinstripe layer. Browser detection occurs in an all-or-nothing manner: the awesome HTML5 header is put in if the browser can render canvas; otherise an image is used. Looks great even in IE7+ (minus text-shadows)!

This was my first foray into HTML5 history manipulation. Every link on this site grabs the content that the user requests and sends an XHR for it and loads it into the content body, updating the URL bar and pushing the state to browser history. Hitting back/forward in your browser will also load the previous content without refreshing the page as well. Sweet! Still some issues with it, but that's on the to-do list.

Open up Firebug or Chrome Inspector and check out the XHRs and pages loading the design without heavy images. Next steps are to use a lighter framework than jQuery and more granular browser detection to load the elements it can without images.