24th August 2012 Marvin@Blogfreakz · CSS, HTML5, JQuery, Tutorials, Web Design · 1 Comment

How to Create a Beautiful HTML5 Portfolio

ScreenHunter 77 Aug. 24 09.20 How to Create a Beautiful HTML5 Portfolio

Martin Angelov shares with us a great tutorial on creating a beautiful HTML5 portfolio that is powered by jQuery and Quicksand plugin. It has a nice design which is great for your work and is highly customizable too. Here’s how it goes.

HTML

Index.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>
 <!-- Our CSS stylesheet file -->
 <link rel="stylesheet" href="assets/css/styles.css" />
 <!-- Enabling HTML5 tags for older IE browsers -->
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 </head>
 <body>
 <header>
 <h1>My Portfolio</h1>
 </header>
 <nav id="filter">
 <!-- The menu items will go here (generated by jQuery) -->
 </nav>
 <section id="container">
 <ul id="stage">
 <!-- Your portfolio items go here -->
 </ul>
 </section>
 <footer>
 </footer>
 <!-- Including jQuery, the Quicksand plugin, and our own script.js -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 <script src="assets/js/jquery.quicksand.js"></script>
 <script src="assets/js/script.js"></script>
 </body>
</html>

The #stage unordered list holds the portfolio items which are seen below.

<li data-tags="Print Design">
 <img src="assets/img/shots/1.jpg" />
</li>
<li data-tags="Logo Design,Print Design">
 <img src="assets/img/shots/2.jpg" />
</li>
<li data-tags="Web Design,Logo Design">
 <img src="assets/img/shots/3.jpg" />
</li>

jQuery

script.js - Part 1

$(document).ready(function(){
 var items = $('#stage li'),
 itemsByTags = {};
 // Looping though all the li items:
items.each(function(i){
 var elem = $(this),
 tags = elem.data('tags').split(',');
 // Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
 $.each(tags,function(key,value){
 // Removing extra whitespace:
value = $.trim(value);
 if(!(value in itemsByTags)){
 // Create an empty array to hold this item:
 itemsByTags[value] = [];
 }
 // Each item is added to one array per tag:
itemsByTags[value].push(elem);
 });
 });

 

Script.js – Part 2

function createList(text,items){
 // This is a helper function that takes the
 // text of a menu button and array of li items
 // Creating an empty unordered list:
 var ul = $('<ul>',{'class':'hidden'});
 $.each(items,function(){
 // Creating a copy of each li item
 // and adding it to the list:
 $(this).clone().appendTo(ul);
 });
 ul.appendTo('#container');
 // Creating a menu item. The unordered list is added
 // as a data parameter (available via .data('list')):
 var a = $('<a>',{
 html: text,
 href:'#',
 data: {list:ul}
 }).appendTo('#filter');
}

Script.js – Part 3

// Creating the "Everything" option in the menu:
createList('Everything',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
 createList(k,v);
});
$('#filter a').live('click',function(e){
 var link = $(this);
 link.addClass('active').siblings().removeClass('active');
 // Using the Quicksand plugin to animate the li items.
 // It uses data('list') defined by our createList function:
 $('#stage').quicksand(link.data('list').find('li'));
 e.preventDefault();
});
// Selecting the first menu item by default:
$('#filter a:first').click();

 

CSS

Styles.css

#filter {
 background: url("../img/bar.png") repeat-x 0 -94px;
 display: block;
 height: 39px;
 margin: 55px auto;
 position: relative;
 width: 600px;
 text-align:center;
 -moz-box-shadow:0 4px 4px #000;
 -webkit-box-shadow:0 4px 4px #000;
 box-shadow:0 4px 4px #000;
}
#filter:before, #filter:after {
 background: url("../img/bar.png") no-repeat;
 height: 43px;
 position: absolute;
 top: 0;
 width: 78px;
 content: '';
 -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
 -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
 box-shadow:0 2px 0 rgba(0,0,0,0.4);
}
#filter:before {
 background-position: 0 -47px;
 left: -78px;
}
#filter:after {
 background-position: 0 0;
 right: -78px;
}
#filter a{
 color: #FFFFFF;
 display: inline-block;
 height: 39px;
 line-height: 37px;
 padding: 0 15px;
 text-shadow:1px 1px 1px #315218;
}
#filter a:hover{
 text-decoration:none;
}
#filter a.active{
 background: url("../img/bar.png") repeat-x 0 -138px;
 box-shadow:    1px 0 0 rgba(255, 255, 255, 0.2),
 -1px 0 0 rgba(255, 255, 255, 0.2),
 1px 0 1px rgba(0,0,0,0.2) inset,
 -1px 0 1px rgba(0,0,0,0.2) inset;
}

 

View the DEMO and get the DOWNLOAD.

Click on the image to see the full tutorial.

Incoming search terms for the article:

About the author

Marvin@Blogfreakz

Marvin@Blogfreakz

Marvin Bea is a blogger, webmaster and musician from the Philippines. His interests include arts, photography, travel, fitness and health.

Related Posts

Create Google Play’s Tab Navigation Using jQuery And CSS

0 Comments

PS Advanced Compositioning

0 Comments

How To Create A Triangular Pixelation Effect Using Photoshop

0 Comments

How to Create Subtle Caption Hover Effects

0 Comments

1 Comment

  1. Website Developers

    10.30.2012

    It is really an amazing markup language which has changed the meaning of web designing industry by expanding and making out new possibilities.