macOS Portfolio
An interactive portfolio styled as a macOS desktop: draggable and resizable windows, a Dock for launching applications, a context menu, and an xterm.js terminal. Profile and repository data are loaded through the GitHub API, with animations built using Framer Motion.
Overview
macOS Portfolio is an interactive web portfolio presented as a macOS desktop. Navigation is built around windows and small applications, while profile and repository data is loaded from the GitHub API.
Role and scope
Solo Developer. Built the App Router page, window interface, Dock, context menu, terminal, and GitHub API integration with Next.js and TypeScript.
Key features
- Draggable and resizable windows
- Dock for launching applications
- Desktop context menu
- Terminal built on xterm.js
- Profile and repository data loaded through the GitHub API
- Cuaderno, Real-Time Chat App, and StarStream applications
Architecture
The main screen is in src/app, interactive desktop parts are in src/app/components, UI primitives are in src/components/ui, and shared functions are in src/lib. This separates the desktop shell, applications, and reusable UI components.
Technical decisions
- AbortController cancels GitHub API fetch requests and protects against stale responses.
- xterm.js is used for the terminal interface inside the portfolio.
- Framer Motion is used for window animations and interface transitions.