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

samuellgsDev — Fri, 30 Jan 2026 13:05:45 +0000

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:

Code Generation: Used Gemini to scaffold components and generate boilerplate code
Design Decisions: Consulted AI for UX/UI improvements and accessibility recommendations
Problem Solving: Debugged complex hydration issues and performance optimizations with AI assistance
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

Planning: Created implementation plans and task breakdowns with AI assistance
Component Architecture: Built reusable components with proper separation of concerns
State Management: Used React Context for global dimension state
Performance: Implemented code splitting, lazy loading, and optimized animations
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/

DEV Community: samuellgsDev