This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi, I'm a passionate full-stack developer who loves exploring the intersection of design and engineering. For 2026, I wanted to express my evolution as a creator—moving beyond static pages to build immersive, interactive web experiences.
My goal with this portfolio was to create a "digital home" that feels alive. I wanted to showcase not just what I build, but how I think about performance, aesthetics, and user experience.
Portfolio
How I Built It
This portfolio is a modern web application built for speed, interactivity, and scalability.
Tech Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS & Custom CSS
- Animations: GSAP (GreenSock) for complex timelines and Framer Motion for UI interactions.
- 3D Elements: React Three Fiber (R3F) integration.
- Deployment: Dockerized and hosted on Google Cloud Run.
Design Decisions
I focused on a "Bento Box" grid layout for the main navigation, inspired by modern UI trends. It allows users to explore different facets of my work (Blog, Projects, Experience) in a modular way.
The color palette uses deep, rich backgrounds with neon accents to create a premium, high-tech feel. I avoided standard library components where possible, opting to build custom UI elements like the "Floating Dock" navigation to ensure a unique identity.
Google Cloud & AI Integration
Deploying to Google Cloud Run was a breeze. I containerized the application using a multi-stage Dockerfile to keep the image lightweight (utilizing Next.js standalone mode).
- Containerization: Built a highly optimized Docker image based on
node:20-alpine. - Deployment: Pushed to Google Artifact Registry and deployed to Cloud Run with a single command.
- AI Assistance: I used Google's Gemini models via Antigravity to help generate complex GSAP animation logic and debug strict TypeScript errors during the migration to Next.js 15.
What I'm Most Proud Of
🚀 The Spaceship Game
I integrated a fully playable spaceship shooter game directly into the portfolio. It wasn't just a fun add-on; it was a challenge in state management and canvas performance optimization. It runs smoothly at 60 FPS even on mobile devices.
⚛️ Tech Gravity (Physics-Based Stack)
Instead of a static list of icons, I built an interactive "Tech Gravity" box.
- How it works: I used Matter.js to create a 2D physics world where each tech icon is a physical body.
- Interactivity: Users can grab, drag, and throw the icons.
- Dynamic Effects: I hooked into the collision events; when icons collide, they generate SVG lightning bolts and glowing effects using GSAP, creating a feeling of energy and connection between the technologies. I also implemented an
IntersectionObserverto pause the physics engine when the component is out of view to save battery life.
🌳 3D Organic Scroll Background
I wanted the background to tell a story of growth as the user scrolls.
- Procedural Generation: I wrote a recursive algorithm that generates a 3D tree structure in real-time.
- Custom Projection: Since I wanted full control over the aesthetic, I opted not to use a heavy 3D library for this. Instead, I wrote a custom lightweight 3D-to-2D perspective projection function that maps the generated 3D points onto an SVG canvas.
- Scroll Animation: Using GSAP ScrollTrigger, the branches "grow" and draw themselves as you scroll down the page. The paths use quadratic Bezier curves to ensure organic, fluid lines, and I implemented depth-sorting (Painter's Algorithm) to correctly layer the branches based on their Z-depth.
Built for the New Year, New You Portfolio Challenge.
Top comments (0)