Play My Resume: A Destructible Space Invaders Portfolio

Pedro Monteiro — Sat, 31 Jan 2026 14:43:50 +0000

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.

DEV Community: Pedro Monteiro