Про портфолио написаны сотни статей и советов, но собственный опыт найма показал мне, насколько по-разному можно смотреть на одни и те же работы. Когда я взялся за свой сайт, мне захотелось учесть эту разницу и развивать "портфолио как продукт" — со своей аудиторией, сценариями, ограничениями и критериями успеха.
Суть подхода
Участвуя в поиске сотрудников, я замечал две крайности: кейсы были либо слишком короткими, чтобы понять вклад человека, либо настолько длинными, что до сути приходилось добираться через три главы книги.
В своём портфолио я предусмотрел разную глубину чтения под задачи аудитории — от быстрой оценки работ до подробного разбора решений. Через аналитику я проверяю, как люди пользуются сайтом, чтобы следующие итерации опирались на наблюдения.
Для себя мне тоже нужна была рабочая система: добавлять кейсы и медиа, сохранять единые правила подачи и развивать интерфейс без постоянной борьбы с инфраструктурой. Поэтому управление контентом и поддержка сайта стали такой же частью задачи, как сам читательский опыт.
Первая неудачная попытка
Логика была простой: я хотел максимально упростить редактирование и пошел в тот способ, который в полноценных продуктах считается самым правильным.
Так первой попыткой стала модель из CMS для управления кейсами, страницами и медиа, Supabase для хранения данных и Vercel для хостинга.
Но для моего сценария это оказалось слишком тяжело. Всплывали ошибки валидации от Google, ломались связи между контентом и медиа, большие изображения упирались в ограничения, а сама админка тащила за собой лишнюю поверхность поддержки. В какой-то момент я уже обслуживал инфраструктуру вместо того, чтобы развивать портфолио.
Все эти проблемы привели к переломному моменту: отталкиваться нужно от контекста и реальной потребности, а не от того, как решение выглядит “правильно” на бумаге.
Ключевое техническое решение
После этого мне пришла в голову идея, которую я сразу бросился проверять: если кейсы можно хранить целиком в MD файлах, то схему продукта можно упростить в разы.
Проект был пересобран вокруг GitHub Pages и формата MDX, позволяющего вставлять JS-компоненты прямо в MD.
Кейсы переехали прямо в репозиторий, публикация стала быстрой, а вместо набора сервисов, подписок и лишних связей у меня остались 
GitHub, 
Codex и 
Figma.
AI-сокращение и пирамида Минто
Та проблема, что аудитория делится на арт-директоров, продактов и дизайнеров с разными целями, породила два режима чтения. Есть подробный кейс для тех, кому важны глубина, ход мысли и детали. И есть сокращенный режим для быстрого считывания, когда нужно за минуту собрать проблему, решение и ожидаемый эффект.
AI собирает сокращенный кейс, основываясь на подробном, и встраивает его в контент как отдельный режим чтения. Это снижает рутину, держит структуру под контролем и позволяет не писать каждый раз две версии кейса вручную.
Если разложить структуру по пирамиде Минто, превью передаёт только суть, сокращённый кейс добавляет к ней ключевые тезисы, а подробный раскрывает всю пирамиду целиком — с аргументацией и деталями. При этом читатель сам выбирает, какая глубина погружения нужна ему в конкретный момент.
Интерактивное содержание
Сначала я планировал сделать привычное содержание с постоянно видимыми заголовками. Но быстрое знакомство со структурой уже обеспечивает сокращенный режим, поэтому заголовки появляются только при взаимодействии и не занимают место и внимание постоянно.
В полной версии содержание работает как компактная вертикальная навигация: помогает вернуться к нужному моменту, увидеть следующие разделы и перейти к ним без последовательного скролла. Оно синхронизируется с позицией на странице, а в сокращенном режиме не отображается.
Медиа и галерея
Секция с медиа может содержать сколько угодно изображений, и они сами выстроятся в сетку. Механизм позволяет держать ритм страницы разнообразным. A если нужно рассмотреть изображение детально, оно открывается на весь экран с интересной механикой закрытия. Догоняющий крестик подчеркивает, что можно выйти из полноэкранного режима кликом в любую точку.
Также я собрал слой оптимизации медиа и правил подготовки контента, чтобы тяжелые материалы грузились быстрее и стабильнее. Это решение выросло из реальной эксплуатации продукта: когда материалов много, скорость и предсказуемость загрузки становятся частью качества.
Навигация одной кнопкой
Навигация подчинена логике приоритетов: на первом экране пользователю важнее увидеть кейсы, а не мою фотографию крупно или длинное описание опыта. При этом мою роль и опыт он все равно считывает сразу в подзаголовках списка кейсов.
Сейчас пользователю не нужно постоянно видеть список всех разделов, и это не нарушает базовую ориентируемость, так как ему важнее быстро считать текущий экран и следующий доступный переход. Главная работает как развилка между списком кейсов и страницей обо мне, поэтому навигация выполнена одним переключающимся компонентом.
Такое решение работает именно потому, что маршрут пользователя почти всегда проходит через главную. Однозначно, если разделов было бы больше, то такой подход не работал бы.
В дополнение к этому слово “контакты” я заменил иконками для еще более быстрого считывания. Для меня подобная навигация стала осознанным экспериментом, который я проверяю в реальном использовании.
Анимация
В любом дизайне я придерживаюсь того, что motion должен помогать интерфейсу, а не спорить с ним за внимание.
Я собрал мягкий и спокойный motion-язык: появление через прозрачность, легкий blur, сдержанное поведение в интерактивных состояниях и сглаженные тайминги кривой Безье. Мне было важно сохранить ощущение живого интерфейса, но при этом не увлечься в шейдеры, WebGL и тяжелые приемы, которые ухудшают стабильность и плохо работают на слабых устройствах.
В этой части проекта больше всего микроитераций. Стеклянный пузырь на главной, появление "опаздывающей волной", fullscreen-переходы, поведение курсора и мелкие иконки — это долгая работа по поиску правильного ритма и нужной интенсивности движения.
Система, структура, строгость
Стандартизация в дизайне и в продукте обязательна. Она держит консистентность и минимизирует риск ошибок.
Поэтому в проекте появился ряд спецификаций. Отдельно зафиксированы токены и правила дизайн-системы, структура кейсов и подача, ограничения медиа, особенности аналитики и контракт сокращения кейса.
В файле каждого кейса, помимо контента, у меня есть служебный блок с метаданными. За счет этого один MDX-файл кейса становится отдельной сущностью и одновременно работает как превью на главной, подробная и сокращенная версии кейса без ручного деления логики.
Аналитика и метрики
Мне важно понимать, как люди изучают портфолио и помогают ли им заложенные в него сценарии. Для этого я спроектировал событийную аналитику в 
Яндекс Метрике и разделил показатели на две группы.
Качество вовлечения. Продолжает ли человек знакомство с работами: открывает ли несколько кейсов за визит, насколько глубоко прокручивает страницы, сколько времени проводит на них в видимой вкладке и переходит ли к информации обо мне. Эти действия дают сигналы интереса, но сами по себе не доказывают, что кейс прочитан или понят.
Использование функций. Исследует ли человек превью на главной перед открытием кейса, включает ли краткий режим и раскрывает ли изображения на весь экран. Здесь важен не только факт использования, но и последовательность действий.
Например, после включения краткого режима я смотрю, возвращается ли человек к полной версии, открывает ли другую работу или заканчивает просмотр. Такие сценарии помогают формулировать гипотезы о роли функции: достаточно ли краткого знакомства или оно побуждает изучить работу подробнее.
AI как инструмент
У проекта слишком много рутины, чтобы делать её руками в одном потоке: нужно поддерживать дизайн-систему и спецификации, следить за кейсами, контролировать оптимизацию медиа и не разрывать цикл разработки на десятки мелких операций. Для этого я использую AI как инструмент автоматизации процесса.
Внутри этого процесса роли разделены. Я создал и настроил субагентов под исследование, исполнение и ревью. Они помогают быстрее проходить цикл от идеи до проверки результата, а также декомпозировать и параллелить крупные задачи, но решения по продукту, дизайну, архитектуре и контроль качества остаются на мне.
Спойлеры
Следующую итерацию я строю вокруг просмотра медиа: проектирую полноэкранную галерею с перелистыванием и короткими тезисами для тех, кто хочет прежде всего оценить UI. Параллельно прорабатываю автоматизацию подготовки и публикации контента.
Ещё одно направление — эмоциональный дизайн: хочу добавить отсылки и мини-игры, а 
маскота, который уже живёт на сайте, развивать в сторону личной айдентики.
Результат
Подтвержденный результат для меня уже есть. У меня в руках удобный рабочий продукт, который просто обновлять, быстро расширять и легко поддерживать.
Ожидаемый результат связан не с моей внутренней работой, а с поведением аудитории, которое я проверяю метриками.
Rodyukov.art стал моим детищем, собранным с нуля, и одновременно самым показательным кейсом в портфолио, в котором видно весь диапазон моей роли — от продуктовой постановки задачи до архитектуры, интерфейсных решений, системности, автоматизации и аналитики.
Ничто не покажет, как я работаю с продуктом, лучше, чем работа с личным продуктом.
Для более подробной информации, жду в лс