Gabriel AbreuLessons on building a banger portfolio website with AI
"Naah... there's nooo way you can build a good portfolio website with AI."
Most AI-built websites look the same, and you can tell within the first scroll that they were probably made with some form of AI assistance.
Why AI-built sites all look the same
But have you ever asked yourself why they feel the same? It's just the way LLMs are designed. They'll fill every gap you leave with a defensible default, and that's how they work.
I think you see a lack of choice when you look at websites made with AI. No one in good conscience would choose serifs everywhere, subtle animated gradients that usually glow purple, blue, or gold, shadow-heavy cards, that font combination, or that 3-column grid. The model chose the safest option, and safe always looks the same.
And when you know how AI works, it's easier to get a good output from it.
What 'good AI work' looks like vs. 'AI slop work' is a different story for a different article. For this one, I'd like to tell you the story of building my personal portfolio, which took me 82 versions and 443 commits.
Btw, BIG kudos to Emily Lai @emilylai for inspiring me to write this article, as she also laid out the process for her personal site, highly rec. reading it below:
Using Astra, Fable, and Grok to build my personal website (what i learned)
View article on X
Take what's useful from her process or from mine. I hope this helps you if you're building your own website.
How I actually built mine
It was built with my pals Claude Code & Claude Design, and ofc, my custom-made AI harness, in order.
Design first
I started in Claude Design. That gave me a prototype to begin with. Then I wrote the design system before the pages, so every page after that had rules to follow.
An RPG-inspired system
Ofc, my design system comes from RPG books & games, a part of my history. Mobbin supplied the references. The taste came from my gamer/nerd arc.
An animated homepage
The homepage is an animated walkthrough of what my home office looks like (cringe, yeah, sure, I can tank the judgment).
PS, Gemini made the images w/ Nano Banana.
Copy audits, many of them
Ran many, many copy audits. Sorry, Claude, but you still suck at copy, esp. for websites. I ran those audits myself, aaand ~82 versions of the copy, ~443 commits later...
It was finally 'ready'.
gm gm frens: ready ain't a feeling, it's a decision
View post on X
The stack
→ Claude Design → the first prototype;
→ Claude Code + my agent crew → everything after that;
→ Plain HTML, CSS, JS, and a bit of shadcn;
→ Playwright for tests, PostHog for analytics, Vercel for hosting;
→ Mobbin for references, personal culture copy audits, Gemini for images
Why is AI so bad at copy?
One of the hardest things for AI to replicate in copy is a lack of context. At some point, it gave me the following copy for my portfolio website: “A launch stalls while the team checks facts.”
Wait, what? There’s no what, no why, no how, no context lol. Just nonsense copy. And then, following up on that, the AI wrote some CTAs, and one of them was “Read about the problem.” Read what? Read where, bro? lol
The lesson here is that for all tasks requiring excellence, a human in the loop is still much needed 🫠
What I learned
- Create your specs & prototype on day 1, and adhere to them for subsequent design and test work & this will save you tons of time at later stages.
- Put the work on the first screen. People are short on time ++ nobody opens your fourth tab to find out what you can do.
- Ask "does this feel like mine?" of every section. The model gives you a default, which is what everyone else ships.
- The model has never met you, so talk to it about your story and figure things out together.
- Ask your frens for feedback, take it (or not) & iterate accordingly. That being said, roast it here, my fren:
Gabriel Abreu, portfolio
Open the site
Conclusion
AGI ain't here yet, and there's not a single model that will pull this off in a single loop ++ no, it doesn't matter if you give it the best tools & skills out there, like this one.
And sorry, not sorry, but no, there's no magic repo or skill I'll share here to magically help you to make a banger portfolio.
That said, because you've come this far, I'm happy to share a private plugin I built based on my learnings here
Treat it as a starting point. After that, it's all yours to create according to your own taste, culture, and stories.
That's all, folks. Thanks for reading, and if you found value in this article, leave it a like or share it with someone building their own site.
Liked this? You'll always get my POV here. Follow me on X at @gabe_onchain or keep reading my blog posts right here.