Stwórz vibe codingiem swoje portfolio fotografa

01Czym to się różni od wyboru szablonu

Galerie szablonów pokazują gotowy projekt i pytają, czy ci się podoba. To narzędzie idzie warstwę głębiej: każdy z sześciu kierunków poniżej opiera się na prawdziwym, działającym portfolio fotografa, które faktycznie zostało zbadane (zrzuty ekranu, układ na żywo, wyliczone kolory, wyliczone czcionki), a nie na palecie wymyślonej po to, żeby ładnie wyglądać na próbniku. Kierunek Redakcyjny na przykład używa EB Garamond, bo dokładnie w tym kroju złożona jest strona prawdziwego fotografa modowego, co ustalono, badając stronę bezpośrednio.

Dwa wzorce pojawiały się prawie wszędzie na prawdziwych stronach, z których to zbudowano, i są wbudowane w każdy kierunek tutaj: nawigacja schowana za jedną ikoną hamburgera, bez widocznej listy linków, nawet na desktopie, oraz jeden duży obraz naraz zamiast siatki. Kolor interfejsu jest bliski zeru: kolor dostarcza fotografia, nie interfejs.

02Co dostajesz na końcu

Jeden uporządkowany prompt obejmujący ogólny kierunek, dokładne kolory hex, nazwy czcionek i ich zestawienie, listę stron, zachowanie nawigacji, układ galerii i kadrowanie obrazów, funkcje do uwzględnienia, rekomendację hostingu z realnymi kosztami i kompromisami oraz stały zestaw wymagań jakościowych (dostępne teksty alternatywne, responsywne breakpointy, brak zaszytych sekretów, obrazy ładowane z opóźnieniem). Wklej go do wybranej aplikacji AI do kodowania, a będzie miała wszystko, czego potrzebuje na start.

03Od promptu do działającej strony: pełna instrukcja

Prompt to brief projektowy, a nie meta. Oto każdy krok między skopiowaniem go a posiadaniem prawdziwego adresu, który możesz wpisać na wizytówce, za darmo lub prawie za darmo.

Skopiuj prompt i otwórz aplikację AI do kodowania

Działają Claude, Cursor, Claude Code, Windsurf albo agent AI z Replit, czyli wszystko, co potrafi pisać i zapisywać pliki, a nie tylko czatować. Jeśli to twój pierwszy raz, opcja w przeglądarce, taka jak claude.ai lub Replit, nie wymaga instalacji: wklej prompt jako pierwszą wiadomość.

Pozwól mu budować, a potem naprawdę obejrzyj, co powstało

Poproś, żeby zbudował stronę jako statyczny HTML/CSS/JS (albo tak, jak określono w sekcji hostingu w prompcie) i pokazał podgląd. Sprawdź sześć rzeczy, o które prosił prompt (kolory, czcionki, zachowanie galerii, nawigację, kadrowanie, strony), zanim pójdziesz dalej. Dużo taniej poprawić zły kolor akcentu teraz niż po wpięciu zdjęć.

Podmień na swoje prawdziwe zdjęcia, biografię i dane kontaktowe

Zastąp każdy obraz zastępczy i każdy wiersz tekstu wypełniacza. Poproś aplikację AI, żeby na bieżąco pisała prawdziwy, konkretny atrybut alt dla każdego zdjęcia, a nie „image1.jpg”, tylko faktyczny opis, bo to zarazem wymóg dostępności i małe wsparcie SEO. To też moment, żeby sprawdzić, czy formularz kontaktowy naprawdę wysyła na adres e-mail, który odbierasz.

Wdróż na darmowym hostingu

Jeśli wybrano poziom „Statyczna i darmowa”, poproś aplikację AI, żeby przeprowadziła cię przez podłączenie folderu projektu lub repozytorium GitHub do jednego z hostingów ze strony Hosting w menu powyżej. Wszystkie cztery budują i wdrażają się automatycznie przy każdym wypchnięciu zmiany; po podłączeniu nie ma ręcznego wgrywania.

Podłącz własną domenę (opcjonalnie, ale warto)

Darmowa subdomena (np. yourname.netlify.app) na początek w zupełności wystarczy. Kiedy przyjdzie czas na yourname.com, to zakup domeny plus jedna zmiana DNS, opisane szczegółowo niżej.

04Którego darmowego hostingu użyć?

Każdy z nich wystawi statyczną stronę za darmo, z darmowym HTTPS i darmowym planem, który z łatwością pokryje ruch osobistego portfolio. Limity darmowych planów zmieniają się dość często, więc traktuj liczby na stronie Hosting jako ogólny obraz, a nie dokładne aktualne dane, i sprawdź cennik każdego dostawcy, zanim się zdecydujesz.

Poproś swoją aplikację AI do kodowania, żeby wykonała z tobą faktyczne kroki wdrożenia: „podłącz ten projekt do Netlify” to zupełnie normalna prośba, a zwykle poprowadzi cię przez założenie konta i pierwsze wdrożenie w kilka minut.

05Podłączanie własnej domeny

Domena to niewielka opłata roczna (zwykle $10 do 20 na rok, zależnie od rozszerzenia), osobna od hostingu, który zostaje darmowy. Trzy elementy:

1. Kup domenę. Namecheap, Cloudflare Registrar albo następca Google Domains (Squarespace Domains).
2. Dodaj rekord DNS. CNAME (albo rekord A) wskazujący twoją domenę na hosting, dodany w panelu rejestratora. To dwa wiersze w tabeli rejestratora: CNAME dla www wskazujący na adres, który poda hosting, na przykład your-portfolio.netlify.app, oraz rekord A dla gołej domeny wskazujący na IP hostingu.
3. Dodaj ją w hostingu. Wklej tę samą domenę w ustawieniach „własnej domeny” swojego hostingu; HTTPS skonfiguruje się samo.

Każdy hosting ze strony Hosting ma kartę „Custom domain” albo „Domains” z dokładnym rekordem do dodania: skopiuj go, dodaj u rejestratora i poczekaj. Zmiany DNS zwykle zajmują od kilku minut do kilku godzin, czasem do 24 do 48 godzin. Twoja aplikacja AI do kodowania może przeprowadzić cię przez panel konkretnego rejestratora, jeśli utkniesz; zrób zrzut ekranu strony ustawień i zapytaj, co kliknąć. Kłódka widoczna, brak ostrzeżenia „niezabezpieczona”: to meta.

06Lista kontrolna przed startem

Pięć minut z tą listą wyłapuje większość tego, przez co portfolio wygląda na niedokończone. Kontrole to strona Przed startem w menu powyżej; odhaczaj je po kolei.

07Najczęściej zadawane pytania