🍎 MacOS Portfolio

A Web-Based macOS Experience built with React

Review the code, star the repo, and enjoy the experience! 🚀

📋 Table of Contents

1. 🤖 Introduction
2. ✨ Features
3. 🛠️ Tech Stack
4. 🚀 Getting Started
5. 📂 Project Structure

🤖 Introduction

MacOS Portfolio is a highly interactive personal portfolio website that replicates the look and feel of the macOS desktop environment. Built with modern web technologies, it features a functional dock, draggable windows, and simulated applications, providing a unique and engaging user experience.

This project showcases advanced frontend skills including complex state management, animations, and component styling.

✨ Features

• 🖥️ Realistic Desktop Interface: A pixel-perfect recreation of the macOS desktop environment.
• ⚓ Interactive Dock: Fully animated dock with hover effects using GSAP.
• 🖱️ Draggable Windows: Open, close, minimize, and move windows around freely.
• 📂 Functional Apps:
  • Finder: Navigate through a simulated file system.
  • Terminal: A working command-line interface simulation.
  • Safari: A browser simulation to view projects.
  • Resume: Integrated PDF viewer to display your CV.
  • Text Editor: View and read text files.
  • Photos: Image viewer component.
  • Contact: Easy way to reach out.
• 🎨 Dynamic Themes & Animations: Smooth transitions and sleek UI design powered by TailwindCSS and GSAP.

🛠️ Tech Stack

• Frontend Framework: React 19
• Build Tool: Vite
• Styling: Tailwind CSS 4
• State Management: Zustand
• Animations: GSAP
• Icons: Lucide React
• PDF Rendering: React-PDF
• Date Handling: Day.js

🚀 Getting Started

Follow these steps to run the project locally on your machine.

Prerequisites

Make sure you have Node.js installed.

Installation

1. Clone the repository

   git clone https://github.com/yourusername/macos-portfolio.git
   cd macos-portfolio

2. Install Dependencies

   npm install

3. Start the Development Server

   npm run dev

4. Open in Browser Visit http://localhost:5173 to view the app.

📂 Project Structure

src/
├── components/      # Shared UI components (Dock, Navbar, etc.)
├── constants/       # Static data and configuration
├── hoc/             # Higher-Order Components (Window Wrappers)
├── store/           # Zustand state stores
├── windows/         # Application components (Finder, Safari, Terminal, etc.)
├── App.jsx          # Main application entry
└── main.jsx         # React DOM rendering

Made with ❤️ by Aditya Kumar