Vibe coding spletne strani s portfeljem fotografa

01Kako se to razlikuje od izbirnika predlog

Galerije predlog ti pokažejo končan dizajn in vprašajo, ali ti je všeč ali ne. To orodje gre eno plast globlje: vsaka od spodnjih šestih smeri temelji na resničnem, delujočem portfelju fotografa, ki je bil dejansko pregledan (posnetki zaslona, postavitev v živo, izračunane barve, izračunane pisave), ne na paleti, ki jo je nekdo izmislil, da je lepa na vzorcu. Smer Editorial na primer uporablja EB Garamond, ker je to dobesedno pisava, v kateri je postavljena stran resničnega modnega fotografa, ujemanje pa je bilo preverjeno z neposrednim pregledom strani.

Dva vzorca sta se pojavila skoraj na vseh resničnih straneh, iz katerih je bilo to zgrajeno, in sta vpeta v vsako smer tu: navigacija, skrita za eno samo ikono hamburger brez vidnega seznama povezav, tudi na namizju, in ena velika slika naenkrat namesto mreže. Barve vmesnika so skozi vse blizu nič: barvo prispeva fotografija, ne vmesnik.

02Kaj dobiš na koncu

En sam strukturiran poziv, ki zajema splošno smer, natančne barve v šestnajstiški obliki, imena pisav in njihovo parjenje, seznam strani, obnašanje navigacije, postavitev galerije in uokvirjenje slik, funkcije, ki jih vključiti, priporočilo za gostovanje z resničnimi stroškovnimi kompromisi in stalen nabor zahtev za kakovost izdelave (dostopno nadomestno besedilo alt, odzivne prelomne točke, brez trdo vpisanih skrivnosti, slike z odloženim nalaganjem). Prilepi ga v svojo najljubšo aplikacijo za programiranje z umetno inteligenco in ima vse, kar potrebuje za začetek.

03Od poziva do delujoče strani: celoten postopek

Poziv je oblikovalski nalog, ne cilj. Tukaj je vsak korak med kopiranjem poziva in pravim naslovom URL, ki ga lahko daš na vizitko, brezplačno ali skoraj brezplačno.

Kopiraj poziv in odpri aplikacijo za programiranje z umetno inteligenco

Delujejo Claude, Cursor, Claude Code, Windsurf ali agent z umetno inteligenco iz Replita, vse, kar zna namesto tebe pisati in shranjevati datoteke, ne samo klepetati. Če nobenega še nisi uporabljal, možnost v brskalniku, kot sta claude.ai ali Replit, ne zahteva namestitve: poziv prilepi kot prvo sporočilo.

Pusti, da zgradi, nato pa si dejansko oglej, kaj je naredil

Prosi ga, naj stran zgradi kot statični HTML/CSS/JS (ali kar koli je določal razdelek o gostovanju v pozivu) in ti pokaže predogled. Preveri šest stvari, ki jih je zahteval poziv (barve, pisave, obnašanje galerije, navigacija, uokvirjenje, strani), preden greš naprej. Napačen poudarni odtenek je veliko ceneje popraviti zdaj kot potem, ko so fotografije že vpete.

Zamenjaj z resničnimi fotografijami, življenjepisom in kontaktnimi podatki

Zamenjaj vsako nadomestno sliko in vsako vrstico polnilnega besedila. Prosi svojo aplikacijo z umetno inteligenco, naj sproti napiše pravi, specifičen atribut alt za vsako fotografijo, ne „image1.jpg“, ampak dejanski opis, saj je to hkrati zahteva dostopnosti in majhen SEO bonus. To je tudi trenutek, ko dvakrat preveriš, da kontaktni obrazec res kaže na e-poštni naslov, ki ga spremljaš.

Objavi ga na brezplačnem gostitelju

Če si izbral stopnjo „Statično & brezplačno“, prosi svojo aplikacijo z umetno inteligenco, naj te vodi skozi povezavo mape projekta ali repozitorija GitHub z enim od gostiteljev na strani Gostovanje v zgornjem meniju. Vsi štirje gradijo in objavljajo samodejno ob vsaki spremembi, ki jo potisneš; ko je povezava vzpostavljena, ročnega nalaganja ni.

Poveži svojo domeno (neobvezno, a se splača)

Brezplačna poddomena (na primer yourname.netlify.app) za začetek povsem zadostuje. Ko si pripravljen na yourname.com, gre za nakup domene in eno spremembo DNS, podrobno opisano nižje.

04Katerega brezplačnega gostitelja izbrati?

Vsak od teh spravi statično stran v živo brez stroškov, z brezplačnim HTTPS in brezplačno stopnjo, ki zlahka pokrije promet osebnega portfelja. Omejitve brezplačnih stopenj se precej pogosto spreminjajo, zato številke na strani Gostovanje obravnavaj kot splošno obliko in ne kot natančne trenutne vrednosti ter pred odločitvijo preveri stran s cenami vsakega ponudnika.

Prosi svojo aplikacijo za programiranje z umetno inteligenco, naj skupaj s tabo opravi dejanske korake objave: „poveži ta projekt z Netlify“ je povsem običajna prošnja zanjo in te običajno v nekaj minutah vodi skozi ustvarjanje računa in prvo objavo.

05Povezava lastne domene

Domena je majhna letna pristojbina (običajno 10 do 20 $ na leto glede na končnico), ločena od gostovanja, ki ostane brezplačno. Trije deli:

1. Kupi domeno. Namecheap, Cloudflare Registrar ali naslednik Google Domains (Squarespace Domains).
2. Dodaj zapis DNS. Zapis CNAME (ali A), ki kaže tvojo domeno na tvojega gostitelja, dodan na nadzorni plošči registrarja. To sta dve vrstici v tabeli registrarja: CNAME za www, ki kaže na naslov, ki ti ga da gostitelj, na primer your-portfolio.netlify.app, in zapis A za golo domeno, ki kaže na IP gostitelja.
3. Dodaj jo pri gostitelju. Isto domeno prilepi v nastavitve „lastne domene“ pri svojem gostitelju; HTTPS se uredi sam.

Vsak gostitelj na strani Gostovanje ima zavihek „Custom domain“ ali „Domains“, ki ti da točen zapis za dodajanje: kopiraj ga, dodaj pri registrarju in počakaj. Spremembe DNS običajno začnejo veljati v nekaj minutah do nekaj urah, občasno šele v 24 do 48 urah. Tvoja aplikacija za programiranje z umetno inteligenco ti lahko razloži nadzorno ploščo tvojega registrarja, če se zatakne; naredi posnetek zaslona nastavitev in jo vprašaj, kaj klikniti. Prikazana ključavnica, brez opozorila „ni varno“: to je cilj.

06Kontrolni seznam pred objavo

Pet minut s tem seznamom ujame večino tistega, zaradi česar je portfelj videti nedokončan. Preverjanja so na strani Pred objavo v zgornjem meniju; odkljukaj jih sproti.

07Pogosto zastavljena vprašanja