Шаблон Noire: тёмное портфолио фотографа с архивом

Noire это готовый шаблон тёмного портфолио фотографа из галереи Zugo. Внутри публичная часть с подборкой работ, статементом, списком выставок и контактами, а за отдельным входом лежит панель управления архивом. Клон в ваш проект бесплатный, кредиты за него не списываются, а дальше правки идут текстом в чате по 3 кредита.

Ниже разобрано, из чего шаблон собран, чем он отличается от обычной сетки картинок и какими правками превращается в портфолио под ваше имя.

Что внутри шаблона Noire?

Шаблон состоит из двух частей: витрины, которую видят посетители, и служебного экрана, где работы заводятся и публикуются. Такая пара встречается в галерее не у всех шаблонов, и именно она делает Noire интересным для практики.

Публичная часть построена вокруг снимков, а не вокруг текста. Работы названы поимённо, у каждой своя подпись, и это задаёт нужный ритм: посетитель листает изображения, а не читает описание услуг. Для портфолио это правильная расстановка приоритетов.

Панель архива устроена как рабочий инструмент. Там есть счётчики по всей коллекции, по опубликованным и по черновикам, фильтры между этими состояниями и форма добавления работы с названием, техникой и годом. То есть шаблон показывает не только витрину, но и то, как автор с ней живёт.

Что здесь работает по-настоящему, а что оформление?

Публичная часть рабочая целиком: разделы, навигация, переходы по якорям, адаптация под телефон. Это готовая страница, а не макет, и её можно опубликовать почти без правок, заменив только содержимое.

Панель архива работает как интерфейс: фильтры переключаются, форма заполняется, счётчики считают. Но состояние не сохраняется между перезагрузками, потому что за шаблоном нет базы. Добавили работу, обновили страницу, и список вернулся к исходному.

Это не дефект, а честная граница демонстрации. Настоящий архив с логином и сохранением делается поверх, коннектором Supabase: он даёт базу, вход и хранение файлов. Как выглядит такое подключение по шагам, разобрано в статье приложение с Supabase.

Практический вывод простой. Если вам нужна витрина, шаблон закрывает задачу сразу. Если нужен архив, который вы наполняете годами, закладывайте отдельный этап на базу и вход, и не рассчитывайте, что он появится сам собой из одной правки.

Кому подходит Noire?

Подходит фотографу, оператору, художнику, иллюстратору: всем, у кого главный аргумент это изображение. Тёмная схема здесь работает на содержание, а не на моду, потому что снимок на тёмном фоне читается контрастнее, чем на белом.

Подходит и тем, кто продаёт визуальную услугу: студии, ретушёру, декоратору. Структура «работы, подход, история участия, контакт» универсальна для любого визуального ремесла, а названия разделов меняются одной правкой.

Не подходит, когда работ мало. Портфолио из трёх снимков в этой сетке выглядит пустым, и честнее взять формат с более плотной страницей. Не подходит и для продажи отпечатков: там нужна корзина и оплата, то есть каркас магазина, а не витрины.

Если вы не уверены, что тёмная схема ваша, попробуйте её на настоящих снимках, а не в воображении. Светлая версия делается одной правкой, и сравнить два опубликованных варианта дешевле, чем спорить об этом заранее.

Чем шаблон выгоднее сборки портфолио с нуля?

Разница считается в кредитах и в предсказуемости. Сборка по описанию стоит 6 кредитов и даёт результат, собранный ровно по вашему тексту, включая то, что вы забыли упомянуть. Клон шаблона бесплатный и даёт страницу, которую вы уже видели работающей в превью до клонирования.

Дальше вы платите только за отличия. Если задача звучит как «портфолио с крупной типографикой и разделом о подходе», отличий немного, и Noire выигрывает. Если задача звучит как «портфолио с расписанием съёмок и оплатой брони», каркас начнёт мешать, и разумнее описать проект с нуля.

Есть и третий, менее очевидный аргумент. Шаблон показывает состав разделов, до которого с чистого листа доходят не сразу: статемент отдельно от биографии, список участий отдельно от контактов. Такой набор блоков сам по себе подсказка о том, как устроено убедительное портфолио. Разбор этой структуры без привязки к шаблону есть в статье сайт-портфолио нейросетью.

Как переделать Noire под себя?

Порядок тот же, что и с любым шаблоном: сначала смысл, потом внешний вид. Иначе вы дважды оплачиваете правку одного и того же блока.

1. Замените имя и статемент. Одна правка меняет имя автора по всей странице и переписывает текст о подходе на ваш.
2. Загрузите свои работы. Свои изображения подставляются вместо демонстрационных, а подписи и названия правятся тем же запросом.
3. Перепишите выставки. Если участий нет, замените блок на «клиенты», «публикации» или «награды»: структура списка останется, изменится смысл.
4. Настройте контакт. Почта, мессенджер, форма заявки. Письма с формы отправляет коннектор Resend.
5. Опубликуйте. Проект живёт на адресе вида имя.zugo.run, свой домен подключается поверх на платных тарифах.

Про изображения стоит сказать отдельно. Портфолио целиком держится на качестве снимков, и никакая правка вёрстки не спасёт слабую подборку. Пятнадцать сильных работ убеждают лучше сорока средних, и это единственное решение в проекте, которое инструмент за вас не примет.

Сколько стоит довести шаблон до публикации?

Клон бесплатный, поэтому счёт начинается с первой правки. Полная замена содержимого на своё это обычно от трёх до шести правок, в зависимости от того, насколько подробно вы формулируете.

Тарифы: Free даёт 5 кредитов, Pro стоит $25 в месяц и включает 200 кредитов, Business стоит $99 в месяц. Каждая сборка перед выдачей запускается в песочнице, и вариант, который не открылся, вам не отдаётся.

Полезная привычка: правьте по одному блоку за раз и смотрите результат. Запрос «поменяй всё» стоит столько же, сколько точечный, но проверить его сложнее, а откатывать приходится целиком.

Какие правки просят чаще всего?

Набор запросов у портфолио на удивление устойчивый, и его удобно держать заготовкой. Работают формулировки, которые называют конкретный блок и конкретное изменение, а не общее впечатление.

«Сделай сетку работ в две колонки вместо трёх и увеличь снимки». «Добавь к каждой работе год и технику съёмки под названием». «Замени раздел выставок на список клиентов с логотипами». «Переведи весь интерфейс на русский, включая подписи в панели архива и пустые состояния».

Отдельно стоит просить про поведение на телефоне: «на узком экране показывай снимки в одну колонку и увеличь отступы между ними». Портфолио чаще всего открывают с телефона по присланной ссылке, и проверять результат надо там же, а не в уменьшенном окне браузера.

И ещё одна частая правка, про которую забывают: заголовок вкладки и превью ссылки. «Поставь в заголовок страницы моё имя и жанр съёмки» стоит столько же, сколько любая другая правка, но именно этот текст видят первым, когда ссылку пересылают в мессенджере.

Где границы шаблона?

Витрина не заменяет систему хранения. Без базы шаблон показывает работы, но не ведёт их учёт между сессиями. Это разные задачи и разный объём работы.

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

Сложная логика доводится правками. Клиентские галереи с доступом по ссылке, водяные знаки, отбор снимков заказчиком: всё это описывается по шагам и проверяется по одному, а не появляется из единственного промпта. На по-настоящему сложном продукте Zugo не заменяет команду разработки, и код всегда можно забрать экспортом в GitHub.

Начать проще всего с малого: откройте галерею на zugo.dev, клонируйте Noire и подставьте десяток своих снимков вместо демонстрационных. Уже на этом шаге станет понятно, работает ли тёмная схема на вашем материале.