Building a VS Code in the browser

This site is a love letter to the tools I stare at all day. Instead of a typical scrolling page, it's a small IDE: a file explorer, tabs, a command palette, an integrated terminal, a source-control panel, and a settings editor — all running in your browser.

Why an IDE?

A portfolio should show, not just tell. As someone learning software, I wanted the site itself to be the proof of work. Every panel here is a real, working interface — not a screenshot.

The stack

• Next.js + TypeScript for the app and a small JSON API
• Tailwind CSS with a token-based theming system (six color themes)
• Framer Motion for the micro-interactions
• A hand-written Canvas/WebGL background — no heavy 3D libraries

The reactive background

The background is a magnetic particle field: floating points that drift, link into a soft constellation, and part away from your cursor like a force field. It reads the active theme's colors and re-tints instantly when you switch themes.

// particles get pushed away from the pointer
const f = 1 - dist / RADIUS;
p.x += (dx / dist) * f * f * strength;
p.y += (dy / dist) * f * f * strength;

Premium doesn't have to mean heavy. The whole background is a few hundred lines and zero dependencies.

Try a few things

• Press ⌘K for the command palette
• Hit ⌃ for the terminal, then type snake or matrix
• Open Settings (⌘,) and change the accent color and particle density live

Thanks for poking around. The whole thing is compiled from a single resume.json — one source of truth for the site, the API, and the printable résumé.