This is a 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
AI Studio Interactive Demo:
Launch Portfolio Visualizer →
GitHub Repository:
MakendranG/gemini-portfolio-visualizer →
This allows recruiters, engineers, and even non-technical visitors to 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
- Focused on explainability, not just 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 entire app is stateless, fast to spin up, and well within the Google Cloud Free Tier, making it practical as well as production-aligned.
Development Process
- Prototyped in AI Studio - Experimented with different 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, making it 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! 🎯
Top comments (0)