This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
I'm Pedro da Costa e Silva Monteiro, a Full Cycle Developer and Cadet at 42 School in Brazil.
My goal with this portfolio was to create something more than just a static resume. I wanted an interactive experience that reflects my love for retro gaming and solid engineering. It's designed to be fun, accessible, and robust.
Portfolio
How I Built It
This portfolio is built with Svelte 5 (Runes) and SvelteKit, styled with TailwindCSS v4, and written in TypeScript.
The Tech Stack
- Framework: SvelteKit (Svelte 5) for a truly reactive and modern developer experience.
- Styling: TailwindCSS v4 with a custom "Space Invaders" neon theme.
- Deployment: Containerized with Docker and deployed to Google Cloud Run for scalability and performance.
- Testing: Playwright for End-to-End testing.
Google AI Integration
I didn't build this alone. I pair-programmed with Google's Gemini-powered coding assistant (Antigravity). We worked together in a highly agentic workflow where Gemini helped:
- Architect the "DOM Destruction" game engine.
- Refactor complex game logic into clean, testable controllers.
- Ensure the site met strict accessibility standards (WCAG 2.2 AA), including generating descriptive alt text for images.
- Debug intricate audio state management and game loop timing.
Design & Architecture
The design is a tribute to the arcade era. I used a pixelated aesthetic but implemented it with modern CSS filters and responsive layouts. The core architecture separates the "Game Layer" from the "Content Layer", allowing them to interact—when you play the game, you are literally destroying the HTML elements of my resume!
What I'm Most Proud Of
I'm most proud of the "DOM Destruction" mechanic. It solves the problem of "boring portfolios" by turning the site itself into a destructible environment.
- Interactive Gameplay: The portfolio transforms into a Space Invaders-style game where the aliens are the content, and your shots actually remove DOM nodes from the page.
-
Clean State Management: Using Svelte 5's Runes (
$state,$derived,$effect) made handling the complex game state (entities, projectiles, collisions, audio) incredibly intuitive and performant. - Accessibility: Despite the heavy visual effects, we ensured the site remains usable and accessible, with proper ARIA labels and semantic HTML.
Top comments (1)
great job, congratulations 💥💥💥