Let me set the scene.
I’m an SEO strategist. Not a developer. I’ve never taken a coding class, I don’t have a computer science background, and the most “technical” things I’d ever done on the internet were optimize existing websites and publish viral webpages/blogs.
So when I decided I needed a portfolio website — a real one, not a template that looked like every other digital marketer’s site — I had two options: pay someone a lot of money to build it for me, or figure out how to build it myself using AI.
Now, the sensible move would’ve been to pay a professional and let someone who actually understands what a “CSS variable” is handle this. But I had AI, I had time, and more dangerously, I had confidence. So I decided to vibe code the entire thing myself.
This is the story of how I vibe coded my entire portfolio from scratch.
What Is Vibe Coding?
Vibe coding is the practice of building software by describing what you want to an AI in plain English, iterating on the output, and eventually ending up with a fully functional product, without writing a single line of code yourself.
The term was coined by OpenAI co-founder Andrej Karpathy in early 2025, who described the process as “fully giving in to the vibes, forgetting that the code even exists.” That framing resonated with me immediately because that’s exactly the energy that makes it work. You stop thinking about how to build something and start thinking purely about what you want.
For someone whose professional instincts live in strategy and language rather than syntax and logic, that unlocked a new realm of possibilities that only a creative with no coding skills can dream of.
Deciding Which AI To Use?
When I decided to build this portfolio, my first instinct was to find the fastest, most friction-free path available. I had tested ChatGPT for vibe coding tasks in the past, but there were a handful of design problems it couldn’t get right, so I knew I had to look around for other options.
It was around that time, Claude AI was getting a lot of attention for its intuitive nature and glowing reviews of how it is a better vibe coding AI than ChatGPT. So I gave it a chance, ran a handful of prompts, and within that moment I knew Claude was the one for the job.
What Made Claude Stand Out From the Rest?
To be blunt, Claude stood out because its baseline for creative design and output were better than what I have seen with other AI Search Engines. I started by asking Claude what my options were and the first response gave me a landscape of choices I hadn’t fully thought through.
The first working prototype actually lived in a simple HTML/CSS file and was rendered in the browser (which was all generated in a single conversation). It was then I knew, I had to use Claude for the entire build.
Not because I ran a rigorous comparative test across every available tool, but because the workflow emerged organically and there was significant progress whenever I wanted something completely different.
The First Prompt
Instead of trying to mislead you guys by saying “With this specific prompt, I got everything I wanted!” like some tech influencer starving for impressions, I will bluntly reveal my actual first message. It was:
That’s it. Not a design brief. Not a tech stack specification. Just an open starting point.
What came back was a visual wireframe mockup with a suggested section structure: hero with bio, SEO project cards, creative project section, a metrics highlight area, and a contact CTA. Alongside it came a practical question: What content did I actually have to work with?
That question forced me to get specific in a way I hadn’t been yet, because I usually just post everything I have on Contently, and hope for the best. The AI stopped asking what the portfolio could be and started working on what it should be. The first prototype was live within the same session. It wasn’t beautiful yet but it was mine.
The Process of Making It More Creative
The early versions of the site were clean, professional, and honestly a little generic. Which began the next phase of making it more distinct. I integrated Claude with a Figma account and from there, it uploaded the bulk of the design and I started making edits for minor things like font size, design layout, and metrics I wanted to showcase.
The hero section is where the most creative energy went. At a pivotal point in the process, I asked Claude for 25 ideas of how I can make the hero section stand more, and for the sake of time, I will list some of them because I feel the world should know what is possible when you ask an AI to brainstorm with no constraints:
- SERP Page Builder– a Google search results page assembling itself line by line, with my result climbing from position 9 to position 1 like a redemption arc.
- Algorithm Feed– a scrolling social feed with engagement metrics ticking up in real time, dopamine simulator edition.
- Redline Document– a page of bad copy getting marked up live, words crossed out and replaced, like an SEO audit rendered as performance art.
- Isometric City Grid– a low-poly cityscape assembling itself block by block, for absolutely no logical reason except that it looked incredible.
- Sacred Geometry– a flat cube drawing itself with glowing lines.
- Reddit Thread– a mock Reddit post titled “Who’s the best SEO strategist in LA?” with upvotes climbing and comments appearing in real time (by far one of the dumber ideas I had in mind and I entertained longer than I’d admit.)
- Twitch Stream Overlay– a live stream aesthetic with a viewer counter climbing and a chat sidebar scrolling SEO tips, because why not?
Every single one of these got built, animated, fully functional and I spent an entire afternoon evaluating these concepts like I was a film producer reviewing reels, which is not something I anticipated doing when I woke up that morning.
This is the power and the danger of vibe coding. The cost of exploration is almost zero, which means you will explore far more than you planned, like spending four hours looking at a slowly-rotating geometric diagram and wonder if it communicates “results-driven SEO strategy.”
The Semi-Endless Revision Process
Here is what no one tells you about vibe coding: the revision process is where the real project lives and where you would spend 80% of your time. Creating and installing the main design system on WordPress alone went through at least five major named versions, with over two dozen design iterations and adjustments.
However, each version wasn’t a failure of the previous one, but more like the natural process of narrowing the gap between “technically functional” and “actually feels like what I imagined.” That gap is real, and closing it requires countless iterations.
Midway through, I had a genuine choice to make: finish on Framer or commit to WordPress. The tradeoff was real because Framer would get me to “live” faster, but I wasn’t familiar with the CMS.
On the other hand, WordPress would give me real SEO infrastructure: full control over slugs, schema markup, Core Web Vitals optimization, and a CMS I was already familiar with. For someone whose professional argument is that SEO infrastructure compounds over time, building on a platform that limits that control felt like an intellectual contradiction.
What the Portfolio Became
The final site is a full custom WordPress installation with a purpose-built design system delivered as a plugin — something I could not have built without AI assistance, and something I’m genuinely proud of.
The typography is exactly what I wanted. The colors are exactly what I wanted. The hero animation is better than anything I had imagined when I typed that first message. And every number in the KPI section is real.
It is a portfolio that practices what it preaches. Structured for search. Clear in its information hierarchy. Built on infrastructure that gives me full control over every technical SEO decision. The site itself is a live demonstration of the work it claims I can do.
What I’d Tell Someone Starting This Process
Be more specific than you think you need to be and know what you want before you start building. The most expensive moments in this project weren’t technical breakdowns, but they were moments of genuine creative indecision. Exploratory prompting is fine, but it’s costing time, money, or your daily prompt limit on Claude.
Additionally, expect to iterate and be as descriptive as possible, because the first version of anything will be approximately right while the final version requires 20 more prompts minimum. That’s not a problem with the process, but that’s the actual creative process.
If you’re a non-technical person sitting on a great idea for a site and talking yourself out of it: don’t. The tools exist. The barrier is genuinely lower than you think. And there is something deeply satisfying about building something that’s completely, specifically, unmistakably yours — with a cursor that follows your mouse like it’s got a crush on it.
Go build your thing.