HTML5 Portfolio Project – Part 1

Introduction

I built a Flash-based portfolio back in 2005. It was itself a nice example of the kind of work that kept new projects coming: back-button & bookmarking support, raw content visible to Google & non-Flash browsers, Google Analytics tracking, easily updatable via an XML file, etc. All at a time when most people believed it couldn’t be done. For better or worse, it’s functional enough that it still drives my portfolio today.

In the seven years since, browsers have done a great deal to catch up. Canvas, web fonts, and CSS enhancements have expanded the possibilities so that I’m confident I can rebuild the whole thing in HTML5. I still get compliments on the minimalist design, and I think I’d get even more if it worked on iPads and iPhones. 😉

This move is long overdue, and I’ve decided, not only does it make sense to open source the final template, but there’s value in letting you follow my process. I will make mistakes, but I’ll probably learn something from them, and in turn, so might you.

The Plan

We won’t be doing any coding today. Instead, I’ll start where all projects ought to start: with a plan. The numbers in parenthesis represent the estimated number of hours required.

• (1) Project Plan
• (1) Define JSON format
• (1) Assemble project file structure
• (4) Scale transition
• (4) Navigation
• (4) Canvas-based Tooltip
• (6) Text in circle
• (3) Media Player (video)
• (2) Background gradient effect
• (4) Preloader animation
• (1) CSS / media queries
• (1) Google Analytics integration
• (1) Fonts (Typekit?)
• (8) Bug Fixes

Total: 41 hours

These estimates don’t include the time required to write up the accompanying blog-posts or answer your questions. That’s probably another 15-20 hours. In addition, I usually multiply my initial estimate by two to account for the Murphy-factor. Also, I’ve got three other projects right now, and this isn’t the most important, so it’s going to take a lot longer than a week. Let’s schedule launch for June 1st, that sounds nice, doesn’t it?

Stay Tuned:

In the next episode, we’ll define a JSON format for each project in our portfolio and start thinking about how those will get transformed in to richer JavaScript structures and HTML elements.