This is a submission for the Built with Google Gemini: Writing Challenge
What I Built with Google Gemini
For the New Year Portfolio Challenge, I built my personal AI-powered developer portfolio using Google Gemini inside AI Studio and deployed it directly to Cloud Run.
The goal was to:
- Build a modern responsive portfolio
- Showcase my AI, Web 3.0, and Metaverse projects
- Use Gemini as a collaborative coding partner
- Deploy without traditional local setup
Instead of writing everything manually, I used Gemini to:
- Generate layout structure
- Refine UI components
- Improve responsiveness
- Debug code issues
- Optimize deployment
This wasn’t just code generation. It was AI-assisted development.
🔗 Live Demo:
What I Learned
AI Studio ≠ Local Development
My biggest challenge was image handling.
At first:
- Gemini added random stock images.
- I wanted to use real project screenshots.
- I created a
publicfolder manually. - I placed images there.
- I updated image paths in code.
It didn’t work.
I spent nearly 8 hours debugging this.
After multiple failed attempts, I realized something critical:
AI Studio does not handle local assets the way traditional local environments do.
The solution:
Upload images online → Use public URLs.
The moment I switched to hosted image URLs, everything worked.
Lesson:
Understanding the environment matters as much as understanding the code.
Prompt Precision Changes Everything
When I asked:
“Fix the UI.”
Gemini responded:
“Fix completed.”
But the layout was still not fully responsive.
When I changed my prompt to:
“Make the UI fully responsive across mobile, tablet, and desktop using proper flex/grid adjustments.”
It worked.
AI is powerful — but clarity controls output.
Debugging AI-Generated Code Is Still Debugging
Even when AI says something is fixed, you must verify.
AI speeds up development.
It does not remove responsibility.
That mindset shift was important.
Google Gemini Feedback
What Worked Well
- Fast UI scaffolding
- Clean component structure
- Rapid iteration
- Direct Cloud Run deployment (huge advantage)
- Smooth overall developer experience
The direct deployment feature was a game changer. No manual cloud setup saved a lot of time.
Where I Faced Friction
- No clear warning about local image limitations
- AI sometimes confirmed fixes that weren’t fully implemented
- Required multiple prompt refinements for accurate responsiveness
If AI Studio could:
- Detect unsupported local asset behavior
- Provide environment-aware debugging hints
- Validate UI responsiveness automatically
It would dramatically reduce friction for developers.
Looking Forward
This experience changed how I approach AI development.
Next, I want to:
- Build more complex AI-integrated apps
- Experiment with agent-based workflows
- Explore production-grade AI systems
- Contribute to AI-first developer tooling
The biggest transformation wasn’t the portfolio.
It was learning how to collaborate with AI intentionally.
AI is not magic.
It’s leverage — when guided properly.
Top comments (0)