Instructions

Sticky Sections

This template features quite a few tricks with sticky positions. Because of this, there are a few things to keep in mind when modifying the template.

1. The element "Layout" on the homepage has a negative margin of -300vh as default. This number has to be modified based on the number of projects you have. For example, 4 projects needs a negative margin of -300vh, 5 projects need a negative margin of -400vh, 2 projects need a negative margin of -100vh etc.

2. For the shadow / darkening of previous project cards on scroll on the homepage, the element "Project Card Shadow" always needs to have a negative margin of -100vh.

3. For the border around the project cards on the homepage, the element "Layout Main Border" always needs to have a negative margin of -100vh.

4. For the Footer section to scroll up on top of another section, the last section on each page needs to have a sticky position. This effect looks the best if the last section also has a height of 100vh.

Project Card Interaction

In order for the Project Card interaction (on the homepage) to work properly, each thumbnail needs to have an aspect ratio of 3:2. If this ratio is changed, you need to change the movement percentages of each thumbnail in the interaction keyframes.

About Modal

This template uses a modal for the About section. This modal can be found as a component called "About Modal" at the bottom of each page. In order to customize it, simply double click the component and set its outermost element to "display: flex".