Online Resume & Portfolio

Multimedia Infographic Resume 2011

Over the past decade, I’ve created a substantial library of original, digital Dijital art – whether for personal gratification, in the process of learning new techniques or as applied to professional projects. A few months ago, I started to plan out a clean and modern way to bring all of these assets online as a showcase of my career output.

This site, all the graphics and multimedia, are a result of that effort and how it has coalesced into a single, yet multifaceted project. While the contents of the site largely represent the history of my work, the site design and underlying code represent the future. Read on to find out what makes this website so special.

Showcasing the Past While Embracing the Future

Featuring a fully responsive, HTML5 and CSS3 layout this same site is served to devices and screen-sizes of all different screen densities and proportions. From a design perspective, I’ve never been fond of having to create a ‘dummied-down’ mobile template while serving all the bells and whistles to larger screens. Below are some other critical traits I wanted this site to have, and how I ended up addressing them in this design.

Adaptive

The site layout and graphics adapt to the screen-size and resolution of the device on which its being viewed. This means that whether you’re on your desktop, laptop or even smartphone, you’ll see exactly same content, only optimized for your screen.

Try resizing your browser window and you’ll see how the layout changes from 3-Columns to 2-Columns, down to a single column for smaller devices.

Evolved

HTML5 and CSS3 combined with jQuery (javascript) make this a completely forward-looking and standards-based website. While all of the great features may not work in the oldest browsers, it is certain that it will fully utilize the power of all current and upcoming standards-based browsers (including Mobile).

Originally, I had implemented jQuery animation, though found the performance lackluster on mobile device. For that reason, all of the animations are fully hardware-accelerated CSS3 for incredible smooth performance on hardware that supports it. On incompatible hardware and older browsers, the older javascript method is used as a fallback.

The sliders are fully touch-enabled and even tweaked for better response on Android. By default, there is a slight delay to touch-response on Android-based browsers. Using a bit of clever javascript, this delay is removed making the response even more tactile and instant – as it is in mobile Safari (iOS).

Original

One of the most difficult parts of this project was to come up with an original design. While I knew the site would ultimately be a minimalist design, to put a focus on the content, I felt like the (informal) resume needed to be something more. I had the idea to take the timeline from my formal resume and use it to visually represent the evolution of my career as an infographic. Starting with a few sketches on paper, I created a rough outline of how the timeline should look and then designed it in Adobe Illustrator. After finalizing the Illustrator layout, I brought the image into Google Sketchup to add some depth. Overall it was a pretty involved design that gave me an opportunity to showcase a cross-section of my skills. You can check out this post for a glimpse into my entire design process.

Optimized

Not only is it semantically clean HTML5, but the site assets are using the wp-supercache plugin for lightning quick loading and response times. In addition, all of the URLs are being rewritten to be completely SEO friendly and the taxonomy is tuned for best SEO results.

Even the images within the sliding galleries are lazy-loaded via AJAX to ensure that the user interface doesn’t hang and initial page-load times remain extremely low.