Направете си портфолио като фотограф с vibe coding

01С какво това се различава от избор на шаблон

Галериите с шаблони ви показват готов дизайн и ви питат харесва ли ви или не. Този инструмент слиза с едно ниво по-дълбоко: всяка от шестте посоки по-долу се основава на реално работещо портфолио на фотограф, което е било наистина проучено (екранни снимки, жива подредба, изчислени цветове, изчислени шрифтове), а не на палитра, измислена от някого да изглежда добре в мостра. Посоката Editorial, например, използва EB Garamond, защото това буквално е шрифтът, с който е набран сайтът на реален моден фотограф, установено чрез директно проучване на страницата.

Два модела се появиха почти навсякъде в реалните сайтове, от които е изграден този инструмент, и са вградени във всяка посока тук: навигация, скрита зад една хамбургер иконка без видим списък с връзки, дори на настолен компютър, и по едно голямо изображение наведнъж, а не мрежа. Цветът на интерфейса остава близо до нула навсякъде: цветът идва от фотографията, не от интерфейса.

02Какво получавате накрая

Една структурирана заявка, която обхваща общата посока, точните hex цветове, имената и комбинацията от шрифтове, списъка със страници, поведението на навигацията, подредбата на галерията и рамкирането на изображенията, кои функции да се включат, препоръка за хостинг с реалните компромиси по цена и фиксиран набор от изисквания за качество на изработката (достъпен алтернативен текст, адаптивни точки на прекъсване, никакви твърдо вградени тайни, изображения със забавено зареждане). Поставете я в избраното от вас AI приложение за програмиране и то има всичко необходимо, за да започне.

03От заявка до работещ сайт: пълното ръководство

Заявката е дизайн заданието, а не финалната линия. Ето всяка стъпка между копирането ѝ и реалния адрес, който можете да сложите на визитка, безплатно или почти безплатно.

Копирайте заявката и отворете AI приложение за програмиране

Claude, Cursor, Claude Code, Windsurf или AI агентът на Replit, всичко върши работа, стига да може да пише и записва файлове вместо вас, а не само да разговаря. Ако никога не сте ползвали такова, опция в браузъра като claude.ai или Replit не изисква инсталиране: поставете заявката като първо съобщение.

Оставете го да построи, после наистина погледнете какво е направило

Поискайте да изгради сайта като статичен HTML/CSS/JS (или каквото е посочено в раздела за хостинг на заявката) и да ви покаже преглед. Проверете шестте неща, които заявката е поискала (цветове, шрифтове, поведение на галерията, навигация, рамкиране, страници), преди да продължите. Много по-евтино е да поправите грешен акцентен цвят сега, отколкото след като снимките са вече вързани.

Сложете вашите истински снимки, биография и данни за контакт

Заменете всяко примерно изображение и всеки ред примерен текст. Поискайте от вашето AI приложение да напише реален, конкретен alt атрибут за всяка снимка в движение, не „image1.jpg“, а истинско описание, тъй като това е едновременно изискване за достъпност и малък плюс за SEO. Това е и моментът да проверите още веднъж дали формулярът за контакт наистина сочи към имейл адрес, който следите.

Публикувайте го на безплатен хостинг

Ако сте избрали нивото „Static & free“, поискайте от вашето AI приложение да ви преведе през свързването на папката на проекта или на GitHub хранилището с някой от хостовете от страницата Хостинг в менюто по-горе. И четирите се изграждат и публикуват автоматично при всяка промяна, която изпратите; няма ръчно качване, щом веднъж са свързани.

Свържете собствен домейн (по желание, но си струва)

Безплатен поддомейн (като yourname.netlify.app) е напълно достатъчен за начало. Когато сте готови за yourname.com, това е покупка на домейн плюс една промяна в DNS, описана подробно по-надолу.

04Кой безплатен хост да използвате?

Всеки от тези ще пусне статичен сайт безплатно, със свободен HTTPS и безплатно ниво, което лесно покрива трафика на личното портфолио. Лимитите на безплатните нива се променят доста често, затова приемайте числата в страницата Хостинг като обща представа, а не като точни актуални данни, и проверете страницата с цените на всеки доставчик, преди да се ангажирате.

Поискайте от вашето AI приложение за програмиране да направи заедно с вас същинските стъпки по публикуването: „свържи този проект с Netlify“ е напълно нормално нещо за питане и то обикновено може да ви преведе през създаването на акаунт и първото публикуване за няколко минути.

05Свързване на собствен домейн

Домейнът е малка годишна такса (обикновено 10 до 20 $ на година в зависимост от разширението), отделна от хостинга, който остава безплатен. Трите части:

1. Купете домейна. Namecheap, Cloudflare Registrar или наследникът на Google Domains (Squarespace Domains).
2. Добавете DNS запис. CNAME (или A запис), който насочва вашия домейн към хоста, добавен в таблото на регистратора. Това са два реда в таблицата на регистратора: CNAME за www, сочещ към адреса, който ви дава хостът, например your-portfolio.netlify.app, и A запис за домейна без www, сочещ към IP адреса на хоста.
3. Добавете го в хоста. Поставете същия домейн в настройките „custom domain“ на вашия хост; HTTPS се настройва сам.

Всеки хост от страницата Хостинг има раздел „Custom domain“ или „Domains“, който ви дава точния запис за добавяне: копирайте го, добавете го при вашия регистратор и изчакайте. Промените в DNS обикновено отнемат от минути до няколко часа, понякога до 24 до 48 часа. Вашето AI приложение за програмиране може да ви преведе през таблото на конкретния ви регистратор, ако се затруднявате; направете екранна снимка на страницата с настройките и го попитайте къде да кликнете. Катинарче се вижда, няма предупреждение „not secure“: това е финалната линия.

06Списък преди пускане

Пет минути с този списък хващат повечето от нещата, заради които портфолиото изглежда недовършено. Проверките са в страницата Преди пускане от менюто по-горе; отбелязвайте ги по пътя.

07Често задавани въпроси