Vibe-code din fotografiportfolio

01Hvordan det her adskiller sig fra en skabelonvælger

Skabelongallerier viser dig et færdigt design og spørger, om du kan lide det eller ej. Det her værktøj går et lag dybere: hver af de seks retninger nedenfor bygger på en rigtig, fungerende fotografportfolio, som faktisk blev undersøgt (skærmbilleder, live layout, beregnede farver, beregnede skrifttyper), og ikke på en palet, som nogen fandt på, fordi den ser pæn ud som farveprøve. Den redaktionelle retning bruger for eksempel EB Garamond, fordi det bogstaveligt talt er den skrifttype, en rigtig modefotografs site er sat i, og den er matchet ved at undersøge siden direkte.

To mønstre gik igen næsten overalt på de rigtige sites, det her er bygget ud fra, og de er indbygget i hver retning her: navigation gemt bag ét enkelt hamburger-ikon uden en synlig liste af links, selv på computer, og ét stort billede ad gangen i stedet for et gitter. Farverne i brugerfladen er tæt på nul hele vejen igennem: fotografierne leverer farven, ikke grænsefladen.

02Det får du til sidst

Én samlet, struktureret prompt, der dækker den overordnede retning, præcise hex-farver, skrifttypenavne og -par, sideliste, navigationsadfærd, gallerilayout og billedindramning, hvilke funktioner der skal med, en hostinganbefaling med reelle prisafvejninger og et fast sæt krav til byggekvalitet (tilgængelig alt-tekst, responsive brudpunkter, ingen hårdkodede hemmeligheder, billeder med lazy loading). Indsæt den i den AI-kodeapp, du foretrækker, så har den alt, den skal bruge for at gå i gang.

03Fra prompt til et live site: hele gennemgangen

Prompten er designbriefen, ikke målstregen. Her er hvert eneste trin mellem at kopiere den og at have en rigtig URL, du kan sætte på et visitkort, gratis eller tæt på.

Kopiér prompten, og åbn en AI-kodeapp

Claude, Cursor, Claude Code, Windsurf eller Replits AI-agent virker alle, alt det, der kan skrive og gemme filer for dig, ikke kun chatte. Har du aldrig brugt en, kræver en browserbaseret løsning som claude.ai eller Replit ingen installation: indsæt prompten som din første besked.

Lad den bygge, og se så faktisk på, hvad den har lavet

Bed den bygge sitet som statisk HTML/CSS/JS (eller hvad hostingafsnittet i prompten angav) og vise dig et preview. Tjek de seks ting, prompten bad om (farver, skrifttyper, gallerioplevelse, navigation, indramning, sider), før du går videre. Det er meget billigere at rette en forkert accentfarve nu end efter, at billederne er sat ind.

Sæt dine rigtige billeder, din biografi og dine kontaktoplysninger ind

Erstat alle pladsholderbilleder og al fyldtekst. Bed din AI-app om at skrive en rigtig, konkret alt-attribut til hvert billede undervejs, ikke ”image1.jpg”, men en egentlig beskrivelse, for det er både et krav til tilgængelighed og et lille SEO-løft. Det er også her, du skal dobbelttjekke, at kontaktformularen faktisk peger på en mailadresse, du tjekker.

Udgiv det hos en gratis host

Har du valgt niveauet ”Static & free”, så bed din AI-app om at guide dig gennem at forbinde projektets mappe eller GitHub-repo med en af hostene på Hosting-siden i menuen ovenfor. Alle fire bygger og udgiver automatisk, hver gang du pusher en ændring, og der er intet manuelt upload-trin, når først forbindelsen er oprettet.

Tilslut et eget domæne (valgfrit, men det er det værd)

Et gratis subdomæne (som yourname.netlify.app) fungerer fint til at starte med. Når du er klar til yourname.com, er det et domænekøb og én DNS-ændring, som gennemgås i detaljer længere nede.

04Hvilken gratis host skal du bruge?

Alle disse kan få et statisk site live uden omkostninger, med gratis HTTPS og et gratis niveau, der nemt dækker en personlig portfolios trafik. Grænserne på gratisniveauerne ændrer sig ret ofte, så se tallene på Hosting-siden som en generel ramme og ikke som præcise aktuelle tal, og tjek hver udbyders egen prisside, før du binder dig.

Bed din AI-kodeapp om at tage selve udgivelsestrinene sammen med dig: ”forbind det her projekt med Netlify” er en helt normal ting at bede den om, og den kan som regel guide dig gennem oprettelse af konto og den første udgivelse på et par minutter.

05Sådan tilslutter du et eget domæne

Et domæne koster et lille årligt gebyr (typisk 10 til 20 $ om året afhængigt af endelsen), adskilt fra hosting, som forbliver gratis. De tre dele:

1. Køb domænet. Namecheap, Cloudflare Registrar eller efterfølgeren til Google Domains (Squarespace Domains).
2. Tilføj en DNS-post. En CNAME (eller A-post), der peger dit domæne mod din host, tilføjet i registrarens dashboard. Det er to linjer i registrarens tabel: en CNAME for www, der peger på den adresse, din host giver dig, for eksempel your-portfolio.netlify.app, og en A-post for selve domænet, der peger på hostens IP.
3. Tilføj det hos din host. Indsæt det samme domæne i din hosts indstillinger for ”eget domæne”. HTTPS opsættes af sig selv.

Hver host på Hosting-siden har en fane ”Custom domain” eller ”Domains”, som giver dig den præcise post, der skal tilføjes. Kopiér den ind, tilføj den hos din registrar, og vent. DNS-ændringer tager typisk fra minutter til nogle få timer om at slå igennem, nogle gange op til 24 til 48 timer. Din AI-kodeapp kan guide dig gennem netop din registrars dashboard, hvis du går i stå: tag et skærmbillede af indstillingssiden, og spørg den, hvad du skal klikke på. Hængelåsen vises, ingen advarsel om ”ikke sikker”: det er målstregen.

06Tjekliste før lancering

Fem minutter med den her liste fanger det meste af det, der får en portfolio til at se uafsluttet ud. Tjekkene er siden Før lancering i menuen ovenfor. Sæt flueben, mens du går.

07Ofte stillede spørgsmål