Портфолио 🎨

Портфолио — это список ваших проектов, которые вам кажутся лучшими.

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

Портфолио может считаться профиль на GitHub, GitLab или Bitbucket. Можно сделать и отдельный сайт, на котором расскажете о себе больше, чем в резюме, и соберёте ссылки на проекты и демки.

Для начала оформите свой профиль. Добавьте фотографию, почту, дополнительные ссылки на соцсети, если они причёсаны, блог, сайт-портфолио, если есть. Можете добавить и более подробный рассказ о себе. Что касается активности, то она должна быть зелёной, но в меру. Убедитесь в настройках приватности, что ваша активность и членство в организациях видны.

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

Репозитории на GitHub должны включать описания в README-файлах. У файлов должны быть:

• Заголовок с названием проекта.
• Ссылка на сайт проекта, если есть. Для неё есть поле в подразделе «О репозитории» («About»).
• Описание проекта. Какая у него цель и технические особенности.
• Инструкция по развёртыванию и системные требования, чтобы другой человек мог запустить проект.
• Планы по доработке проекта, если они есть. Они должны быть конкретными.
• Дополнительно приложите более подробную документацию к проекту, если он большой. Например, как настроить CI для запуска, список участников и похожую информацию.
• Если вы ждете контрибьюторов, расскажите как контрибьютить.

Обратите внимание на то, открыт ли репозиторий всем пользователям и всё ли хорошо с кодом. Если у проекта есть сайт, потестируйте его в разных браузерах и операционных системах.

Можете заглянуть в список с опенсорс-проектами на GitHub, чтобы понять, как лучше оформить ваш.

Разместить проект можно на GitHub Pages или через бесплатные сервисы surge или Vercel.

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

В коде важна читаемость и общее качество. Вот что подразумевается под качеством кода:

• Логика.
• Структура — дробите код на маленькие части, а не оставляйте в одном файле на много строк.
• БЭМ или любой другой подход, который помогает понятно именовать классы.
• Папки.
• Семантика.

Умение писать качественный код приходит с опытом. Об этом не было бы написано столько книг и постов в блогах, если бы отличить качественный код от некачественного было просто с первого взгляда. Вот несколько правил, которые точно не навредят качеству вашего кода:

• Старайтесь писать короткий читаемый код, взглянув на который, будет понятно, что он делает.
• Используйте общепринятые архитектурные паттерны. Придерживайтесь принципов SRP и SOLID по возможности.
• Определитесь с принципами, по которым вы будете разбивать код. Вы можете делить код на домены и компоненты, можете стараться сохранять плоскую структуру папок или создавать глубокую иерархию. Главное — выберите единый подход и придерживайтесь его.
• Используйте автоматические проверки и настройте линтеры.

Дополнительный плюс — покрытие кода тестами. Иногда это даже более важно, чем основной код. В TDD подходах или при написании кода, не связанного с UI, тесты пишут в первую очередь.

• Укажите настоящее имя.
• Добавьте актуальные контакты для связи.
• Кратко опишите кто вы в поле с биографией (bio).
• Расскажите о себе подробнее в файле README.md, ответив на вопросы:
  • Какая у вас профессия?
  • Над какими проектами работаете сейчас?
  • Какие навыки особенно хороши?
  • Какие есть интересы в профессиональной области?
  • Ищете ли сейчас работу, если да, то какую?
• Закрепите репозитории, которыми гордитесь.
• Включите отображение статистики контрибьютов, если она не пустая. Это можно сделать в настройках профиля.

Эйчар и разработчик будут оценивать один и тот же проект по разному. На что каждый из них обратит внимание?

Эйчар тратит на портфолио в среднем 30–60 секунд, поэтому нужно разместить самое главное как можно выше на странице. Их интересуют навыки, энтузиазм и подходите ли вы компании в целом по стеку и человеческим качествам. Важно, чтобы информация легко читалась, поэтому будьте осторожнее с креативом и шутками.

Обычно на оценку портфолио уходит до 30 секунд, если это не глубокое погружение. Обращают внимание на технологический стек, проекты, активность (хотя это спорный критерий). HR’ы смотрят, есть ли нужные для вакансии технологии в описании портфолио или самих проектов.

Подробно изучают README проектов и пробуют их запускать нанимающие технические специалисты.

Виктория Игнатенко,
Куратор программы акселерации
веб-факультета Практикума

Первый просмотр портфолио на Github занимает у меня 15-30 секунд, второй — 2-5 минут.

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

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

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

Анна Смирнова,
продакт-менеджер HRtech / EdTech @Practicum by Yandex

Разработчику важно понять, как вы подходите к решению задач, в чём ваши сильные и слабые стороны, а также как легко обучаетесь.

Примерная структура сайта может быть такой:

• Обо мне.
• Проекты.
• Контакты.

В разделе о себе расскажите самые важные вещи о вас. Старайтесь не писать скучно и формально. Идеально, если получится составить небольшой рассказ. Можете придерживаться примерно такой структуры повествования:

• Заголовок — как вас зовут и чем занимаетесь.
• Кто вы и чем полезны.
• Более подробно, что делаете и как это работает.
• В каких случаях к вам обращаться.
• Что именно знаете и умеете, что делает вас хорошим специалистом.
• Когда не сможете помочь.
• Миссия, стратегическая цель и интересы.

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

Можете добавить перед рассказом фото и после рассказа разместить список навыков. Лучше без очков или оценки их уровня. Это субъективно и не всегда понятно, как это трактовать.

В раздел с проектами включите как минимум два проекта, но не больше пяти. Лучше качество и глубина, чем количество.

Отбирайте проекты для портфолио на основе следующих характеристик:

• Они хорошо и наглядно иллюстрируют ваши навыки.
• Хорошо, если они решают специфические задачи. Работодатели это ценят.
• Круто, когда у проекта есть пользователи.

В проекты можно включить и ваш вклад в библиотеки или другие проекты.

Есть проекты, которые лучше вообще не включать в этот список:

• не связанные с разработкой;
• под соглашением о неразглашении (non-disclosure agreement, NDA);
• сам сайт-портфолио.

Давайте не просто ссылки на проекты, а рассказывайте о них. В рассказ можно включить несколько вещей.

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

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

Все зависит от портфолио. Как правило, просмотр занимает полчаса или час.

Первым делом я запускаю Lighthouse, чтобы визуально не искать проблемы с производительностью. Дальше я смотрю список запросов, какие среди них тяжелые и какие лишние. После этого я пробую сломать все что можно сломать — вставляя в поля форм (если таковые имеются) проверки на XSS или неожиданный инпут (например, цифры в фамилию). Это всё я делаю чтобы прочекать внимательность к деталям и скиллы работы с производительностью.

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

Но иногда я просто нахожу красивый и оригинально сделанный спецэффект (например, крутящуюся шестерёнку) и залипаю на полчаса, а потом оцениваю портфолио как отличное :)

Полина Гуртовая,
фронтенд-разработчик

Дальше можно рассказать про цели проекта. Почему сделали этот проект, что он значит для вас, какой была первоначальная задумка и любые другие первоначальные планы, которые помогут лучше понять проект.

В основной части рассказа про проект упомяните про важные фичи, что заслуживает в проекте больше всего внимания, с какими техническими проблемами столкнулись во время разработки и как их решали.

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

Опционально можно упомянуть про ваши планы и текущий статус проекта.

Рассказ хорошо дополнить скриншотами, а стиль повествования постарайтесь сделать понятным и простым.

В своём портфолио на отдельном сайте можете поэкспериментировать с дизайном, в отличие от профиля на GitHub или резюме. Постарайтесь придерживаться приятного визуального стиля, а может даже найти какие-то маленькие интересные детали, которые сделают сайт более ярким и запоминающимся.

• Портфолио разработчика: структура, наполнение, смысл, Джошуа Комо.
• Пиши, сокращай, Максим Ильяхов.
• Генератор профиля на GitHub.