A premium, interactive macOS-inspired portfolio built with Next.js 14, Tailwind CSS, and Framer Motion. This project replicates a desktop environment with draggable windows, a dynamic dock, and system-level interactions.
Experience a full desktop environment right in your browser.
- Boot Sequence: Authentic Apple-style boot animation on first visit.
- Desktop Canvas: Dynamic wallpaper background with a blurred glass menu bar.
- Intelligent Dock: macOS-style magnification effect on hover with active app indicators.
- Window Manager: Custom system to handle dragging, resizing, z-index focusing, minimization, and fullscreen toggles.
- Wallpaper Engine: Change your desktop appearance instantly via the Settings app.
The portfolio adapts its behavior based on your device:
- Desktop: Full multi-window experience with drag-and-drop.
- Tablet: Centered window modals for optimized touch interaction.
- Mobile: iOS-inspired interface with bottom navigation sheets and simplified controls.
- Framework: Next.js 14 (App Router, TypeScript)
- Animations: Framer Motion
- Window Logic: react-rnd
- Styling: Tailwind CSS
- Icons: Lucide React
- Components: shadcn/ui
- About Me: Professional profile with typing effects and skills timeline.
- Projects: Interactive grid featuring nested window support for project deep-dives.
- Resume: Minimalist, high-contrast resume preview with PDF download.
- Services: Bento-style showcase of technical expertise.
- Contact: Fully validated form with real-time feedback.
- Settings: Customize your workspace wallpaper on the fly.
-
Clone the repository
git clone https://github.com/mabdullah356/mabdullah.git cd mabdullah -
Install dependencies
npm install
-
Run development server
npm run dev
-
Build for production
npm run build
Built with ❤️ by Muhammad Abdullah