The Browser as an Operating System: Inside jnsahaj/portfolio

How a developer bypassed the traditional static CV, using React 19 and Zustand to build a fully functional desktop environment in the DOM.

7 min read • View on GitHub • More from jnsahaj

A vintage mechanical drafting table where the drawing surface is a dimensional glass box containing floating, overlapping window panes connected by taut strings to a central brass control mechanism. This illustrates the strict mechanical control system required to manage floating UI elements in a browser OS. — Building a browser-based OS requires rigid state management to handle overlapping, draggable windows.

By mimicking macOS, I’m inviting the user to play. When a recruiter “opens” a folder in my Finder to see my projects or “drags” a window to the side to read my resume, they aren’t just consuming data; they’re experiencing my technical capability in real-time. It turns a static CV into a living technical demonstration.

Jatin Sharma, Author · Why I Over-Engineered My Portfolio

Key Takeaways

Jatin Sharma rejected the standard infinite-scroll portfolio, building a functional macOS clone in the browser to prove frontend competency.
The architecture relies on a Zustand global store to manage the z-index and focus state of overlapping React windows, rather than relying on DOM physics.
Animations are offloaded to GSAP to bypass React's render cycle, enabling smooth physics for components like the magnetic dock without performance bottlenecks.

The Death of the Infinite Scroll

Most developer portfolios are glorified Word documents with a dark mode toggle. They rely on an infinite vertical scroll to list projects and skills. Jatin Sharma explicitly rejected this pattern, opting instead for a living technical demonstration that forces the user to interact with functional applications, like a Terminal and Finder, to discover his background.

The Windowing Architecture

Building a desktop in a browser requires rigid state management. The core of this system is a WindowWrapper Higher-Order Component. Sharma uses Zustand as a global state manager to handle draggable coordinates, active window focus, and dynamic z-index layering to ensure the active window always sits on top.

Zustand manages window focus by mutating a global state tree, which triggers a re-render of CSS z-index properties.

Physics Outside the Render Cycle

A static React component is easy to render. A magnetic dock that scales fluidly on hover is hard. Relying on pure React state for 60fps physics animations causes render bottlenecks. To solve this, Sharma integrated GSAP, which bypasses the React render cycle by manipulating DOM nodes directly for smooth animations.

The Portfolio Spectrum

The Virtual OS approach sits at the extreme high-end of portfolio complexity. It contrasts sharply with immersive WebGL spatial sites that act like video games, and standard Next.js static grids that prioritize raw load speed over interactivity.

A split composition. The left side shows a long, flat scroll of paper nailed to a wall with text marching in a single straight line. The right side shows a complex, multi-layered cabinet with various drawers pulled out at different depths, intersecting but perfectly organized. This illustrates the contrast between a standard scrolling portfolio and a windowed UI. — The difference between a traditional static scroll and a complex, multi-layered windowed interface.

Feature	Virtual OS	Immersive 3D	Modern 2D
Core Metaphor	Operating System	Spatial Environment	Document/Grid
Primary Tech	React 19, GSAP, Zustand	Next.js, Three.js	Next.js, Framer Motion
Interaction	Windowing, Draggable	Camera movement	Scrolling, Hover