A stunning, interactive portfolio website that replicates the macOS Big Sur experience in your browser. Features a dynamic island, music player, live wallpaper, and more!
- 🎵 Music Player - Real music playback with Jamendo API integration
- 🏝️ Dynamic Island - Interactive notification center with GitHub stats, weather, and time
- 🌈 Live Wallpaper - Animated mesh gradient background
- 🐱 Cursor Pet - Interactive cat that follows your cursor
- 📁 macOS Windows - Draggable, resizable windows with authentic macOS styling
- 💻 Code Editor - Monaco Editor integration with syntax highlighting
- 📸 Photo Gallery - Lightbox-style image viewer
- 🌤️ Weather Widget - Real-time weather from Open-Meteo API
- 🔍 Spotlight Search - Quick app launcher (Cmd/Ctrl + K)
- 🎨 Dark Mode - Full dark mode support
-
Clone the repository
git clone https://github.com/sisodiajatin/MacOS_Portfolio.git cd MacOS_Portfolio -
Install dependencies
npm install
-
Set up environment variables
# Copy the example file cp .env.example .env # Edit .env with your details # Change VITE_GITHUB_USERNAME to your GitHub username
-
Run development server
npm run dev
-
Open in browser
http://localhost:5173
This project is optimized for FREE deployment on Vercel.
See DEPLOYMENT.md for detailed instructions.
TL;DR:
npm i -g vercel
vercel login
vercel --prodDon't forget to set environment variables in Vercel dashboard!
Create a .env file in the root directory:
# Your GitHub username (required)
VITE_GITHUB_USERNAME=sisodiajatin
# Jamendo Music API client ID (optional - has default)
VITE_JAMENDO_CLIENT_ID=56d30c95
# Weather location coordinates (optional - defaults to Worcester, MA)
VITE_WEATHER_LAT=42.2626
VITE_WEATHER_LON=-71.8023How to customize:
- Replace
sisodiajatinwith your GitHub username - Change coordinates to your city (find coordinates)
- Framework: React 19.2 + Vite 7.2
- Styling: Tailwind CSS 4.1
- Animations: GSAP + Framer Motion
- State Management: Zustand
- Code Editor: Monaco Editor
- 3D Graphics: Three.js + React Three Fiber
- Icons: Lucide React
- Date/Time: Day.js
MacOS_Portfolio/
├── public/ # Static assets
│ ├── images/ # Portfolio images
│ └── icons/ # App icons
├── src/
│ ├── components/ # React components
│ │ ├── DynamicIsland.jsx
│ │ ├── MusicWidget.jsx
│ │ ├── Dock.jsx
│ │ └── ...
│ ├── windows/ # Window components
│ ├── store/ # Zustand stores
│ ├── constants/ # App constants
│ └── index.css # Global styles
├── .env.example # Environment template
└── DEPLOYMENT.md # Deployment guide
- Personal Info: Edit
src/constants/index.js - Images: Replace files in
public/images/ - GitHub Username: Update
.envfile - Weather Location: Update coordinates in
.env
- Create component in
src/windows/YourWindow.jsx - Add to
src/constants/index.jsindockAppsarray - Import in
src/App.jsx
- Cmd/Ctrl + K: Open Spotlight search
- Cmd/Ctrl + W: Close active window
- Cmd/Ctrl + D: Toggle dark mode
- Escape: Close topmost window or Spotlight
# Create optimized build
npm run build
# Preview production build locally
npm run previewBuild output will be in the dist/ directory.
- Monaco Editor increases bundle size (~7MB of worker files, lazy-loaded)
- GitHub API has 60 req/hour limit for unauthenticated requests
- Audio autoplay may be blocked by browser policies (user interaction required)
MIT License - feel free to use this for your own portfolio!
- Inspired by macOS Big Sur
- Music from Jamendo
- Weather from Open-Meteo
- Icons from Lucide
Contributions are welcome! Feel free to open issues or submit PRs.
- GitHub: @sisodiajatin
- Portfolio: [Your Vercel URL here]
Made with ❤️ and React