Building myself a dedicated website for my photography portfolio has been on my to-do-list for a long time, last weekend it finally made it to the top. The aim for this site was not to replace my Flickr stream, but to run alongside it. Flickr is great, but it’s very hard for someone to get a good all round feel of your photography skills & style — this portfolio site will be kept up-to-date with my best/favourite photos.
From the start I knew I wanted something very simple to allow the focus to be on the photos. I jumped into my sketchbook & after about 20-30 minutes I knew the direction I wanted to go in.
Fireworks was my next port of call, I laid out a twelve column grid & brought my sketchbook concepts to the screen. As I went I leaked a few previews to my Dribbble account, which was awesome getting constructive feedback.
Building the site was the easy part, I’ve used HTML5 & some trick CSS3 bits, like box-shadow, opacity, transition & nth-child, this made for some pretty rapid development as well as some beautifully light & semantic markup.
For the image slider on the gallery pages I used the jQuery powered the Nivo Slider which I fell in love with a few months ago & have been dying for a reason to use. With the help of Jamie Thompson, & his ninja JavaScript skills, I customised the slider a little bit to automatically attach the thumbnails for each image to the page, oh I did some ninja CSS to give the images a bit of pre loading before they start running on the slider too, it makes the view experience so much better.
If you’ve got this far through this blog post you are probably expecting a link to the site right now… well I don’t like to disappoint so here – Go & check out my new photo site!
As always I would love some feed back on the site, good bad, black, white, anything goes.
If you are a web geek you might want to have a look at my style sheet, it’s OCD gone mad…
Comments
Robbie
Great end result Rick, and fantastic to see a framework that really does your photography justice. But man, that stylesheet header — you’ve gotta start spending your time on healthier things! ;)
Also, I didn’t know you were a Fireworks user. Nice to know there are still a few of us around.
Phil Barker
No photographer should be without one ;)
Good work mate
Ashley
Job’s a good ‘un. Looks lovely, especially the effect from moving from one photo to the next. If I were to want anything else from the site, it would be a little backstory on how you got into photography. Your story from skating to photography is worth sharing, my friend. Can we call you a photographer now? PLEASE!
Jamie Thompson
I really like the way you pulled this one off. That Nivo Slider plugin is really neat (both inside and out). I’m offended that your portraits section does not contain a single photo of me though.
John
Lovin’ it, although I’m not too keen on the transition effect, I think it’s a bit “cheap-and-flashy” for what is otherwise a really classy site ;)
J.
Toby
Great work Mr Nunn.
Like the simplicity of the site and a bit more about you would not go a miss (a long with a booking form for photoshoots etc)
Love the Nivo slider as well have been looking to find some way of using it on my site. Need to find me a JQuery Ninja !
Oh and the OCD CSS is a total win is it sad that it is my favourite part !?!
Kyle
man that’s a sexy portfolio! And built without using flash! It’s really a perfect demo to show that you can build a portfolio with HTML5, CSS and Jquery and have nice effects (first thing I did was right click and see if any of it was flash haha)
well done, you’re such a pro :)
Egil Arntzen
Thanks for tips about the slider. And nice photos by the way!
Greetings from ice cold Norway.
pffmihai
Great photo section! Love your photos too.
May i ask how did you manage to automatically attach the thumbnails?
pffmihai