Kiran Naragund

Posted on Feb 1

🔥I Built an Awwwards-Style Portfolio Using Antigravity🌀

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

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

About Me

Hello! 👋

I’m Kiran Naragund, a full-stack developer, open-source contributor, and someone who genuinely enjoys building things on the web. I like turning ideas (even unclear or messy ones) into usable, meaningful software.

This portfolio represents my journey so far: my education, professional experience, open-source work, projects, and the many experiments I’ve done while learning and growing as a developer.

For a long time, I wanted to build an Awwwards-style portfolio. something cinematic, interactive, and animation-heavy but without using no-code tools like Framer. I wanted to do it using the tech I actually work with every day. 🙃

More than a resume, I wanted this portfolio to tell my story. My personality, my taste in design, my curiosity for animations, and my love for clean but expressive interfaces.

That’s how this minimal yet cinematic portfolio came to life. 😉

Portfolio

Deployed on Google Cloud Run: https://kiran-820676523755.europe-west1.run.app

⚠️ Note: Please view this on a desktop or laptop for the best experience. Some animations and interactions are designed specifically for larger screens. I promise it’s worth it 🙏

How I Built It

I built this portfolio using modern and familiar tools:

React.js with Vite for fast development and performance.
Tailwind CSS for styling and theming.
GSAP and Framer Motion for animations and page transitions.
Lenis for smooth scrolling.
Chart.js for visualizing open-source activity.
A few shadcn/ui components.

Development Process

I didn’t start this project with a perfect design. I started with experiments.

I built the site section by section, testing animations, breaking layouts, removing things, and rebuilding again. This portfolio went through multiple redesigns before reaching its current state.

All the content (experience, education, certifications, skills, open-source data) is managed through structured data files, making the site easy to update and scale.

Design Decisions

I made a few bold and slightly risky 😅 decisions while building this.

🎨 Themes (10 of them!)

I don't wanted only light and Dark theme as many websites commonly offer this. So I decided to implement 10 different themes:

Light, Dark, Purple, Ocean, Forest, Sunset, Rose, Midnight, Coffee, and Mint.

Each theme updates colors, SVGs, and UI elements consistently. My personal favorites are White and Rose 😍. Let me know in the comments which one you liked.

🧩 SVGs instead of images

Because of the multiple themes, static images didn’t feel right.
So I switched to custom SVGs that adapt dynamically based on the active theme. This helped maintain visual consistency across all themes.

🫥 Hidden elements for better UX

Some animations looked amazing on large screens but felt overwhelming or broken on smaller ones (like SVG motion paths in the What I Do section).

Instead of forcing them everywhere, I selectively hide elements to keep the experience clean and enjoyable.

🔀 Route-based page transitions

Instead of traditional loaders, I added animated page transitions.
Whenever you move between pages, you’ll see fun, route-specific messages appear briefly in the center of the screen.

It’s a small detail, but it makes navigation feel playful and alive.😄

Open Source Section (Beyond the Green Graph)

Most developer portfolios show the default GitHub contribution graph. I didn’t want to do that.

Instead of just showing green squares, I wanted visitors to see my actual open-source work in a clear and useful way. So I built a dedicated Open Source section where people can easily explore:

Organizations I’ve contributed to
Pull requests I’ve opened
Issues I’ve worked on
Contribution activity over time

This makes my open-source work more transparent and easier to understand. Anyone visiting the site can quickly see what I contributed, where I contributed, and how active I am, without needing to jump around GitHub.

For me, this felt more meaningful than a static activity graph.

What Google AI Tools Did I Use?

Antigravity IDE 🫡

I used Antigravity IDE for most of the development.

While building the site, I kept updating a plan.md file where I wrote ideas, page structure, animation plans, and things I wanted to improve. This file changed many times as the project evolved.

I often switched between different AI models inside the IDE, sometimes for planning, sometimes for refactoring code, and sometimes just to explore better ways to structure components or animations.

Gemini Nano Banana 📸

I used Gemini Nano Banana to generate mockups for my projects sections.

These both tools made the process smoother and helped me iterate faster.

What I'm Most Proud Of

Honestly, building this portfolio feels like a dream come true for me.

There was a time when I only imagined creating something like this. Now it’s live, and people can actually experience it. This project pushed me far outside my comfort zone and forced me to try things I had never done before.

Some things I’m especially proud of:

Learning and using GSAP for complex SVG paths and timeline-based animations.
Creating a custom Google-style loader animation that introduces the site in a playful way.
Adding route-based page transition animations with different messages for each section.
Building a custom animated cursor for smoother interactions.
Creating a fully theme-aware design system with 10 different themes that work consistently across the site.
Showcasing my open-source contributions using real data and charts, instead of a basic GitHub graph.
Making the site interactive and cinematic, without overwhelming the user.

This portfolio taught me patience. I experimented a lot, broke things often, and learned how small details can completely change how a product feels.

It’s not perfect but it’s honest. It represents how I think, build, and learn. And that’s what makes it special to me. 🙃

Made with love, hate, and too many revisions because perfection doesn’t arrive gracefully, it’s dragged out through frustration, stubbornness, and late-night bargaining with my laptop.

Thanks for reading, and I’d love to hear your feedback! 🙌

Kiran Naragund

Tech Writer and Moderator @DEV ✦ Full-Stack Developer ✦ Mentor @Exercism ✦ Open-Source Contributor ✦ Email for Collabs :)

Top comments (18)

Hadil Ben Abdallah • Feb 1

Great job, Kiran!
What you did is impressive.
Wish you all the best 😍

Kiran Naragund • Feb 1

Thanks so much Hadil 🙏

Charan Koppuravuri • Feb 1

🔥 Portfolio gold standard.

3 pro moves I immediately stole:

Theme-aware SVGs > static images (consistency win)
Real OSS data + Chart.js > green squares (shows actual impact)
Route-specific transitions = thoughtful UX delight

Antigravity workflow question: How much did the plan.md iterations save vs traditional Vite+React setup?

As someone building LLM frameworks, I'm curious how it handles complex state/animation orchestration.

Rose theme ftw! Live link bookmarked for inspo 🙌

Kiran Naragund • Feb 1

Thank you so much! 🙏 Really glad it was useful.

The plan.md is generated by the agent before executing anything. It refines the prompt and gives the clear implementation plan, which I found really helpful for planning flows, structure, and animations before writing code.

And yes… Rose theme ftw 🌹😄

Hossein Yazdi • Feb 1

Have you also tried Cursor? I have read a lot of good reviews from Cursor IDE. It's nice to see your comparison to them, if you have tried that as well.