macOS Portfolio 💻

My personal portfolio stimulating macOS: https://thaivd.vercel.app.

Built with Next.js, Tailwind CSS, and GSAP.

✨ Features

• 🖥️ macOS-style desktop interface
• 🪟 Draggable, focusable windows with z-index management
• 🎯 Dock system with app launching behavior
• 🌗 Dark / Light mode (system-aware)
• 🎞️ Smooth animations using GSAP
• 📱 Responsive & mobile-friendly
• ⚡ Optimized performance

🛠 Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• Animation: GSAP
• State Management: Zustand

📂 Project Structure

src/
├── app/
│   ├── components/     # UI components (Dock, Menu, Screen etc.)
│   ├── constants/      # App & system constants
│   ├── hoc/            # High Order Components
│   ├── hooks/          # Custom hooks
│   ├── store/          # Zustand stores
│   ├── styles/         # Styles with CSS and Tailwind
│   ├── windows/        # App windows content
│   └── layout.js
├── lib/
│   └── gsapClient.js   # GSAP setup
public/
└── assets/             # Icons, images, mock files

🚀 Getting Started

1. Clone the repository
2. Install dependencies

npm install

3. Run development server

npm run dev

Change Logs

• 2026.01.04: Add dark theme.
• 2026.01.02: Add features: wifi, settings.
• 2026.01.01: Add mobile version.

Credits

• Javascript Mastery Youtube Channel
• Figma macOS 26 Library - UI Kits