To vibe code a portfolio website, pick a free prompt built for your kind of work, let an AI model generate the whole site, swap in your real projects, and deploy it to a fast host — a weekend of work for roughly the price of a domain.
A portfolio has exactly one job: book you the next project. It is not a design award, and nobody is handing those out anyway. The hard part was never the code — vibe coding writes that for you now — it’s deciding which six projects earn a spot, and what each one proves about you. Get that right and a plain, fast site out-books a flashy one every time.
If you want the general lay of the land — the routes, the tools, the costs — start with our guide to how to vibe code a website, and if the budget is the whole story, how to vibe code a website for free walks the $0 path. This guide is narrower on purpose. It’s the specific how-to: how to vibe code a portfolio website that books work instead of a grid of pretty thumbnails — what the thing actually needs, and how to build exactly that.
What does a portfolio website actually need?
Before you prompt anything, get clear on the four things a portfolio has to do well. Most homemade ones nail the look and whiff on these.
Fast image galleries. Your work is the product, and portfolios are image-heavy by nature — which makes them the sites most likely to load like molasses. A gallery that takes six seconds to paint loses the client before your best shot even appears. The fix is boring and it works: compressed images in modern formats, sized for the screen they’re on, with anything below the fold loading only when someone scrolls to it. A good prompt bakes that in.
Case studies with results, not just thumbnails. This is the difference between a portfolio that books and one that only decorates. A thumbnail says “here’s a thing I made.” A case study says “here was the problem, here’s what I did, here’s what changed.” Include the number you can actually back up — the sales that went up, the load time you cut, the booking that came in the week after launch. Nobody hires the prettiest grid; they hire the person whose write-up reads like they’ve solved this exact problem before.
A clear way to get in touch. You would be amazed how many portfolios make you hunt for the email. Put a real inquiry path on every page — a short form or a visible address — and if you take on paid work, ask the two questions that qualify a lead before the first call: budget and timeline. A form that filters out the tire-kickers is worth more than one that just says “Contact.”
Speed and accessibility. These travel together. A site that’s fast for you on office fiber can crawl on a phone on the subway, and a site a screen reader can’t parse quietly turns away clients you’ll never know you lost. Both are craft, not luck — and both are things you can prompt for and then check. We’ll come back to the how.
How do you vibe code a portfolio website, step by step?
Four steps, and none of them require you to write code. The order matters — people who skip step three are the ones who end up with a broken site and a bad opinion of vibe coding.
Pick the right free prompt. Don’t start from a blank box. A giant, purpose-built prompt already knows a portfolio needs a work gallery, case-study structure, and an inquiry form — you just tell the model your niche. Grab one that matches your craft from our free vibe coding prompts; the specific picks are in the next section.
Generate the site. Paste the prompt into a capable AI model, add a sentence or two about you — your name, your discipline, the kind of clients you want — and let it write the whole thing: layout, sections, placeholder copy, the lot. Read what comes back like an editor, not a spectator. If the tone is off or a section is missing, say so in plain English and let it revise. That back-and-forth is the “vibe” in vibe coding.
Swap in your real work. This is the step that makes or breaks it, and it’s the one that takes actual time. Replace every piece of placeholder text with your real projects, your real case studies, your real contact details. Drop in your actual images — and here’s where you compress them, because a raw photo straight off the camera is what turns a fast site slow. The AI gives you the frame; the work you hang in it is yours.
Test it, then deploy. Open it on a real phone, not just a narrow browser window. Click every link. Submit the form to yourself. Tab through it with the keyboard. Then push it live — a static portfolio goes on a free host in minutes, and we’ll cover which one below.
Should a portfolio site be static or WordPress?
For most portfolios, static wins — and it isn’t close. A static site (plain HTML and CSS, no database) is faster by default, has almost nothing to maintain, costs nothing to host, and can’t get hacked through a plugin you forgot to update. Photographers, architects, illustrators, most freelancers: static is the right call. You reach for WordPress only when you’ll be adding case studies or posts often enough that logging into an admin panel beats editing files — a real want for working designers and developers who treat the portfolio as a living publication.
| What matters | Static site | WordPress |
|---|---|---|
| Best for | Photographers, architects, most showcase portfolios | Designers & devs posting case studies often, or wanting a blog |
| Adding new work | Edit a file or regenerate a section | Log in, click “Add project,” no code |
| Image galleries | Fast off a CDN, nothing to maintain | Fast too, but watch plugin bloat |
| Hosting cost | $0 on Cloudflare Pages | ~$3/mo on a cheap prepaid host |
| You own it | Yes — the files are yours | Yes — if it’s real, exportable WordPress |
| Our flat build | From $2,800 | From $5,800 |
On hosting: a static portfolio can live on Cloudflare Pages for $0, and that’s the pick if you sell your services, since it allows commercial use. If your portfolio is purely personal — no paid work booked through it — GitHub Pages and Vercel’s free tier are fine too; just know their free plans forbid running a business, so a freelancer taking clients should stick with Cloudflare Pages. Either way your only real bill is the domain, around $10 a year.
Which free prompt fits your kind of portfolio?
We wrote portfolio prompts for the crafts that need them most. Each one is a full build plan — you paste it, add your niche, and generate. Pick the closest fit; they’re all free.
If you’re a designer or developer selling project work, start with the designer and developer portfolio prompt. It’s the WordPress one on purpose: it builds a case-study post type, a filterable work gallery, a services page, and an inquiry form with budget and timeline fields — the professional setup for someone adding new case studies regularly and qualifying leads as they come.
If you’re an architect, the architect portfolio prompt is a static build tuned for large project imagery, plan and elevation shots, and the restrained, gallery-forward layout the work calls for — fast off a CDN, nothing to maintain.
If you shoot weddings, the wedding photographer portfolio prompt is static too, built around big galleries that stay quick, a clear packages section, and an inquiry form for booking dates. Photographers live and die by how fast the images load, so this one leans hard on that.
Shooting a different niche or working another trade entirely? There’s likely a prompt for it already — browse by business type and copy the closest one, then tell the model what makes yours different.
How do you keep a portfolio fast and accessible?
A portfolio that looks great and loads slowly is a portfolio that loses the job on the first tap. Two areas, both fixable, both things you can ask the AI to handle and then verify yourself.
For speed, the whole game is images, because a portfolio is mostly images. Export them in a modern format like WebP or AVIF, size each one for where it actually appears instead of shipping one giant file to every screen, and lazy-load anything below the fold so the first view paints fast. Skip the autoplaying video hero — it’s the single heaviest thing you can add and it rarely earns its weight. When you prompt, ask for exactly this, then open the live site on your phone on a normal connection and see for yourself.
For accessibility, write real alt text on every image — it describes your work to a screen reader and, conveniently, helps search engines understand the page too. Make sure the site works with a keyboard alone: every link and form field reachable by Tab, with a visible focus outline. Keep text and background contrast strong enough to read in daylight. Don’t bury your only contact link inside a hover a touchscreen can’t trigger. None of this is exotic; it’s the difference between a site that works for everyone and one that quietly turns people away.
When does it make sense to hire the build?
Vibe coding a portfolio is a real weekend of work — the generating is fast, but choosing the projects, writing the case studies, and shooting or exporting clean images is not. If that weekend is worth more to you than the fee, hand it over. We build a portfolio as a flat-fee static website from $2,800, with your galleries optimized, your case studies structured to book work, and the code handed to you on GitHub so you own every file. No subscription, no lock-in, no site going dark because you missed a renewal.
Frequently asked questions
How do I make a portfolio website with AI?
Copy a free prompt written for portfolios, paste it into an AI model like Claude or ChatGPT, and add a line about your discipline and the clients you want. The model generates the full site — gallery, case studies, contact form. Then you do the real work: swap in your actual projects and images, compress those images, test it on a phone, and deploy. For a static portfolio, hosting is free and the whole thing is a weekend.
Is a static site or WordPress better for a portfolio?
Static is better for most portfolios — it’s faster, free to host, and has nothing to maintain, which suits photographers, architects, and freelancers whose work rarely changes structure. Choose WordPress only if you’ll post case studies or blog entries often enough that a log-in-and-click admin beats editing files. Working designers and developers who treat the portfolio as a living publication are the main exception.
How many projects should a portfolio website have?
Fewer than you think. Six to ten strong, well-told case studies beat thirty thumbnails every time — a hiring client skims, and every weak piece drags down the average. Show only work you’d happily be hired to do again, lead with the strongest, and cut anything that’s there just to fill the grid. Depth per project — problem, process, result — matters more than the count.
Do I need to know how to code to build a portfolio site?
No. That’s the point of vibe coding — you describe what you want in plain English and the AI writes the code. A purpose-built prompt does most of the describing for you. What you do need is the judgment to read what comes back, test it on a real phone, and put your genuine work in it. If that’s not how you want to spend the weekend, hiring it out is the other honest option.
How much does a portfolio website cost to build?
If you vibe code it yourself, about $10 a year — a static portfolio hosts free on Cloudflare Pages, so you’re really just paying for the domain. If you’d rather have it built, we do a static portfolio from $2,800 flat, WordPress from $5,800, with the code handed over and no ongoing subscription. There’s no monthly-forever middle option here, which is the way we like it.