Vibe Code Your Photographer Portfolio

01How this is different from a template picker

Template galleries show you a finished design and ask you to like it or not. This tool goes one layer deeper: each of the six directions below is based on a real, working photographer portfolio that was actually inspected (screenshots, live layout, computed colors, computed fonts), not a palette someone made up to look nice in a swatch. The Editorial direction, for example, uses EB Garamond because that is literally the typeface a real fashion photographer's site is set in, matched by inspecting the page directly.

Two patterns showed up almost everywhere across the real sites this was built from, and they're baked into every direction here: nav hidden behind a single hamburger icon with no visible link list, even on desktop, and one large image at a time rather than a grid. UI color stays close to zero throughout: the photography supplies the color, not the interface.

02What you get at the end

A single, structured prompt covering the overall direction, exact hex colors, font names and pairing, page list, navigation behavior, gallery layout and image framing, which features to include, a hosting recommendation with real cost tradeoffs, and a fixed set of build-quality requirements (accessible alt text, responsive breakpoints, no hardcoded secrets, lazy-loaded images). Paste it into your AI coding app of choice and it has everything it needs to start.

03From prompt to a live site: the full walkthrough

The prompt is the design brief, not the finish line. Here's every step between copying it and having a real URL you can put on a business card, free or close to it.

Copy the prompt and open an AI coding app

Claude, Cursor, Claude Code, Windsurf, or Replit's AI agent all work, anything that can write and save files for you, not just chat. If you've never used one, a browser-based option like claude.ai or Replit needs no install: paste the prompt as your first message.

Let it build, then actually look at what it made

Ask it to build the site as static HTML/CSS/JS (or whatever the hosting section of the prompt specified) and show you a preview. Check the six things the prompt asked for (colors, fonts, gallery behavior, nav, framing, pages) before you move on. It's much cheaper to fix a wrong accent color now than after photos are wired in.

Swap in your real photos, bio, and contact details

Replace every placeholder image and line of filler text. Ask your AI app to write a real, specific alt attribute for each photo as it goes, not "image1.jpg", an actual description, since that's both an accessibility requirement and a small SEO boost. This is also the point to double-check the contact form actually points at an email address you check.

Deploy it to a free host

If you picked the "Static & free" tier, ask your AI app to walk you through connecting the project's folder or GitHub repo to one of the hosts on the Hosting page of the menu above. All four build and deploy automatically every time you push a change; no manual upload step once it's connected.

Connect a custom domain (optional, but worth it)

A free subdomain (like yourname.netlify.app) works fine to start. When you're ready for yourname.com, it's a domain purchase plus one DNS change, covered in detail further down.

04Which free host should you use?

Any of these will get a static site live at no cost, with free HTTPS and a free tier that easily covers a personal portfolio's traffic. Free-tier limits change fairly often, so treat the numbers on the Hosting page as a general shape rather than exact current figures, and check each provider's own pricing page before you commit.

Ask your AI coding app to do the actual deploy steps with you: "connect this project to Netlify" is a completely normal thing to ask it, and it can usually walk you through account creation and the first deploy in a couple of minutes.

05Connecting a custom domain

A domain is a small yearly fee (typically $10 to 20/year depending on the extension), separate from hosting, which stays free. The three pieces:

1. Buy the domain. Namecheap, Cloudflare Registrar, or Google Domains' successor (Squarespace Domains).
2. Add a DNS record. A CNAME (or A record) pointing your domain at your host, added in the registrar's dashboard. It is two lines in the registrar's table: a CNAME for www pointing at the address your host gives you, such as your-portfolio.netlify.app, and an A record for the bare domain pointing at the host's IP.
3. Add it in your host. Paste the same domain into your host's "custom domain" settings; HTTPS provisions itself.

Every host on the Hosting page has a "Custom domain" or "Domains" tab that gives you the exact record to add, copy it in, add it at your registrar, and wait. DNS changes typically take minutes to a few hours to take effect, occasionally up to 24 to 48 hours. Your AI coding app can talk you through your specific registrar's dashboard if you get stuck; screenshot the settings page and ask it what to click. Padlock showing, no "not secure" warning: that's the finish line.

06Pre-launch checklist

Five minutes with this list catches most of what makes a portfolio look unfinished. The checks are the Before launch page of the menu above; tick them off as you go.

07Frequently asked questions