3D-First Portfolio Built with Antigravity
Source: Dev.to
Introduction
This is a submission for the New Year, New You Portfolio Challenge presented by Google AI.
I’m Aayush Bisht, a MERN‑stack developer focused on building interactive, visually rich web experiences that blend solid engineering with thoughtful design. I enjoy working at the intersection of frontend performance, animation, and system architecture, where small details like motion, timing, and interaction can completely change how a product feels.
For this project I wanted to move beyond a traditional portfolio and explore how modern tools like Gemini 3 and Google Antigravity can support creative and technical decision‑making throughout the development process. Instead of using AI only to generate code, I used it to reason about structure, animation flow, and interaction design.
The portfolio relies heavily on scroll‑driven animation, 3D interaction, and viewport‑aware transitions. For the best experience, view it in a full browser window.
Live Portfolio:
Tech Stack
- Next.js 14 (App Router)
- React 18 + TypeScript
- Tailwind CSS
- GSAP + ScrollTrigger
- Framer Motion
- Spline (3D design & runtime)
- Lenis (smooth scrolling)
- Radix UI + custom UI components
- Deployed on Google Cloud Run
Role of Gemini 3
Gemini 3 was used throughout development—not to generate finished code, but to help reason about complex systems. Key contributions include:
- Exploring ways to map scroll position to 3D transformations.
- Reasoning how a single 3D object could represent multiple portfolio sections.
- Evaluating animation pacing and transitions between sections.
- Thinking through interaction patterns between React state, GSAP timelines, and Spline objects.
- Stress‑testing ideas before committing to implementation.
Many architectural decisions—especially around animation sequencing and state‑based transformations—were refined through iterative conversations with Gemini.
Role of Antigravity
Antigravity accelerated the execution of Gemini‑inspired ideas:
- Refactoring large animation orchestrators.
- Iterating on scroll‑triggered logic without breaking existing behavior.
- Maintaining consistency across many interactive components.
- Experimenting with alternate animation flows safely.
This allowed the project to evolve organically without losing structure.
Keyboard Metaphor
At the heart of the portfolio is a Spline‑designed mechanical keyboard, used as a dynamic visual metaphor. The keyboard transforms through multiple states as the user scrolls:
| Section | Transformation |
|---|---|
| Hero | Subtle rotation and motion to establish presence |
| Skills | Interactive keycaps representing technologies |
| Projects | Dramatic rotation with animated elements |
| Contact | Teardown animation where keycaps break apart |
Each keycap is mapped to a real skill and responds to hover and press events, updating live text inside the 3D scene. All transformations are orchestrated through GSAP timelines tied directly to scroll position.
Model‑First Approach
Rather than treating the 3D model as a background visual, the entire website was designed around it. Layout, section flow, scroll behavior, and interactions were shaped to support how the keyboard transforms and reacts over time.
Gemini helped answer questions such as:
- How can a single 3D object represent multiple sections of a portfolio?
- What transformations feel natural when transitioning between skills, projects, and contact?
- How should spatial changes (scale, rotation, position) map to scroll progression?
- Where should interaction live—in the UI, the 3D scene, or both?
These discussions defined a system where each section corresponds to a distinct keyboard state, with its own transformation logic and interaction rules.
Tool Allocation
- GSAP – Handles precision choreography of scroll‑driven animations.
- Framer Motion – Manages UI‑level interactions (e.g., button hover, modal transitions).
- Spline – Provides spatial depth and interactive 3D elements.
Each tool is used where it excels, resulting in a cohesive experience without any visible “AI feature” in the UI. Yet AI influenced nearly every decision: animation flow, interaction feel, and overall complexity management.
Conclusion
This project demonstrates that AI tools like Gemini 3 and Antigravity can amplify creativity rather than replace it. By using AI to reason through architecture and animation challenges, the final portfolio feels intentional, cohesive, and technically robust—turning a 3D model from a decorative element into the structural backbone of the experience.