Lab

Why a docs site

Most portfolios are a list of wins. That is useful for recruiters, but not for a student who wants to know how to get there. Documentation has a different job: it explains, in order, so someone else can repeat it.

• Logs read like a changelog of a career: where I studied, worked and what each step taught me.
• Projects read like case studies: where the idea came from, what broke, what it became.
• Every page has the same shape (lead, numbers, sections, “On this page”), so it is easy to skim and easy to come back to.
• The look follows Vercel’s docs: quiet, black and white, with structure doing the work instead of decoration.

Tech stack

There is no database, CMS or backend. Every page is generated at build time from TypeScript files, which keeps the site fast, free to host and impossible to break with a bad login.

How the code is organized

app/
  page.tsx               home
  about/page.tsx         about me and the dream
  logs/                  career docs (overview + [slug])
  projects/              project docs (overview + [slug])
  talk/page.tsx          booking page
  lab/page.tsx           this page
  globals.css            design tokens and every style
components/
  header.tsx             nav, mega menu, mobile drawer
  sidebar.tsx            docs sidebar with Ctrl K filter
  toc.tsx                "On this page" with scroll spy
  docs.tsx               renders entries from content blocks
  career-path.tsx        Education / Venture / Tech tracks
  booker.tsx             calendar, slots, invite links
  logos.tsx              black and white logo strips
lib/
  site.ts                name, email, booking hours
  content/
    logs.ts  projects.ts  career.ts  orgs.ts  lab.ts

Content and layout are separate. A log or project is plain data: a title, a lead, some numbers and a list of sections. Each section is made of small blocks.

type Block =
  | string                                   // paragraph
  | { type: "list"; items: string[] }
  | { type: "steps"; items: { title; text }[] }   // timeline
  | { type: "roles"; items: { title; period; points }[] }
  | { type: "callout"; tone?: "note" | "accent"; text }
  | { type: "table"; head: string[]; rows: string[][] }
  | { type: "quote"; text }
  | { type: "code"; text; lang? };

To add a project, I add one object to projects.ts. The sidebar, mega menu, overview cards, timeline, prev/next links and the static page are all generated from it.

Design system

Everything is driven by a small set of CSS variables. Dark mode is the same variables with different values.

• Accent color: the orange from my handwritten logo, used only for “now”: current roles, available days, the active section.
• Type: Geist for Latin, tight letter-spacing on headings, mono for dates and labels.
• Layout: a three-column docs grid (260px sidebar, 760px reading column, 220px table of contents) that collapses to one column on phones.
• Lines instead of boxes: timelines, hairline borders and grid cells carry the structure, like Vercel’s docs.

1. Handwritten logo → theme-aware mark

   The logo is a hand-drawn PNG. A short Python (Pillow) script turns the ink into an alpha mask. CSS paints it with currentColor through mask-image, so the same file is black in light mode and white in dark mode.

2. Partner logos → one monochrome wall

   Every organization logo goes through the same pipeline: remove the background, keep only the shape as a mask, then render it in the theme color. Nearly thirty logos in different colors become one calm grid.

3. The glow

   The hero is two radial gradients and a CSS drop-shadow on the masked logo, a nod to the glowing triangle on vercel.com.

Features worth explaining