Building a DEV.OS Portfolio
[ 2026-09-10 ]Khalid Khannextjs / ai
This portfolio is a running joke with a production budget: every screen should feel like a system booting, not a page loading. So next time you load the site, watch it type its own boot log, render a binary tunnel behind the hero, and hand you a desktop with about.md, a skills tree, a git log and a projects listing, all terminal-flavoured.
The narrative
The story is a journey: power on, read the docs, type commands, and exit clean with code 0. Each section maps a terminal interaction - cat for the bio, tree for the skill groups, git log for experience, ls -la for projects, man for the blog, and exit for the contact flow.
The theme is not decoration on top of the content. The theme is the content's interface, and every screen has a reason to look the way it does.
Under the hood
Next.js 16 with the App Router and React 19 with the compiler on makes most manual memoization unnecessary. A Three.js hero loads lazily only when it scrolls near the viewport, leaving the first paint light. GSAP and Lenis drive the scroll work, and the content beats the animations: everything useful is in the server-rendered HTML first.
The house rules that kept this fast:
- SSR-first: the boot overlay is an effect, never a content gate.
- Lazy enough: GPU work only starts when the hero is near the viewport.
- Reduced-motion safe: every animation stands down when requested.
The payoff
The result is a site that is rarely mistaken for a template. The budget was simple: keep the fun, keep it genuine, and never let the theatre cost a visitor the content.
← all posts$ man blog · exit 0