8 Awesome jQuery tutorials to make your one-page portfolio shine

13,807 designers received our email newsletter last week. Click here to sign up for free.
Recently on GDB, we discussed some simple but necessary elements of a successful one-page portfolio design. To add to those insights, I thought today would be a good day to include a collection of some simple yet useful jquery tutorials, demos, and snippets that will help your one-page
portfolio really stand out. Designing a one-page portfolio is unique because you have a limited amount of space, essentially lose the use of forward and back buttons on your browser, and have to really think hard about unique usability. These simple jquery tips will help you as you begin to design your one-page portfolio.

Revealing Photo Slider

This beautiful piece of jQuery by Chris Coyier allows you to turn thumbnail images into full-size images in one simple animation. Since one of our tips from the previous article was to create a simple portfolio, I thought this script might help achieve that goal.

VIEW TUTORIALVIEW DEMO

Sliding Door Effect

Another option for your portfolio is to have thumbnails of the images with a sliding-door effect to reveal more information about the project. This method can be used to achieve that task in a beautiful and effective way. (Also, take note that there are many CSS3 and HTML5 effects that can achieve these same results. Depending on your target audience, you may want to consider using a few more modern techniques. Perhaps we can explore some of those options on a later post here at GDB.)

VIEW TUTORIALVIEW DEMO

Smooth Scrolling

As mentioned in the comments on the previous post, a “to top” link/button can be extremely useful for a one-page portfolio design. Not only that, but any navigation using anchor tags can help the user navigate your one-page site. One way to help them realize where they are on the page in relation to where they came from is by using a Smooth Scrolling jQuery snippet. There are many smooth-scrollers out there; I enjoy this one because it automatically turns all the anchors on the page into smooth-scrolling anchors.

VIEW TUTORIAL & DEMO

Fancy Navigation Menu

This simple yet attractive navigation menu provided by NetTuts+ offers a sleek, non-distracting look for any sidebar navigation. Perhaps using this menu with a fixed position in CSS would make for a beautiful portfolio style.

VIEW TUTORIALVIEW DEMO

Another attractive sliding door technique

This tutorial, offered by Timothy van Sas, is another very professional alternative to the sliding doors example mentioned above. Simply cause an image of any project in your portfolio to rollover to a description of the project.

VIEW TUTORIALVIEW DEMO

Simple Dropdown Menu

This jQuery tutorial is extremely simple-looking. There’s not really anything too fancy about it, but it offers one solution to a more attractive dropdown menu and it’s easy to execute. Perhaps it’s the space-saver your one-page portfolio needs.

VIEW TUTORIAL VIEW DEMO

Tool-tip Style Animated Hover

Brought to us by WebDesignerWall.com, this article contains a variety of extremely useful jQuery animation tricks for designers who are new to the jQuery neighborhood. One particular effect that might prove useful in a one-page portfolio, is the tool-tip style hover animation effect. Essentially, you hover over a button, some text, anything you choose, really, and a speech-bubble appears with further information. This can come in useful when you want to include more information without taking up the precious (and limited) real estate on your one-page portfolio site.

VIEW TUTORIAL (scroll to 5a.) – VIEW DEMO

Content Slider

There are millions of content sliders available out there. If you are pressed for space, but have a lot of content you want to display, a content slider is an excellent solution. They allow you to have multiple panes of content and a navigation that lets you scroll through that content. The following slider is easy to use and quite effective.

VIEW TUTORIAL VIEW DEMO

What else would you add to the list?

Have you used a really cool piece of jQuery in your portfolio? Have your written your own snippet that might come in handy for the rest of us? Please share your thoughts, experiences, and resources with us!

About Preston D Lee

Preston is a web designer, entrepreneur, and the founder of this blog. @prestondlee

Comments

  1. Great! I’ve been looking for these things…

  2. P-diddy. This is an excellent post. Just thought you should know.

  3. great, nice collection!

    jQuery Masonry, some kind of “lightbox” clone and a complete window slider could be good to add too

    bye! till next time

  4. Been working with jQuery for a little while now and find it an excellent attribute for working with websites.

  5. Do you know of any other simple jQueries (if that’s a word…) similar to lightbox2 for photos?

  6. These are some great Jquary examples. You should do a post like this on MooTools as well

  7. Thank you very much. It’s a nice content.

  8. Amazing blog and thank you for your share.

  9. Very good plugins , loved the image gallery plugin with easing effect

  10. Earl Harrington says:

    I am personally a huge fan of jQuery Masonry at the moment, it just breaks out of the box and lets you do some very cool layouts.

    I would add the epicwebs tutorial: http://www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/ to the list. It helped with me an annoying issue I had with my masonry layout.

    I had some custom google fonts and they were being pretty annoying to say the least. Anyway the trick was to add a reload of masonry inside the activate callback for the web font loader.

Trackbacks

  1. [...] This post was mentioned on Twitter by Preston D Lee, Dave Wilhelm, Martin Burdon, DeannRie, GDB blog and others. GDB blog said: New at GDB: 8 Awesome jQuery tutorials to make your one-page portfolio shine – http://bit.ly/9CtyVG [...]

  2. [...] create the perfect working environment for any freelancer From @creativenerds   RT @mlane: 8 Awesome jQuery tutorials to make your one-page portfolio shine From @MillerMosaicLLC   #photography Arnold Newman’s Incredible Artist Portraits From [...]

  3. […] If you enjoy this article, check out the next article in the series: “8 Awesome jQuery tutorials to make your one-page portfolio shine” […]

Join the conversation

*