← projects

$ cat projects/rathee-dev.mdx

rathee.dev

This site. Interactive terminal-themed portfolio + dev blog, built in public over multiple phases.

Next.js · TypeScript · Tailwind · MDX · Framer Motion · Pagefind · 2026 · wip

The site you're on. Built in public, in phases — IDE shell, themes, scroll animations, cursor-reactive ASCII canvas, boot sequence, and a Ctrl+K palette + terminal REPL that accept git checkout–style commands.

why

A static resume page doesn't tell the story I want to tell. An interactive, terminal-themed site that boots up in front of you does — and writing it out in the open is also the point. The site itself is part of the portfolio.

stack

  • Next.js 15 with App Router, output: 'export' so it deploys equally to Vercel, Netlify, or GitHub Pages with no rewrite.
  • TypeScript + Tailwind + MDX (next-mdx-remote/rsc) for blog content with embedded React components.
  • Pagefind for static search; Giscus (env-gated) for comments; Formspree for the contact form.
  • A single canvas for the cursor-reactive ASCII background, gated by prefers-reduced-motion and viewport width per the mobile policy.
  • Five themes (Dark Modern · Catppuccin Mocha · Tokyo Night · Classic Green · Catppuccin Latte) with no-FOUC blocking script and code blocks via Shiki.
  • OG card generator running at build time via Satori + Resvg — every post and project gets a 1200×630 PNG without any runtime cost.

what was interesting

  • The boot sequence is two routes in disguise: a tiny brand-flash on the SSR path that any visitor sees on first paint, and a full typed sequence on first visit only. localStorage carries the seen-flag.
  • The cursor canvas reads CSS variables via getComputedStyle and re-reads on data-theme changes via MutationObserver, so it tracks the theme without any extra plumbing.

Follow along on the blog.