Building an Ultra-Modern Animated Portfolio with Google AI Studio & Gemini

Source: Dev.to

Submission for the New Year, New You Portfolio Challenge Presented by Google AI

I’m Aniruddha Adak, a Full‑Stack Developer & AI Engineer based in Kolkata, India, currently in my 4th year of B.Tech Computer Science at MAKAUT. My stack includes Next.js, React, TypeScript, Python, and machine‑learning tools.

Portfolio Overview

I built this portfolio using Google AI Studio with Gemini 3 Flash, showcasing AI‑assisted development. The site combines an ultra‑modern design with smooth animations, responsive layout, and rich typography.

Design & Features

Ultra‑Modern Design

• Gradient‑animated hero section with parallax effects
• Dark theme accented with neon blues, purples, and pinks
• Fully responsive across devices

Smooth Animations & Interactions

• Scroll‑triggered reveal animations for each section
• Hover effects on project cards with detail modals
• Seamless page transitions and scroll‑position indicator
• Animated skill bars visualizing technical expertise

Rich, Modern Typography

• Large, gradient‑styled headings for impact
• Varied font sizes and weights to establish visual hierarchy
• High‑contrast body text for readability

Key Sections

• Hero Section – Animated gradient background introducing me
• About Me – Timeline of achievements and experience
• Skills – Animated skill bars with proficiency levels
• Projects – Showcase of major work:
  • FolioMotion – Dynamic portfolio template
  • ContentCraft AI – AI‑powered content creation platform
  • MarketPulse AI – Real‑time financial intelligence agent
  • SupplyGuard AI – Supply‑chain risk detection system
  • SkillSphere – Productivity platform with 10+ apps
• Contact – Animated contact form for inquiries

How I Built It

Tech Stack

• Google AI Studio – Gemini 3 Flash generated the initial app structure
• React / TypeScript – Component‑based architecture
• Vite – Fast build tool and dev server
• Tailwind CSS – Modern utility‑first styling with custom animations
• Gemini Integration – AI‑powered features and content generation

Development Process

1. Described the portfolio vision to Google AI Studio’s Copilot.
2. AI generated modular React components and styling.
3. Enhanced components with custom animations and interactions.
4. Deployed to GitHub and connected to Vercel.
5. Set up automatic deployments on every push to the main branch.

What I’m Most Proud Of

• Design Excellence – Modern gradient design, smooth animations, and rich typography.
• Performance – Vite delivers instant page loads and fluid interactions.
• AI‑First Development – Leveraged Google AI Studio to jump‑start development while retaining full control.
• Comprehensive Showcase – Projects, timeline, and skills together tell a complete technical story.
• Smooth User Experience – Every scroll, hover, and interaction feels delightful.

Live Deployment

• Portfolio:
• Inside AI Studio:
• GitHub Repository:

Key Takeaways

• Google AI Studio enables rapid prototyping.
• Gemini‑powered code generation produces production‑ready quality.
• Modern web design can be achieved without bloated frameworks.
• Combining AI tools with creative vision yields exceptional results.

I’m open to new opportunities and collaborations! Connect with me on LinkedIn, GitHub, or Twitter.