Building a Portfolio with Gemini - New Year, New You Portfolio Challenge

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

About Me

This project started with a simple question:

What happens when you stop treating AI as a tool that writes code, and start treating it as a creative and technical collaborator?

I wanted to explore how far modern Google AI tools specifically Gemini 3 and Antigravity could take an idea when used for thinking, designing, iterating, and refining, not just generating snippets.

This portfolio is the result of that exploration.

It’s not meant to be flashy for the sake of it. It’s meant to show how clarity, motion, and structure can emerge naturally when ideas are shaped collaboratively with AI from the very first layout decision to the final animation timing.

Portfolio

Video Walkthrough

To better showcase the motion, flow, and animation details, here’s a short walkthrough of the portfolio.

This video highlights:

• The hero intro animation


• Scroll-based reveals and transitions


• Micro-interactions and motion pacing


• Overall visual flow and structure

Note on presentation

While the portfolio is fully deployed on Google Cloud Run, embedding it directly inside a DEV post limits viewport size and affects animation timing.

To preserve the intended experience, a short video walkthrough is included below, along with a direct link to view the portfolio in a full browser window.

Live Portfolio:


https://port-709587781727.us-central1.run.app/

--labels dev-tutorial=devnewyear2026

How I Built It

This portfolio was built through an AI-assisted vibe-coding workflow powered by Gemini 3 and Google Antigravity.

Rather than starting with rigid wireframes or a fixed specification, the process focused on momentum — letting ideas evolve quickly while keeping the system coherent.

Gemini 3 as a Creative and Technical Partner

Gemini 3 was used throughout development as a reasoning and design partner.

Instead of asking it to “write code,” I used Gemini to:

• Explore multiple animation approaches before choosing one
  


• Reason about motion pacing and visual hierarchy
  


• Design section flow and narrative structure
  


• Stress-test interaction ideas conceptually
  


• Refine micro-interactions and transitions
  

Gemini helped answer questions like:

• How long should an intro animation last before it feels slow?


• How do you guide attention without overwhelming the user?


• Where should motion stop so content can breathe?

This kind of feedback loop made it possible to move fast without losing intention.

Hero Intro Animation

One of the clearest examples of Gemini’s impact is the hero intro animation.

Instead of dropping the user into a static page, the portfolio opens with a carefully paced sequence:

• The hero content begins subtly scaled down and centered
  


• It fades in and scales up smoothly
  


• The layout then transitions into its natural position
  


• Supporting elements appear in a controlled, staggered flow
  

This animation was iterated multiple times using Gemini to evaluate:

• Timing curves
  


• Ease functions
  


• Entry order
  


• Emotional impact vs. speed
  

The result is an intro that feels cinematic but restrained designed to set tone, not steal attention.

Antigravity as the Execution Engine

While Gemini helped shape ideas, Antigravity made execution fluid.

Antigravity allowed rapid iteration across:

• Component structure
  


• Animation tuning
  


• Layout refinements
  


• Refactors without breaking flow
  

Instead of working file by file, Antigravity made it possible to think system-wide adjusting animation logic, layout, and styling together while maintaining consistency.

This kept the creative momentum high without sacrificing technical cleanliness.

Tech Stack

• Next.js (App Router)


• React


• TypeScript


• Tailwind CSS


• GSAP for complex timeline animations


• Framer Motion for scroll-based reveals and micro-interactions


• Radix UI / shadcn for accessible primitives


• Deployed on Google Cloud Run

What I’m Most Proud Of

The Flow

Nothing in this portfolio is abrupt.

Sections don’t “appear.”


They arrive.

Animations guide the eye instead of competing for attention, creating a calm, readable experience that still feels alive.

Animation Discipline

Motion is used sparingly and purposefully:

• GSAP handles moments that require precision and choreography
  


• Framer Motion handles moments that should feel natural and responsive
  


• CSS handles everything that doesn’t need JavaScript
  

This balance keeps performance high and interactions smooth.

AI as an Enabler, Not a Gimmick

There’s no visible chatbot.


No AI button.

Yet AI is present in every decision.

Gemini and Antigravity didn’t replace creativity they amplified it. They made it possible to explore more ideas, discard weaker ones faster, and refine the strongest concepts with confidence.

Closing Thought

This project isn’t about a portfolio.

It’s about possibility.

It’s about what happens when developers stop asking AI to do the work and start asking it to think with them.

Gemini 3 and Antigravity didn’t just help build this site they shaped how it came to life.

And that’s the most exciting part.