Vibe-koodaa valokuvaajan portfolio

01Miten tämä eroaa mallipohjan valitsijasta

Mallipohjagalleriat näyttävät valmiin designin ja kysyvät, pidätkö siitä vai et. Tämä työkalu menee kerroksen syvemmälle: jokainen alla olevista kuudesta suunnasta perustuu oikeaan, toimivaan valokuvaajan portfolioon, jota on todella tutkittu (kuvakaappaukset, live-asettelu, lasketut värit, lasketut fontit), eikä paletti, jonka joku on keksinyt näyttämään hyvältä värinäytteenä. Editoriaalinen suunta käyttää esimerkiksi EB Garamondia, koska juuri se kirjasin on oikean muotivalokuvaajan sivustolla, ja se on sovitettu tutkimalla sivua suoraan.

Kaksi mallia nousi esiin lähes kaikilla oikeilla sivustoilla, joiden pohjalta tämä rakennettiin, ja ne on leivottu jokaiseen suuntaan: navigointi piilossa yhden hampurilaiskuvakkeen takana ilman näkyvää linkkilistaa, myös työpöydällä, ja yksi iso kuva kerrallaan ruudukon sijaan. Käyttöliittymän väriä on koko ajan lähes nolla: väri tulee valokuvista, ei käyttöliittymästä.

02Mitä saat lopuksi

Yksi jäsennelty prompti, joka kattaa kokonaissuunnan, tarkat heksaväriarvot, fonttien nimet ja yhdistelmän, sivulistan, navigoinnin toiminnan, gallerian asettelun ja kuvien kehystyksen, mitkä ominaisuudet otetaan mukaan, hosting-suosituksen todellisine kustannusvaihtokauppoineen sekä kiinteän joukon rakennuslaatuvaatimuksia (saavutettavat alt-tekstit, responsiiviset murtopisteet, ei kovakoodattuja salaisuuksia, laiskasti ladattavat kuvat). Liitä se haluamaasi tekoälykoodaussovellukseen, niin sillä on kaikki tarvittava aloittamiseen.

03Promptista live-sivustoksi: koko läpikäynti

Prompti on suunnitteluohje, ei maaliviiva. Tässä on jokainen vaihe sen kopioimisen ja oikean URL-osoitteen välillä, jonka voit laittaa käyntikorttiin, ilmaiseksi tai lähes ilmaiseksi.

Kopioi prompti ja avaa tekoälykoodaussovellus

Claude, Cursor, Claude Code, Windsurf tai Replitin tekoälyagentti toimivat kaikki, mikä tahansa, joka osaa kirjoittaa ja tallentaa tiedostoja puolestasi eikä vain keskustele. Jos et ole koskaan käyttänyt sellaista, selainpohjainen vaihtoehto kuten claude.ai tai Replit ei vaadi asennusta: liitä prompti ensimmäiseksi viestiksi.

Anna sen rakentaa, ja katso sitten oikeasti, mitä se teki

Pyydä sitä rakentamaan sivusto staattisena HTML/CSS/JS:nä (tai mitä promptin hosting-osio määritteli) ja näyttämään esikatselu. Tarkista kuusi asiaa, joita prompti pyysi (värit, fontit, gallerian toiminta, navigointi, kehystys, sivut) ennen kuin jatkat. On paljon halvempaa korjata väärä korostusväri nyt kuin sen jälkeen, kun kuvat on kytketty sisään.

Vaihda tilalle omat kuvasi, esittelysi ja yhteystietosi

Korvaa jokainen paikkamerkkikuva ja täyteteksti. Pyydä tekoälysovellusta kirjoittamaan jokaiselle kuvalle oikea, täsmällinen alt-attribuutti samalla, ei ”image1.jpg”, vaan todellinen kuvaus, koska se on sekä saavutettavuusvaatimus että pieni SEO-lisä. Tässä kohdassa kannattaa myös tarkistaa, että yhteydenottolomake osoittaa sähköpostiosoitteeseen, jota oikeasti luet.

Julkaise se ilmaiseen hostiin

Jos valitsit ”Staattinen & ilmainen” -tason, pyydä tekoälysovellusta opastamaan sinut yhdistämään projektin kansio tai GitHub-repo johonkin yllä olevan valikon Hosting-sivun hosteista. Kaikki neljä rakentavat ja julkaisevat automaattisesti aina, kun työnnät muutoksen; ei manuaalista latausvaihetta, kun yhteys on tehty.

Yhdistä oma verkkotunnus (valinnainen, mutta kannattaa)

Ilmainen aliverkkotunnus (kuten yourname.netlify.app) toimii hyvin alkuun. Kun olet valmis osoitteeseen yourname.com, se on verkkotunnuksen osto ja yksi DNS-muutos, kuvattu tarkemmin alempana.

04Mitä ilmaista hostia kannattaa käyttää?

Mikä tahansa näistä saa staattisen sivuston julki ilmaiseksi, ilmaisella HTTPS:llä ja ilmaisella tasolla, joka riittää helposti henkilökohtaisen portfolion liikenteelle. Ilmaistasojen rajat muuttuvat melko usein, joten pidä Hosting-sivun lukuja yleisenä suuntaa-antavana kuvana tarkkojen nykyisten lukujen sijaan ja tarkista jokaisen palveluntarjoajan oma hintasivu ennen sitoutumista.

Pyydä tekoälykoodaussovellustasi tekemään varsinaiset julkaisuvaiheet kanssasi: ”yhdistä tämä projekti Netlifyyn” on aivan tavallinen pyyntö, ja se osaa yleensä opastaa tilin luomisessa ja ensimmäisessä julkaisussa parissa minuutissa.

05Oman verkkotunnuksen yhdistäminen

Verkkotunnus on pieni vuosimaksu (tyypillisesti $10-20 vuodessa pääteestä riippuen), erillinen hostingista, joka pysyy ilmaisena. Kolme osaa:

1. Osta verkkotunnus. Namecheap, Cloudflare Registrar tai Google Domainsin seuraaja (Squarespace Domains).
2. Lisää DNS-tietue. CNAME (tai A-tietue), joka osoittaa verkkotunnuksesi hostiisi, lisättynä rekisterinpitäjän hallintapaneelissa. Se on kaksi riviä rekisterinpitäjän taulukossa: CNAME osoitteelle www, joka osoittaa hostisi antamaan osoitteeseen, kuten your-portfolio.netlify.app, ja A-tietue paljaalle verkkotunnukselle, joka osoittaa hostin IP-osoitteeseen.
3. Lisää se hostiisi. Liitä sama verkkotunnus hostisi ”custom domain” -asetuksiin; HTTPS järjestyy itsestään.

Jokaisella Hosting-sivun hostilla on ”Custom domain” tai ”Domains” -välilehti, joka antaa tarkan lisättävän tietueen: kopioi se, lisää se rekisterinpitäjälläsi ja odota. DNS-muutokset tulevat tyypillisesti voimaan minuuteissa tai muutamassa tunnissa, joskus jopa 24-48 tunnissa. Tekoälykoodaussovelluksesi voi opastaa sinua oman rekisterinpitäjäsi hallintapaneelissa, jos jäät jumiin; ota kuvakaappaus asetussivusta ja kysy, mitä painaa. Lukko näkyy, ei ”ei suojattu” -varoitusta: se on maaliviiva.

06Tarkistuslista ennen julkaisua

Viisi minuuttia tämän listan kanssa nappaa suurimman osan siitä, mikä saa portfolion näyttämään keskeneräiseltä. Tarkistukset ovat yllä olevan valikon Ennen julkaisua -sivu; rastita ne sitä mukaa kun etenet.

07Usein kysytyt kysymykset