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.
Digital product design for business
Hi, I'm Jim – a longtime digital product designer and user experience consultant. My specialty is business apps.
Experience
Pixels for Humans
Director of UX, 2015–present Have led the design & front-end development for 20+ product design projects, including both web & mobile applications for a variety of clients.
FM Global
Senior UX Designer, 2017-2018 Led the design process for a collaborative team developing new internal tools using in-depth UX research, Design Thinking, and Agile development practices.
Threat Stack
Senior Designer, 2016-2017 Led all product-related UI design as the sole visual & interaction designer for a SaaS cloud security product, working with a collaborative, multi-disciplinary product team.
Oliver Wyman
Lead Designer for Oliver Wyman Labs, 2014-2015 Designed a family of 5+ web-based software applications, working with small ad-hoc project teams; developed the group's first design system for standardizing the visual language.
Education
Rhode Island School of Design BFA Graphic Design, 2005
Tools & Capabilities
- Figma is my favorite design software, though Sketch holds a special place in my heart. I'm also cool with XD, if that's your thing.
- I have lots of experience with, and opinions about, writing HTML & CSS (especially with Sass). This always informs my design work. I know enough JavaScript to break things; I then usually ask an expert to help me fix them 🙂
- I can do research, and I can do visual design, but neither is my strongest suit. I've worked closely with both disciplines, and I know how to critique and support them.
- I love working at the systems level, creating consistency across features or products. Design systems are a strong interest of mine.