Johnnie Yu 俞润中

Johnnie Yu 俞润中

Hi, I'm Johnnie. I'm a senior at New York University, pursing a B.A in History and Cinema Studies. I'm also a VC and GenZ angel investor, interested in consumer goods, crypto, and tech-enabled businesses.

Connect with me: Twitter - LinkedIn - Medium - Email

Current Projects

Projects database

My Links

Introductions, quick conversations, etc.

My academic and work experiences.

Temporarily where you can see my angel investments. A new Notion page is in the makings... coming soon.

List of things I've failed to achieve

Press & Media Features

Selfmade Lands $1 Million in Pre-Seed Funding · BeautyMatter · August 2021

API students are done with NYU’s performative support · Washington Square News · May 2021

My Selected Writings

Footer

NameRows
1
Crafted with ♥ by Johnnie Yu
2
Made with Super.so + Notion.so + Cy
Top Navigation
Hidden Pages

Linked Pages

Pages direclty linked on the page.

About
Get in Touch
CV
Failure Resume
Collecting

Individual Sites

Unlinked, independent pages.

My Links
My Links
Book a Meeting
Projects

Database

Databases for page building!

Projects database
Writing database
Footer

Custom Mods
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

Code

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

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KKBN89QMD1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-KKBN89QMD1');
</script>

<script src="https://embed.small.chat/T01JC1DHQLQC01LCAXL81K.js" async></script>

<!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/gfu7ssa.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://slate.textile.io/ipfs/bafkreibblarntksyshhh7mimniq6ncudon67toybvvf2klnrh7iogvaxaq">

<!-- 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="Johnnie is a Chinese-American student, writer, and photographer based in New York, NY.">

<!-- Share image: Having a custom nav breaks the site share image that you can edit in the Super settings. To include one add a url to your iimage in between the quotes like this > content="[here]" and write an alt description too -->
<meta property="og:image" content="">
<meta property="og:image:alt" content="">

<style>
/* --- Change default colors --- */
:root {
  --color-bg-default: #FAFAFA !important;
  --color-text-default: #333333 !important;
  --color-text-default-light: #4B5673 !important;
  --color-text-gray: #959BA9 !important;
}

/* --- TYPOGRAPHY --- */

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

body {
  font-family: reason-new, sans-serif !important;

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

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

/* 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;
}
.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;
}

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

/* H1 */
h1.notion-heading, .notion-page__properties .notion-property__text {
  font-family: psfournier-std, serif !important;
  font-weight: 200 !important;
  font-size: 1.875rem !important;
}
h1.notion-heading .notion-semantic-string, .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-page__properties .notion-property__text .notion-semantic-string {
    font-size: 2.55rem !important;
  }
}
/* H2 */
h2.notion-heading {
  font-family: psfournier-std, serif !important;
  font-weight: 200 !important;
  letter-spacing: -0.01em !important;
}

/* H3 */
h3.notion-heading {
  font-weight: 500 !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;
}

/* --- NAVIGATION --- */

/* Hide the Notion nav bar */
.notion-navbar {
  display: none !important;
}

/* Custom nav styling (see HTML at bottom of code) */
.nav {
  align-items: flex-start;
  padding: 25px;
  display: flex;
  position: static;
  z-index: 9999;
  height: 110px;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (min-width: 30em) {
  .nav {
    align-items: center;
    padding: 0 25px;
    height: 64px;
    flex-direction: row;
  }
}
.nav .right, .nav .left {
  display: flex;
  margin-bottom: 0.25em;
}
.nav .right {
  margin-right: -20px;
}
.nav-link {
  transition: all .3s ease-in-out;
  justify-content: center;
  align-items: center;
  padding: 0 20px 0 0;
  display: flex;
  height: 100%;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-default);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* --- CONTENT STYLING --- */

/* --- Adjust the max width of pages --- */
.super-content.max-width, .notion-header__content.max-width {
  max-width: 1080px!important;
}

/* --- Remove bottom page padding and adjust page padding for smaller screens --- */
.super-content {
  padding-bottom: 40px !important;
}
@media screen and (min-width: 415px) and (max-width: 800px) {
  .super-content, .notion-header__content {
    padding-left: 46px !important;
    padding-right: 46px !important;
  }
}

/* --- Remove additional spacing on mobile that is created by column layout on desktop --- */
@media screen and (max-width:680px) {
  .notion-column {
    padding: 0px!important;
  }
}

/* --- Control heading spacing in column layout --- */
.notion-column>.notion-heading {
  margin-top: 7px !important;
}

.notion-header__icon-wrapper {
  padding: 2px!important;
  bottom: 8px!important;
}

/* --- Adjust quote styling so it can be used as a standfirst --- */
.notion-quote {
  border-left: 0px!important;
  padding: 0!important;
  margin: .5rem 0 1rem!important;
}

/* --- Change handling of full width images --- */
.notion-image.full-width img {
  object-fit: fill!important;
  height: auto!important;
}

/* --- Change Image caption alignment --- */
.notion-image.page-width>figcaption, .notion-image.full-width>figcaption {
  text-align: center!important;
}

/* --- PROJECTS LISTING --- */

/* Remove header of the gallery table */
.notion-collection__header {
  display: none !important;
}

/* Adjust spacing of gallery grid */
.notion-collection-gallery {
  grid-gap: 46px !important;
  gap: 46px !important;
  grid-row-gap: 66px !important;
  border-top: none !important;
}

/* Stop card from breaking out of layout on screens smaller than 370px */
@media screen and (max-width:370px) {
  .notion-collection-gallery {
    display: block !important;
  }
  .notion-collection-gallery > a {
    display: block !important;
    margin-bottom: 44px !important;
  }
}

/* Override default card styling */
.notion-collection-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.notion-collection-card:hover {
  background: transparent !important;
}
.notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img, .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img {
  height: auto !important;
  max-height: none !important;
}
.notion-collection-card__cover.large>div {
  position: relative !important;
}
.notion-collection-card__cover {
  height: auto !important;
  min-height: none !important;
  border-bottom: none !important;
}
.notion-collection-card__cover img {
  position: relative !important;
  height: auto !important;
  width: 100% !important;
  border-radius: 0  !important;
  object-fit: contain !important;
  object-position: initial !important;
  padding-bottom: 0  !important;
}
.notion-collection-card__content {
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  font-size: 1em !important;
  overflow: hidden;
}

/* Hides page title */
.notion-property__title {
  display: none !important;
}

/* Display text property as a heading */
.notion-collection-card__property .notion-semantic-string {
  display: block !important;
  margin: 0.6em 0 0.4em !important;
  font-family: psfournier-std, serif !important;
  font-weight: 200 !important;
  font-size: 27px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  white-space: normal !important;
}

/* Add underline to title on hover of project card */
.notion-collection-gallery > a .notion-collection-card__property .notion-semantic-string span {
  border-bottom: 1px solid transparent !important;
  transition: border-color .2s ease-in;
}
.notion-collection-gallery > a:hover .notion-collection-card__property .notion-semantic-string span {
  border-bottom: 1px solid var(--color-text-default) !important;
}

/* Increase spacing between project meta data */
.notion-collection-card__property {
  margin: 3px 0 !important;
}

/* Stop the tags from truncating */
.notion-property__select {
  display: inline !important;
  white-space: normal !important;
  overflow: auto !important;
}

/* Adjust pill styling */
.notion-pill {
  font-size: 18px !important;
  border-radius: 0px !important;
  line-height: 24px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  display: inline !important;
  white-space: normal !important;
  text-overflow: initial !important;
}

/* Adds comma before each item */
.notion-pill::before {
  content: ", ";
  white-space: pre;
}

/* Removes comma before first item */
.notion-pill.first::before {
  content: "";
}

/* Make all but the default colour display as a lighter colour */
.pill-default {
  background: none !important;
}
.pill-gray, .pill-brown, .pill-orange, .pill-yellow, .pill-green, .pill-blue, .pill-purple, .pill-pink, .pill-red {
  background: none !important;
  color: var(--color-text-gray) !important;
}

/* --- PROJECT PAGE --- */

/* Hide cover image from page headers */
.notion-header__cover {
  display: none !important;
}
.notion-header__content.no-icon.has-cover .notion-header__title-wrapper {
  margin-top: 0 !important;
}

/* Amend the display of properties to act as header and meta data */

/* Adjust spacing between header text elements */
.notion-page__properties {
  margin: 16px 0 0 0;
}
@media screen and (min-width:680px) {
  .notion-page__properties {
    margin: 30px 0 60px 0;
  }
}

.notion-property__text .notion-semantic-string {
  margin-bottom: 16px;
}

/* Display as single column */
.notion-page__property {
  grid-template-columns: 1fr !important;
}

/* Remove default styling of properties */
.notion-page__properties .notion-property {
  border-radius: 0 !important;
  padding: 0 !important;
}
@media screen and (min-width: 50em) {
  .notion-page__properties .notion-property {
  font-size: 18px !important;
  }
}

/* Hide property name */
.notion-page__property-name {
 display: none !important;
}

/* Hide divider */
.notion-page__properties .notion-divider {
  display: none;
}

/* --- MISC --- */

/* Hide notion toggle - a hack to hide child pages, drag them into a toggle and they'll disappear */
.notion-toggle {
  display: none !important;
}

/* --- PAGE LOAD ANIMATION --- */
body {
  -webkit-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  -moz-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  -o-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
  -ms-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
</style>

<!-- CUSTOM NAVIGATION -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Johnnie Yu</a>
  </div>
  <div class="right">
		<a class="nav-link" href="/cv">CV</a>
  </div>
</nav>

Old Footer

Crafted with ♥ by Johnnie Yu

Made with Super.so + Notion.so + Cy