I’m Tony Reyes, an Experience Designer in Austin, TX. I help companies create systems, tools, and apps to improve how teams work together.

‣

Instructions

Duplicate this template to your Notion workspace
Create a site using Super, using your newly created page as the Notion URL.
Add the settings below to your Super site settings:

‣

Fonts

The fonts used in the demo are: PS Fournier: Light Reason New: Regular and Medium You’ll need to add these fonts to a new web project in your Adobe Typekit account and paste the unique ID into the code below.

If you want to use your own fonts you can find and replace all instances of the mentioned font names in the CSS below.

/* The names of the font families in the code below in case you want to quickly find and replace them with your own fonts */
psfournier-std
reason-new

‣

V2 Code

V2 supports blogs and projects and has some key changes to V1.

Support for a writing section, which is powered by linked databases
Page titles are hidden by default
A centrally managed footer, again using linked databases
Better support for landscape phones and tablet size screens
Tons of tiny improvements to the enhance typography and layout

If you’re switching from V1 to V2 and have also made customization to the code in your site then proceed with caution. It might be best to do a diff merge between your current code and the code below. You can use this tool to help with that.

<!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/rsu7eec.css">

<!-- Favicon: Having a custom nav breaks the Favicon that you can upload in the Super settings. To change it, update the link here -->
<link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png">

<!-- Meta Description: Having a custom nav breaks the site description that you can edit in the Super settings. To change it, update the text here -->
<meta property="og:description" content="Tony Reyes Design Portfolio">

<!-- Share image: Having a custom nav breaks the site share image that you can edit in the Super settings. To change it, update the url and the alt description below -->
<meta property="og:image" content="https://s3.amazonaws.com/super-notion/images/ca38c918-dbcb-4cdf-ae61-35a0f6415764.jpg">
<meta property="og:image:alt" content="Screenshot of the Cy demo site">

<!--- Cy template styles -->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css">

<!-- Add your own custom overrides here -->
<style>

:root {
    --color-bg-default: #fff !important;
  }

</style>
<!-- End of custom overrides -->

<!-- Navigation -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Tony Reyes</a>
  </div>
  <div class="right">
    <a class="nav-link" href="/Projects">Projects</a>
    <a class="nav-link" href="/About">About</a>
  </div>
</nav>

4. Make sure you’ve done these things before you go live

‣

Go live checklist

~~Change all links in the footer.~~

~~Check the favicon, update if necessary in the snippet code.~~

~~Amend the meta description in the snippet code.~~

~~Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages.~~

Add pretty links for your pages and projects into Super’s pretty URL settings.

‣

Example of pretty links and url structure