Create an elegant Portfolio with jQuery

Written on December 3, 2010 by Flo Preynat

Portfolios are not only the (supposedly-frequently-updated!) collection of your achievements and skills. They are your best and cheapest salesperson ever. When a customer is looking for a designer, web or other as a matter of fact, he/she is more than likely to check out your work before making an appropriate judgment on your designing skills and his/her potential will to work with you.

Customers are bound to follow a number of sources in order to find you. Word of mouth, publications, effective social marketing campaigns, and other targeted advertisements should get you to the front stage, making you a noticeable service provider, but the chance is this may not be enough in striking deals if your portfolio is neither up to date, nor the most attractive one.
Create an elegant Portfolio with jQuery

Well, today, we are going to take a look at a very efficient way of displaying your portfolio, in an elegant-ish modern, dynamic and appealing manner, with only a few lines of jQuery codes.

I would like to introduce you to a couple of tools I did stumble upon while browsing the latest jQuery plugins out there.

The first one is fancybox , and although you may not have used this specific tool, you may already be accustomed to those lightbox-looking plugins by now if you are a fan of jQuery attempts like I am.

The second tool is a 3d carousel designed by Professor Cloud which I find not only very appealing but so easy to customize to your real needs/requirements.

OK, let’s get cracking.
One step at the time. Let’s first deal with the 3d-carousel plugin.

3D Carousel

Include your js packages in the head of your document, with as usual, the latest jQuery library, the cloud-carousel plugin you will find on Professor Cloud’s website, and the jquery.mousewheel javascript which will allow your users to rotate the 3d carousel with the mouse wheel.

Two more pieces of code will be needed for your carousel to work…

1. Some HTML defining a div of id carousel1 to be placed on the page. Use this opportunity to test/adjust the width and height of the carousel.

Note the ALT and TITLE attributes which will be displayed in the following p elements (of id title-text and alt-text) when hovering over the rotating images.

2. and some Javascript function including the position of the first rotating picture (which should be defined once the carousel dimensions have been set), and various other mechanisms such as the mouseWheel feature mentioned above.

Fancybox

The 3d-carousel setup now complete, we can now take a look at Fancybox.
Let’s take the same route, by defining first (in the head of our document) the necessary fancybox script and its css stylesheet.

And let’s now add a simple a href of id fancybox to each and every carousel image, to enable the visitor to click on the thumbnail and display a larger version of the picture lightbox-style.

And we’re done.

Time to finish this up with a decent demo and a slight twist to this portfolio creation post, with the opportunity to pay tribute to some of my dear web acquaintances.
I present you with my 3D-friends-carousel featuring:

Matt Ward aka @echoenduring
Radu Chelariu aka @sickdesigner
Becs Rivett aka @becskr
Adham Dannaway aka @cre8ivecommando
Michael Pehl aka @invocoes

Don’t forget to use your mouse wheel!

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Follow @shoogledesigns