Making a Beautiful HTML5 Portfolio

n today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

The HTML

The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag:

index.html

view sourceprint?

01

02

<html>

03

<head>

04	<meta charset="utf-8" />

05

06	<title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demotitle>

07

08

09	<link rel="stylesheet" href="assets/css/styles.css" />

10

11

12

15

head>

16

17

<body>

18

19

<header>

20	<h1>My Portfolioh1>

21

header>

22

23	<nav id="filter">

24

25

nav>

26

27	<section id="container">

28	<ul id="stage">

29

30

ul>

31

section>

32

33

<footer>

34

footer>

35

36

37

38	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">script>

39	<script src="assets/js/jquery.quicksand.js">script>

40	<script src="assets/js/script.js">script>

41

42

body>

43

html>

In the body, there are a number of the new HTML5 elements. The header holds our h1 heading (which is styled as the logo), the section element holds the unordered list with the portfolio items (more lists are added by jQuery, as you will see later), and the nav element, styled as a green bar, acts as a content filter.
The #stage unordered list holds our portfolio items. You can see what these items should look like below. Each of them has a HTML5 data attribute, which defines a series of comma-separated tags. Later, when we use jQuery to loop through this list, we will record the tags and create categories that can be selected from the green bar.

view sourceprint?

01	<li data-tags="Print Design">

02	<img src="assets/img/shots/1.jpg" />

03

li>

04

05	<li data-tags="Logo Design,Print Design">

06	<img src="assets/img/shots/2.jpg" />

07

li>

08

09	<li data-tags="Web Design,Logo Design">

10	<img src="assets/img/shots/3.jpg" />

11

li>

You can put whatever you want in these li items and customize the portfolio further. The Quicksand plugin will handle the animated transitions of this list, so you are free to experiment.

Beautiful HTML5 Portfolio with jQuery

The jQuery

What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. The jQuery script we will be writing in this section, will loop through the portfolio items in the #stage list, and create a new (hidden) unordered list for each of the tags it finds. It will also create a new menu option, which will trigger the quicksand transition between the two lists.
First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags.

script.js – Part 1

view sourceprint?

01	$(document).ready(function(){

02

03	var items = $('#stage li'),

04	itemsByTags = {};

05

06	// Looping though all the li items:

07

08	items.each(function(i){

09	var elem = $(this),

10	tags = elem.data('tags').split(',');

11

12	// Adding a data-id attribute. Required by the Quicksand plugin:

13	elem.attr('data-id',i);

14

15	$.each(tags,function(key,value){

16

17	// Removing extra whitespace:

18	value = $.trim(value);

19

20	if(!(value in itemsByTags)){

21	// Create an empty array to hold this item:

22	itemsByTags[value] = [];

23

}

24

25	// Each item is added to one array per tag:

26	itemsByTags[value].push(elem);

27

});

28

29

});

Each tag is added to the itemsByTags object as an array. This would mean that itemsByTags['Web Design'] would hold an array with all the items that have Web Design as one of their tags. We will use this object to create hidden unordered lists on the page for quicksand.
It would be best to create a helper function that will handle it for us:

script.js – Part 2

view sourceprint?

01	function createList(text,items){

02

03	// This is a helper function that takes the

04	// text of a menu button and array of li items

05

06	// Creating an empty unordered list:

07	var ul = $(' ',{'class':'hidden'});

08

09	$.each(items,function(){

10	// Creating a copy of each li item

11	// and adding it to the list:

12

13	$(this).clone().appendTo(ul);

14

});

15

16	ul.appendTo('#container');

17

18	// Creating a menu item. The unordered list is added

19	// as a data parameter (available via .data('list')):

20

21	var a = $('',{

22	html: text,

23

href:'#',

24	data: {list:ul}

25	}).appendTo('#filter');

26

}

This function takes the name of the group and an array with LI items as parameters. It then clones these items into a new UL and adds a link in the green bar.
Now we have to loop through all the groups and call the above function, and also listen for clicks on the menu items.

script.js – Part 3

view sourceprint?

01	// Creating the "Everything" option in the menu:

02	createList('Everything',items);

03

04	// Looping though the arrays in itemsByTags:

05	$.each(itemsByTags,function(k,v){

06	createList(k,v);

07

});

08

09	$('#filter a').live('click',function(e){

10	var link = $(this);

11

12	link.addClass('active').siblings().removeClass('active');

13

14	// Using the Quicksand plugin to animate the li items.

15	// It uses data('list') defined by our createList function:

16

17	$('#stage').quicksand(link.data('list').find('li'));

18	e.preventDefault();

19

});

20

21	// Selecting the first menu item by default:

22	$('#filter a:first').click();

Great! Now that we have everything in place we can move on to styling the page.

The CSS

Styling the page itself is not that interesting (you can see the CSS for this in assets/css/styles.css). However what is more interesting is the green bar (or the #filter bar), which uses the :before / :after pseudo elements to add attractive corners on the sides of the bar. As these are positioned absolutely, they also grow together with the bar.

styles.css

view sourceprint?

01

#filter {

02	background: url("../img/bar.png") repeat-x 0 -94px;

03	display: block;

04	height: 39px;

05	margin: 55px auto;

06	position: relative;

07	width: 600px;

08	text-align:center;

09

10	-moz-box-shadow:0 4px 4px #000;

11	-webkit-box-shadow:0 4px 4px #000;

12	box-shadow:0 4px 4px #000;

13

}

14

15	#filter:before, #filter:after {

16	background: url("../img/bar.png") no-repeat;

17	height: 43px;

18	position: absolute;

19

top: 0;

20	width: 78px;

21	content: '';

22

23	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);

24	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);

25	box-shadow:0 2px 0 rgba(0,0,0,0.4);

26

}

27

28	#filter:before {

29	background-position: 0 -47px;

30	left: -78px;

31

}

32

33	#filter:after {

34	background-position: 0 0;

35	right: -78px;

36

}

37

38	#filter a{

39	color: #FFFFFF;

40	display: inline-block;

41	height: 39px;

42	line-height: 37px;

43	padding: 0 15px;

44	text-shadow:1px 1px 1px #315218;

45

}

46

47	#filter a:hover{

48	text-decoration:none;

49

}

50

51	#filter a.active{

52	background: url("../img/bar.png") repeat-x 0 -138px;

53	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),

54	-1px 0 0 rgba(255, 255, 255, 0.2),

55	1px 0 1px rgba(0,0,0,0.2) inset,

56	-1px 0 1px rgba(0,0,0,0.2) inset;

57

}

Before / After Elements

With this our beautiful HTML5 portfolio is complete!

Conclusion

You can use this template to present your work. The best thing about it is that it’s really easy to customize. You only need to change the contents of the initial LI items of the #stage list, and specify some new tags – the script will do the rest. If the visitor doesn’t have JavaScript enabled, they will still see all your portfolio items, which is also good for SEO purposes.

Share on Facebook Share on Twitter Share on Google Plus

About Moh.Ridwan