‣
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!
⚡️UPDATE⚡️
09/07/21: 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.
- 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 our 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:hey@mattdowney.co">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:hey@mattdowney.co">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.
‣
Clint McManaman — Product Design Case Studies & Other Work
Clutterfree
Clutterfree
Clutterfree helps you create a reduced attachment to things so you can create space for things that matter.
MobileUIUXWireframingWebResearchTesting
SaaS apps
SaaS apps
A collection of SaaS app products from 2015-today.
UIUXWireframingWebResearchTesting
Ditto
Ditto
Relationships take effort. Ditto helps you grow closer together, so you can get back to "us".
MobileUIUXWireframingBrandingWebResearchTesting
Attender
Attender
Attender is an ecosystem of apps allowing you to experience LifeChurch anytime, anywhere.
MobileUIUXWireframingWebResearchTesting
Web Design
Web Design
A sampling of no-code websites I've designed and launched.
WireframingWebUIUXMobileNoCode
Talks, Tutorials, Resources
Rapidly map out and test UX with Whimsical
Rapidly map out and test UX with Whimsical
November 17, 2020