Designing the portfolio page

We create personal websites to expose our skills to the world. On the home page, we give a brief introduction about us and what we actually do. But no one is going to believe you unless you can provide facts that prove the given details. Providing examples of our work is the best way to convince the readers of your website or potential clients. So let's start creating a cool portfolio page.

There are two types of pages we need for designing our portfolio:

• Portfolio gallery: This page contains a collection of work samples

• Portfolio single: This page contains detailed information about a single work sample

Portfolio gallery

We are going to create a separate step for each of the portfolio items. We can use an overview step with a larger scale to show the portfolio steps as a gallery. Let's create the portfolio overview step:

<div id="portfolio-overview" class="step slide" data-x="3250" data-y='400' 
data-scale="3.5" data-type="portfolio-gallery" >
</div>...