How this site is built

Developer mode is honest mode. This portfolio is a Next.js app with no UI library and a hand-written design system.

FOLDER STRUCTURE

stacksimo/
├─ app/
│  ├─ layout.tsx          shell mounts here, fonts, metadata
│  ├─ globals.css         entire design system: tokens + components
│  ├─ [[...slug]]/        one catch-all; the shell routes panes itself
│  ├─ robots.ts           generated robots.txt
│  └─ sitemap.ts          generated sitemap
├─ components/
│  ├─ Shell.tsx           titlebar · sidebar · tabs · keyboard map
│  ├─ CommandPalette.tsx  ⌘K: fuzzy-ish search over everything
│  ├─ DemoBrowser.tsx     screenshot viewer: live link, fullscreen, compare
│  ├─ Terminal.tsx        you found this already, right?
│  └─ panes/              Studio · Explorer · ProjectWindow · Services · …
├─ lib/
│  ├─ data.ts             every word of content, typed: zero hardcoded pages
│  └─ store.tsx           tabs, theme, favorites, achievements (localStorage)
└─ public/                project screenshots and static assets

TECHNICAL DECISIONS

No UI library

Every component is hand-written CSS on design tokens. Nothing to fight, nothing generic.

Real screenshots

Project previews are actual screenshots captured from production, not mock UIs or reconstructions. Click one and you land on the live site itself.

Client-routed shell

One layout owns tabs/sidebar/palette; panes swap inside it. Feels like software, not pages.

Content as data

projects, services, process, milestones all live in data.ts. Adding a project is a data change, not a build.

State that respects you

Theme, favorites, recents, achievements persist in localStorage. No cookies, no tracking.

STACK & DEPLOY

Next.js (App Router) + TypeScript, static export
CSS custom properties, dual theme, prefers-reduced-motion respected
Fonts: Fraunces / Inter / IBM Plex Mono, self-hosted via next/font
Typecheck + production build before every deploy; nothing ships that doesn't compile