Skip to content
Uses

The setup behind the work.

Machine, editor, AI tooling, hosting — and the stack this site runs on, which is the one I can show you the source of. For what I build with, see skills.

Machine

One box for everything.

  • Mac mini (M4)

    Base configuration — editor, design tools, and builds all live on it.

Editor and the AI in it

VS Code is home; the rest are assistants, not autopilots.

  • VS Code

    Primary editor, with ESLint and TypeScript reporting inline while I type.

  • Cursor

    VS Code fork with a model in the loop — reached for on multi-file changes.

  • GitHub Copilot

    Inline completion while typing, where the next few lines are obvious.

  • Claude Code

    Agentic work in the terminal — refactors, reviews, and writing that spans files.

  • ChatGPT

    Rubber-ducking and unfamiliar APIs.

What this site runs on

The whole thing is a folder of static files. Everything below follows from that one constraint.

  • Next.js 16

    App Router with output: "export". No server, so anything dynamic happens at build time or in the browser.

  • TypeScript

    Every string of copy is a typed module in src/data — pages import and render.

  • Tailwind CSS v4

    One @theme token set in CSS, no JS config. It's what lets the print stylesheet and light mode recolor the site by redefining tokens instead of overriding components.

  • Radix UI

    Unstyled primitives behind the dialog, sheet and tooltip. Accessibility is not hand-rolled.

  • No animation library

    Motion was removed and replaced with CSS keyframes, an IntersectionObserver, and scroll position written straight into a custom property. The measured before and after is in the case study.

  • Sharp

    Every screenshot in public/ goes through a resize-and-webp pass before it's committed, because static export means images ship exactly as they are.

  • cPanel shared hosting

    The build output is uploaded as-is. No Node runtime, no build step on the server, no platform lock-in.

Design

Turning a mockup into something that survives real content.

  • Figma

    Design handoff, specs, and component review.

  • Adobe Illustrator

    Vector work — the KR mark in the navbar was drawn here.

  • Adobe Photoshop

    Image editing and cleanup before anything reaches the repo.

Ship it

Version control, hosting, and the places things get deployed.

  • GitHub

    Source of truth for everything.

  • Vercel

    Preview deployments and client projects.

  • Netlify

    The other static host in rotation.

  • EmailJS

    The contact form has no backend to post to, so it talks to a third party from the browser.

Planning

Where the work gets tracked.

  • Jira

    Sprint work and ticket hygiene.

  • Trello

    Lighter boards for personal and side projects.