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.
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.
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.
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.