Vibe-koodi oma fotograafi portfoolio

01Kuidas see erineb mallivalijast

Mallide galeriid näitavad sulle valmis disaini ja küsivad, kas see meeldib või mitte. See tööriist läheb kihi võrra sügavamale: iga allolev kuuest suunast põhineb päris toimival fotograafi portfoolil, mida tegelikult uuriti (ekraanipildid, live-paigutus, arvutatud värvid, arvutatud fondid), mitte paletil, mille keegi lihtsalt värvikaardil kenasti väljanägemiseks välja mõtles. Näiteks Editorial-suund kasutab EB Garamondi, sest just selles kirjatüübis on päris moefotograafi sait ja see sobitati lehte otse uurides.

Kaks mustrit tulid välja peaaegu igal päris saidil, mille põhjal see ehitati, ja need on sisse küpsetatud igasse siinsesse suunda: navigatsioon peidetud ühe hamburgeriikooni taha ilma nähtava linkide loeteluta, isegi arvutis, ja üks suur pilt korraga, mitte ruudustik. Kasutajaliidese värvi on kogu aeg peaaegu null: värvi annab fotograafia, mitte liides.

02Mida lõpuks saad

Üks struktureeritud prompt, mis katab üldise suuna, täpsed hex-värvid, fondinimed ja -paari, lehtede nimekirja, navigatsiooni käitumise, galerii paigutuse ja pildi raamimise, millised funktsioonid kaasata, majutussoovituse päris kulude kompromissidega ning kindla komplekti ehituskvaliteedi nõudeid (ligipääsetav alt-tekst, mobiilsõbralikud murdepunktid, ei mingeid kõvasti koodi kirjutatud saladusi, laisalt laaditavad pildid). Kleebi see oma valitud tehisintellekti koodirakendusse ja sel on kõik, mida alustamiseks vaja.

03Promptist elava saidini: täielik läbikäik

Prompt on disainijuhend, mitte finišijoon. Siin on iga samm selle kopeerimise ja päris URL-i vahel, mille võid visiitkaardile panna, tasuta või peaaegu tasuta.

Kopeeri prompt ja ava tehisintellekti koodirakendus

Claude, Cursor, Claude Code, Windsurf või Replit'i tehisintellekti agent töötavad kõik, ükskõik mis suudab sinu eest faile kirjutada ja salvestada, mitte ainult vestelda. Kui sa pole kunagi ühtegi kasutanud, siis brauseripõhine variant nagu claude.ai või Replit ei vaja installimist: kleebi prompt esimese sõnumina.

Lase tal ehitada ja vaata siis tegelikult, mis valmis sai

Palu tal ehitada sait staatilise HTML/CSS/JS-ina (või mis tahes viisil, mille prompti majutuse osa määras) ja näidata sulle eelvaadet. Kontrolli üle kuus asja, mida prompt küsis (värvid, fondid, galerii käitumine, navigatsioon, raamimine, lehed), enne kui edasi lähed. Vale rõhuvärvi parandamine on praegu palju odavam kui pärast fotode külge ühendamist.

Vaheta sisse oma päris fotod, elulugu ja kontaktandmed

Asenda iga kohatäitepilt ja täiteteksti rida. Palu oma tehisintellekti rakendusel kirjutada iga foto jaoks päris, konkreetne alt-atribuut, mitte „image1.jpg“, vaid tegelik kirjeldus, sest see on nii ligipääsetavuse nõue kui ka väike SEO-boonus. See on ka hetk üle kontrollida, et kontaktivorm viitab tõesti e-posti aadressile, mida sa loed.

Pane see tasuta majutusse

Kui valisid taseme „Staatiline & tasuta“, palu oma tehisintellekti rakendusel juhatada sind projekti kausta või GitHubi hoidla ühendamisel ühega ülaloleva menüü lehel Majutus olevatest teenusepakkujatest. Kõik neli ehitavad ja avaldavad automaatselt iga kord, kui muudatuse üles lükkad; pärast ühendamist pole käsitsi üleslaadimise sammu.

Ühenda oma domeen (valikuline, aga seda väärt)

Tasuta alamdomeen (näiteks yourname.netlify.app) sobib alustuseks hästi. Kui oled valmis yourname.com jaoks, on see domeeni ost pluss üks DNS-muudatus, mida käsitletakse üksikasjalikumalt allpool.

04Millist tasuta majutust peaksid kasutama?

Iga neist paneb staatilise saidi tasuta üles, tasuta HTTPS-iga ja tasuta tasemega, mis katab isikliku portfoolio liikluse hõlpsasti. Tasuta taseme piirangud muutuvad üsna tihti, seega võta lehel Majutus olevaid numbreid üldise kujuna, mitte täpsete praeguste näitajatena, ning kontrolli iga pakkuja enda hinnalehelt enne, kui otsustad.

Palu oma tehisintellekti koodirakendusel päris avaldamise sammud sinuga koos läbi teha: „ühenda see projekt Netlifyga“ on täiesti tavaline asi, mida temalt küsida, ja ta suudab tavaliselt konto loomise ja esimese avaldamise paari minutiga läbi juhtida.

05Oma domeeni ühendamine

Domeen on väike aastatasu (tavaliselt 10 kuni 20 $ aastas olenevalt laiendist), majutusest eraldi, mis jääb tasuta. Kolm osa:

1. Osta domeen. Namecheap, Cloudflare Registrar või Google Domainsi järeltulija (Squarespace Domains).
2. Lisa DNS-kirje. CNAME (või A-kirje), mis suunab sinu domeeni sinu majutusele, lisatuna registripidaja töölaual. See on kaks rida registripidaja tabelis: CNAME väärtusele www, mis viitab aadressile, mille sinu majutus annab, näiteks your-portfolio.netlify.app, ja A-kirje paljale domeenile, mis viitab majutuse IP-le.
3. Lisa see oma majutuses. Kleebi sama domeen oma majutuse seadetesse „custom domain“ alla; HTTPS seadistub ise.

Igal lehel Majutus olevatel teenusepakkujal on vahekaart „Custom domain“ või „Domains“, mis annab sulle täpse lisatava kirje: kopeeri see sisse, lisa oma registripidajas ja oota. DNS-muudatused jõustuvad tavaliselt minutitega kuni mõne tunniga, mõnikord kuni 24 kuni 48 tunniga. Sinu tehisintellekti koodirakendus saab sind sinu konkreetse registripidaja töölaual juhatada, kui jääd hätta; tee seadete lehest ekraanipilt ja küsi, mida klõpsata. Lukk paistab, ei mingit hoiatust „not secure“: see ongi finišijoon.

06Enne avaldamist kontrollnimekiri

Viis minutit selle nimekirjaga püüab kinni suurema osa sellest, mis teeb portfoolio poolikuks. Kontrollid on ülaloleva menüü lehel Enne avaldamist; märgi need ära, kui lähed.

07Korduma kippuvad küsimused