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%
Find a file
2026-07-31 15:24:05 +08:00
app feat: assemble the interactive portfolio desktop 2026-07-31 14:56:00 +08:00
components feat: build desktop, dock, and top bar 2026-07-31 14:55:57 +08:00
constants feat: assemble the interactive portfolio desktop 2026-07-31 14:56:00 +08:00
context feat: implement draggable window management 2026-07-31 14:55:42 +08:00
hooks feat: implement draggable window management 2026-07-31 14:55:42 +08:00
public chore: remove unused starter assets 2026-07-31 14:56:04 +08:00
types feat: define desktop app catalog 2026-07-31 14:55:37 +08:00
utils feat: define desktop app catalog 2026-07-31 14:55:37 +08:00
.gitignore Initial commit from Create Next App 2025-11-19 17:55:41 +00:00
components.json chore: set up shared UI dependencies 2026-07-31 14:55:24 +08:00
eslint.config.mjs Initial commit from Create Next App 2025-11-19 17:55:41 +00:00
next.config.ts Initial commit from Create Next App 2025-11-19 17:55:41 +00:00
package-lock.json chore: set up shared UI dependencies 2026-07-31 14:55:24 +08:00
package.json chore: set up shared UI dependencies 2026-07-31 14:55:24 +08:00
postcss.config.mjs Initial commit from Create Next App 2025-11-19 17:55:41 +00:00
README.md docs: rename project to macOS Demo 2026-07-31 15:24:05 +08:00
tsconfig.json Initial commit from Create Next App 2025-11-19 17:55:41 +00:00

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.