Как собрать портфолио, которое работает: от выбора проектов до публикации

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

Главный принцип: один проект в портфолио должен закрывать один конкретный запрос аудитории. Если вы нацелены на несколько направлений (например, UX-дизайн и фронтенд), лучше сделать два раздельных портфолио или чётко разделить их внутри одного, чем смешивать всё в кучу. Ниже — пошаговая логика сборки, которая работает для дизайнеров, разработчиков, маркетологов, копирайтеров, консультантов и других специалистов.

От чего начинать: аудитория и цель

Прежде чем открывать Figma, Notion или GitHub, ответьте на три вопроса. От них зависит структура, тон и выбор проектов.

• Кто смотрит? HR-менеджер, технический лид, основатель стартапа, арт-директор, заказчик на бирже. У каждого свои критерии отбора.
• Какое действие вы хотите? Приглашение на собеседование, заявка на проект, продажа дорогой консультации, пасс на стажировку.
• Какую роль вы претендуете? Junior ищет потенциал и обучаемость. Senior — архитектуру решений и влияние на бизнес. Фрилансер — надёжность и понимание процесса.

Пример: если вы разработчик, ищущий первую работу, HR ищит pet-проекты с чистым кодом и README. Если вы сеньор, ищущий контракт на архитектуру — технический лид ищет описание сложных миграций, компромиссов и метрик. Одно портфолио на оба случая будет слабым для обоих.

Сколько проектов нужно и какие выбирать

Золотое правило: 3–6 сильных кейсов лучше 15 слабых. Рекрутер или заказчик просматривает портфолио по диагонали. Каждый лишний слабый проект размывает впечатление от сильных.

Критерии отбора проекта в портфолио

• Релевантность цели. Проект демонстрирует навыки, нужные для желаемой роли.
• Ваша личная роль. Вы можете чётко объяснить, что делали именно вы, а не команда.
• Результат или вывод. Есть метрика, скриншот итога, ссылка на продакшн, отзыв клиента или честный разбор ошибок.
• Сложность/нестандартность. Проект показывает умение работать с ограничениями, принимать решения, а не просто выполнять ТЗ.
• Актуальность стека/подхода. Технологии и методологии не устарели на момент показа.

Что исключить: учебные работы «для галочки» без реальной задачи, проекты под NDA без разрешения на показ (см. раздел про NDA ниже), работы, которыми вы не гордитесь или не можете защитить на техническом интервью.

Структура сильного кейса: метод STAR, адаптированный для портфолио

Каждый кейс — это мини-кейс-стади. Не показывайте только финальные картинки или код. Расскажите историю проблемы и решения.

Блок	Что включить	Зачем это нужно
Context (Контекст)	Кто заказчик, какая бизнес-задача, какие были ограничения (бюджет, сроки, легаси, команда)	Показывает масштаб и реалистичность
Problem (Проблема)	Что именно не работало: низкий конверсия, технический долг, неудобный UX, отсутствие аналитики	Демонстрирует умение ставить правильную задачу
Role (Ваша роль)	Что делали вы лично: исследовали, прототипировали, писали код, настраивали CI/CD, вели переговоры	Снимает вопрос «а что вы там вообще делали?»
Process (Процесс)	Этапы: research → идеи → прототип → тесты → итерации → релиз. Инструменты, методологии, сложные решения	Показывает мышление, не просто результат
Solution (Решение)	Финальный артефакт: скриншоты, ссылка на демо/продакшн, репозиторий, PDF-макеты, схемы архитектуры	Доказательство навыков исполнения
Impact (Результат/Влияние)	Метрики: +15% конверсия, -40% времени загрузки, экономия $10к/мес, запуск за 2 недели до дедлайна. Если метрик нет — качественный вывод: «выявили 3 критичных бага до релиза»	Переводит навыки на язык бизнеса
Reflection (Рефлексия)	Что бы сделали иначе, какие ошибки допустили, чему научились	Сигнал зрелости и рефлексии (критично для senior)

Не все блоки обязательны для каждого проекта. Для pet-проекта контекста может не быть, но процесс и рефлексия важны. Для коммерческого проекта под NDA — опишите процесс и результат в обезличенном виде (см. ниже).

Работа с NDA и конфиденциальными проектами

Большинство коммерческих проектов под NDA. Это не повод их скрывать — повод показать их правильно.

• Попросите разрешение. Многие клиенты согласны на показ в портфолио с обезличиванием названия, логотипа, точных цифр. Зафиксируйте согласие письменно (email достаточно).
• Обезличьте. «Финтех-стартап, серия A» вместо названия. «Платформа для B2B-закупок» вместо бренда. Метрики в процентах или относительных величинах («ускорили загрузку в 3 раза») вместо абсолютных долларов.
• Покажите процесс, а не данные. Схемы пользовательских путей, вайрфреймы, архитектурные диаграммы, фрагменты кода (без бизнес-логики), скриншоты интерфейсов без реальных пользовательских данных.
• Сделайте «private version». Публичное портфолио — обобщённое. Приватная версия (PDF, защищённый Notion, архив) — с деталями для серьёзных переговоров. Укажите в публичной версии: «Подробный кейс с метриками и артефактами — по запросу».

Если клиент категорически против — не включайте проект. Репутация надежного партнёра дороже одного кейса.

Выбор платформы и формата

Нет идеальной платформы для всех. Выбор зависит от профессии, цели и технических навыков.

Сравнение популярных вариантов

Платформа/Формат	Для кого лучше	Плюсы	Минусы
Свой сайт (Next.js, Astro, Webflow, Framer, WordPress)	Дизайнеры, разработчики, консультанты, личный бренд	Полный контроль, SEO, уникальный UX, демонстрирует навыки (для девов)	Требует времени на разработку/поддержку, хостинг, домен
Notion + Super/Notion Sites / Portfolio-шаблоны	PM, аналитики, консультанты, джуниоры, быстрый запуск	Бесплатно/дешево, редактируется за минуты, удобная структура кейсов	Ограниченный дизайн, слабый SEO, выглядит шаблонно
Behance / Dribbble	Визуальные дизайнеры (UI, графика, моушн, иллюстрация)	Комьюнити, встроенный трафик, удобная галерея	Слабая структура кейса, сложно показать процесс/код, алгоритмическая лента
GitHub / GitLab (README + GitHub Pages)	Разработчики, Data Scientists, ML-инженеры	Показывает реальный код, коммиты, тесты, CI/CD	Неудобно для визуалов, нужен отдельный лендинг для «обёртки»
PDF / Прайм-дек (Google Drive, Dropbox, DocSend)	Консультанты, B2B-продажи, seniory, отправка по почте	Контроль версий, трекинг просмотров (DocSend), удобно для офлайн	Не индексируется, быстро устаревает, неудобно на мобильном
LinkedIn (Раздел «Рекомендации» + «Проекты» + посты)	Все, дополнение к основному портфолио	SEO по имени, соц. доказательства, нетворкинг	Не заменяет полноценное портфолио

Практический совет: начните с Notion или GitHub Pages — за вечер соберёте рабочую версию. Параллельно пилите свой сайт, если он нужен для личного бренда или демонстрации скиллов. Не откладывайте публикацию на «идеальный сайт».

Визуальная подача и UX портфолио

Портфолио — это тоже продукт. Его UX должен быть безупречным, иначе вы проигрываете до просмотра кейсов.

• Навигация: понятное меню, хлебные крошки, кнопка «Связаться» на каждом экране.
• Скорость: оптимизируйте изображения (WebP, правильные размеры), включите кэширование. Lighthouse Performance > 90.
• Мобильная версия: 40–60% трафика — с телефона. Проверьте на реальном устройстве.
• Доступность: контраст, alt-теги у картинок, семантическая вёрстка, фокус-стайлы.
• Контакты: email, Telegram, LinkedIn, календарь (Calendly/Cal.com) — в футере и на отдельной странице. Уберите форму «Напишите мне» без полей — она снижает конверсию.
• Язык: если претендуете на международный рынок — английская версия обязательна. Не используйте автопереводчик.

Типичные ошибки, которые убивают конверсию

• «Вот мои работы» без контекста. Галерея скриншотов без описания задачи и роли. Заказчик не понимает, чему равна ваша ценность.
• Скрытие роли в команде. «Мы сделали…» вместо «Я спроектировал архитектуру API и провел код-ревью».
• Метрик нет — и не сказано почему. Если проект не запустился или метрики под NDA — напишите об этом честно: «Проект заморожен заказчиком на стадии стейкхолдер-апрува, ключевые решения задокументированы в Confluence».
• Устаревший стек в акцентных проектах. jQuery-проект 2018 года как главный кейс для React-вакансии в 2024 году.
• Ссылки ведут в никуда. Демо-сайт упал, репозиторий приватный, Figma-файл удалён. Проверяйте все ссылки раз в квартал.
• Опечатки и неаккуратность. В портфолио контент-маркетолога — опечатки. В портфолио фронтендера — сломанная вёрстка на главной. Это сигнал «недорабатывает до конца».
• Слишком много текста без визуалов. Стены текста не читают. Используйте заголовки, списки, скриншоты, схемы, цитаты.
• Нет призыва к действию (CTA). Просмотрел кейс — и что дальше? Добавьте кнопку «Обсудить проект» / «Скачать CV» / «Написать в Telegram» в конце каждого кейса.

Сценарии: как адаптировать портфолио под роль

Junior / Стажёр / Выпускник

• Фокус на потенциале, обучаемости, чистоте выполнения.
• 2–3 pet-проекта с полным циклом: идея → дизайн/код → деплой → README.
• Обязательно: рефлексия («что было сложно, как решал, чему научился»).
• GitHub с зелёными коммитами, понятными коммитами, тестами.
• Ссылка на CV/резюме в шапке.

Middle / Senior IC (Individual Contributor)

• Фокус на сложности задач, архитектурных решениях, влиянии на продукт/бизнес.
• 3–4 кейса: миграция, введение новой практики, оптимизация, менторство/ревью.
• Метрики бизнеса, а не только технические.
• Блок «Tech Stack & Practices» — показывает зрелость выборов.

Team Lead / Engineering Manager / Design Lead

• Кейсы про процессы: внедрение CI/CD, рефакторинг процесса код-ревью, найм и онбординг, управление техническим долгом.
• Метрики: time-to-market, retention команды, снижение багов, скорость онбординга.
• Один кейс может быть «невизуальным» — описание процесса в тексте со схемой.

Фрилансер / Консультант / Эксперт

• Фокус на ROI для клиента, понимании бизнеса, процессе работы с заказчиком.
• Кейс = «Ситуация → Мой подход → Результат клиента → Отзыв».
• Пакеты услуг/ценники (или «от $X») — опционально, но снижает барьер контакта.
• Лендинг с лид-магнетом (чек-лист, мини-аудит, гайд) для сбора контактов.

Дизайнер (Product / UX / UI)

• Обязательно: research, user flows, wireframes, прототипы, UI-кит, usability-тестирование, передача в разработку.
• Figma-файлы с включённым доступом «view only» или экспорт в PDF.
• Покажите не только «красиво», а «работает»: метрики до/после, котировки пользователей.

Разработчик (Frontend / Backend / Fullstack / Mobile)

• GitHub — продолжение портфолио. Чистая история коммитов, тесты, CI, документация.
• Для каждого кейса: ссылка на репо + ссылка на демо/продакшн + краткое README в портфолио.
• Покажите архитектурные решения: почему выбрали эту БД, как решили проблему N+1, как масштабировали.

Пошаговый чек-лист запуска портфолио

1. Определите целевую роль и аудиторию (раздел 1).
2. Соберите длинный список всех проектов за 3–5 лет.
3. Отфильтруйте по критериям релевантности, роли, результата (раздел 2). Осталось 3–6 проектов.
4. Для каждого проекта напишите структуру STAR (раздел 3). Соберите артефакты: скриншоты, ссылки, схемы, метрики.
5. Решите вопрос с NDA: запросите разрешения, подготовьте обезличенные версии.
6. Выберите платформу (раздел 5). Разверните MVP-версию за 1–2 дня.
7. Наполните контентом: кейсы, About/Обо мне, Контакты, CV (PDF).
8. Проверьте UX: скорость, мобильная версия, доступность, работающие ссылки, CTA.
9. Попросите 2–3 коллег/менторов дать обратную связь по чек-листу: «Понятно ли, что я делаю? Есть ли вопросы после просмотра?».
10. Опубликуйте. Добавьте ссылку в LinkedIn, Telegram, GitHub, профили на биржах, подпись в email.
11. Поставьте в календарь напоминание: раз в квартал обновить (новый проект, метрики, убрать устаревшее).

Что делать после публикации: поддержка и развитие

Портфолио — живой организм. Мёртвое портфолио 2021 года сигнализирует: «я не развиваюсь» или «я не ищу работу, но и не работаю».

• Квартальный аудит: добавьте новый проект, обновите метрики старых, удалите нерелевантное, проверьте ссылки.
• Трекинг: поставьте Яндекс.Метрику / GA4 / Plausible. Смотрите: откуда приходят, сколько времени на кейсах, где уходят. Оптимизируйте слабые места.
• Коллекционируйте артефакты во время работы: не ждите конца проекта. Скриншоты промежуточных этапов, замеры метрик до/после, благодарности в слаке — кладите в папку «Portfolio Assets». В момент сборки кейса у вас будет всё готово.
• Пишите раз в месяц мини-пост/статью на тему кейса (LinkedIn, VC, Habr, Telegram-канал). Это усиливает SEO по имени, показывает экспертизу и ведёт трафик в портфолио.

FAQ: частые вопросы про портфолио

Нужно ли ставить цены в портфолио?

Для фрилансеров и консультантов — да, диапазон или «от $X» снижает барьер и отсекает нецелевые лиды. Для найма на штат — нет, зарплата обсуждается на собеседовании. Если ставите — указывайте валюту, тип оплаты (фикс/почас) и что входит.

Как показать pet-проекты, чтобы они не выглядели «учебными»?

Оформите как реальный продукт: есть README с постановкой проблемы, архитектурой, инструкцией по запуску, тестами, CI/CD, деплоем. Добавьте метрики: «1000 MAU», «обрабатывает 50 req/s», «покрытие тестами 85%». Напишите рефлексию: какие технические долги остались, что бы переписали.

Стоит ли делать разные версии портфолио под разные вакансии?

Если направления близки (React и Next.js) — одного портфолио с тегами/фильтрами достаточно. Если далеки (UX-дизайн и Python-бэкенд) — лучше два отдельных сайта или поддомена. Рекрутер тратит 30 секунд: он не будет копаться в нерелевантном.

Что делать, если коммерческого опыта мало или нет?

Сделайте 2–3 качественных pet-проекта с закрытыми задачами: клон реального продукта с улучшением, инструмент для себя/друзей, участие в open source, волонтёрство для НКО, хакатоны. Главное — оформить по структуре STAR и показать процесс, а не только результат.

Нужно ли фото и раздел «Обо мне»?

Фото — опционально, но добавляет доверия (лицо, профессиональное, не с пляжа). Раздел «Обо мне» — обязателен: 3–4 предложения: кто вы, какую проблему решаете, стек/методы, контакт. Не биография с детства.

Главный итог: портфолио — это продукт, который вы продаёте

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

Следующие шаги прямо сейчас:

1. Откройте заметку и запишите 3 целевые роли, на которые вы пойдёте в ближайшие 6 месяцев.
2. Выпишите 5–7 проектов, которые их закрывают. Отметьте: есть ли артефакты, метрики, разрешение на показ.
3. Выберите платформу для MVP (Notion / GitHub Pages / Webflow — то, что соберёте за вечер).
4. Собрать первый кейс по структуре STAR за 1 час. Опубликовать. Остальные — в процессе.

Портфолио никогда не будет «готово». Но оно должно быть «в сети» и работать на вас уже сегодня.

Материал носит информационный характер и основан на общих практиках рынка. Требования работодателей и заказчиков варьируются по отраслям, регионам и уровням позиций. Перед применением рекомендаций в конкретной ситуации оцените их применимость к вашей цели и при необходимости проконсультируйтесь с рекрутером или ментором вашей сферы.