Portfolio Page

This template provides a very elegant way to showcase your work using Infinity Scroll. Setting up Portfolio is simple. Please use the following codes:

Code Example:

You need to assign a div for each project you have inserted into portfolio structure

Code Example:

Fit to screen thumbnails animation effects

Options	Description
webgl-fitthumbs	Set this class for fit to screen thumbnail animation with THREE JS Also you can swap between 6 animation types by adding these classes
scale-fitthumbs	Set this class for fit to screen thumbnail animation with scale effect
no-fitthumbs	Set this class for disable fit to screen thumbnail animation
center-list	Set this class to center all the items list

---

---

---

Project Page

This page is composed of three section:

---

Hero

This page section contains the project title, subtitle and image/video.

Code Example:

You need to assign a div for each project you have inserted into portfolio structure

Code Example:

Hero Options. All this classes are applied to #hero-caption div

Options	Description
content-max-width	Set this class to have the caption maximum width up to 1280px
content-full-width	Set this class to have the caption width like the viewport
parallax-scroll-caption	This class will make your hero caption parallax on scroll

---

---

Main Page Content

On this page section contains you can build all the page content.

Code Example:

This section has the following option:

Options	Description
content-max-width	Set this class to have the content maximum width up to 1280px
content-full-width	Set this class to have the content width like the viewport

---

---

Next Project Navigation

The section should have the same atributes as the next project hero.

Code Example:

This section has the following options:

Options	Description
change-header	Set this class to change the header color for the next project page:
content-max-width	Set this class at to have the content maximum width up to 1280px
content-full-width	Set this class to have the content width like the viewport
data-color="#838b8a"	Set the color for Mouse Circle Cursor hovering the next page title url
data-firstline="Next"	First word displayed on the Mouse Circle Cursor hovering the next project title url
data-secondline="Project"	Second word displayed on the Mouse Circle Cursor hovering the next project title url