3D-First Portfolio Built with Antigravity

Paimon — Sat, 31 Jan 2026 18:28:09 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I’m Aayush Bisht, a MERN stack developer with a strong interest in building interactive, visually rich web experiences that combine 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.
This portfolio reflects how I like to build: ambitious ideas, broken down thoughtfully, executed with care and refined through iteration.

Portfolio

This portfolio relies heavily on scroll-driven animation, 3D interaction, and viewport-aware transitions.

For that reason, the best way to experience it is in a full browser window.

Live Portfolio:

https://portfolio-v2-709587781727.us-central1.run.app/

--labels dev-tutorial=devnewyear2026

How I Built It

This project is a Next.js 14 interactive 3D portfolio, built around a single idea:

Use motion, transformation, and spatial interaction to guide the viewer through a story.

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

Using Gemini 3

Gemini 3 played a key role throughout the development process — not by generating finished code, but by helping reason about complex systems.

Gemini was used to:

Explore different ways of mapping scroll position to 3D transformations
Reason about how a single 3D object could represent multiple sections of a portfolio
Evaluate animation pacing and transitions between sections
Think through interaction patterns between React state, GSAP timelines, and Spline objects
Stress-test ideas before committing to implementation

Many of the architectural decisions especially around animation sequencing and state-based transformations were refined through iterative conversations with Gemini.

Antigravity for Rapid Iteration

While Gemini helped shape ideas, Antigravity made it possible to execute them quickly.

Antigravity accelerated:

Refactoring large animation orchestrators
Iterating on scroll-triggered logic without breaking behavior
Maintaining consistency across many interactive components
Experimenting with alternate animation flows safely

This allowed the project to evolve organically without losing structure.

The 3D Keyboard System

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:

Hero — subtle rotation and motion to establish presence
Skills — interactive keycaps representing technologies
Projects — dramatic rotation with animated elements
Contact — a 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.

Designing the Portfolio Around a 3D Model

At the core of this portfolio is a single 3D object: a mechanical keyboard designed in Spline.

Rather than treating the 3D model as a background visual or decorative element, the entire website was designed around it. The layout, section flow, scroll behavior, and interactions were all shaped to support how the keyboard transforms and reacts over time.

Gemini played a key role in reasoning through this model first approach.

Using Gemini, I explored questions like:

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 conversations helped define a system where each section corresponds to a distinct keyboard state, with its own transformation logic and interaction rules.

The result is a portfolio where the 3D model isn’t an add-on it’s the structural backbone of the experience. Content and motion exist to complement the model, not compete with it.

Gemini made it possible to think through this complexity before implementation, allowing the final system to feel intentional rather than experimental.

What I'm Most Proud Of

Turning a 3D Object Into a Narrative Device

Instead of using 3D as decoration, the keyboard acts as a storytelling element reacting, transforming, and evolving alongside the content.

Complex Animation, Controlled Carefully

GSAP handles precision choreography.

Framer Motion handles UI-level interactions.

Spline handles spatial and interactive depth.

Each tool is used where it excels.

AI as an Enabler, Not a Gimmick

There is no visible “AI feature” in the UI.

Yet AI influenced nearly every decision:

How animations flow
How interactions feel
How complexity stays manageable

Gemini and Antigravity didn’t replace creativity they amplified it.

Conclusion

This project is not about building a flashy portfolio.
It’s about exploring what becomes possible when modern frontend engineering, 3D interaction, and AI-assisted reasoning come together.
Gemini 3 and Antigravity made it possible to think bigger, iterate faster, and refine ideas more confidently.

And that’s the most exciting part.

DEV Community: Paimon