Створіть портфоліо фотографа вайб-кодингом

01Чим це відрізняється від вибору шаблону

Галереї шаблонів показують готовий дизайн і питають, чи він вам подобається. Цей інструмент іде на шар глибше: кожен із шести напрямів нижче ґрунтується на реальному, робочому портфоліо фотографа, яке справді досліджували (скриншоти, живий макет, обчислені кольори, обчислені шрифти), а не на палітрі, яку хтось вигадав, щоб гарно виглядати на зразку. Напрям «Редакційний», наприклад, використовує EB Garamond, бо саме цим шрифтом набрано сайт реального модного фотографа, і це підібрано безпосереднім дослідженням сторінки.

Два патерни траплялися майже на всіх реальних сайтах, за якими це будували, і вони закладені в кожен напрям: навігація, схована за однією іконкою-гамбургером без видимого списку посилань, навіть на десктопі, і по одному великому зображенню за раз замість сітки. Колір інтерфейсу залишається майже нульовим: колір дає фотографія, а не інтерфейс.

02Що ви отримаєте наприкінці

Один структурований промпт, що охоплює загальний напрям, точні hex-кольори, назви шрифтів і їхнє поєднання, перелік сторінок, поведінку навігації, макет галереї та обрамлення зображень, які функції додати, рекомендацію щодо хостингу з реальними компромісами у вартості та фіксований набір вимог до якості збірки (доступний альтернативний текст, адаптивні точки зламу, жодних зашитих у код секретів, ліниве завантаження зображень). Вставте його у свій ШІ-застосунок для кодування, і в нього буде все потрібне, щоб почати.

03Від промпту до живого сайту: повний покроковий шлях

Промпт це дизайнерське завдання, а не фініш. Ось кожен крок між копіюванням промпту й реальною адресою, яку можна вказати на візитці, безкоштовно або майже безкоштовно.

Скопіюйте промпт і відкрийте ШІ-застосунок для кодування

Підійдуть Claude, Cursor, Claude Code, Windsurf або ШІ-агент Replit, будь-що, що вміє писати й зберігати файли за вас, а не лише відповідати в чаті. Якщо ви ніколи таким не користувалися, браузерний варіант на кшталт claude.ai чи Replit не потребує встановлення: вставте промпт як перше повідомлення.

Дайте йому зібрати сайт, а потім справді гляньте на результат

Попросіть зібрати сайт як статичний HTML/CSS/JS (або як сказано в розділі про хостинг у промпті) і показати попередній перегляд. Перевірте шість речей, яких вимагав промпт (кольори, шрифти, поведінка галереї, навігація, обрамлення, сторінки), перш ніж іти далі. Виправити хибний акцентний колір зараз набагато дешевше, ніж після підключення фото.

Підставте свої фото, біографію та контакти

Замініть кожне зображення-заглушку й рядок тексту-наповнювача. Просіть свій ШІ-застосунок одразу писати справжній, конкретний атрибут alt для кожного фото, не «image1.jpg», а реальний опис, адже це і вимога доступності, і невеликий плюс для SEO. Це також момент, щоб перевірити, що контактна форма справді веде на адресу електронної пошти, яку ви читаєте.

Розмістіть на безкоштовному хості

Якщо ви обрали тариф «Статичний і безкоштовний», попросіть свій ШІ-застосунок провести вас через підключення папки проєкту чи репозиторію GitHub до одного з хостів зі сторінки «Хостинг» у меню вище. Усі чотири збирають і розгортають автоматично щоразу, коли ви надсилаєте зміни; після підключення жодного ручного завантаження.

Підключіть власний домен (необов'язково, але варто)

Безкоштовний піддомен (на кшталт yourname.netlify.app) для початку цілком підходить. Коли будете готові до yourname.com, це купівля домену плюс одна зміна DNS, докладно описана нижче.

04Який безкоштовний хост обрати?

Будь-який із них запустить статичний сайт безкоштовно, з безкоштовним HTTPS і безкоштовним тарифом, якого легко вистачає для трафіку особистого портфоліо. Ліміти безкоштовних тарифів змінюються досить часто, тож сприймайте цифри на сторінці «Хостинг» як загальну картину, а не точні актуальні значення, і перевіряйте сторінку цін кожного провайдера, перш ніж зобов'язуватися.

Попросіть свій ШІ-застосунок для кодування виконати кроки розгортання разом із вами: «підключи цей проєкт до Netlify» це цілком звичайне прохання, і він зазвичай може провести вас через створення акаунта й перше розгортання за кілька хвилин.

05Підключення власного домену

Домен коштує невелику щорічну плату (зазвичай від $10 до 20 на рік залежно від зони), окремо від хостингу, який лишається безкоштовним. Три складники:

1. Купіть домен. Namecheap, Cloudflare Registrar або наступник Google Domains (Squarespace Domains).
2. Додайте запис DNS. CNAME (або запис A), що вказує ваш домен на ваш хост, додається в панелі реєстратора. Це два рядки в таблиці реєстратора: CNAME для www, що вказує на адресу, яку дає ваш хост, наприклад your-portfolio.netlify.app, і запис A для голого домену, що вказує на IP хоста.
3. Додайте його на хості. Вставте той самий домен у налаштування «власного домену» вашого хоста; HTTPS налаштовується сам.

Кожен хост зі сторінки «Хостинг» має вкладку «Власний домен» або «Домени», що дає точний запис для додавання: скопіюйте його, додайте в реєстратора й зачекайте. Зміни DNS зазвичай набирають чинності від кількох хвилин до кількох годин, іноді до 24 або 48 годин. Ваш ШІ-застосунок для кодування може провести вас панеллю вашого конкретного реєстратора, якщо ви застрягнете: зробіть скриншот сторінки налаштувань і запитайте, куди натискати. Замок на місці, жодного попередження «не захищено»: це і є фініш.

06Перевірка перед запуском

П'ять хвилин із цим списком ловлять більшість того, через що портфоліо виглядає недоробленим. Перевірки містяться на сторінці «Перед запуском» у меню вище; відмічайте їх по ходу.

07Поширені запитання