Портфолио как кейс: как я построила свой сайт

Когда я решала, каким будет мой собственный сайт, встал очевидный вопрос: зачем визитка человеку, который позиционирует себя как AI-дирижёра — того, кто задаёт направление и работает в связке с инструментами, а не просто их использует? Ответ был простой: сайт должен сам стать доказательством подхода. Не описанием того, как я работаю, а живым примером.

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

Задача

Нужен был не лендинг-визитка, а рабочий инструмент: витрина кейсов, которую легко пополнять, с админкой для добавления новых работ, и при этом — ощущение точности и дисциплины, а не шаблонного конструктора. Тон отсылает к «Одержимости» — темп, требовательность к деталям, никакой мягкой «премиальной AI»-эстетики.

Как это сделано

Технически сайт — Next.js с собственной SQLite-базой под капотом (drizzle-orm + better-sqlite3) и админкой, через которую кейсы добавляются и редактируются без завязки на код: заголовок, категория, обложка, и структурированный бриф из трёх полей — Задача / Идея / Результат — плюс свободный текст под капотом, для более сложных историй.

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

Хиро-экран построен вокруг прожектора, который следит за курсором: тёмная сцена, луч света, персональная подсветка карточек в зависимости от расстояния до курсора. По всей остальной странице — метроном в углу, мигающий REC-индикатор, счётчик «Такт NN/NN», который реагирует на то, какой блок сейчас в зоне видимости. Это не декорация ради красоты — это перевод бренд-идеи «дирижёр, темп, дисциплина» на язык интерфейса, целиком выросший из бренд-дизайна, описанного в отдельном кейсе.

Что оказалось непросто

Точность в деталях, о которой заявляет бренд, потребовала настоящей точности в реализации — и это далось не сразу. Например, заголовок с логотипом какое-то время был буквально невидим: обводка ссылалась на несуществующую CSS-переменную, браузер тихо проигнорировал стиль без единой ошибки в консоли. Прожекторный луч на хиро-экране сначала «выходил» не из лампы, а откуда-то выше неё — на глаз это читалось как «луч висит в воздухе», и потребовался скриншот и пересчёт геометрии рычага, чтобы найти настоящую точку крепления. Такие вещи не видно на макете — только когда система уже живая.

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

Результат

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

Если интересно, откуда взялись эти решения — палитра графит + бордо, отказ от «мягкого премиального AI» в пользу плаката и трафарета, история с собственным шрифтом — это отдельный процесс, описанный в кейсе «Бренд-дизайн: AI-дирижёр».