Building this site

This site imitates a desktop operating system in the browser.

Stack

• Next.js (App Router) and React
• Zustand for window and settings state
• Motion for animations
• react-rnd for draggable, resizable windows
• MDX for these posts

Window manager

Every open window is an entry in a Zustand store with its position, size, z-index and minimized/maximized flags. Focusing a window gives it the next z-index. On small screens windows open full-screen and only one is shown at a time.

Accessibility

A text summary of the profile is rendered on the server so crawlers and screen readers get the content without running the desktop UI.