Cy demo site

Cy is a minimal portfolio template built on Notion and powered by Super. It was designed by Sam Judge, who also uses it for his site.

Instructions
  1. Duplicate this template to your Notion workspace
  2. Create a site using Super, using your newly created page as the Notion URL.
  3. Set up your fonts and add the code to your Super settings:
  4. Fonts

    The fonts used in the template 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 don’t have a Typekit account you can rely on the chosen Google Webfonts as a fallback instead. They’re a pretty good match, here’s the difference:

    image
    Using your own font choices

    If you want to change the fonts you’ll need to add custom overrides in the CSS editor. You can see the original CSS at the following link: https://iamsamsmall.github.io/cy/style.css

    /* Here are the font stacks in the code. Search for them so you know which lines to override in your customisations. */
    font-family: reason-new, 'Work Sans', sans-serif !important;
    font-family: psfournier-std, 'Nanum Myeongjo', serif !important;

    Code for original Super editor

    Paste the code below into the Snippet Injection field in your Super settings.

    <!-- Google fonts for fallback -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
    
    <!-- Typekit: Update the link below with your Typekit ID -->
    <link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">
    
    <!-- Add your analytics script here -->
    <!-- I use Fathom, it’s a great alternative to Google Analytics with a minimal dashboard and a focus on privacy. Please consider using my referral link when creating an account: https://usefathom.com/ref/CSKBJR -->
    
    <!-- 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="Cy, a minimal portfolio template built on Notion and powered by Super.">
    
    <!-- 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: This is the CSS file that contains all the styles for the template. It is centrally hosted via GitHub. If you’d like to make changes to the style of your website you can add custom overrides in the style tag below. -->
    <link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css">
    
    <!-- Add your own custom overrides here -->
    <style>
    
    </style>
    <!-- End of custom overrides -->
    
    <!-- Navigation -->
    <nav class="nav">
      <div class="left">
        <a class="nav-link" href="/">Cy</a>
      </div>
      <div class="right">
        <a class="nav-link" href="/projects">Projects</a>
        <a class="nav-link" href="/about">About</a>
        <a class="nav-link" href="/writing">Writing</a>
      </div>
    </nav>
    

    Code for Beta (new) Super Editor

    1. Go to Options > Global Site Injection > Edit Code 2. Paste the following code into HTML (Head)

    <!-- Google fonts for fallback -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
    
    <!-- Typekit: Update the link below with your Typekit ID -->
    <link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">
    
    <!-- Add your analytics script here -->
    <!-- I use Fathom, it’s a great alternative to Google Analytics with a minimal dashboard and a focus on privacy. Please consider using my referral link when creating an account: https://usefathom.com/ref/CSKBJR -->
    
    <!--- Cy template styles: This is the CSS file that contains all the styles for the template. It is centrally hosted via GitHub. If you’d like to make changes to the style of your website you can add custom overrides in the style tag below. -->
    <link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css">
    

    3. Paste the following code into HTML (Body)

    <!-- Navigation -->
    <nav class="nav">
      <div class="left">
        <a class="nav-link" href="/">Cy</a>
      </div>
      <div class="right">
        <a class="nav-link" href="/projects">Projects</a>
        <a class="nav-link" href="/about">About</a>
        <a class="nav-link" href="/writing">Writing</a>
      </div>
    </nav>
    

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

Interactive projects

Projects database

Print projects

Projects database

Selected writing

Writing database

Hungry for more
Mar 5, 2021
Hungry for more
In many ways, the work of a critic is easy. We risk very little, yet enjoy a position over those who offer up their work and theirselves to our judgment. We thrive on negative criticism, which is fun to write and to read.
The Creative Cycle
Jan 23, 2020
The Creative Cycle
I’ve noticed a pattern, it reveals itself through my mood and my energy, my self esteem and my ego, and my vigor or my listlessness. I refer to this pattern as the Creative Cycle.
The conversational tendencies to avoid in user interviews
Aug 15, 2019
The conversational tendencies to avoid in user interviews
Our natural social behaviours can hinder a deeper understanding of users. But what are these conversational tendencies and how can we avoid them to conduct better user interviews?

Footer

NameRows
1
2
Made with Super + Notion · Cy template
Hide your pages in this toggle menu, only you will see it