🔥I Built an Awwwards-Style Portfolio Using Antigravity🌀

Source: Dev.to

Introduction

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

I’m Kiran Naragund, a full‑stack developer, open‑source contributor, and someone who genuinely enjoys building things on the web. This portfolio showcases my journey—education, professional experience, open‑source work, projects, and the many experiments I’ve done while learning and growing as a developer.

Deployment

The site is deployed on Google Cloud Run.

⚠️ Note: For the best experience, view the portfolio on a desktop or laptop. Some animations and interactions are designed specifically for larger screens.

Tools & Technologies

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

Design Process

I started the project with experiments rather than a perfect design. The site was built section by section, testing animations, breaking layouts, removing elements, and rebuilding. Multiple redesigns led to the current state.

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

Themes

Instead of offering only light and dark modes, I implemented 10 different themes:

• Light
• Dark
• Purple
• Ocean
• Forest
• Sunset
• Rose
• Midnight
• Coffee
• Mint

Each theme updates colors, SVGs, and UI elements consistently. My personal favorites are White and Rose.

Because of the multiple themes, static images didn’t feel right, so I created custom SVGs that adapt dynamically based on the active theme, maintaining visual consistency.

Animations & Interactions

• Some animations looked amazing on large screens but felt overwhelming on smaller ones (e.g., SVG motion paths in the “What I Do” section). I selectively hide elements on smaller viewports to keep the experience clean.
• Instead of traditional loaders, I added animated page transitions, giving navigation a playful feel.
• A custom Google‑style loader animation introduces the site in a fun way.
• Route‑based page transition animations display different messages for each section.
• A custom animated cursor provides smoother interactions.

Open Source Section

Rather than showing the default GitHub contribution graph, I built a dedicated Open Source section where visitors can 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 transparent and easy to understand without needing to jump around GitHub.

Development Workflow

• Antigravity IDE was used for most of the development.
• A plan.md file was continuously updated with ideas, page structure, animation plans, and improvement notes.
• I switched between different AI models inside the IDE for planning, refactoring, and exploring better component or animation structures.
• Gemini Nano Banana generated mockups for the projects section.

These tools helped iterate faster and keep the process smooth.

Highlights & Proud Moments

• Learning and using GSAP for complex SVG paths and timeline‑based animations.
• Creating a custom Google‑style loader animation.
• Adding route‑based page transition animations with unique messages per section.
• Building a custom animated cursor.
• Developing a fully theme‑aware design system with 10 consistent themes.
• Showcasing open‑source contributions using real data and charts instead of a static GitHub graph.
• Making the site interactive and cinematic without overwhelming the user.

Reflection

Building this portfolio pushed me far outside my comfort zone and forced me to try things I had never done before. It 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.

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