How to Build a Sliding One Page Portfolio with jQuery

In this tutorial, I will show you how to create an interesting sliding one page portfolio with jQuery. One page sites are usually a great way to show your prospective clients how good you are at what you do. This one is no exception.

Demo & Source Files

View the DemoDownload the Source Files

Screenshot

The HTML

We’ll start off with some simple HTML.

<div id="main">

<section id="box1" class="box">

</section>
<section id="box2" class="box">

</section>
<section id="box3" class="box">

</section>
<section id="box4" class="box">

</section>
<section id="box5" class="box">

</section>
<section id="box6" class="box">

</section>
<section id="box7" class="box">

</section>
<section id="box8" class="box">

</section>
<section id="box9" class="box">

</section>

</div>

Each section represents a part of all the colored squares. Each one has a different ID so that we can style the different background colors.

Next, we add the navbar to each section:

<div id="main">

<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box5" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box6" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box7" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box8" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box9" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>


</div>

Once we have that, we can add some sample content to each section.

<div id="main">

<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>


	<h2>John Smith</h2>
	<h3>
	Welcome to the portfolio of the great John Smith!
	</h3>
</section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>


<h3>Contact Me</h3>
<p>
<ul class="contentul">
<li>Phone number: (123) 456 7890</li>
<li>Fax: (123) 456 7890</li>
<li>Email: johnsmith@johnsmith.com</li>
</ul>
</p>


</section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>About</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Services</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box5" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Why hire me?</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box6" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Awards</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box7" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Portfolio</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box8" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Clients</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box9" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Resume</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>

</div>

Wonderful! Now that we have our HTML base, we can move on to the CSS that will make it all look good.

The CSS

We’ll start off with some generic styling.

body {
font-family: arial;
font-size: 15px;
overflow: hidden;
}

h2 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 54px;
margin-top: 50px;
}

h3 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 16px;
margin-top: 20px;
}

p {
color: #ffffff;
text-align: center;
font-family: arial;
font-size: 16px;
line-height: 24px;
margin-top: 20px;
}

.contentul {
text-align: center;
font-size: 16px;
line-height: 24px;
color: #ffffff;
}

Just some simple text styling. The “.contentul” styling is for any unordered lists inside the sections that aren’t the navigation.

Next up, we’ll style the navbar.

nav {
height: 50px;
width: 100%;
}

nav ul li {
height: 50px;
width: 11.1%;
text-align: center;
float: left;
}

nav ul li a {
text-decoration: none;
color: #ffffff;
line-height: 50px;
display: block;
}

#link1 {
background: #fe4632;
}

#link2 {
background: #005fe5;
}

#link3 {
background: #ffb40a;
}

#link4 {
background: #80bf34;
}

#link5 {
background: #26bfa3;
}

#link6 {
background: #2d93cf;
}

#link7 {
background: #ab250f;
}

#link8 {
background: #e99702;
}

#link9 {
background: #9adf56;
}

Once again, very simple. There’s a “nav” element in each section, which contains an unordered list full of the links. Each link takes up 11.1% of the nav, so that it ends up stretching to almost the end of the section the user is currently on. Each link has a different background color that corresponds to the section that the link points to.

Now, the sections.

.box {
float: left;
}

#box1 {
background: #fe4632;
}

#box2 {
background: #005fe5;
}

#box3 {
background: #ffb40a;
}

#box4 {
background: #80bf34;
}

#box5 {
background: #26bfa3;
}

#box6 {
background: #2d93cf;
}

#box7 {
background: #ab250f;
}

#box8 {
background: #e99702;
}

#box9 {
background: #9adf56;
}

Each box is floated to the left so that they end up being right next to each other horizontally as well as vertically. Each one also has a different background color.

That’s it for the CSS. Next up is the jQuery that will power the whole thing.

The jQuery

Before we dive into the code, I’ll explain how it will work. When the document is loaded, a “resizeBoxes” function will run, which resizes the boxes to be the same size as the user’s viewport. The same function will run whenever the window is resized. When a link is clicked, the margin-top and the margin-left of the “main” div will be animated so that the user will end up seeing the section that we want them to see. We’ll have a neat “goTo” function to power that.

This is the base template, which we’ll fill with some code in a moment.
[js]
$(document).ready(function(){

function resizeBoxes() {

}

resizeBoxes();

$(window).resize(function() {
resizeBoxes();
});

$(‘nav ul li a’).click(function(){
return false;
});

function goTo(horizontal,vertical) {

}

});
[/js]

Now that we’ve got the skeleton, we can start writing the actual functions.

[js]
function resizeBoxes() {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$(‘#main’).css({
width: browserWidth*3,
});

$(‘.box’).css({
width: browserWidth,
height: browserHeight,
});

}

resizeBoxes();

$(window).resize(function() {
resizeBoxes();
});

$(‘nav ul li a’).click(function(){
return false;
});
[/js]
In this function, “main” is resized to just barely fit each box so that there is a grid of 3 by 3, and each box resizes to the dimensions of the viewport. Then, we execute the function. There’s also a browser resize handler, which recalculates the dimensions of each box whenever the user’s browser is resized. Lastly, there’s a return false for each nav link so that the browser doesn’t actually follow each link.

Up next, we have the “goTo” function.
[js]
function goTo(horizontal,vertical) {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$(‘#main’).animate({
marginLeft: ‘-’+browserWidth*horizontal,
marginTop: ‘-’+browserHeight*vertical,
}, 1000);

}
[/js]
The function gets the viewport dimensions and and writes them to 2 variables. Then, it animates the margins of the “main” element so that the user ends up seeing the section we want them to see.

Lastly, we’ve got to add click function for each nav link.
[js]
$(‘#link1 a’).click(function(){
goTo(0,0);
});

$(‘#link2 a’).click(function(){
goTo(1,0);
});

$(‘#link3 a’).click(function(){
goTo(2,0);
});

$(‘#link4 a’).click(function(){
goTo(0,1);
});

$(‘#link5 a’).click(function(){
goTo(1,1);
});

$(‘#link6 a’).click(function(){
goTo(2,1);
});

$(‘#link7 a’).click(function(){
goTo(0,2);
});

$(‘#link8 a’).click(function(){
goTo(1,2);
});

$(‘#link9 a’).click(function(){
goTo(2,2);
});
[/js]

Because we have the “goTo” function, we’re saving ourselves the headache of calculating each click function seperately. We’re also reducing the amount of code necessary. Wonderful!

Well, that’s it for this tutorial. If you have any questions or comments, the comment form is below.

Author: (7 Posts)

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.

Comments