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