Portfolio Filter

A dynamic hub for my portfolio

The Task

My goal was to create a page to display all my projects in one place. It needed to show captions of the projects, and organise them by category.

I could have simply created multiple pages for each category, but the thought of having the page reload while browsing the portfolio seemed like it might ruin the experience. This lead me to using JQuery to show and hide the thumbnails for me.

To further the experience of changing between tags, I wanted to animate the thumbnails to make it look as though the current ones were moving away and the new ones were coming in. This was another reason to use JQuery although I found .fadeIn() and .fadeOut() troublesome to use and spent a while fine tuning the animation.

The Code

The Reflection

Overall, I am quite happy with the portfolio filter: it sorts by tag, it is animated, and even allows me to use more than one tag per item. The biggest drawback I can see with this method is scaling it up to contain perhaps 100+ thumbnails, but that is a little way off and this script is a great way to get started!