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!
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:
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:firstname.lastname@example.org">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@example.com">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.
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.
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.
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.
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.
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 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.