A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.
Last month, I had the pleasure of writing an article for internationally renown NET Magazine, also known as Practical Web Design in the US. The article titled Create Your Own Single Page Portfolio Site with XHTML/CSS and jQuery appeared in issue 188. The folks over at NET magazine have kindly allowed the article to be republished here on Blog.SpoonGraphics for those who might have missed it. I highly recommend checking out the new issues of NET magazine, and to catch them on Twitter for some handy web design tips and tecniques.
Your online portfolio is your place to introduce yourself to the world and showcase your work and skillset. Once upon a time the traditional leather slipcase was the standard form of showing employers and clients what you can do, nowadays a personal website is your main selling point. Sure, you could use websites such as Flickr, DeviantArt or similar to produce a quick and easy collection of work, but we’re wanting to look professional here, and nothing beats your own hand crafted site sitting pretty under your personalised .com domain name.
What we’re looking to achieve, is to build a simple website that compiles the important information of who you are, what you do, examples of your work and methods of contact. These are the key points anyone looking to hire a designer will need. The site also needs to look nice, but not to be too in-your-face that it takes the limelight from the examples of your work, so we’ll build a clean, structured layout with subtle details. Finally, we also want the site to keep the attention of the viewer, if your website is part of a bunch of job applications we don’t want to allow the viewer to lose interest clicking through page after page. Limiting the site to a single page helps display all the information quickly and effectively.