I Fired the 'One-Click' AI Builders: How I Built a React Portfolio with Gemini (Without Knowing React)
Source: Dev.to
The “One-Click” Trap
We’ve all seen the trend. You export your LinkedIn profile to a PDF, feed it into a tool like Gamma or a generic GPT wrapper, and boom—you have a website.
I tried it. It worked. And I hated it.
Technically, the site was functional. But aesthetically? It was a corporate PowerPoint slide pretending to be a portfolio. It lacked soul. As an AI engineer and a creator, I realized I couldn’t be represented by a generic template. So, I deleted it.
The “It Works on My Machine” Nightmare
I decided to go the hard way. I opened Google AI Studio, fired up the latest Gemini models, and decided to build something custom. I wanted a specific vibe—something distinctive.
But then reality hit. I fell into the Perfectionist Trap.
I spent weeks tweaking pixels in the AI preview window. It looked great in the chat interface. But when I finally copied the code to VS Code and tried to push it to GitHub, I faced the classic developer’s nightmare:
“It works on the AI’s preview.” (But it crashes everywhere else).
- Dependencies were missing.
- Components were hallucinated.
- The routing logic was circular.
- The code wasn’t deployment‑ready; it was just a fragile prototype.
Most people would have quit there and gone back to the template.
The Pivot: From Coder to Architect
I didn’t quit. I adopted a new rule: Restart from Zero. I scrapped the broken codebase. But this time, I realized that to build with AI, I had to stop acting like a coder and start acting like an architect.
1. It’s not about Syntax, it’s about Articulation
I don’t technically know React or HTML deeply. If you asked me to write a complex hook from scratch on a whiteboard, I’d fail. But the AI knows the syntax perfectly. My job isn’t to type; my job is to describe the architecture.
- Old prompt: “Make the button blue.”
- New prompt: “Create a reusable button component that accepts ‘variant’ props, using Tailwind CSS for styling, and ensure it glows when hovered.”
2. Debugging is a Logic Game
When the AI threw errors, I didn’t fix them by knowing the language nuances. I fixed them by understanding the flow of data.
If the page crashed, I didn’t look for a missing semicolon. I examined the logic:
- Is the data passing from the parent component to the child correctly?
- Is the state being updated before the render?
I debugged by interrogating the AI about its own logic, not by reading the documentation.
The Result
I battled errors for days. I refined my prompts using structured frameworks. And today, Version 1 is live.
It’s not perfect code. A senior React dev might look at it and find inefficiencies. But it works. It deploys. And most importantly, it’s mine.
https://portfolio-site-one-mauve.vercel.app/
The Takeaway
This is the future of development for many of us. You don’t need to memorize the dictionary to write a novel. You just need a story and the will to write it.
If you are hesitating to build something because you “don’t know the language,” stop. You have the most powerful engineer in the world at your fingertips. You just need to learn how to lead them.