Mac OS & Windows Interactive Portfolio

A fully interactive, dual-mode (macOS Sonoma & Windows 11) web desktop portfolio built with React 19, Vite, GSAP, and modular SCSS.

🌐 Live Demo

🔗 https://mac-os-y6za.onrender.com

📌 Project Overview

Traditional developer portfolios are often static, single-page resumes that look identical to one another. This project re-imagines the portfolio experience as an interactive operating system desktop.

Visitors can interact with real draggable and resizable windows, launch an interactive CLI terminal to inspect commands, browse projects inside a simulated web browser, navigate a virtual filesystem through Finder or File Explorer, and query an embedded AI assistant. It provides an engaging, memorable showcase of full-stack engineering skills, component architecture, and modern UI/UX design.

✨ Key Features

Dual-OS Environment (macOS Sonoma & Windows 11): Instant switching between macOS and Windows 11 design languages with smooth GSAP crossfade transitions, preserving open window states across environments.
Window Management System: Multi-window multitasking powered by react-rnd, featuring dragging, resizing, minimizing, maximizing, focus layering (dynamic z-index), and outside-click dismissal.
Interactive Terminal (CLI): A functional developer terminal powered by react-console-emulator supporting custom commands: whoami, about, skills, projects, education, experience, contact, and resume.
Virtual File Explorer & Filesystem: Hierarchical file navigation through Finder (macOS) and File Explorer (Windows), featuring breadcrumbs, grid/list view toggles, documents, and clickable project directories.
Embedded AI Assistant (Siri / Copilot): An interactive conversational assistant that answers recruiter questions about skills, background, university education, projects, and contact info, complete with one-click action triggers that open corresponding apps.
Simulated Web Browser (Safari / Edge): An in-app browser with back/forward history navigation, reload capability, URL address bar, and routed views for Home, Projects, About, and Contact.
Markdown & Syntax-Highlighted Note Viewer: A native Notes application reading markdown content with code syntax highlighting via react-markdown and react-syntax-highlighter.
Resume Viewer with Resilient Fallback: An in-window document viewer with an integrated fallback card displaying verified credentials and direct download options if the PDF is loading or unavailable.
Spotlight & Universal Search: Global search overlay accessible via keyboard shortcut (Cmd+Space on macOS, Win+S or Ctrl+K on Windows) to quickly filter and launch applications, documents, and contacts.
Control Center & Customization: Quick Settings panel with working toggles for system appearance, animation performance, desktop wallpapers, and volume/brightness sliders.
System Boot & Lock Screen Sequences: Realistic Apple / Windows boot sequence animations and an interactive lock screen with real-time clock and date display.

🛠️ Tech Stack

Frontend & Core

React 19: Component-based UI architecture, custom hooks, and React Context API.
Vite 7: Next-generation frontend tooling for rapid development and optimized production builds.

UI & Styling

Modular SCSS (Sass): Scoped stylesheets, BEM naming, CSS variables, and glassmorphism styling.
GSAP 3 (GreenSock Animation Platform): High-performance UI micro-animations, timeline transitions, and OS mode switches.
React Icons: Iconography for system status bars, dock items, taskbar tray, and explorer folders.

Desktop & Windowing Engine

react-rnd: Draggable and resizable windowing framework with responsive boundaries.
react-console-emulator: Interactive CLI terminal emulator with command registration.

Content & Rendering

react-markdown: Markdown parser for documentation notes.
react-syntax-highlighter: Code highlighting inside the notes application.

State & Storage

React Context API: Centralized CreateWindowContext coordinating window states, z-index layers, search modals, and active OS modes.
HTML5 LocalStorage: Persistent storage for wallpaper preferences, desktop icon coordinates, and appearance settings.

⚙️ How It Works

┌─────────────────────────────────────────────────────────────┐
│                      WindowContext                          │
│  (Window States, Z-Index, OS Mode, Notifications, Modals)   │
└──────────────┬───────────────────────────────┬──────────────┘
               │                               │
       ┌───────▼────────┐             ┌────────▼───────┐
       │   Mac Desktop  │             │ WindowsDesktop │
       │ (Nav + Dock)   │             │(Taskbar+Start) │
       └───────┬────────┘             └────────┬───────┘
               │                               │
               └───────────────┬───────────────┘
                               │
                ┌──────────────▼──────────────┐
                │        Shared Windows       │
                │ ─────────────────────────── │
                │ • Terminal (CLI)            │
                │ • File Explorer / Finder    │
                │ • GitHub Projects Window    │
                │ • Notes (Markdown Viewer)   │
                │ • Web Browser (Safari/Edge) │
                │ • Resume Viewer             │
                │ • Hire Me / Contact Card    │
                │ • Settings & Control Center │
                │ • AI Assistant (Siri/Copilot│
                └─────────────────────────────┘

Boot & Unlock: When the user opens the application, an initial boot timeline is executed via GSAP. Once booted, the lock screen displays the current time and user profile, unlocking upon click or keypress.
Context-Driven State Management: Every application window is registered in src/assets/appRegistry.js. The CreateWindowContext tracks visibility (windowState), minimization (minimizedState), and stacking order (zIndexMap).
Multitasking & Window Layering: Clicking any window brings it to the top by incrementing its z-index through bringToFront(appName). Windows can be dragged freely across the desktop or maximized to fill the workspace.
OS Mode Switching: Toggling between macOS and Windows swaps the outer shell (Dock + Top Bar vs. Taskbar + Start Menu) while keeping active window instances open and mounted seamlessly.
AI Assistant Intent Matching: Queries entered into the AI chat assistant are parsed through an intent matcher in chatFaqData.js that maps keywords to verified developer information and triggers direct app actions.

📁 Project Structure

Mac-OS/
├── public/                     # Static assets, icons, wallpapers & notes
│   ├── doc-icons/              # Dock and taskbar SVG icons
│   ├── navbar-icons/           # Top bar icons (Apple logo, controls)
│   ├── project_img/            # Project showcase preview graphics
│   ├── note.md                 # Markdown document loaded by Notes app
│   └── Wallpaper.jpg           # Default desktop wallpaper
│
├── src/
│   ├── assets/
│   │   ├── appRegistry.js      # Central definitions & titles for all windows
│   │   ├── github.json         # Featured projects & verified repositories
│   │   ├── profile.js          # Re-exported central profile data
│   │   └── wallpapers.js       # Curated wallpaper collection & gradient styles
│   │
│   ├── components/
│   │   ├── apps/               # Standalone application components
│   │   │   ├── Browser.jsx     # In-app web browser (Safari / Edge)
│   │   │   ├── Explorer.jsx    # Finder / Windows File Explorer
│   │   │   ├── HireMe.jsx      # Contact card & direct action buttons
│   │   │   └── SettingsApp.jsx # Appearance, wallpapers & OS preferences
│   │   │
│   │   ├── boot/               # Boot sequence & lock screen
│   │   │   ├── BootScreen.jsx  # GSAP-animated boot screen
│   │   │   └── LockScreen.jsx  # Clock lock screen with click-to-unlock
│   │   │
│   │   ├── notifications/      # Notification Center flyout
│   │   │   └── NotificationCenter.jsx
│   │   │
│   │   ├── shared/             # Overlays common to both OS environments
│   │   │   ├── AIChatAssistant.jsx # Siri / Copilot conversational assistant
│   │   │   ├── QuickSettingsPanel.jsx # macOS Control Center / Win Action Center
│   │   │   ├── ShortcutsModal.jsx  # Keyboard shortcuts reference guide
│   │   │   └── UniversalSearch.jsx # Spotlight / Windows Search (Cmd+Space / Win+S)
│   │   │
│   │   ├── widgets/            # Interactive desktop widgets (Clock, Profile, Stats)
│   │   │   └── DesktopWidgets.jsx
│   │   │
│   │   ├── windows/            # Core draggable desktop window views
│   │   │   ├── Cli.jsx         # Terminal emulator with registered commands
│   │   │   ├── Github.jsx      # Repository showcase cards
│   │   │   ├── MacWindow.jsx   # Window shell wrapper with RND controls
│   │   │   ├── Note.jsx        # Markdown reader with syntax highlighting
│   │   │   ├── Resume.jsx      # PDF viewer with fallback credentials card
│   │   │   └── Spotify.jsx     # Music player embed window
│   │   │
│   │   ├── Dock.jsx            # macOS-style bottom application dock
│   │   ├── MacDesktop.jsx      # macOS shell layout
│   │   ├── Nav.jsx             # macOS top menu bar
│   │   └── WindowsDesktop.jsx  # Windows 11 shell (Taskbar, Start Menu, Desktop)
│   │
│   ├── config/                 # Static data & configurations
│   │   ├── chatFaqData.js      # Intent matching engine & FAQ knowledge base
│   │   ├── filesystemData.js   # Hierarchical virtual filesystem structure
│   │   ├── portfolioData.js    # Central profile, experience & project details
│   │   └── shortcutsData.js    # OS-specific shortcut configurations
│   │
│   ├── context/
│   │   └── WindowContext.jsx   # Global state for windows, modes & overlays
│   │
│   ├── hooks/                  # Custom React hooks
│   │   ├── useAIChat.js        # AI chat state, typing delay & action triggers
│   │   ├── useKeyboardShortcuts.js # Global shortcut key listeners
│   │   └── useOutsideClick.js  # Click-outside detection for popups & modals
│   │
│   ├── App.jsx                 # Root component orchestrating OS modes
│   ├── app.scss                # Global styles and resets
│   └── main.jsx                # Application entry point
│
├── index.html                  # HTML entry point with SEO meta tags
├── package.json                # Project dependencies and npm scripts
├── vite.config.js              # Vite configuration
└── README.md                   # Project documentation

🚀 Installation & Setup

To run this project locally, make sure you have Node.js (version 18 or higher recommended) installed.

1. Clone the repository

git clone https://github.com/naitik-work/Mac-OS.git
cd Mac-OS

2. Install dependencies

npm install

3. Start the development server

npm run dev

The application will start locally at:

http://localhost:5173/

4. Build for production

npm run build

To preview the production build locally:

npm run preview

5. Lint code

npm run lint

⌨️ Keyboard Shortcuts

Shortcut	macOS Action	Windows Action
`Cmd + Space` / `Win + S`	Spotlight Search	Windows Search
`Ctrl + K`	Universal Search	Universal Search
`Win + D` / `F11`	Minimize All Windows	Minimize All Windows
`Cmd + W` / `Alt + F4`	Close Active Window	Close Active Window
`Escape`	Close Open Modals / Menus	Close Open Modals / Menus

👤 Author

Naitik Chitransh

Role: Software Engineer | MERN Stack Developer
GitHub: @naitik-work
LinkedIn: Naitik Chitransh
Portfolio: naitik-portfolio-g42i.onrender.com
Email: naitikchs16@gmail.com

📄 License

This project is open-source and available under the MIT License.

Navigation Menu

Repository navigation

About

Repository files navigation

Mac OS & Windows Interactive Portfolio

🌐 Live Demo

📌 Project Overview

✨ Key Features

🛠️ Tech Stack

Frontend & Core

UI & Styling

Desktop & Windowing Engine

Content & Rendering

State & Storage

⚙️ How It Works

📁 Project Structure

🚀 Installation & Setup

1. Clone the repository

2. Install dependencies

3. Start the development server

4. Build for production

5. Lint code

⌨️ Keyboard Shortcuts

👤 Author

📄 License

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

Mac OS & Windows Interactive Portfolio

🌐 Live Demo

📌 Project Overview

✨ Key Features

🛠️ Tech Stack

Frontend & Core

UI & Styling

Desktop & Windowing Engine

Content & Rendering

State & Storage

⚙️ How It Works

📁 Project Structure

🚀 Installation & Setup

1. Clone the repository

2. Install dependencies

3. Start the development server

4. Build for production

5. Lint code

⌨️ Keyboard Shortcuts

👤 Author

📄 License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages