‣
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
Hola! My name is Cristian Bosch and I’m a Product Designer based in Paraguay, South America.
I’m currently working remotely 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.
MobileWebZero-to-Market
Employment Intermediation Platform
Employment Intermediation Platform
I led the UX design process of a digital product in the public sector which consisted of an employment intermediation platform for the Ministry of Labor, spearheaded by the Inter-American Development Bank, and for a current user base of more than 100,000 registered job seekers.
WebZero-to-Market
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.
MobileWebRedesign
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.
MobileWebNew Features
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.
MobileWebRedesign
Nos Vamoos
Nos Vamoos
Contract project for a local travel startup. I was hired to design the digital experience from scratch and deliver a B2C responsive web product. I worked with business stakeholders to refine the vision, direction, and requirements for the product. Project was launched in 2018, but hit hard during the pandemic.
WebZero-to-Market