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

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!

Like what you've read?

If so, join 12,000+ designers and stay updated on all our best business-building tips delivered for free to your inbox a few times each week. PLUS, we'll throw in a free ebook to get you started. Click the button below!

Comments

  1. says

    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

  2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>