Interactive technology is constantly changing, and with everyone racing to make use of all the latest in HTML5, CSS3, and related specs, web developers like me have to prove that we can hang.
Portfolio site refresh
Though it looks pretty much the same, I've recently rebuilt this site from the ground up to reflect my evolving skillset. Here are the highlights:
- Semantic HTML5 page structure and markup
- CSS transitions and transforms (where supported)
- New single-page-app-style navigation with browser history support and deep-linking
Use the tabs on the right for details.
(Totally real and awesome photo courtesy of José Luis Garcia Larred)
In time I'll incorporate more of the new features where it makes sense for this site. Keep checking in.
The new features available for browsers that support CSS3 are awesome. If all browsers supported everything in the spec, our jobs as web developers would be so much easier. Naturally, that's not the case.
We're left with some browsers supporting some of the features, while older ones don't give us much at all to work with. This is where progressive enhancement comes in. We start with a baseline for all browsers, then improve upon the experience in browsers that can handle it.
The main functionality of this site (including the animated page transitions) works for all browsers, even IE6. But to this I added some CSS3 features:
- Color transitions for navigation hover states
- Partially transparent backgrounds using RGBA
- Zoom-out and zoom-in effects during page navigation (for browsers that support CSS transitions)
- Rounded corners on the page-loading graphic
onhashchange event, for maintaining browser history upon page transition. Going forward, I'll be adding additional cutting edge stuff where it makes sense.
- Wrote an algorithm to asynchronously load and position any number of pages into the document, spiraling out counter-clockwise from the home page
- Geared code towards performance by optimizing loops, managing scope and data access, and improving selector efficiency