‣

Template instructions (start here)

First of all, thanks for purchasing Folio — I'm thrilled! If you have any questions as you go through the setup process, please don't hesitate to shoot me an email. Let's get started!

⚡️UPDATES⚡️

‣

09/07/21: Light and Dark Versions

I've added the ability to choose between both dark and light versions of the template. Check out the Head tab section below to see how to use activate it.

‣

05/02/22: Styling the CTA button at the top

When you create the link in Notion, make the text a link first and then make it bold. Depending on the container, this should trigger the large black button instead of a text link.
If that doesn’t work, do the opposite — make the text bold first and then make it a link. Again, it depends on the container you’re in sometimes (and honestly it’s just sometimes Notion and Super being weird together).

Duplicate this template to your own Notion workspace
Create your site on Super and use your newly created page as the Notion URL
Add your code to your Super settings: Sites > Settings (Gear Icon) > Code

‣

Under the Head tab, add the following code:

<!-- Product Theme styles -->

<link rel="stylesheet" href="https://mattdowney.github.io/folio/style.css">

<!-- Light Theme -->

<!-- Remove this HTML comment to use the light theme

<link rel="stylesheet" href="https://mattdowney.github.io/folio/light-styles.css">

Remove this HTML comment to use the light theme -->

<!-- jQuery v3.2.1 -->

<script type='text/javascript' src='https://code.jquery.com/jquery-3.2.1.min.js' id='script-name-js'></script>

<!-- Product Theme javascript -->

<script defer="defer" async src="https://mattdowney.github.io/folio/site-min.js"></script>

<!-- Add Analytics here (optional) -->

Here's a short video showing how to activate the light theme:

‣

Under the Body tab, add the following code:

<!-- 
Desktop navigation
Important: Make sure to swap out the img link to your logo and update the pixel width accordingly
 -->

<nav class="desktop-nav">
  <div class="left">
    <a href="/">
      <img style="width: 65px; height: auto;" src="https://mattdowney.github.io/folio/img/img-logo.svg" />
      </a>
  </div>
  <div class="right">
    <a class="nav-link-1" href="/about/">About</a>
    <a class="nav-link-2" href="/projects/">Projects</a>
    <a class="nav-link-3" href="/blog/">Blog</a>
    <a class="nav-link-4" href="mailto:[email protected]">Contact</a>
  </div>
</nav>

<!-- 
Mobile navigation
Important: Make sure to swap out the img link to your logo and update the pixel width accordingly
 -->

<div class="mobile-nav">
  <div class="left">
    <a href="/">
      <img src="https://mattdowney.github.io/folio/img/img-logo.svg" />
      </a>
  </div>
  <div class="right">
    <input id="nav" type="checkbox" />
    <label for="nav">
        <span></span>
        <span></span>
        <span></span>
    </label>
    <nav>    
        <ul>
            <li><a class="nav-link-1" href="/about/">About</a></li>
				    <li><a class="nav-link-2" href="/projects/">Projects</a></li>
				    <li><a class="nav-link-3" href="/blog/">Blog</a></li>
				    <li><a class="nav-link-4" href="mailto:[email protected]">Contact</a></li>
        </ul>  
    </nav>
  </div>
</div>

Set up your pages on Super

‣

Sync URLs

You can use Sync URLs if you like, but we find that adding pages manually to Super is a much more reliable way to handle page integration. This may change in the future, but we recommend doing this for now.

Before you launch, have a look at this checklist:

‣

Checklist

~~Update your header navigation in Super~~

Change the links in the Footer database

Update your favicon in Super

Add pretty URLs to your pages, projects, and blog articles

Hi! My name is Cristian Bosch and I help startups design elegant products that align with users and drive business results.

I’m currently working remotely as Lead Product Designer at OutFit Training.

OutFit Training

I was hired to design an innovative fitness product and take it from zero to one in the middle of a global pandemic. The MVP was launched successfully in Q2 of 2021 with initial coverage in one US market and set to expand to other US cities in 2022.

ResearchProduct StrategyPrototypeDesign System

Employment Intermediation Platform

I led the UX design process of a digital product for the government consisting of an employment intermediation platform for a current user base of more than 100,000 registered job seekers.

ResearchProduct StrategyPrototypeDesign System

MUV

MUV

As design lead I oversaw the complete overhaul of three digital products, which included two mobile apps and an administrative web portal for a startup in the ride sharing space.

ResearchProduct StrategyPrototypeDesign System

BucksApp

As design lead I expanded the feature set for a mobile application in the FinTech sector, which included credit scores, spending, and budgeting analytics. I also improved user onboarding which resulted in a significant increase of user engagement.

Product StrategyPrototypeDesign System

Phantom Producer

I was hired to revamp the online experience of an audio platform used by radio producers worldwide and later helped evolve the business model into a subscription product for podcasters, including a mobile app loaded with new features.

PrototypeUser Interface Design

Nos Vamoos

Contract project for a travel startup. I was hired to design the digital experience from scratch and deliver a B2C responsive web product. I worked with the business team to set the vision, product strategy, and requirements for the product, along with final UI deliverables.

Product StrategyPrototypeUser Interface Design

Row	Footer rows
1	Dribbble · Linked In · Medium · Twitter
2	Built with Notion & Super.

‣

Hide all of your pages in this toggle menu, only you will see it

Folio - Web

Hi! My name is Cristian Bosch and I help startups design elegant products that align with users and drive business results.

Projects Database

Footer