Vibe Code vášho portfólia fotografa

01Čím sa to líši od výberu šablóny

Galérie šablón vám ukazujú hotový dizajn a pýtajú sa, či sa vám páči. Tento nástroj ide o vrstvu hlbšie: každý zo šiestich smerov nižšie vychádza zo skutočného fungujúceho portfólia fotografa, ktoré sa naozaj preskúmalo (snímky obrazovky, živé rozloženie, vypočítané farby, vypočítané písma), a nie z palety, ktorú si niekto vymyslel, aby pekne vyzerala vo vzorke. Editorial smer napríklad používa EB Garamond, pretože presne v tomto písme je nastavený web skutočného módneho fotografa, čo sa overilo priamym preskúmaním stránky.

Dva vzory sa objavili takmer na všetkých skutočných weboch, z ktorých sa vychádzalo, a sú zapečené do každého tunajšieho smeru: navigácia ukrytá za jednou ikonou hamburgera bez viditeľného zoznamu odkazov, aj na počítači, a jeden veľký obrázok naraz namiesto mriežky. Farba rozhrania zostáva takmer nulová: farbu dodáva fotografia, nie rozhranie.

02Čo dostanete na konci

Jeden štruktúrovaný prompt, ktorý pokrýva celkový smer, presné hex farby, názvy písem a ich kombináciu, zoznam stránok, správanie navigácie, rozloženie galérie a orámovanie obrázkov, ktoré funkcie zahrnúť, odporúčanie hostingu so skutočnými kompromismi v nákladoch a pevnú sadu požiadaviek na kvalitu zostavenia (prístupný alternatívny text, responzívne zlomy, žiadne pevne zadané tajomstvá, obrázky s odloženým načítaním). Vložte ho do svojej obľúbenej AI aplikácie na programovanie a má všetko, čo potrebuje na začiatok.

03Od promptu k živému webu: celý postup

Prompt je dizajnové zadanie, nie cieľová čiara. Tu je každý krok medzi jeho skopírovaním a skutočnou adresou, ktorú môžete dať na vizitku, zadarmo alebo takmer zadarmo.

Skopírujte prompt a otvorte AI aplikáciu na programovanie

Funguje Claude, Cursor, Claude Code, Windsurf alebo AI agent v Replite, čokoľvek, čo vám vie písať a ukladať súbory, nielen chatovať. Ak ste nikdy žiadnu nepoužili, možnosť v prehliadači ako claude.ai alebo Replit nevyžaduje inštaláciu: vložte prompt ako prvú správu.

Nechajte ho zostaviť web a potom sa naozaj pozrite, čo vytvoril

Požiadajte ho, aby web postavil ako statické HTML/CSS/JS (alebo podľa toho, čo určovala sekcia o hostingu v prompte), a ukázal vám náhľad. Skontrolujte šesť vecí, ktoré prompt požadoval (farby, písma, správanie galérie, navigácia, orámovanie, stránky), skôr než pôjdete ďalej. Opraviť nesprávnu akcentovú farbu je oveľa lacnejšie teraz než po zapojení fotiek.

Vymeňte za svoje skutočné fotky, bio a kontaktné údaje

Nahraďte každý zástupný obrázok a riadok výplňového textu. Požiadajte svoju AI aplikáciu, aby priebežne písala skutočný, konkrétny atribút alt pre každú fotku, nie „image1.jpg“, ale skutočný popis, pretože je to požiadavka prístupnosti aj malé plus pre SEO. Teraz je tiež ten správny moment znovu skontrolovať, že kontaktný formulár naozaj smeruje na e-mailovú adresu, ktorú čítate.

Nasaďte na bezplatný hosting

Ak ste zvolili úroveň „Static & free“, požiadajte svoju AI aplikáciu, aby vás previedla pripojením priečinka projektu alebo repozitára GitHub k jednému z hostingov na stránke Hosting v menu vyššie. Všetky štyri sa zostavujú a nasadzujú automaticky po každom odoslaní zmeny; po pripojení už žiadne manuálne nahrávanie.

Pripojte vlastnú doménu (nepovinné, ale oplatí sa)

Bezplatná subdoména (napríklad yourname.netlify.app) na začiatok úplne stačí. Keď budete pripravení na yourname.com, je to kúpa domény plus jedna zmena DNS, podrobne popísaná nižšie.

04Ktorý bezplatný hosting použiť?

Ktorýkoľvek z nich dostane statický web na internet zadarmo, s bezplatným HTTPS a bezplatnou úrovňou, ktorá s rezervou pokryje návštevnosť osobného portfólia. Limity bezplatných úrovní sa menia pomerne často, preto čísla na stránke Hosting berte ako všeobecný obraz, nie ako presné aktuálne hodnoty, a pred rozhodnutím si pozrite cenník každého poskytovateľa.

Požiadajte svoju AI aplikáciu na programovanie, aby kroky nasadenia urobila spolu s vami: „pripoj tento projekt k Netlify“ je úplne bežná požiadavka a zvyčajne vás prevedie vytvorením účtu aj prvým nasadením za pár minút.

05Pripojenie vlastnej domény

Doména stojí malý ročný poplatok (zvyčajne $10 až 20 ročne podľa koncovky), oddelene od hostingu, ktorý zostáva zadarmo. Tri časti:

1. Kúpte doménu. Namecheap, Cloudflare Registrar alebo nástupca Google Domains (Squarespace Domains).
2. Pridajte záznam DNS. Záznam CNAME (alebo A), ktorý smeruje vašu doménu na váš hosting, pridaný v administrácii registrátora. Sú to dva riadky v tabuľke registrátora: CNAME pre www smerujúci na adresu, ktorú vám hosting dá, napríklad your-portfolio.netlify.app, a záznam A pre holú doménu smerujúci na IP adresu hostingu.
3. Pridajte ju v hostingu. Vložte tú istú doménu do nastavení „vlastnej domény“ vášho hostingu; HTTPS sa zriadi samo.

Každý hosting na stránke Hosting má kartu „Custom domain“ alebo „Domains“, ktorá vám dá presný záznam na pridanie: skopírujte ho, pridajte u svojho registrátora a počkajte. Zmeny DNS sa zvyčajne prejavia za minúty až niekoľko hodín, občas až za 24 až 48 hodín. Vaša AI aplikácia na programovanie vás prevedie administráciou vášho konkrétneho registrátora, ak sa zaseknete; urobte snímku obrazovky stránky nastavení a opýtajte sa, na čo kliknúť. Zobrazený zámok, žiadne varovanie „nezabezpečené“: to je cieľová čiara.

06Kontrolný zoznam pred spustením

Päť minút s týmto zoznamom odhalí väčšinu toho, čo robí portfólio nedokončeným. Kontroly sú na stránke Before launch v menu vyššie; odškrtávajte ich priebežne.

07Často kladené otázky