Кейс · Разработка · 2026
Сайт, который сам доказывает подход
Спроектировала и построила собственное портфолио: от бренд-системы и дизайна до админки, базы и сервера. Сайт прошёл три визуальных языка, и этот путь — часть истории, а не то, что стоит прятать.
Заказчик
Я сама
Год
2026
Стек
Next.js, SQLite, Docker, Caddy
Услуги
Бренд, UX/UI, фронтенд, бэкенд, сервер
Задача
Не визитка, а рабочий инструмент, который сам себя объясняет
Зачем визитка человеку, который позиционирует себя как AI-дирижёра? Сайт должен стать доказательством подхода, а не описанием на словах. Плюс витрина кейсов, которую я пополняю сама, без правок кода.
«Слишком тёмный»
Первая версия — графит и бордо, прожектор над сценой. Метафора дирижёра точная, но людям, которым я показывала сайт, было тяжело его читать.
«Слишком квадратно»
Семь новых направлений оказались одним и тем же: блоки на сетке, волосяная рамка, подписи капсом. Менялась тема, а не форма.
Не помещался на экран
Первый экран имел фиксированную высоту 913 px и на обычном окне 800–850 px терял подпись за краем.
Аудитория
Заказчики приходят за похожей задачей
Владельцы небольшого бизнеса
Продают услуги, а заявки и оплаты держатся на звонках и таблицах. В технологиях разбираться не хотят: им важно понять, что изменится во времени и деньгах.
Эксперты и авторы
Есть аудитория и продукт, но нет своей площадки. Выбирают между конструктором и разработкой и хотят понять, зачем платить за своё.
Команды в компаниях
Менеджеры продукта и маркетинга, которым нужен подрядчик на прототип или ИИ-автоматизацию. Смотрят, как устроен процесс, а не только на итоговую картинку.
Что из этого следовало
- 01
Работы — первый раздел после главного экрана. Ведущий кейс на всю ширину, чтобы сразу было видно, с какими задачами я работаю.
- 02
Кейс начинается с задачи заказчика. В конце — результат и приглашение рассказать о своей задаче.
- 03
Светлая версия вместо тёмной. Первую, тёмную, людям, которым я показывала сайт, было тяжело читать.
- 04
Кейсы «в работе» тоже на сайте. Видно, над чем я работаю сейчас.
Эволюция
Три версии и один вывод
Метафору менять не хотелось, она точная. Менялся визуальный язык, и каждый раз причина была в реакции людей, а не во вкусе.
Тёмная комната и прожектор
Работы по эллиптической траектории («Вертушка»), прожектор следит за курсором, подсветка карточек по расстоянию до него.
Слишком тёмный. Метафору оставила, язык пересобрала.
Семь направлений
Партитура, Белый зал, Пульт, Черновик, Форте, Планировка, Кадр. Разные темы: нотный стан, галерея, чертёж, контактный лист.
Все семь на самом деле были одной композицией. Отказалась.
Светлая версия
Крупное слово «инженер» из SVG, кривые и диагонали вместо рамок, асимметрия, след за курсором, который едва угадывается.
Дизайн и метафора наконец совпали.
Семь направлений ребрендинга я разбирала отдельно, как часть бренд-системы: кейс «Бренд-дизайн: AI-дирижёр».
Ключевые экраны
Как сайт выглядит сегодня
Светлая сцена, диагональные срезы между разделами и крупная типографика вместо рамок и сеток. Ведущий кейс на главной занимает всю ширину, остальные идут асимметричными карточками.
01
Работы: ведущий кейс и два рядом
Порядок задаётся стрелками в админке: первый кейс становится ведущим на главной. Обложка с чёрным или белым заголовком, а у кейсов в работе есть бейдж.
02
Клиенты и отзыв на тёмном фоне
Тёмный раздел среди светлых: ряд логотипов клиентов, под ним отзыв. Логотипы и цитаты заводятся в админке как отдельные сущности.
03
Обо мне: шесть стадий продукта
Не список навыков, а путь от идеи до релиза. Ниже инструменты по группам: управление, дизайн, разработка, ИИ и контент.
04
Админка: порядок кейсов в одну стрелку
Первый кейс в списке становится ведущим на главной, порядок меняется стрелками, а переключатель временно прячет запись с сайта. Новая запись: обложка (даже GIF или короткое видео) и фото «до» для слайдера. Сверху же заявки, клиенты, отзывы, расходы, аналитика и финансы.
Адаптивная вёрстка
На телефоне слово остаётся главным
Заголовок перестраивается, а объёмное слово занимает всю ширину экрана. Навигация уходит в меню, кнопка связи остаётся под большим пальцем.
Архитектура
Одно приложение, одна база, один сервер
Админка — часть того же приложения, внешней CMS нет. Страницы с контентом читают базу на каждый запрос, поэтому новый кейс появляется сразу, без пересборки.
Next.js
Приложение и админка
SQLite
База: кейсы, статьи, заявки
Docker
Сборка и запуск
Caddy
HTTPS и заголовки безопасности
VPS
Санкт-Петербург, 152-ФЗ
Решения
Детали, которых не видно на макете
Точность, о которой заявляет бренд, потребовала настоящей точности в реализации. Это то, что нашлось только на живой системе.
Слово «AI-инженер» — SVG, обрезанный по контуру букв. Ширина считается из высоты окна минус высота всего остального на экране (562 px) и соотношения сторон исходного SVG (3.226). Меняется шрифт или состав экрана — перемеряются оба числа.
width: max(520px, min(1000px, calc((100svh - 562px) * 3.226)))
Результат
Сайт собран из решений бренда, а не украшен ими
3версии
Визуального языка при одной метафоре дирижёра. Каждая проверена на живых людях.
7→ 1
Направлений ребрендинга свелись к одной форме, и это увидела только на сравнении.
0строк
Кода нужно, чтобы добавить новый кейс или статью. Всё через админку.
1формула
Вместо ручной подгонки первого экрана под каждое окно.
Нужен сайт с характером? Давайте обсудим
Расскажите, что должен делать сайт и кому он нужен. Подскажу, что собрать на готовом, а что стоит делать под себя.