A fully interactive macOS-inspired portfolio featuring a boot screen, login UI, desktop environment, animated dock, and five custom apps (Finder, Terminal, Safari, Notes, Mail). Built with React, TypeScript, and Tailwind to showcase your skills, projects, and personality in a unique and immersive way.
✨ Complete macOS-Inspired Portfolio Experience
A fully interactive, immersive macOS-style portfolio built with React + TypeScript + Tailwind CSS — designed to impress recruiters, developers, and designers with a realistic desktop environment.
🚀 Boot Sequence
Boot Screen – Authentic macOS-style boot animation with progress bar and Apple-like logo
Login Screen – Clean UI with user avatar and password field
Smooth Transitions – Seamless flow from Boot → Login → Desktop
🖥️ Authentic macOS Interface
Menu Bar – Apple logo, Finder menu, system icons, live clock
Desktop Icons – Interactive shortcuts to Projects, Skills, GitHub, etc.
Window System – Real macOS controls (red/yellow/green buttons)
Dock – Animated dock with magnification, tooltips, and active indicators
📱 Five Complete Built-In Applications
- Finder — About Me
Professional profile with avatar
Clear narrative of your journey (Analyst → Architect)
Highlights core focus areas
Includes macOS-style sidebar navigation
- Terminal — Skills Display
Authentic black/green terminal UI
Categorized skills (Frontend, Backend, DevOps, Databases)
Command-line style formatting
Animated typing cursor
- Safari — Projects Portfolio
Browser-inspired window with address bar
All 5 projects documented using the STAR framework
Problem / Action / Result color-segmented layout
Live demo buttons + GitHub links
- Notes — Vision Document
Minimal, elegant notes UI
Includes your complete Macfolio OS Vision
AR/VR integration concepts
Open-source project direction
- Mail — Contact Interface
Email client-style layout
Sidebar + conversation-style content panel
Professional contact information
CTAs for hiring, networking, and collaboration
🎨 Advanced Features
Window Management – Open/close/minimize/maximize
Z-Index Management – Active window focus simulation
Responsive Design – Works on desktop & mobile
Smooth Animations – Hover states, scaling, transitions
Live Clock – Real-time macOS-like clock
Big Sur-Style Wallpaper – Vibrant background for realism
🔧 Technical Implementation
React + TypeScript – Strong component architecture
Tailwind CSS – Modern utility-first styling
Lucide-React Icons – Clean, scalable icon set
Custom Hooks – Window state, dock actions, and UI events
Modular Components – Clean, maintainable design
🎯 User Experience Flow
Boot – User sees authentic macOS boot animation
Login – Enter password to "unlock" the portfolio
Desktop – Icons + dock ready for interaction
Applications – Each app opens in a macOS-styled window
Navigation – Switch between apps via dock, icons, or window focus
This scaffold provides a robust foundation built with:
- ⚡ Next.js 15 - The React framework for production with App Router
- 📘 TypeScript 5 - Type-safe JavaScript for better developer experience
- 🎨 Tailwind CSS 4 - Utility-first CSS framework for rapid UI development
- 🧩 shadcn/ui - High-quality, accessible components built on Radix UI
- 🎯 Lucide React - Beautiful & consistent icon library
- 🌈 Framer Motion - Production-ready motion library for React
- 🎨 Next Themes - Perfect dark mode in 2 lines of code
- 🎣 React Hook Form - Performant forms with easy validation
- ✅ Zod - TypeScript-first schema validation
- 🐻 Zustand - Simple, scalable state management
- 🔄 TanStack Query - Powerful data synchronization for React
- 🌐 Axios - Promise-based HTTP client
- 🗄️ Prisma - Next-generation Node.js and TypeScript ORM
- 🔐 NextAuth.js - Complete open-source authentication solution
- 📊 TanStack Table - Headless UI for building tables and datagrids
- 🖱️ DND Kit - Modern drag and drop toolkit for React
- 📊 Recharts - Redefined chart library built with React and D3
- 🖼️ Sharp - High performance image processing
- 🌍 Next Intl - Internationalization library for Next.js
- 📅 Date-fns - Modern JavaScript date utility library
- 🪝 ReactUse - Collection of essential React hooks for modern development
- 🏎️ Fast Development - Pre-configured tooling and best practices
- 🎨 Beautiful UI - Complete shadcn/ui component library with advanced interactions
- 🔒 Type Safety - Full TypeScript configuration with Zod validation
- 📱 Responsive - Mobile-first design principles with smooth animations
- 🗄️ Database Ready - Prisma ORM configured for rapid backend development
- 🔐 Auth Included - NextAuth.js for secure authentication flows
- 📊 Data Visualization - Charts, tables, and drag-and-drop functionality
- 🌍 i18n Ready - Multi-language support with Next Intl
- 🚀 Production Ready - Optimized build and deployment settings
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm startOpen http://localhost:3000 to see your application running.
src/
├── app/ # Next.js App Router pages
├── components/ # Reusable React components
│ └── ui/ # shadcn/ui components
├── hooks/ # Custom React hooks
└── lib/ # Utility functions and configurations
This scaffold includes a comprehensive set of modern web development tools:
- Layout: Card, Separator, Aspect Ratio, Resizable Panels
- Forms: Input, Textarea, Select, Checkbox, Radio Group, Switch
- Feedback: Alert, Toast (Sonner), Progress, Skeleton
- Navigation: Breadcrumb, Menubar, Navigation Menu, Pagination
- Overlay: Dialog, Sheet, Popover, Tooltip, Hover Card
- Data Display: Badge, Avatar, Calendar
- Tables: Powerful data tables with sorting, filtering, pagination (TanStack Table)
- Charts: Beautiful visualizations with Recharts
- Forms: Type-safe forms with React Hook Form + Zod validation
- Animations: Smooth micro-interactions with Framer Motion
- Drag & Drop: Modern drag-and-drop functionality with DND Kit
- Theme Switching: Built-in dark/light mode support
- Authentication: Ready-to-use auth flows with NextAuth.js
- Database: Type-safe database operations with Prisma
- API Client: HTTP requests with Axios + TanStack Query
- State Management: Simple and scalable with Zustand
- Internationalization: Multi-language support with Next Intl
- Image Optimization: Automatic image processing with Sharp
- Type Safety: End-to-end TypeScript with Zod validation
- Essential Hooks: 100+ useful React hooks with ReactUse for common patterns
Built with ❤️ by Jeet for the developer community. 🚀