macOS Portfolio

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Assets
6. 🚀 More

✨ Introduction

A fully interactive macOS-inspired desktop experience featuring a fluid animated Dock with realistic physics. This portfolio includes draggable, resizable application windows like Finder, Safari, Photos, and Terminal packed with smooth GSAP animations.

The interface offers full dark mode support and seamlessly adapts to mobile with an iOS-style layout. Built with modular, reusable components, it showcases a complete window management system with open, close, and focus states for a premium, desktop-like experience in the browser.

⚙️ Tech Stack

• React is a declarative, component-based JavaScript library for building user interfaces. It enables efficient UI development through its virtual DOM implementation and reusable component architecture with hooks for state and lifecycle management.

• TypeScript is a strongly typed programming language built on JavaScript that adds static type checking. It provides enhanced developer experience with better IDE support, early error detection, and improved code maintainability at scale.

• Vite is a next-generation frontend build tool that offers lightning-fast development server startup and instant hot module replacement. It leverages native ES modules for rapid development and provides optimized production builds with minimal configuration.

• GSAP is a professional-grade JavaScript animation library that delivers high-performance, butter-smooth animations. It provides precise control over sequencing, timing, and complex motion paths with cross-browser compatibility.

• Tailwind CSS is a utility-first CSS framework that enables rapid UI development through composable classes. It provides design system consistency with responsive modifiers, state variants, and just-in-time compilation for optimal performance.

• Zustand is a minimal, hook-based state management library for React. It lets you manage global state with zero boilerplate, no context providers, and excellent performance through selective state subscriptions.

• Prettier is an opinionated code formatter that enforces consistent code style automatically. It eliminates formatting discussions in code reviews and integrates seamlessly into development workflows for clean, readable code.

• ESLint is a pluggable linting utility for JavaScript and TypeScript. It identifies and reports problematic patterns in code, helping maintain code quality, consistency, and catching potential bugs early in development.

🔋 Features

👉 macOS-Style Desktop: A fully interactive macOS-like environment with draggable windows, app launching, and realistic physics.

👉 Window Management System: True-to-life window behavior including open, close, minimize, and focus logic.

👉 Magnifying Dock: A macOS-inspired Dock featuring smooth magnification physics and quick access to applications.

👉 Animated Welcome Sequence: A buttery-smooth GSAP-powered welcome animation introducing the portfolio.

👉 Finder Application: A complete Finder clone with directories, file browsing, favorites, and organized project folders.

👉 Safari Browser: A functional Safari-style window displaying blog content and external links with proper navigation.

👉 Photos Gallery: A Photos app that displays image collections and opens them into realistic preview windows with smooth transitions.

👉 Contact Manager: A Contact app containing social links, professional profiles, and communication channels.

👉 Terminal Emulator: A terminal-style window displaying your tech stack, skills, and environment details.

👉 Resume Viewer: An interactive resume viewer with section navigation, professional formatting, and downloadable PDF export functionality.

👉 GSAP Motion Layer: Premium, smooth animations applied throughout the entire desktop experience.

👉 React Architecture: Advanced and fundamental React patterns supporting complex, high-interaction UI systems.

👉 TypeScript Integration: Strongly typed codebase ensuring type safety, better IDE support, and improved maintainability.

👉 TailwindCSS Styling: Clean, scalable, utility-first styling ensuring consistent and modern design.

👉 Zustand State Management: Global state powering apps, windows, dock behavior, and desktop interactions.

👉 Higher-Order Components: Reusable, composable UI patterns engineered for scalable architecture.

👉 Clean Code Formatting: Prettier integration ensures consistent, readable code across the entire project.

👉 Code Quality Standards: ESLint with TypeScript support maintains code quality and catches potential errors.

👉 Clean UI Engineering Principles: Senior-level structural, maintainable, and performance-focused interface design.

And many more, including code architecture and reusability.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone [git remote URL]

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

Building for Production

npm run build

Code Quality

Format your code with Prettier:

npm run format

Lint your code with ESLint:

npm run lint