Improve your portfolio site with 18 jQuery scripts

Improve your portfolio site with 18 jQuery scripts

For every online workers like freelance designers, freelance developer, SEO master-  the portfolio is one the best media to get some work and present a good working hand in-front of audience/client. As a freelancer my experience is that, before hiring contractor, clients always check working skills. In that situation portfolio website can create a good impression to a client. So, portfolio site must be good and attractive as well as it have some sort of quality to represent you.

jQuery is one of the greatest web scripting (client side) tool that improve your portfolio website, whether it’s for eye candy, usability or functionalists. In the following collections, I’ll introduce you with some of my favorite and cool jQuery scripts that will help you to create a better portfolio website ! If you feel interested than you can also visit my portfolio website. http://www.bluewindlab.com

– jQuery Flat Shadow


Long shadow effects are widely used to create a depth for any element in flat design. There are several ways to create this effect easily (like this Photoshop file) and, as expected, there is a jQuery way too. jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted. It is possible to define the shadow color, angle and enable/disable the fading.

– jQuery tabs

jquery tabs

Tabs can be a great way to make information about a project quickly available without leaving the page. For example, you can insert project descriptions in a secondary tab because you know that only a few visitors will have interest in it. In third tab, you can insert your contact information. Tabs can be loaded via ajax that means you can load your data while you click in tab link.

– jQuery cycle

jquery cycle

If you want to show a project evolution, jQuery cycle could be the way to go. It is basically a slideshow with awesome transition effects, and the ability to use different actions to move from one slide to another.

– Coda Bubble

coda bubble

If you are going to use a tooltip to display further technical informations, do it with style. This script and tutorial teaches you to create a bubble just as pretty as the ones on Coda’s website.

–  jQuery Zoom

jquery zoom

If you have designs where the details have a lot of importance, you should use this script to let your sites visitors know that you do not neglect details in your designs.

– Flip Box

jquery flip box

Flip is a jQuery plugin to apply flip animation to any element. Nice flipping effect for your divs, images, or whatever you want to put in it. It is nicely worked in Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8).

– jQuery Multimedia portfolio

jquery portfolio

A cool carousel jQuery that allows you to display different media types, perfect for multimedia designers. Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3). This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3).
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

– Coda slider

coda slider

If you read a lot of web design blogs, you’ve probably seen this one over and over. I still could not leave it out of this list as it’s a great way to display design work.

– Kwicks


Nifty little effect for menus, can also be used for other things if you are creative (and I am sure you are).

– jQuery Treeview plugin

jquery menu tree

If you have a lot of projects and designs to show, this could be the right navigation to use for your portfolio.

– jQuery filterable portfolio

jquery portfoli filter

Excellent tutorial to create a filterable portfolio with jQuery.

– LavaLamp menu effect

lava lamp

Beautiful menu effect that captures your attention towards the menu element you are hovering.

– jQuery Calculator

jquery calculator

Want to get rid of people with too low budgets? This could be the way to go. The jQuery Calculation plugin could allow you to give an estimate of what their request will cost.

– jQuery form validation

jquery validation

Tired of receiving incomplete form submissions from your portfolio site? Try the jQuery form validation plugin and the people trying to contact you will not be able to send a message if they didn’t fill in the form properly.

– jQuery Accordion menu

jquery accordion

In your portfolio you will probably want to emphasize on your content and images. Accordion menus can be a

– jQuery sequential list

jquery sequential list

It’s good to explain your workflow on your portfolio website, it gives your potential clients a good indication of what they can expect when working with you. Using a sequential list is a good way to do this, learn how in Web Designer Wall’s tutorial.

– jqTransform

jquery transform

Good form styling does not only look nicer, it’s also often more usable.

– jQuery Virtual Tour

jquery virtual tour

If you are really proud of your studio, you can give a good feel of what it looks like with this virtual tour jQuery plugin.

– jQuery Image Notes

jquery image notes

To give information about an image or project, image notes are the perfect solution. You can easily point out details and give in-context explanations. Also it will give you a flavor of photo tagging like Facebook. Very cool and interesting plugin.

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Back To Top