A modern, interactive macOS Web Desktop interface built with React, Vite, and SCSS. Featuring floating window management, glassmorphism design, colorful app dock shortcuts, and syntax-highlighted developer notes.
- 🖥️ macOS Desktop Experience: Glassmorphic top navigation menu bar with real-time status clock and apple dropdown menu.
- 🎨 Vibrant App Dock: Custom macOS app shortcuts styled with authentic brand gradients and 60fps GPU hardware-accelerated magnification animations.
- 📝 Color-Highlighted Code Notes: Interactive developer profile viewer loading
/note.txtrendered withreact-syntax-highlighter(Atom One Dark theme). - 🪟 Floating Window Manager: Resizable and draggable terminal windows powered by
react-rndwith smart responsive initial screen positioning. - 📱 Fully Responsive: Seamlessly adapts across Mobile (
$\le 600\text{px}$ ), Tablet ($\le 768\text{px}$ ), and Desktop viewports. - ⚡ Clean UI Aesthetics: Zero visible scrollbars with smooth touch scrolling and custom typography.
- Frontend Core: React 19, Vite
- Styling: SCSS, Modern CSS (Glassmorphism, CSS Gradients, Hardware Acceleration)
- Components & Libraries:
react-syntax-highlighter- Syntax highlighting for code notesreact-rnd- Draggable and resizable window components@fortawesome/react-fontawesome- Vector icons
Ensure you have Node.js (v18 or higher) installed on your machine.
-
Clone the repository:
git clone https://github.com/DeepakNegi13/MacOs.git cd MacOs -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
Open your browser and navigate to
http://localhost:5173.
npm run dev- Launches local Vite development servernpm run build- Builds production bundle intodistdirectorynpm run lint- Runs ESLint code quality checksnpm run preview- Previews production build locally
This project is open source and available under the MIT License.