Why My Portfolio Has Superpowers and Villain Galleries
Source: Dev.to
Introduction
This submission is for the New Year, New You Portfolio Challenge presented by Google AI. I wanted a portfolio that demonstrates technical ability while showing I don’t take myself too seriously, so I chose a comic‑book theme.
Tech Stack
- React 19 with TypeScript for type safety.
- Vite for fast, minimal build configuration.
- Tailwind CSS with a custom comic‑book color palette and classic effects (rotated text, bold borders).
- Recharts for skill‑level visualizations.
- Docker (multi‑stage build) and Google Cloud Run for deployment.
Content Generation with Google AI
I used Google AI Studio and Gemini to brainstorm section names and refine project descriptions, keeping the comic‑book voice consistent while staying honest.
Comic‑Book Theme
Instead of generic headings, I renamed sections:
- Superpowers → Skills
- Missions → Projects
- Villain Gallery → Problems I’ve solved (e.g., system outages, runaway AWS bills)
Each entry explains the problem, the solution, and the impact. Hover effects display “KAPOW!” and “ZAP!” text, and headers are rotated like comic panels.
Interactive Features
- Konami Code easter egg.
- Click‑combo system that triggers visual effects when clicking quickly.
- Floating particles in the background for subtle motion.
All interactions are built with accessibility in mind: semantic HTML, ARIA labels, and full responsiveness (tested on mobile).
Deployment Details
- Multi‑stage Docker build: Node compiles the app, then Nginx serves the static files.
- Final image size ≈ 50 MB.
- Cloud Run handles auto‑scaling, HTTPS, and the required challenge label.
- Deployment completes in a few minutes.
Results & Impact
- 9 cloud certifications and a range of projects (serverless games, chaos‑engineering experiments).
- Notable outcomes:
- 95 % reduction in downtime for one project.
- 35 % cut in cloud costs for another.
Performance
- Lighthouse scores in the mid‑90s across all categories.
- Optimized Docker image and Cloud Run auto‑scaling ensure smooth handling of traffic spikes.
Conclusion
The portfolio showcases both technical depth and personality, aiming to leave a lasting impression that I’m skilled and approachable.
Live Site
https://comic-portfolio-610288702971.us-central1.run.app