Skip to content

how this site is made

Colophon.
Built from scratch, with care.

A colophon is the note at the end of a book about how it was made. This is that, for a website: the tools, the rules I followed, and the small details hidden inside.

§ 01Stackpackage.json

What it's built with

  • Next.js

    16.4.3

    Framework. App Router, static generation and the metadata API.

  • React

    19.2.4

    UI library, with server components wherever possible.

  • TypeScript

    5

    Everything, including the content data.

  • MDX

    16.4.3

    The blog posts: Markdown with a little JSX.

  • Day.js

    1.11.20

    Dates, at 2 kB.

  • OpenNext

    1.20.16

    Runs the Next.js app on Cloudflare Workers.

The styles are plain CSS with design tokens, with no CSS framework in the design. Fonts are self-hosted through next/font, so your browser never asks Google for them. The site runs on Cloudflare.

§ 02Designdesign.md

Seven rules I kept to

  1. 01

    Frame

    One column up to 1280px wide, with hatched rails on either side and hairline borders.

  2. 02

    Ruled

    Every line of text sits between full-width hairlines, like ruled paper.

  3. 03

    Spec

    Blueprint details in mono: file tabs, § numbers, dimension lines and a title block in the footer.

  4. 04

    Tactile

    Real objects instead of decoration: tape, pins, polaroids, sticky notes, a receipt, a postcard.

  5. 05

    Hand

    Handwritten notes with scribbled arrows, used sparingly so they still feel like notes.

  6. 06

    Accent

    Violet for state and emphasis only. Objects keep their own colours.

  7. 07

    Motion

    Springy lifts and straightening on hover. Nothing moves without a reason, and reduced motion is respected.

§ 03Type and colourtokens.css

The letters and the paint

Aa

Geistheadings and text

Aa

Geist Monolabels, code, specs

Aa

Caveathandwritten notes
  • Paper#f6f5f2 · #0e0e11
  • Card#fcfcfb · #141418
  • Ink#16151a · #f1f0f4
  • Muted#5d5c66 · #a5a3ae
  • Violet#7958fc · #7958fc
  • Violet text#5b3fe0 · #a993ff
  • Note#fdf0b8 · #fdf0b8

light · dark

§ 04Detailseaster-eggs.ts

Small things to find

  • The logo is a puzzle

    Drag the pieces of the H back together on the home page or the 404. Your best time is saved in your browser.

  • Two hats

    The home page can be read as a developer or as a team lead, and the cards change with it.

  • Theme reveal

    Switching between light and dark spreads out in a circle from the button you pressed.

  • A real clock

    The day dial shows the time in India right now, and what I am probably doing.

  • The changelog is a receipt

    It is printed with a torn edge, because why not.

  • A 404 that helps

    If an address looks like a typo, the not-found page suggests the page you probably meant.

there may be more

§ 05Qualitychecklist.md

What I made sure of

  • Every page is static HTML, so it loads fast and works without JavaScript for reading.
  • Structured data (JSON-LD) on every page, a sitemap, an RSS feed, llms.txt and llms-full.txt.
  • A skip link, keyboard-friendly controls, and visible focus states.
  • Reduced-motion preferences are respected, and light or dark follows your system without a flash.
  • Checked in a real browser from 320px to 1920px wide, with no sideways scrolling.
  • Analytics that honour Do Not Track and can be switched off.

§ 06Creditsthanks.md

Analytics, and thanks

Analytics

I use Google Analytics and Umami to see which pages are read. They load only if your browser allows it, and you can switch them off. The full story is on the privacy page.

Thanks

The framed-column layout is inspired by Braydon Coyer's site, which I admire. Geist is by Vercel and Caveat is by Impallari Type, both released under the SIL Open Font License.

Read the privacy policy

Greetings from your inbox

Let's build something.

Hi Hardik, I've got an idea, a messy codebase, or just a question about…

To

Hardik Gohil

Surat, Gujarat, India

Write the message here, it lands in my inbox.

Write me a message