Mobile Developer Portfolio

#devchallenge #googleaichallenge #portfolio #gemini

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/Html occlusion.

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 complex THREE.Shape() logic and extrudeSettings automatically.
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.