Portfolio OS
A portfolio styled like Windows XP. Eight independent windows that drag around, minimize, maximize, and stay focus-aware. One custom React hook owns all of the state. No Redux, no Zustand, no library.
System Architecture
Engineering Decisions
Z-Index
Monotonic counter instead of sort
My first instinct was to keep a sorted list of windows and reassign z-indices whenever focus changed. That meant touching every window's state on every click. So I went the other way. A single integer called highestZIndex starts at 1000. When any window gets focused its zIndex becomes counter + 1 and the counter ticks up. No sort, no batch update, O(1) no matter how many windows are open. The counter just grows and browsers don't care.
Drag
Document-level listener because windows escape their bounds
If you attach drag events to the window element itself, the cursor can escape the boundary during fast movement and the drag stops mid-air. I wired the mousemove listener at the document level so it keeps tracking no matter how fast you move. The handler computes the delta from the stored drag start position and calls setWindows to update only the active window. Cleanup removes the listener on unmount so there are no ghost handlers left behind.
Rendering
Minimized windows unmount completely
I made minimized windows unmount instead of using display: none. The tradeoff is real. Any in-window state (like a draft in the contact form) gets lost on minimize. But for 8 purely presentational windows that's fine, and the upside is zero memory and zero running effects. Position and z-index are preserved in the hook state, so the window comes back exactly where it was.
Hooks
8 windows in one hook, no external state library
I didn't want to reach for Redux or Zustand for what was essentially a window map. So I built useWindowManager as a plain useState + useCallback hook that owns everything: open, close, minimize, maximize, restore, focus, and the full drag lifecycle. Every callback is memoized so Desktop.tsx doesn't re-render when a window it doesn't care about changes state. Cleanup is enforced on every effect. Intervals cleared, listeners removed, timeouts cancelled.
On Technical Provenance
I use AI for research and as a sounding board for syntax, but the logic here is mine. Whether it's the O(1) stacking or the drag math, I spent the hours debugging these patterns myself. If you pick any line in this repo and ask me why it's there, I can give you the engineering reason and the specific bug it solved. I'm here to build systems, not just prompt them.