💻 MacOS CLI Portfolio

An interactive MacOS-inspired developer portfolio built with React, featuring a fully functional terminal interface and draggable window system.

Instead of traditional scrolling, users explore the portfolio using commands — just like a real terminal.

---

🌐 Live Demo

Click for Live Demo

---

🚀 Features

🖥️ MacOS-Inspired UI

• Custom window system
• Draggable & resizable windows using react-rnd
• Clean glassmorphism design

⌨️ Interactive CLI Experience

• Terminal powered by react-console-emulator
• Command-based navigation
• Real-time responses

⚡ Portfolio via Commands

• about → Learn about me
• skills → Tech stack
• projects → My work
• contact → Contact info
• resume → Resume access

🎨 Modern Design

• Transparent glass terminal
• Smooth typography & spacing
• Developer-centric aesthetic

---

🛠️ Tech Stack

• Frontend: React.js
• Styling: SCSS
• Terminal Engine: react-console-emulator
• Window System: react-rnd

---

📸 Preview

MacOS-style desktop with interactive terminal

---

📂 Project Structure

src/
├── components/
│   ├── Navbar.jsx
│   ├── Dock.jsx
│   └── ...
├── windows/
│   ├── MacWindow.jsx
│   ├── CLI.jsx
│   ├── Github.jsx
│   └── ...
├── styles/
│   └── cli.scss
├── assets/
└── App.jsx

---

⚙️ Installation & Setup

# Clone repository
git clone https://github.com/your-username/macos-cli-portfolio.git

# Navigate into project
cd macos-cli-portfolio

# Install dependencies
npm install

# Start development server
npm run dev

---

🎯 Usage

1. Open the terminal window
2. Type help
3. Navigate using commands

---

🧠 Challenges Faced

1. Terminal Layout Issues

• The terminal library had internal layout constraints
• Custom styling sometimes broke structure (flex conflicts)

Solution:
Avoided overriding internal layout and targeted specific classes instead.

---

2. Window Resizing & Dragging

• Handling bounds and resizing using react-rnd
• Preventing overflow and maintaining responsiveness

Solution:
Configured bounds properly and ensured correct parent height structure.

---

3. ASCII Rendering Issues

• Monospaced alignment caused broken UI

Solution:
Replaced ASCII-heavy design with a cleaner UI-based welcome message.

---

4. UI Consistency

• Matching macOS feel (spacing, blur, shadows)

Solution:
Used glassmorphism, subtle shadows, and consistent spacing.

---

🔮 Future Improvements

• ⚡ Custom-built terminal
• ⌨️ Command autocomplete
• 📂 File system simulation
• 🎬 Boot animation
• 🌐 Open projects in modal

---

📬 Contact

• GitHub: https://github.com/dhruvaparnathi
• Email: dhruv@example.com

---

⭐ Inspiration

Inspired by macOS UI and interactive developer portfolios that focus on experience over static design.

---

📄 License

This project is licensed under the MIT License.