Terminal Portfolio

This portfolio reimagines a standard website as a simulated desktop operating system. Built on an Astro static shell that hydrates a single React island, the site delivers a boot sequence, a window manager, and a virtual filesystem, without sacrificing modern maintainability or SEO.

Features

• Window Manager: WindowManager.tsx and OSWindow.tsx handle z-ordering, focus, drag, resize, minimize, and maximize for six independent windows — a top status bar and bottom taskbar tie it together.
• Virtual Filesystem: src/lib/filesystem.ts builds a Unix-style tree from the same content collections that feed the windows, so ls, cd, cat, and pwd never go stale.
• Terminal as One App Among Six: The original terminal — with its own command history, Tab-completion, and open <app> bridge into the window system — now lives inside its own window alongside About, Projects, Blog, Skills, and Contact.
• 20 Internal Commands: Visitors can run commands like resume, projects, neofetch, ls, and cat to view cleanly formatted output.
• Pure CSS Styling: No external UI libraries — vanilla CSS and custom properties drive a CRT scanline effect, a token-based theme system, and the OS chrome.
• 4 Live Themes: Running themes set amber or dracula instantly swaps the root color variables, persisting the choice via localStorage.

Architecture

To keep content easy to update, both the windows and the virtual filesystem read from the same data layer:

• MDX Collections: blog and projects are written in MDX. Astro statically parses these at build time and passes the frontmatter into the React island as props.
• JSON Timelines: The resume command and the About window both parse standalone JSON files representing each career stop, filtering smoothly on subcommands like resume experience.

The result is a highly engaging, interactive landing page that still builds to a lightning-fast static directory hosted for free on GitHub Pages.