‣
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⚡️
‣
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.
‣
- 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
- Set up your pages on Super
- Before you launch, have a look at this checklist:
‣
<!-- 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:
‣
<!--
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>
‣
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.
‣
Change the links in the Footer database
Update your favicon in Super
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
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
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
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
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
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