Site Details

I created this portfolio as a personal project to showcase my web experience. I'm originally from Australia however I've spent the last year travelling Europe and have now chosen to settle in London. My portfolio currently shows the work that I completed in Perth, West Australia however I am intending to add new projects very soon.

I particularly like the idea of a portfolio as it allow me to show examples of my efforts and successes in the one place. I view it as an extension of my CV, albeit a much more creative one!

Concept

As I work in both design and development I didn't want to build a portfolio on Wordpress or any other pre-done platform; I wanted to build it all from scratch to test what I can do. As such, the design, HTML, CSS and javascript code are all original pieces. Excluding the lightbox which is a jQuery plugin; there's no reason to reinvent the wheel. The requirements I set myself were that each project must include a nice set of pictures of the page, short, succinct information related to the site and also optional to access full information and site breakdown.

As an extension of my CV, I intended the site to be quickly scanned to see what has been done recently but also made to allow a deeper look into each project without unnecessarily jumping through content and heavy navigation. Details are immediately presented to a casual browser whilst anyone wanting more information on a project can expand the block to show a full breakdown and additional images. I decided on Javascript for slick animations and providing a dynamic display between the "more" and "less" options.

One of my concerns with Javascript is the possibility of reducing accessibility; the site has to be gracefully degradable for users without java enabled. I combated this by using javascript to hide extra content and insert buttons on load (instead of having it all available by default). For users without java, the site will appear with the full information but without the (non-functioning) buttons. This means that no usability is lost.

Technology Used

The site is a dynamic html (DHTML) site using jQuery to create the animations and to hide the extra information on each project until desired. All the related javascript using jQuery is written myself as is all the DHTML. The site was created in Panic's Coda software.

All the graphics are also made personally using Adobe CS4 and take inspiration from the iPhone interface in regards to the menu navigation. The other buttons on the site are not graphical but purely CSS.

The CSS on the site is predominantly CSS 2 with some newer CSS 3 added for increased visual effect in browsers that support it (Firefox 3+, Safari, Chrome).

• HTML
• DHTML
• Javascript
• jQuery
• CSS 2
• CSS 3
• Photoshop CS4
• Fireworks CS4
• Coda