Instructions

All of these instructions are optional depending on how you use this template. I suggest you review them quickly just so you know what to update if needed! Then come back and follow step-by-step when you customize this template for your portfolio.

‍

General

‍

instructions

1. Back to Top link

For the "Back to Top ↑" link in the footer to work correctly, add the id "top" to the first section in each page.

‍

2. Profile Picture

For the ABOUT page, use a free tool like backgroundcut.co to remove the background from your image and replace the current profile picture.

‍

‍

Theme Switcher

‍

Tips

  • It's best to use the theme switcher if you have a simple site where visitors will not be going between pages often. Loading new pages resets the toggle/theme (this is just a limitation of Webflow)
  • Test each page of your site after making changes to the theme colors or adding new elements to a page
instructions

Changing Theme Colors

Update your color swatches on the Style Guide page to change the Default and Inverted themes

‍

‍

‍

instructions

New Designs & Pages

1. Add a "Body" class to the body when creating a new page

‍

‍

instructions

2. Add a "Link" or "Inline Link" class to all links

‍

‍

‍

instructions

3. Add "Color Text Primary" to text inside link blocks (e.g. cards). See and example on the Work page.

‍

‍

‍

‍

instructions

4. Add your inverted logo (second Logo) in the Navigation symbol. The theme switcher will hide the default logo and show the inverted logo when toggled.

‍

‍

‍

‍

‍

instructions

5. Use divs around content to add surface (background) colors and borders. See the list of available classes in the Decoration section of the Style Guide.

‍

‍

WORK – Horizontal page

If you use the WORK – Horizontal page it needs to be adjusted based on your number of Projects you have in the CMS.

‍

instructions

Step 1

Set height of "Horizontal Scroll Section" to
100vh x NumberOfProjects.

Example:
 6 Projects, so 100 x 6 = 600vh









‍

instructions

Step 2

Set "Horizontal Case Study Cards" interaction ending keyframe percent to
100 – (100/NumberOfProjects)

Example: 6 Projects, so 100 – (100/6) = 83.3%

‍

Step 3

Set "Horizontal Case Study Cards" Move X percent to the same number as step two but negative.
‍

Example: –83.3%