Персональный сайт-портфолио

Персональный сайт-портфолио

Компания / Клиент
Личный проект
Сфера
UX/UI дизайн, Web
Сроки проекта
Февраль 2026 — Март 2026
Роль
Продуктовый дизайнер + AI-разработчик

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

Контекст, проблема и решение

Я делал этот проект как инструмент для поиска работы.Задача — репрезентовать опыт через кейсы и упростить переход от резюме к интервью.

Проблема

  • Behance — долгий продакшн и фокус на визуал
  • Dribbble — формат шотов без глубины
  • Notion — слабая кастомизация и проблемы с доступом
  • конструкторы — платные и ограниченные

Готовые решения не давали контроля над контентом и делали портфолио ненадёжным инструментом.

Дополнительно возник риск потери доступа к кейсам и времени, вложенному в их подготовку.

Решение

Я сделал собственный сайт-портфолио как независимый инструмент, который дополняет резюме и ведёт пользователя к кейсам.

  • быстрый вход в проекты с первого экрана
  • акцент на кейсах как основном источнике информации
  • полный контроль над контентом
  • независимость от платформ

Процесс

Исследование

Я проанализировал портфолио дизайнеров и шаблоны, чтобы понять, как подаются кейсы и какие решения повторяются.

Ключевой вывод — портфолио должно быстро считываться и строиться вокруг проектов.

Скриншот Figma с рефернсами и комментариям
Сбор визуальных референсов и паттернов
Скриншот сайта с коллекцией портфолио продуктовых дизайнеров
Анализ портфолио продуктовых дизайнеров на сайте «Foliobin by Nikita Petrov» (https://foliobin.com/ru)

Принятые решения

Я спроектировал сайт как систему, где проекты — основной носитель опыта, а остальная информация даёт контекст.

  • главная страница — точка входа с быстрым переходом к кейсам
  • каждый проект — отдельная страница
  • навигация между кейсами увеличивает глубину просмотра
  • порядок проектов задаётся вручную

Кейсы реализованы как система с фиксированной структурой и гибкими секциями. Это позволяет описывать разные проекты без потери единообразия.

Описание структуры проекта
Кейс собирается из секций с предопределенным набором блоков

Разработка

Я собрал сайт самостоятельно, используя AI как инструмент для разработки.

  • ChatGPT — код и дебаг
  • Next.js + Sanity — основа
  • VPS — независимый хостинг

MVP сайта был готов за несколько вечеров, что позволило быстро протестировать и доработать решение.

AI закрыл техническую часть, но структура, UX и продуктовые решения — полностью моя зона ответственности.

Скриншот интерфейса Sanity
Контент и структура управляются через кастомную CMS
Скриншот интерфейса Sanity
Пример редактирования секции проекта

Результат

  • работающий сайт с CMS
  • полный контроль над контентом
  • независимость от платформ
  • готовый инструмент для откликов

Проект позволил быстро собрать портфолио и начать откликаться на вакансии.

Дополнительно я получил гибкость в управлении контентом и возможность развивать сайт как продукт.

Свяжитесь со мной для сотрудничества