DEV Community

Cover image for Building an Ultra-Modern Animated Portfolio with Google AI Studio & Gemini
ANIRUDDHA ADAK
ANIRUDDHA ADAK Subscriber

Posted on

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

#devchallenge #googleaichallenge #portfolio #gemini

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

I'm Aniruddha Adak, a passionate Full Stack Developer & AI Engineer from Kolkata, India. Currently in my 4th year of B.Tech in Computer Science at MAKAUT, I specialize in building intelligent, scalable web applications using modern AI tools. With expertise in Next.js, React, TypeScript, Python, and machine learning, I'm constantly pushing the boundaries of web development.

Key Achievements:

  • 🏆 Hacktoberfest 2024 - Open Source Contributor with 238+ PRs
  • 💼 Freelance Developer since 2023 with multiple successful projects
  • 🎓 MAKAUT - B.Tech Computer Science, Specialized in AI/ML
  • 📝 Active Technical Writer on DEV Community
  • 💻 Full Stack AI Developer at Innovation Labs

Portfolio

I built this portfolio using Google AI Studio with Gemini 3 Flash, demonstrating the power of AI-assisted development. The website features:

Design & Features:

✨ Ultra-Modern Design

  • Gradient animated hero section with parallax effects
  • Dark theme with vibrant neon accents (blues, purples, pinks)
  • Responsive layout optimized for all devices

🎬 Smooth Animations & Interactions

  • Scroll-triggered reveal animations for each section
  • Hover effects on project cards with detail modals
  • Smooth page transitions and transitions between sections
  • Animated skill bars showing technical expertise
  • Progress indicator tracking scroll position

📱 Rich, Modern Typography

  • Large, impactful headings with gradient effects
  • Varied font sizes and weights for visual hierarchy
  • Readable body text with proper contrast

Key Sections:

  1. Hero Section - Animated gradient background introducing who I am
  2. About Me - Timeline of achievements and experience
  3. Skills - Animated skill bars with proficiency levels
  4. Projects - Showcase of major projects:
    • 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
  5. Contact - Animated contact form for inquiries

How I Built It

Tech Stack:

  • Google AI Studio - Used Gemini 3 Flash to generate the initial app structure
  • React/TypeScript - Modern component-based architecture
  • Vite - Lightning-fast build tool and dev server
  • Modern CSS - Tailwind CSS 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 with Vercel
  5. Automatic deployments on every push to main branch

What I'm Most Proud Of

🎨 Design Excellence - The portfolio stands out with its modern gradient design, smooth animations, and rich typography that truly showcases personality and professionalism.

⚡ Performance - Built with Vite for instant page loads and smooth interactions across all devices.

🤖 AI-First Development - Leveraged Google AI Studio to jumpstart development, reducing boilerplate code while maintaining quality and customization.

📊 Comprehensive Showcase - From projects to timeline to skills, the portfolio tells a complete story of technical journey and achievements.

🔄 Smooth User Experience - Every scroll, hover, and interaction is crafted to be smooth and delightful.

Live Deployment

🚀 Visit the portfolio: https://portfolio-2026-animated-ktjtiwwv0-aniruddhaadaks-projects.vercel.app

or directly inside ai.dev (ai studio) : https://ai.studio/apps/drive/1wK4A2s1Y7W2RlDwpQVNGZvI_8DfpNGCR?fullscreenApplet=true

📦 GitHub Repository: https://github.com/AniruddhaAdak/portfolio-2026-animated

Key Takeaways

✅ Google AI Studio makes rapid prototyping incredibly fast
✅ Gemini-powered code generation is production-ready quality
✅ Modern web design doesn't require bloated frameworks
✅ AI tools + creative vision = exceptional results

This portfolio project showcases how AI tools can accelerate development while maintaining the polish and professionalism of a hand-crafted site. I'm excited to continue pushing boundaries with AI-assisted development in 2026!

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

Top comments (0)