Vibe kodiraj portfolio fotografa

01Po čemu se ovo razlikuje od biranja predloška

Galerije predložaka pokažu ti gotov dizajn i pitaju sviđa li ti se ili ne. Ovaj alat ide sloj dublje: svaki od šest smjerova ispod temelji se na stvarnom, funkcionalnom portfoliju fotografa koji je doista pregledan (snimke zaslona, stvarni raspored, izračunate boje, izračunati fontovi), a ne na paleti koju je netko smislio da lijepo izgleda na uzorku. Smjer Editorial, na primjer, koristi EB Garamond jer je to doslovno pismo u kojem je postavljena stranica stvarnog modnog fotografa, pronađeno izravnim pregledom stranice.

Dva su se obrasca pojavila gotovo posvuda na stvarnim stranicama prema kojima je ovo izrađeno i ugrađena su u svaki smjer: navigacija skrivena iza jedne hamburger ikone bez vidljivog popisa poveznica, čak i na desktopu, i jedna velika slika odjednom umjesto mreže. Boja sučelja ostaje blizu nule: boju daje fotografija, a ne sučelje.

02Što dobiješ na kraju

Jedan strukturirani prompt koji pokriva cjelokupni smjer, točne hex boje, nazive i uparivanje fontova, popis stranica, ponašanje navigacije, raspored galerije i uokvirivanje slika, koje značajke uključiti, preporuku hostinga sa stvarnim kompromisima u cijeni i fiksni skup zahtjeva za kvalitetu izrade (pristupačan alt tekst, responzivne prijelomne točke, bez tvrdo upisanih tajni, slike koje se učitavaju postupno). Zalijepi ga u AI aplikaciju za kodiranje po izboru i ona ima sve što joj treba da počne.

03Od prompta do stranice uživo: cijeli postupak

Prompt je dizajnerski brief, a ne cilj. Evo svakog koraka između kopiranja prompta i prave adrese koju možeš staviti na posjetnicu, besplatno ili gotovo besplatno.

Kopiraj prompt i otvori AI aplikaciju za kodiranje

Claude, Cursor, Claude Code, Windsurf ili Replitov AI agent svi rade, sve što može pisati i spremati datoteke umjesto tebe, ne samo razgovarati. Ako nikad nisi koristio takvu aplikaciju, opcija u pregledniku poput claude.ai ili Replita ne traži instalaciju: zalijepi prompt kao prvu poruku.

Pusti da izgradi, a onda stvarno pogledaj što je napravio

Zatraži da izgradi stranicu kao statični HTML/CSS/JS (ili što god je navedeno u dijelu o hostingu u promptu) i da ti pokaže pregled. Provjeri šest stvari koje je prompt tražio (boje, fontove, ponašanje galerije, navigaciju, uokvirivanje, stranice) prije nego što nastaviš. Puno je jeftinije popraviti pogrešnu boju naglaska sada nego nakon što se fotografije ugrade.

Ubaci svoje prave fotografije, biografiju i kontakt podatke

Zamijeni svaku slikovnu rezervu i svaki redak probnog teksta. Zatraži od AI aplikacije da usput napiše pravi, konkretan alt atribut za svaku fotografiju, ne „image1.jpg”, nego stvarni opis, jer je to i zahtjev pristupačnosti i mali SEO poticaj. Ovo je i trenutak da dvaput provjeriš pokazuje li kontakt obrazac stvarno na adresu e-pošte koju provjeravaš.

Postavi je na besplatan hosting

Ako si odabrao razinu „Static & free”, zatraži od AI aplikacije da te provede kroz povezivanje mape projekta ili GitHub repozitorija s jednim od hostova na stranici Hosting u izborniku iznad. Sva četiri grade i postavljaju se automatski svaki put kad pošalješ promjenu; kad je jednom povezano, nema ručnog učitavanja.

Poveži vlastitu domenu (neobavezno, ali se isplati)

Besplatna poddomena (poput yourname.netlify.app) sasvim je dobra za početak. Kad budeš spreman za yourname.com, to je kupnja domene i jedna promjena DNS-a, detaljno opisano niže.

04Koji besplatni host odabrati?

Bilo koji od ovih besplatno će staviti statičnu stranicu uživo, s besplatnim HTTPS-om i besplatnom razinom koja lako pokriva promet osobnog portfolija. Ograničenja besplatnih razina mijenjaju se prilično često, pa brojke na stranici Hosting shvati kao opći okvir, a ne točne trenutne podatke, i provjeri cjenik svakog pružatelja prije odluke.

Zatraži od svoje AI aplikacije za kodiranje da s tobom prođe stvarne korake postavljanja: „poveži ovaj projekt s Netlifyjem” sasvim je uobičajena molba, a obično te može provesti kroz otvaranje računa i prvo postavljanje u nekoliko minuta.

05Povezivanje vlastite domene

Domena je mala godišnja naknada (obično 10 do 20 $ godišnje, ovisno o nastavku), odvojena od hostinga, koji ostaje besplatan. Tri dijela:

1. Kupi domenu. Namecheap, Cloudflare Registrar ili nasljednik Google Domains (Squarespace Domains).
2. Dodaj DNS zapis. CNAME (ili A zapis) koji usmjerava tvoju domenu na tvoj host, dodan u nadzornoj ploči registrara. To su dva retka u tablici registrara: CNAME za www koji pokazuje na adresu koju ti da host, poput your-portfolio.netlify.app, i A zapis za golu domenu koji pokazuje na IP adresu hosta.
3. Dodaj je u svom hostu. Zalijepi istu domenu u postavke „custom domain” svog hosta; HTTPS se postavi sam.

Svaki host na stranici Hosting ima karticu „Custom domain” ili „Domains” koja ti daje točan zapis za dodavanje: kopiraj ga, dodaj kod svog registrara i pričekaj. DNS promjene obično se primijene za nekoliko minuta do nekoliko sati, povremeno do 24 do 48 sati. Tvoja AI aplikacija za kodiranje može te provesti kroz nadzornu ploču tvog konkretnog registrara ako zapneš; snimi zaslon stranice s postavkama i pitaj što kliknuti. Katanac se vidi, nema upozorenja „nije sigurno”: to je cilj.

06Popis za provjeru prije lansiranja

Pet minuta s ovim popisom hvata većinu onoga zbog čega portfolio izgleda nedovršeno. Provjere su stranica Prije lansiranja u izborniku iznad; kvačicom ih označavaj usput.

07Često postavljana pitanja