Retro Mac System 7 UI meets modern Next.js — draggable windows, animated gallery, and PDF resume export.
The challenge
A developer portfolio needs to communicate both technical depth and design sensibility without looking like a template. The goal was a distinctive identity that doubled as a live demonstration of what I can build.
How we built it
I used Next.js 15 App Router with CSS Modules and Tailwind v4 for component-scoped styling. Framer Motion handles all the animations — window drags, modal transitions, skill pill reveals. The Macintosh System 7 aesthetic runs through every layer: font choices, border radii, button styles, and the desktop metaphor for the home screen.
What shipped
The portfolio at demaceo.com gives visitors a desktop-style experience: draggable panels, a skill modal, an animated project gallery, and a downloadable resume — all in a Next.js 15 site that loads fast and scores well on Lighthouse.
Outcomes
- Built an interactive portfolio with a Macintosh System 7-inspired UI — draggable windows, glass morphism panels, and a command-palette skill modal.
- Added an animated project gallery with modal presentations, a resume section with PDF export via html2canvas and jsPDF, and a contact form with EmailJS.
- Optimized for performance with feature-based architecture, Next.js 15 App Router image optimization, and lazy-loaded modal content.