Jamison Namba's Portfolio

Jamison Namba's Portfolio

experience designer • problem solver • relationship builder

Hi there ✨

I'm Jamison, a UX designer who strives to bring authenticity and connection into the everyday moments of work and business.

Learn more about me

My Work

Projects database

‣
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. Add the snippet code and fonts:
    4. ‣
    Fonts

    The fonts used in the template are: PS Fournier: Light (H1, H2) Reason New: Regular and Medium (Body, H3) 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.

    ‣
    Using different fonts

    If you want to use your own fonts you’ll need to add custom overrides beneath the CSS in the code below. You can see the original CSS at the following link: https://iamsamsmall.github.io/cy/style.css 

    /* Here are the names of the font families in the code. Search for them so you know which lines to override in your customisations. */
psfournier-std
reason-new

    ‣
    V2 code

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

    ⚠️
    If you’re switching from V1 to V2 and have also made customisations to the code in your site then proceed with caution.
    <!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/fdf6knd.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/c8461656-87dc-48ef-a77e-cecebc09d0a1.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="Jamison Namba's 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/940d1438-b76d-4eb0-962e-08d088a1e825.png">
<meta property="og:image:alt" content="Jamison Namba's logo">

<!--- 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>

/* --- Change default colors --- */
:root {
  --color-bg-default: #EDF1EE !important;
  --color-text-default: #353535 !important;
  --color-text-default-light: #353535 !important;
  --color-text-gray: #959BA9 !important;
  --color-bg-green: #D2E7D5 !important;
	--color-bg-green-light: #D2E7D5 !important;
  --collection-card-cover-size-large: 210px !important;
}
@media screen and (min-width: 50em) {
  :root {
    --collection-card-cover-size-large: 270px !important;
  }
}
.notion-callout.bg-green-light {
		background: #D2E7D5 !important;
	}

/* Increase base font size for large screens */
@media screen and (min-width: 50em) {
  html {
    font-size: 18px !important;
  }
}

body {
  font-family: heebo, sans-serif; !important;
	font-weight: 400 !important;

  /* Make the text nice and crisp */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Improve kerning for good measure */
  text-rendering: optimizeLegibility;
}

strong {
    font-weight: 700 !important;
}

/* Styling for page names */
.notion-header__title {
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  min-height: auto !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0 !important;
  display: none;
}
.notion-header__content>div {
  margin-bottom: 0px !important;
}
.notion-header {
  margin-bottom: 0px !important;
  padding-top: 32px !important;
}
@media screen and (min-width: 680px) {
  .notion-header {
    padding-top: 80px !important;
  }
}

/* Adjust line-height and letter-spacing for body copy */
.notion-semantic-string {
  line-height: 1.7 !important;
  letter-spacing: -0.01em !important;
}

html {
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

/* --- Heading styles --- */

/* H1 */
h1.notion-heading, .notion-page__properties .notion-property__text {
  font-family: source-serif-4-display, serif; !important;
  font-weight: 600 !important;
  font-size: 1.875rem !important;
}
h1.notion-heading .notion-semantic-string, .notion-page__property .notion-property__text .notion-semantic-string {
  line-height: 1.27 !important;
  letter-spacing: -0.03em !important;
}
@media screen and (min-width: 50em) {
  h1.notion-heading .notion-semantic-string, .notion-page__property .notion-property__text .notion-semantic-string {
    font-size: 2.55rem !important;
  }
}
/* H2 */
h2.notion-heading {
  font-family: source-serif-4-display, serif; !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* H3 */
h3.notion-heading {
  font-weight: 700 !important;
  margin-bottom: 0.25em !important;
}

/* Remove padding */
.notion-heading {
  padding: 0 !important;
}

/* Adjust line height for H2 and H3 */
.notion-heading .notion-semantic-string {
  line-height: 1.3 !important;
}

/* Ensure opacity remains at 1 when a heading is a link */
.notion-heading .notion-semantic-string .link {
  opacity: 1 !important;
}

.notion-text__content {
  padding: 8px 0 !important;
}

/* --- Nav Bar --- */
.nav {
    position: fixed !important;
		background: var(--color-bg-default) !important;
  }
  .nav .right, .nav .left {
    margin-bottom: 0.1em !important;
  }
  #page-index {
    padding-top: 4em !important;
  }

/* --- Change Image caption alignment --- */
.notion-image.page-width>figcaption, .notion-image.full-width>figcaption {
  text-align: left!important;
  display: block!important;
}
/* left align image caption (affects image captions across the site) */
figcaption {
  text-align: left !important;
  padding: 0 px 0 0 !important;
  color: var(--color-text-gray) !important;
}

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

<!-- Navigation -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Jamison Namba</a>
  </div>
  <div class="right">
    <a class="nav-link" href="/work">Work</a>
    <a class="nav-link" href="/about">About</a>
    <a class="nav-link" href="/thoughts">Thoughts</a>
  </div>
</nav>

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

‣
Go live checklist
Change all links in the footer database
Check the favicon, update if necessary in the snippet code
Amend the meta description in the snippet code
Update the share image in the snippet code
Check that the Show or hide page properties option in Super settings is set to ‘Show’
‣
Setting looks like this...
image

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, projects, and articles into Super’s pretty URL settings. By default you’ll need to use projects/ and writing/, you can amend these if you want but you’ll need to add CSS overrides.
‣
Example of pretty links and url structure
image

Footer

NameRows
Let's chat about inclusive product design, Figma tips and tricks, or Tarot as a mindfulness practice 🌱
Email • LinkedIn • Resume
‣
Hide your pages in this toggle menu, only you will see it
Work
About Jamison
Thoughts
Projects database
Writing database
Footer