Project Documentation

Welcome to the macOS Portfolio project! This is a modern, interactive portfolio built with React and TypeScript.

Features

• 🖥️ macOS-inspired UI - Authentic macOS design with windows, dock, and finder
• 📁 File System - Browse projects and files just like in macOS Finder
• 🎨 Beautiful Design - Clean, modern interface with smooth animations

Tech Stack

The project uses cutting-edge technologies:

Technology	Purpose
React	UI Framework
TypeScript	Type Safety
Vite	Build Tool
Tailwind CSS	Styling

Getting Started

To run this project locally:

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── components/     # Reusable UI components
├── windows/        # Window components (Finder, Safari, etc.)
├── store/          # State management
├── constants/      # Configuration and data
└── types/          # TypeScript type definitions

Key Components

Windows

• Finder - File browser with locations and navigation
• Safari - Web browser window
• Terminal - Command line interface
• Photos - Photo gallery viewer
• Contact - Contact information display

Features

• Drag and drop windows
• Window management
• Dock with app shortcuts
• Dynamic content loading

References

https://jsmastery.com/course/macos-style-portfolio-with-react-gsap-tailwindcss