Vibekod fotografporteføljen din

01Hva som skiller dette fra en malvelger

Malgallerier viser deg et ferdig design og ber deg like det eller ikke. Dette verktøyet går ett lag dypere: hver av de seks retningene under bygger på en ekte, fungerende fotografportefølje som faktisk ble inspisert (skjermbilder, live layout, utregnede farger, utregnede fonter), ikke en palett noen fant på for at den skulle se fin ut som fargeprøve. Editorial-retningen bruker for eksempel EB Garamond fordi det bokstavelig talt er skrifttypen nettstedet til en ekte motefotograf er satt i, matchet ved å inspisere siden direkte.

To mønstre dukket opp nesten overalt på de ekte nettstedene dette bygger på, og de er bakt inn i hver retning her: navigasjon gjemt bak ett enkelt hamburgerikon uten synlig lenkeliste, selv på datamaskin, og ett stort bilde om gangen i stedet for et rutenett. Fargebruken i grensesnittet holder seg nær null hele veien: det er fotografiene som gir fargen, ikke grensesnittet.

02Det du får til slutt

Én enkelt, strukturert prompt som dekker den overordnede retningen, nøyaktige hex-farger, fontnavn og kombinasjon, sideliste, navigasjonsoppførsel, gallerioppsett og bilderamming, hvilke funksjoner som skal være med, en anbefaling om hosting med reelle kostnadsavveininger, og et fast sett med krav til byggekvalitet (tilgjengelig alternativ tekst, responsive brytepunkter, ingen hardkodede hemmeligheter, bilder som lastes ved behov). Lim den inn i AI-kodeappen du foretrekker, så har den alt den trenger for å komme i gang.

03Fra prompt til live nettsted: hele gjennomgangen

Prompten er designbriefen, ikke målstreken. Her er hvert steg mellom å kopiere den og å ha en ekte URL du kan sette på et visittkort, gratis eller nesten.

Kopier prompten og åpne en AI-kodeapp

Claude, Cursor, Claude Code, Windsurf eller Replits AI-agent fungerer alle, alt som kan skrive og lagre filer for deg, ikke bare chatte. Har du aldri brukt en, trenger et nettleserbasert alternativ som claude.ai eller Replit ingen installasjon: lim inn prompten som første melding.

La den bygge, og se så faktisk på hva den har laget

Be den bygge nettstedet som statisk HTML/CSS/JS (eller det hosting-delen av prompten spesifiserte) og vise deg en forhåndsvisning. Sjekk de seks tingene prompten ba om (farger, fonter, galleriadferd, navigasjon, ramming, sider) før du går videre. Det er mye billigere å rette en feil aksentfarge nå enn etter at bildene er koblet inn.

Bytt inn dine egne bilder, biografi og kontaktinformasjon

Bytt ut hvert plassholderbilde og hver linje med fylltekst. Be AI-appen skrive et ekte, spesifikt alt-attributt for hvert bilde underveis, ikke «image1.jpg», men en faktisk beskrivelse, siden det både er et krav til tilgjengelighet og et lite pluss for SEO. Dette er også tidspunktet for å dobbeltsjekke at kontaktskjemaet faktisk peker til en e-postadresse du leser.

Publiser det på en gratis vert

Hvis du valgte nivået «Statisk & gratis», be AI-appen guide deg gjennom å koble prosjektmappen eller GitHub-repoet til en av vertene på Hosting-siden i menyen over. Alle fire bygger og publiserer automatisk hver gang du pusher en endring; ingen manuelt opplastingssteg når det først er koblet til.

Koble til et eget domene (valgfritt, men verdt det)

Et gratis underdomene (som yourname.netlify.app) fungerer fint til å begynne med. Når du er klar for yourname.com, er det et domenekjøp pluss én DNS-endring, forklart i detalj lenger ned.

04Hvilken gratis vert bør du bruke?

Alle disse får et statisk nettsted live uten kostnad, med gratis HTTPS og et gratisnivå som lett dekker trafikken til en personlig portefølje. Grensene i gratisnivåene endrer seg ganske ofte, så se på tallene på Hosting-siden som en generell form og ikke eksakte gjeldende tall, og sjekk hver leverandørs egen prisside før du forplikter deg.

Be AI-kodeappen din gjøre selve publiseringstrinnene sammen med deg: «koble dette prosjektet til Netlify» er noe helt vanlig å be den om, og den kan som regel guide deg gjennom kontoopprettelse og første publisering på et par minutter.

05Koble til et eget domene

Et domene koster en liten årlig avgift (typisk 10 til 20 dollar i året, avhengig av endelsen), atskilt fra hostingen, som forblir gratis. De tre delene:

1. Kjøp domenet. Namecheap, Cloudflare Registrar eller etterfølgeren til Google Domains (Squarespace Domains).
2. Legg til en DNS-post. En CNAME (eller A-post) som peker domenet ditt til verten din, lagt til i registratorens kontrollpanel. Det er to linjer i registratorens tabell: en CNAME for www som peker til adressen verten din gir deg, for eksempel your-portfolio.netlify.app, og en A-post for selve domenet som peker til vertens IP.
3. Legg det til hos verten din. Lim inn det samme domenet i vertens innstillinger for «eget domene»; HTTPS ordner seg selv.

Hver vert på Hosting-siden har en fane «Custom domain» eller «Domains» som gir deg den nøyaktige posten du skal legge til: kopier den inn, legg den til hos registratoren din, og vent. DNS-endringer tar vanligvis fra minutter til noen timer å tre i kraft, av og til opptil 24 til 48 timer. AI-kodeappen din kan veilede deg gjennom kontrollpanelet til akkurat din registrator hvis du står fast; ta et skjermbilde av innstillingssiden og spør hva du skal klikke på. Hengelås vises, ingen advarsel om «ikke sikker»: det er målstreken.

06Sjekkliste før lansering

Fem minutter med denne lista fanger det meste av det som får en portefølje til å se uferdig ut. Sjekkene er siden Før lansering i menyen over; kryss dem av underveis.

07Ofte stilte spørsmål