DEV Community

Cover image for A portifolio inspired at rick and morty (made with ai)
samuellgsDev
samuellgsDev

Posted on

A portifolio inspired at rick and morty (made with ai)

#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

Hey there! I'm Samuel Gadelha, a .Net Developer (but, fullstack role) from Brazil who believes that coding should be as exciting as interdimensional travel.

I'm passionate about building scalable applications and exploring new technologies across the multiverse of software development. From backend APIs to interactive frontends (with AI), I love creating solutions that make a real impact. When I'm not coding, you'll find me watching Rick and Morty (hence the portfolio theme!) or diving into AI, automation and machine learning projects.

With this portfolio, I wanted to showcase not just my technical skills, but also my creativity and ability to think outside the box. The multiverse concept represents my versatility as a developer—comfortable navigating different tech stacks, frameworks, and problem domains.

Portfolio

Portifolio web version: https://ai-rick-and-morty-portifolio.vercel.app/

How I Built It

Tech Stack

  • Framework: Next.js 16 with React 19 (App Router)
  • Styling: Tailwind CSS with custom Rick and Morty theme
  • Animations: Framer Motion for smooth transitions and effects
  • TypeScript: For type safety and better developer experience
  • Deployment: Vercel (or Cloud Run if you deploy there)

Google AI Integration

I leveraged Antigravity specifically Google's Gemini AI and Claude Sonnet throughout the development process:

  1. Code Generation: Used Gemini to scaffold components and generate boilerplate code
  2. Design Decisions: Consulted AI for UX/UI improvements and accessibility recommendations
  3. Problem Solving: Debugged complex hydration issues and performance optimizations with AI assistance
  4. Content Creation: Generated dimension-specific descriptions and easter eggs

Design Decisions

Multiverse Theme: Inspired by Rick and Morty, I created 4 distinct dimensions:

  • C-137 (Classic): The main dimension with green portal aesthetics
  • Pixel (Retro): 8-bit gaming vibes with pixel art styling
  • Prime (Professional): Clean, corporate look for business contexts
  • Club (Party): Neon lights and disco ball effects with interactive sound board

Key Features:

  • 🌀 Smooth Portal Transitions: Animated dimension switching with particle effects
  • 🎮 Interactive Mini-Game: Space Shooter with dimension-specific targets
  • 🎵 Sound Board: 8-pad drum machine in Club dimension using Web Audio API
  • 📖 Parallax Storytelling: Scroll-based narrative that changes per dimension
  • 📱 Mobile Optimized: Fully responsive with touch-friendly interactions
  • ♿ Accessible: Semantic HTML and keyboard navigation support

Development Process

  1. Planning: Created implementation plans and task breakdowns with AI assistance
  2. Component Architecture: Built reusable components with proper separation of concerns
  3. State Management: Used React Context for global dimension state
  4. Performance: Implemented code splitting, lazy loading, and optimized animations
  5. Testing: Fixed hydration mismatches and ensured SSR compatibility

What I'm Most Proud Of

1. The Dimension System 🌌

The entire portfolio transforms based on the selected dimension—colors, fonts, animations, and even content adapt dynamically. This wasn't just a theme switcher; it's a complete experience transformation that demonstrates advanced state management and CSS-in-JS techniques.

2. Interactive Sound Board 🎵

Built a fully functional 8-pad drum machine using the Web Audio API with synthesized sounds (kick, snare, hi-hat, etc.). It supports both mouse clicks and keyboard shortcuts (1-8 keys), showcasing my ability to work with browser APIs and create engaging user experiences.

3. Smooth Animations & Transitions ✨

Every interaction feels polished—from the portal gun cursor to the scanning effect on my avatar. I used Framer Motion extensively to create fluid, performant animations that don't compromise on user experience.

4. Problem-Solving 🔧

Overcame several technical challenges:

  • Fixed React hydration mismatches by implementing deterministic random generation
  • Optimized mobile performance by conditionally rendering heavy components
  • Created a custom parallax system with scroll-based animations
  • Handled SSR/CSR differences gracefully

5. Attention to Detail 🎨

From the glitch text effects to the dimension-specific easter eggs, every pixel was crafted with care. The portfolio isn't just functional—it's an experience that tells a story and showcases personality alongside technical skills.

Technical Highlights

  • 7 Custom Components for sections (Hero, About, Projects, Skills, etc.)
  • 15+ Reusable UI Components (Portal, GlitchText, DimensionSwitcher, etc.)
  • 4 Unique Dimension Themes with complete visual overhauls
  • 100% TypeScript for type safety
  • Fully Responsive from mobile to 4K displays
  • Optimized Performance with Lighthouse scores 90+

This portfolio represents not just my technical abilities, but my passion for creating memorable, user-centric experiences. It's a testament to what's possible when you combine creativity with code! 🚀

GitHub Repository: https://github.com/samuellgsDev/portifolio-desafio-googleAI
Live Demo: https://ai-rick-and-morty-portifolio.vercel.app/

Top comments (0)