← projects

$ cat projects/rathee-dev.mdx

rathee.dev

This site. Interactive terminal-themed portfolio, blog, Node.js article API, MongoDB, and Dockerized VPS deployment.

Next.js · TypeScript · Tailwind · MDX · Node.js · MongoDB · Docker · 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 and standalone output, paired with an Express API for dynamic learning articles.
  • TypeScript + Tailwind + MDX (next-mdx-remote/rsc) for blog content with embedded React components.
  • MongoDB for dynamic article storage, with the web app, Node.js backend, and database packaged through Docker Compose for VPS deployment.
  • Giscus (env-gated) for comments and 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.