Vibe kódold a fotós portfóliódat

01Miben más ez, mint egy sablonválasztó

A sablongalériák egy kész dizájnt mutatnak, és azt kérdezik, tetszik-e. Ez az eszköz egy réteggel mélyebbre megy: az alábbi hat irány mindegyike egy valódi, működő fotós portfólión alapul, amelyet tényleg megvizsgáltak (képernyőképek, élő elrendezés, számított színek, számított betűtípusok), nem egy olyan paletta, amit valaki kitalált, hogy jól nézzen ki egy színmintán. Az Editorial irány például az EB Garamondot használja, mert szó szerint ez a betűtípus egy valódi divatfotós oldalán, az oldal közvetlen vizsgálatával párosítva.

Két minta szinte mindenhol feltűnt azokon a valódi oldalakon, amelyekből ez készült, és mindegyik irányba be vannak építve: a navigáció egyetlen hamburger ikon mögé rejtve, látható linklista nélkül, még asztali gépen is, és egyszerre egy nagy kép rács helyett. A kezelőfelület színe végig közel nulla: a színt a fotózás adja, nem a felület.

02Mit kapsz a végén

Egyetlen, strukturált prompt, amely lefedi az általános irányt, a pontos hex színeket, a betűtípusok nevét és párosítását, az oldallistát, a navigáció működését, a galéria elrendezését és a képkeretezést, a belefoglalandó funkciókat, egy tárhelyajánlást valós költségkompromisszumokkal, és egy fix építési minőségi követelménysort (hozzáférhető alt szöveg, reszponzív töréspontok, nincsenek beégetett titkok, késleltetve betöltődő képek). Illeszd be a választott AI kódoló alkalmazásodba, és mindene megvan az induláshoz.

03A promptból az élő oldalig: a teljes végigvezetés

A prompt a dizájnleírás, nem a célvonal. Itt van minden lépés a kimásolása és egy valódi URL között, amit felírhatsz a névjegykártyádra, ingyen vagy majdnem ingyen.

Másold ki a promptot, és nyiss meg egy AI kódoló alkalmazást

A Claude, a Cursor, a Claude Code, a Windsurf vagy a Replit AI ügynöke mind jó, bármi, ami fájlokat tud írni és menteni neked, nem csak csevegni. Ha még soha nem használtál ilyet, egy böngészős megoldás, például a claude.ai vagy a Replit telepítés nélkül működik: illeszd be a promptot első üzenetként.

Hagyd, hogy felépítse, aztán nézd meg, mit csinált

Kérd meg, hogy az oldalt statikus HTML/CSS/JS-ként építse fel (vagy ahogy a prompt tárhely szekciója megadta), és mutasson egy előnézetet. Mielőtt továbblépsz, ellenőrizd a hat dolgot, amit a prompt kért (színek, betűtípusok, galéria működése, navigáció, keretezés, oldalak). Sokkal olcsóbb kijavítani egy rossz kiemelőszínt most, mint azután, hogy a fotók már be vannak kötve.

Cseréld be a valódi fotóidat, a bemutatkozót és az elérhetőségeidet

Cserélj ki minden helyőrző képet és kitöltő szöveget. Kérd meg az AI alkalmazásodat, hogy minden fotóhoz írjon valódi, konkrét alt attribútumot menet közben, ne „image1.jpg”-t, hanem tényleges leírást, mert ez egyszerre akadálymentességi követelmény és egy kis SEO-plusz. Ez az a pont is, hogy kétszer ellenőrizd, hogy a kapcsolatfelvételi űrlap tényleg egy olyan e-mail-címre mutat, amit olvasol.

Telepítsd egy ingyenes tárhelyre

Ha a „Statikus & ingyenes” szintet választottad, kérd meg az AI alkalmazásodat, hogy vezessen végig azon, hogyan kösd össze a projekt mappáját vagy a GitHub tárolót a fenti menü Tárhely oldalán szereplő tárhelyek egyikével. Mind a négy automatikusan épít és telepít, valahányszor módosítást töltesz fel; a csatlakoztatás után nincs kézi feltöltési lépés.

Kösd rá a saját domainedet (nem kötelező, de megéri)

Egy ingyenes aldomain (például yourname.netlify.app) induláshoz tökéletes. Amikor készen állsz a yourname.com-ra, az egy domainvásárlás meg egyetlen DNS-módosítás, részletesen lejjebb.

04Melyik ingyenes tárhelyet használd?

Bármelyikkel élesbe állíthatsz egy statikus oldalt költség nélkül, ingyenes HTTPS-sel és egy olyan ingyenes szinttel, amely bőven elbírja egy személyes portfólió forgalmát. Az ingyenes szintek korlátai elég gyakran változnak, ezért a Tárhely oldal számait általános képnek tekintsd, ne pontos mai adatnak, és mielőtt elköteleződsz, nézd meg minden szolgáltató saját árazási oldalát.

Kérd meg az AI kódoló alkalmazásodat, hogy a tényleges telepítési lépéseket veled együtt végezze el: a „kösd össze ezt a projektet a Netlify-jal” teljesen normális kérés, és általában pár perc alatt végigvezet a fiók létrehozásán és az első telepítésen.

05Saját domain csatlakoztatása

A domain egy kis éves díj (jellemzően évi 10-20 dollár a kiterjesztéstől függően), a tárhelytől elkülönítve, az pedig ingyenes marad. A három lépés:

1. Vedd meg a domaint. Namecheap, Cloudflare Registrar vagy a Google Domains utódja (Squarespace Domains).
2. Adj hozzá egy DNS-rekordot. Egy CNAME (vagy A rekord), amely a domainedet a tárhelyedre irányítja, a domainregisztrátor felületén hozzáadva. Két sor a regisztrátor táblázatában: egy CNAME a www-hez, amely arra a címre mutat, amit a tárhelyed ad, például your-portfolio.netlify.app, és egy A rekord a csupasz domainhez, amely a tárhely IP-címére mutat.
3. Add hozzá a tárhelyen. Illeszd be ugyanazt a domaint a tárhelyed „egyéni domain” beállításaiba; a HTTPS magától beáll.

A Tárhely oldalon szereplő minden tárhelynek van „Egyéni domain” vagy „Domainek” lapja, amely megadja a pontos hozzáadandó rekordot: másold be, add hozzá a regisztrátornál, és várj. A DNS-módosítások jellemzően percektől néhány óráig tartanak, alkalmanként akár 24-48 óráig. Az AI kódoló alkalmazásod végigvezet az adott regisztrátor felületén, ha elakadsz; készíts képernyőképet a beállítások oldalról, és kérdezd meg, mire kattints. Látszik a lakat, nincs „nem biztonságos” figyelmeztetés: ez a célvonal.

06Indulás előtti ellenőrzőlista

Öt perc ezzel a listával kiszűri a legtöbbet abból, amitől egy portfólió befejezetlennek látszik. Az ellenőrzések a fenti menü Indulás előtt oldalán vannak; pipáld ki őket menet közben.

07Gyakran ismételt kérdések