Vibe-kodeer jou fotograafportefeulje

01Hoe dit van ’n sjabloonkieser verskil

Sjabloongalerye wys vir jou ’n voltooide ontwerp en vra of jy daarvan hou of nie. Hierdie hulpmiddel gaan een laag dieper: elk van die ses rigtings hieronder is gebaseer op ’n regte, werkende fotograafportefeulje wat werklik ondersoek is (skermkiekies, lewendige uitleg, berekende kleure, berekende lettertipes), nie ’n palet wat iemand uitgedink het om in ’n kleurstaal mooi te lyk nie. Die Redaksionele rigting gebruik byvoorbeeld EB Garamond omdat dit letterlik die lettertipe is waarin ’n regte modefotograaf se webwerf gesit is, nagemaak deur die bladsy direk te ondersoek.

Twee patrone het byna oral in die regte webwerwe opgeduik waaruit dit gebou is, en hulle is in elke rigting hier ingebou: navigasie weggesteek agter ’n enkele hamburger-ikoon sonder sigbare skakellys, selfs op rekenaar, en een groot beeld op ’n slag eerder as ’n rooster. Koppelvlakkleur bly deurgaans naby aan nul: die fotografie verskaf die kleur, nie die koppelvlak nie.

02Wat jy aan die einde kry

’n Enkele, gestruktureerde opdrag wat die algehele rigting dek, presiese heks-kleure, lettertipename en -paring, bladsylys, navigasiegedrag, galery-uitleg en beeldomraming, watter kenmerke om in te sluit, ’n gasheeraanbeveling met werklike kosteafwegings, en ’n vaste stel bou-gehalte-vereistes (toeganklike alt-teks, reagerende breekpunte, geen hardgekodeerde geheime nie, vertraagde laai van beelde). Plak dit in jou KI-koderingsprogram van keuse en dit het alles wat dit nodig het om te begin.

03Van opdrag tot ’n lewendige webwerf: die volledige stap-vir-stap

Die opdrag is die ontwerpopdrag, nie die eindstreep nie. Hier is elke stap tussen om dit te kopieer en ’n werklike URL te hê wat jy op ’n visitekaartjie kan sit, gratis of byna gratis.

Kopieer die opdrag en maak ’n KI-koderingsprogram oop

Claude, Cursor, Claude Code, Windsurf of Replit se KI-agent werk almal, enigiets wat lêers vir jou kan skryf en stoor, nie net klets nie. As jy nog nooit een gebruik het nie, het ’n blaaier-gebaseerde opsie soos claude.ai of Replit geen installasie nodig nie: plak die opdrag as jou eerste boodskap.

Laat dit bou, en kyk dan werklik na wat dit gemaak het

Vra dit om die webwerf as statiese HTML/CSS/JS te bou (of wat ook al die gasheerafdeling van die opdrag gespesifiseer het) en vir jou ’n voorskou te wys. Gaan die ses dinge na wat die opdrag gevra het (kleure, lettertipes, galerygedrag, navigasie, omraming, bladsye) voordat jy aangaan. Dis baie goedkoper om ’n verkeerde aksentkleur nou reg te maak as nadat foto’s ingekoppel is.

Ruil jou werklike foto’s, bio en kontakbesonderhede in

Vervang elke plekhouerbeeld en reël vulteks. Vra jou KI-program om vir elke foto ’n werklike, spesifieke alt-attribuut te skryf soos dit aangaan, nie “image1.jpg” nie, ’n werklike beskrywing, aangesien dit beide ’n toeganklikheidsvereiste en ’n klein SEO-hupstoot is. Dis ook die punt om dubbel na te gaan dat die kontakvorm werklik na ’n e-posadres wys wat jy nagaan.

Ontplooi dit na ’n gratis gasheer

As jy die “Staties & gratis”-vlak gekies het, vra jou KI-program om jou deur die koppeling van die projek se gids of GitHub-bewaarplek aan een van die gashere op die Gasheer-bladsy van die kieslys hierbo te lei. Al vier bou en ontplooi outomaties elke keer as jy ’n verandering stoot; geen handmatige oplaaistap sodra dit gekoppel is nie.

Koppel ’n eie domein (opsioneel, maar die moeite werd)

’n Gratis subdomein (soos yourname.netlify.app) werk goed om mee te begin. Wanneer jy gereed is vir yourname.com, is dit ’n domeinaankoop plus een DNS-verandering, wat verderaf in besonderhede gedek word.

04Watter gratis gasheer moet jy gebruik?

Enige van hierdie sal ’n statiese webwerf kosteloos lewendig kry, met gratis HTTPS en ’n gratis vlak wat ’n persoonlike portefeulje se verkeer maklik dek. Gratis-vlak-limiete verander taamlik gereeld, so beskou die getalle op die Gasheer-bladsy as ’n algemene vorm eerder as presiese huidige syfers, en kyk na elke verskaffer se eie pryse-bladsy voordat jy jou verbind.

Vra jou KI-koderingsprogram om die werklike ontplooiingstappe saam met jou te doen: “koppel hierdie projek aan Netlify” is ’n heeltemal normale ding om dit te vra, en dit kan jou gewoonlik binne ’n paar minute deur rekeningskepping en die eerste ontplooiing lei.

05’n Eie domein koppel

’n Domein is ’n klein jaarlikse fooi (gewoonlik $10 tot 20 per jaar, afhangend van die uitbreiding), apart van gasheerdiens, wat gratis bly. Die drie stukke:

1. Koop die domein. Namecheap, Cloudflare Registrar, of Google Domains se opvolger (Squarespace Domains).
2. Voeg ’n DNS-rekord by. ’n CNAME (of A-rekord) wat jou domein na jou gasheer wys, bygevoeg in die registrateur se kontroleskerm. Dis twee reëls in die registrateur se tabel: ’n CNAME vir www wat na die adres wys wat jou gasheer jou gee, soos your-portfolio.netlify.app, en ’n A-rekord vir die kaal domein wat na die gasheer se IP wys.
3. Voeg dit in jou gasheer by. Plak dieselfde domein in jou gasheer se “eie domein”-instellings; HTTPS stel homself op.

Elke gasheer op die Gasheer-bladsy het ’n “Eie domein”- of “Domeine”-oortjie wat vir jou die presiese rekord gee om by te voeg, kopieer dit in, voeg dit by jou registrateur by, en wag. DNS-veranderinge neem gewoonlik minute tot ’n paar uur om in werking te tree, soms tot 24 tot 48 uur. Jou KI-koderingsprogram kan jou deur jou spesifieke registrateur se kontroleskerm lei as jy vassit; neem ’n skermkiekie van die instellingsbladsy en vra wat om te klik. Hangslot sigbaar, geen “nie veilig nie”-waarskuwing: dis die eindstreep.

06Kontrolelys voor bekendstelling

Vyf minute met hierdie lys vang die meeste van wat ’n portefeulje onvoltooid laat lyk. Die kontroles is die Voor bekendstelling-bladsy van die kieslys hierbo; merk hulle af soos jy gaan.

07Gereelde vrae