My Portfolio Explains Itself: Building an AI-Powered Architecture Visualizer with Gemini
Source: Dev.to
Submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
I’m a cloud and AI‑focused developer who enjoys building systems that are not just functional, but explainable. Over the years I’ve worked with cloud‑native architectures, DevOps workflows, and AI‑powered applications, and I’ve noticed a recurring problem: great systems are often hard to understand at a glance.
With this portfolio I wanted to go beyond a static showcase of projects. My goal was to create an interactive experience that reflects how I think as a developer — focused on clarity, scalability, and real‑world impact — while also demonstrating how AI can make complex architectures easier to understand for everyone, not just engineers.
Portfolio
My portfolio is a live, deployed application that visualizes my app architecture and uses Gemini to explain how traffic flows through the system in real time. It walks visitors through:
- Entry points (user → Cloud Run)
- API interactions
- Data persistence layers
- AI model interactions
- End‑to‑end request flow
🚀 Live Demo
The demo lets recruiters, engineers, and even non‑technical visitors understand what’s happening under the hood without needing to read architecture diagrams or documentation.
How I Built It
Tech Stack
- Frontend: Lightweight web UI for architecture visualization
- Backend: Containerized service deployed on Google Cloud Run
- AI: Gemini (via Google AI tools) for natural‑language architecture explanations
- Infrastructure: Google Cloud (Cloud Run, APIs, IAM)
- Deployment: Container‑based CI‑friendly setup
- Source Code: Available on GitHub
Google AI Tools Used
- Gemini models to:
- Interpret architecture components
- Generate step‑by‑step traffic flow explanations
- Adapt explanations based on user‑selected components
- AI Studio for rapid prototyping and deployment
- Gemini APIs to refine prompts and integrate intelligent explanations
Design Decisions
- Kept the UI intentionally minimal so the architecture and explanations stay front and center.
- Prioritized explainability over flashy visuals.
- Designed prompts to explain the same architecture at different levels of depth, depending on the viewer.
- Made the entire project open source so other developers can learn from and build upon it.
The app is stateless, fast to spin up, and runs comfortably within the Google Cloud Free Tier, making it both practical and production‑aligned.
Development Process
- Prototyped in AI Studio – experimented with Gemini prompts to find the best way to explain architecture concepts.
- Built the visualization layer – created interactive components that respond to user clicks.
- Integrated Gemini API – connected the frontend to Gemini for real‑time explanations.
- Containerized & Deployed – packaged everything for Cloud Run deployment.
- Open sourced – published the complete source code on GitHub for the community.
What I’m Most Proud Of
- 🧠 AI‑powered explainability – Gemini doesn’t just describe components; it explains why traffic flows the way it does.
- ☁️ Cloud‑native by design – fully containerized and deployed on Cloud Run, following real‑world best practices.
- 🎯 Audience‑aware explanations – the same architecture can be understood by a junior developer, a product manager, or a senior engineer.
- 🚀 A portfolio that does something – instead of telling people I understand cloud architectures, this portfolio shows it.
- 💻 Open source contribution – the complete source code is available on GitHub, providing a learning resource for the developer community.
- 🎨 Built with Google AI Studio – leveraged AI Studio’s rapid prototyping capabilities to iterate quickly and deploy seamlessly.
🔗 Quick Links
- Live Demo: AI Studio App
- Source Code: GitHub Repository
- Architecture Docs: See the README in the GitHub repo
- Try it yourself: Click any component in the live demo and watch Gemini explain how your request travels through the system! 🎯