Welcome to Jagan Parida's Portfolio.
Instead of a traditional static resume, I built a fully functional web-based operating system. This project showcases my skills in Full-Stack Development, UI/UX Design, and Complex State Management by mimicking the macOS ecosystem right in the browser.
Why this? It demonstrates not just what I can build, but how I obsess over details—from the physics of the dock animations to the z-index window layering.
- Dynamic Environment: A highly optimized desktop interface that manages window states, active applications, and system time.
- Window Manager: A custom-built engine that handles dragging, resizing, minimizing, and maximizing windows with persistence.
- Interactive Physics: Icons scale and bounce based on mouse proximity and click events.
- State Awareness: Visual indicators show which apps are open, minimized, or active.
| Icon | App | Description |
|---|---|---|
| 🧑💻 | Terminal | A functional CLI that allows users to navigate the system using commands like ls and cd. |
| 🐙 | GitHub | An interactive, full-window contribution calendar with real-time commit tracking and year filtering. |
| 📄 | Resume | A dedicated PDF viewer with intuitive scrolling to read the resume directly in the browser. |
| 📝 | Note | A simple text editor interface showcasing personal bio and notes. |
| 🎵 | Spotify | An embedded player connected to a personal "Coding Mode" playlist. |
| 📧 | A simulated email client. Clicking Send actually opens Gmail to email directly! | |
| 🔗 | Links | A custom "Linktree" style window organizing all social presence and important URLs. |
| 📅 | Calendar | Custom-built calendar logic to handle date navigation and real-time updates. |
- Core Framework:
React.js(v19) - Build Tool:
Vite(Lightning fast HMR) - Styling:
SCSS(Custom modules, zero bloated UI libraries) - Window Management:
react-rnd(Draggable and resizable window physics) - GitHub Integration:
react-github-calendar - Icons:
Lucide React - Deployment:
Vercel
Want to see how I built this? Follow these steps to run my code locally.
- Node.js (v16+)
- npm
- Clone my repository
git clone [https://github.com/JaganParida/MacOS-Portfolio.git](https://github.com/JaganParida/MacOS-Portfolio.git) cd MacOS-Portfolio
Open your browser and visit:
http://localhost:5173
src/
├── assets/
├── components/
│ ├── Dock.jsx
│ ├── Nav.jsx
│ ├── Windows/
│ │ ├── Calendar.jsx
│ │ ├── Cli.jsx
│ │ ├── Github.jsx
│ │ ├── Link.jsx
│ │ ├── Mail.jsx
│ │ ├── Note.jsx
│ │ ├── Resume.jsx
│ │ └── Spotify.jsx
│ └── MacWindow.jsx
├── App.jsx
└── main.jsx
- Projects:
src/assets/github.json - Resume:
public/Resume.pdf - About Me:
public/note.txt - Email:
MY_EMAILinMail.jsx
If you enjoyed this project, please give it a ⭐️
Designed & Built with ❤️ by Jagan