Creating my portfolio with Antigravity AI

Source: Dev.to

The Sequence

1. Idea
2. Approach / Strategy
3. AI Choice
4. Key Concepts & Choices for the Front‑end App
5. Experience / Journey
6. AI Workflow
7. Result
8. Final Thoughts

Idea

While searching for opinions about the WeAreDevelopers event (one I’d love to attend), I stumbled upon an interesting post on dev.to. The post included a pop‑up promoting a Frontend Challenge using AI.

I already wanted to create a portfolio and learn more about AI, so this felt like the perfect chance to kill two birds with one stone.

Approach

My strategy was “learn by doing.”
Instead of spending many hours reading about the AI, I wanted to see how intuitive my chosen AI was and how far I could get without writing overly technical prompts.

AI Choice

The challenge offered three Google‑provided AIs; I chose Antigravity—mostly because I liked the name (no judgment, right?).

After watching the introduction video on the Antigravity website, I learned that its workflow is broken down into:

• Implementation plan
• Pre‑requisites
• Proposed architecture
• Implementation steps
• Verification plan

Key Concepts & Choices for the Front‑end App

Frontend stack

• Next.js – I wanted to get more familiar with it, so I picked it on purpose.
• TypeScript

Key concepts

• Easy to change
• Separation of concerns
• MVC architecture
• Attractive UI
• Feature‑based layout (Atomic Design)

Experience / Journey

Below are some moments that made me reflect on different AI approaches.

Downgrading Node version

Next.js required a newer Node version than the one I had installed. Instead of suggesting an upgrade, the AI tried to downgrade Next.js (I stopped it).
Why didn’t it propose upgrading Node?

Accessing web pages

I gave the AI public links to my GitHub and LinkedIn profiles. It opened a browser, fetched the information, and used it in the generated code. That was impressive to watch.

All entities in a single file

The AI’s first solution placed all entities in one file. This “cheap” and “compact” approach is common for the model, but it’s not ideal for larger codebases. Remember: the AI can read an entire repo instantly; we cannot.

Atomic Design… literally

I mentioned Atomic Design in the pre‑requisites, but the AI created a literal folder structure that mirrored the terminology:

I wanted the benefits of Atomic Design without the literal folder names; a more organic separation felt better.

Component delegation

Because I’m still learning Next.js, I wasn’t sure how components should be organized. After several iterations, the AI suggested a component‑delegation pattern, which turned out to be a clean solution I really liked.

AI Workflow

Antigravity’s workflow consists of two or three steps, each represented as a markdown file that requires my approval.

1. Proposal – The AI presents a markdown file with ideas, options, and a pros/cons list for each choice.
2. Implementation plan – Before any code is written, the AI shows a detailed plan: the steps it will take and the goal of each action.
   Having this visibility gave me confidence in what the AI was thinking.
3. Walk‑through – After I approve the plan, the AI executes it, and I can review the implemented code and final result.

Overall, this staged approach feels far safer than a “black‑box” generation followed by a single review at the end.

Result

Below is a screenshot of the finished application:

Architecture Overview

• app/ – Contains the pages (Next.js routing).
• components/ – UI pieces, organized by feature (following the feature‑based/Atomic Design approach).
• models/ – Domain entities (e.g., Resume, Experience).
• services/ & data/ – A mocked JSON file holds my resume data:

Resume
 ├─ Basic info
 ├─ Experiences
 ├─ Education
 └─ Extras

I kept the data local for now, but the structure makes it trivial to swap in an API later and generate the profile automatically.

Final Thoughts

In the end, the experience was fun and educational. I learned a lot about:

• Antigravity AI’s structured workflow
• Next.js (including TypeScript)
• Deploying on Google Cloud Run

When we expose ourselves to challenges, the more we sharpen our minds and skills. Antigravity surprised me; the implementation‑plan step was a particularly cool idea.

I bought a domain and linked it to my portfolio using Google Cloud—it was pretty easy. I also dug a bit into TurboPack, a fast compiler written in Rust.

Even though I didn’t spend a lot of time on the challenge, I had fun and finally built the portfolio that’s been on my to‑do list for ages.

I’ve also found a distraction‑free text editor that I highly recommend for jotting down ideas.

My repo: https://github.com/raffaeleloi/portfolio-antigravity