An interactive macOS-inspired developer portfolio built with Next.js, featuring draggable app windows, a responsive dock, Finder and Terminal experiences, and customizable themes and wallpapers.
- TypeScript 97.8%
- CSS 1.7%
- JavaScript 0.5%
| app | ||
| components | ||
| constants | ||
| context | ||
| hooks | ||
| public | ||
| types | ||
| utils | ||
| .gitignore | ||
| components.json | ||
| eslint.config.mjs | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| README.md | ||
| tsconfig.json | ||
macOS Demo
Important
This macOS demo is a work in progress. Features, interactions, and visual details are still being developed and may change frequently.
An interactive macOS-inspired desktop experience built for the web. The project recreates familiar desktop interactions through apps, draggable windows, a dock, and customizable appearance settings.
Current Features
- Draggable, resizable, minimizable, and maximizable windows
- macOS-inspired desktop, top bar, and animated dock
- Finder, Safari, Terminal, CV, and Settings-style experiences
- Light, dark, and system appearance modes
- Custom accent colors and icon styles
- Selectable macOS-inspired wallpapers
- Responsive interface built with reusable React components
Some apps and interactions are currently placeholders or only partially implemented while the demo is under active development.
Built With
Getting Started
Requirements
- Node.js 20 or later
- npm
Installation
git clone <repository-url>
cd portfolio
npm install
Start the development server:
npm run dev
Open http://localhost:3000 in your browser.
Available Scripts
npm run dev
npm run lint
npm run build
npm run start
Project Structure
app/ Next.js routes, layout, and global styles
components/ Desktop UI, apps, windows, settings, and shared components
constants/ App definitions, menus, themes, wallpapers, and metadata
context/ Appearance and window-management providers
hooks/ Appearance and window-management state
public/ App icons, appearance previews, and wallpaper assets
types/ Shared TypeScript definitions
utils/ Shared utilities
Project Status
This demo remains under active development. Current priorities include:
- Completing the Finder and Terminal experiences
- Expanding the available apps and desktop interactions
- Improving mobile and keyboard interactions
- Refining accessibility, animations, and performance
- Replacing remaining placeholder content
Author
Created by Ryan Allen.