Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”. If you know Flipboard for the iPad, then you might recognize this effect we got inspired with.
The beautiful images are by Kyle van Horn, check out his Flickr Photostream.
jQuery Masonry is by David deSandro
The HTML for an item in the portfolio is the following:
Concept & Design
Some short introduction View project
A longer description...
We use a jQuery template for the fullscreen structure:
When loading the page, we have the initial grid view:
And when we click on “View Project”, the fullscreen mode will be loaded:
We hope you like this little experiment and find it useful!