New Year, New You Portfolio Challenge Submission
This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi, I’m Paul Leung, a mobile developer passionate about creating immersive, handheld experiences.
When designing my portfolio, I realized that a standard 2D grid of screenshots didn’t capture the essence of my work. Since I build apps for devices that people hold in their hands, I wanted my portfolio to reflect that tactility. My goal was to build a web experience that feels like a native OS, allowing visitors to "hold" my work and explore my projects as if they were browsing apps on their own phone.
Portfolio
📱 Live Demo: [Open Full Screen Experience](ht…
New Year, New You Portfolio Challenge Submission
This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi, I’m Paul Leung, a mobile developer passionate about creating immersive, handheld experiences.
When designing my portfolio, I realized that a standard 2D grid of screenshots didn’t capture the essence of my work. Since I build apps for devices that people hold in their hands, I wanted my portfolio to reflect that tactility. My goal was to build a web experience that feels like a native OS, allowing visitors to "hold" my work and explore my projects as if they were browsing apps on their own phone.
Portfolio
📱 Live Demo: Open Full Screen Experience
💻 Source Code: https://github.com/PaulLeung93/portfolio-site
How I Built It
This website is a "Meta" portfolio: a 3D simulation of a mobile operating system where every "app" is a portal to my real-world projects.
The Tech Stack
- Core: React 19, Vite 7.
- 3D Engine: Three.js, React Three Fiber, React Three Drei.
- Styling: Tailwind CSS 4.
- Animations: Framer Motion, React Spring.
The Architecture: "Dual-Layer"
I designed a unique architecture that renders two worlds simultaneously:
- Layer 1 (Background): A WebGL canvas that renders the procedural 3D hardware (lighting, shadows, and device models).
- Layer 2 (Foreground): A simulated "HomeOS" built with standard React/HTML that lives inside the 3D phone screen using
drei/Htmlocclusion.
Integrating Google AI (Antigravity)
I used Google Antigravity as my primary AI development partner to help build the entire website, particularly for the 3D assets.
- Procedural 3D Generation: While I downloaded GLB assets for the specific iPhone and Pixel models, I needed a custom "Default" phone that could load instantly without external files. I used Antigravity’s agents to write the procedural Three.js code in
PhoneModel.jsx. I described the device’s curves and bezels, and the AI generated the complexTHREE.Shape()logic andextrudeSettingsautomatically. - Full-Stack Workflow: I used the IDE to help structure the "HomeOS" architecture, ensuring the state management between the 3D parent and the 2D "apps" remained performant.
What I’m Most Proud Of
I am most proud of the Simulated OS Experience. It’s not just a visual trick; it’s a functional system.
- Interactive "Apps": The portfolio includes a working "Settings" app (changing the phone’s wallpaper and language), a "Music" app (embedding a playlist), and a "Photos" app that lets users swipe through my real-world memories from various events I attended!
- The "Flip" Mechanic: I built a dynamic folding animation for the Galaxy Flip 7 model using
react-spring. The 3D hinge physics and the way the screen content reacts to the fold (checking if it is "nearly unfolded") were technically difficult to pull off in a browser, but they make the experience feel tactile and alive.
Connect with me
📧 Email: PaulLeung93@gmail.com 💼 LinkedIn: https://www.linkedin.com/in/paulleung1993/ 🐙 GitHub: https://github.com/PaulLeung93