How to Build a Portfolio Website with AI

If you need a portfolio site, you're usually not trying to learn web development — you're trying to get hired, land a client, or stop sending people a Google Drive folder of screenshots. An AI coding agent is a genuinely good fit for this, because a portfolio site is mostly the same handful of sections done well, and describing those sections in plain English is often faster than picking a template and fighting its layout constraints.

This walks through what a good portfolio site actually needs, exactly what to say to an AI agent to get a solid first version, how to iterate once you see it, and what "getting it live" actually involves once it's built.

What sections a portfolio site actually needs

Before you write a single prompt, it helps to know what you're aiming for. Most portfolio sites that actually work — the ones that get someone to email you — have the same core sections:

• Projects / work samples. This is the whole point of the site. Each project needs at least an image or screenshot, a short description of what it is and what you did on it, and ideally a link to the live thing or a case study. Three to six strong projects beat twelve mediocre ones.
• About. A short paragraph, not an essay. What you do, what kind of work you're looking for, and enough personality that you sound like a person and not a résumé bullet point.
• Contact. An email address at minimum. A contact form is nice but not required — a plain mailto: link works and has zero moving parts to break.
• Resume link. A link to a PDF (or a dedicated resume page) that recruiters and clients can grab without emailing you first.

That's it. Skip anything that doesn't serve one of those four jobs — a portfolio site with a blog, a testimonials carousel, and an animated hero video is usually a portfolio site that took three weeks longer to finish and doesn't convert any better.

What to actually tell the AI agent

The mistake most people make here is describing the site in terms of technology ("use React with a component library") instead of describing the result they want. The agent doesn't need implementation instructions — it needs to know what should exist on the page and roughly how it should feel.

A prompt that gets you a solid first version looks like this:

Build me a one-page portfolio website for a freelance graphic designer. Sections: a hero at the top with my name and a one-line description of what I do, a projects grid with 4 project cards (image, title, one-sentence description, "view project" link), an about section with a short paragraph and a headshot placeholder, and a contact section with my email and a link to download my resume PDF. Style: clean, minimal, lots of white space, one accent color, readable sans-serif font. Make it look good on mobile too.

Notice the shape of that prompt: it names every section, says what goes inside each one, and gives two or three style words instead of a full design spec. That's enough. The agent will pick fonts, spacing, and layout details on its own — you're steering the content and the vibe, not writing CSS.

If you're a developer or writer instead of a designer, swap the specifics: "projects" might become "case studies," "headshot" might become "profile photo," and you might ask for a skills list instead of a projects grid. The structure — hero, work samples, about, contact — stays the same regardless of your field.

Iterating once you see the first version

The first version is a draft, not a final answer, and it should take you seconds to react to it rather than trying to get the first prompt perfect. Some common next steps:

Adding a project. You don't need to describe the whole site again — just describe the new piece:

Add a fifth project card to the grid: "Rebrand for a coffee roastery," with this image, and the description "Full visual identity redesign including logo, packaging, and website." Link it to coffeecraftbrand.com.

Changing the layout. If the projects grid feels cramped or you want a different rhythm:

Change the projects section from a 2-column grid to a single-column list with the image on the left and text on the right for each project.

Adding a contact form. A mailto: link is fine to start, but if you want an actual form:

Replace the plain email link in the contact section with a simple contact form — name, email, message fields, and a submit button. It should send the message to my email when submitted.

Be specific about what's wrong or what you want different, the same way you'd give feedback to a designer — "the hero feels too cramped, add more space above the name" gets a better result than "make it better." Each of these is a small, targeted change, so the agent can make it without touching the rest of the site.

Getting it live

A portfolio site sitting on your laptop doesn't help anyone. Once it looks right, you need it hosted somewhere with a real URL you can put on a résumé or LinkedIn profile. Ask the agent directly:

This looks good. Help me get this live on the internet with a real URL I can share.

For a static portfolio site (no login, no database — which describes almost every portfolio site), the agent can typically set you up with a free host like Netlify, Vercel, or GitHub Pages, walk you through connecting an account, and deploy it. If you already own a domain, you can ask it to help point that domain at the new site too; if you don't, the free subdomain a host gives you (something like yourname.netlify.app) is a perfectly usable link to put on a resume while you decide whether a custom domain is worth it.

One thing worth knowing going in: "live" isn't a one-time event. If you land a new project next month, you'll want to add it and redeploy — which, if the agent set things up with something like Netlify or Vercel, is usually as simple as asking it to push the update, since those hosts redeploy automatically when the code changes.

A realistic starting point

A portfolio site is a small, well-understood project — a handful of sections, no complex backend, no accounts to manage. That combination is exactly where an AI coding agent is strongest: it can go from a single descriptive prompt to a working, styled site in one sitting, and each round of feedback after that is a short, specific ask rather than a rebuild. You still make the calls that matter — which projects to feature, what tone to strike in the about section — the agent just handles turning those decisions into a real, deployable website.

👉 Download meshcode — Mac, Windows.