Как составить идеальное портфолио разработчика: примеры и инструменты

Пользователь dev.to под ником Anastasia поделилась в блоге наиболее важными, по ее мнению, составляющими портфолио разработчика с иллюстрациями реальных примеров. Она считает, что личные страницы и резюме в LinkedIn также важны, но они фокусируются на опыте работы и не раскрывают истинную ценность разработчика, в отличие от портфолио, наличие которого поможет получить конкурентное преимущество перед теми, у кого его нет. 

Прежде чем начать

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

• Кто целевая аудитория? Вы создаете портфолио как продолжение своего резюме или как независимый веб-сайт, на котором продвигаете свои навыки, продаете свои услуги и привлекаете клиентов? Это два совершенно разных варианта использования, означающие разные подходы к созданию портфолио;
• Что она ищет? Например, есть большая вероятность, что работодатели захотят взглянуть на ваш код, в то время как потенциальных клиентов это не интересует — это позволяет с легкостью определять структуру и контент веб-сайта;
• Как будет использовать сайт-портфолио? Работодатели, скорее всего, будут заинтересованы в ваших проектах и коде, в том время как клиенты могут больше интересоваться вашими профессиональными услугами, тематическими исследованиями и вами как личностью;
• Болевые точки. Например, работодатели должны убедиться, что вы — командный игрок, соблюдающий дедлайны и работающий на качество. Добавьте в портфолио цитаты из своих рекомендательных писем, чтобы доказать потенциальным клиентам, что вы заслуживаете доверия.
• Почему вы? Почему должны выбрать вас, а не другого разработчика или целое агентство? Чем отличаетесь от других? Какие преимущества работы с вами?

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

1. Помните о целевой аудитории

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

Основная цель портфолио разработчика — произвести впечатление на посетителей своими проектами, кодом, индивидуальностью, особенностями UI- и UX-интерфейсов. 

Используйте преимущества домашней страницы

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

Чтение «по диагонали»

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

Минимум кликов

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

2. UX и UI

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

Почерпнуть вдохновение можно на таких платформах, как Behance и Dribble. Спроектировать веб-сайт, его навигацию и структуру можно с помощью Figma или Adobe XD, а затем закодировать его. 

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

Адаптация сайта под мобильное устройство

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

Оптимизация веб-сайта

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

• Оптимизировать размер изображений;
• Настроить отложенную загрузку;
• Минимизировать количество файлов JavaScript и CSS;
• Использовать кэширование веб-сайтов.

Чтобы узнать, как веб-сайт работает с точки зрения производительности, доступности, SEO и других параметров, используйте Lighthouse — расширение Google Chrome, которое дает полный аудит сайта. 

Помните о доступности

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

Вот несколько идей, как улучшить доступность веб-сайта: 

• Добавить alt-текст ко всем изображениям;
• Добавить выбор цвета;
• Добавить возможность изменения размера текста;
• Добавить возможность создания доступных форм;
• Отключить автовоспроизведение для мигающих элементов, таких как реклама и видео;
• Расшифровать аудио и видеоэлементы.

Полезные инструменты: Contrast Checker, Accessibility Developer Tools, Web Accessibility Evaluation Tool.

3. Расскажите о своих лучших работах и навыках

Поделитесь своим кодом и примерами рабочих проектов 

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

Если у вас много проектов, подумайте о навигации. Определите контекст, для которого проекты разрабатывались. Например, «коммерческий веб-сайт для маркетингового агентства» или «платформа языкового обмена до 100 тыс. пользователей». 

Если вы работали над частным проектом или разрабатывали определенные части проекта, добавьте в портфолио образцы кода, если это разрешено клиентом. Вот как это можно сделать: 

• Встраивайте или добавляйте ссылки на редакторы кода с предварительным просмотром в реальном времени;
• Добавляйте ссылки на репозитории GitHub и снабжайте их анимированными гифками;
• Загрузите видеоролик, где объясняется процесс реализации проекта.

Внештатные и личные проекты

Фриланс-проекты также являются отличным дополнением к портфолио, поскольку демонстрируют авторитет, коммуникативные навыки и навыки тайм-менеджмента. 

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

Будьте избирательны

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

Чтобы понять, что именно добавить в портфолио, задайте себе следующие вопросы: 

• Что заставляет вас гордиться этим проектом?
• Отражает ли проект ваши навыки, знания и таланты, которых не хватает в других проектах?
• Есть ли в портфолио похожие проекты? Если да, можно ли их заменить на текущий?

4. Покажите свою индивидуальность

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

Используйте кастомный домен

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

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

Вступительный абзац на главной странице

Еще одно место для выражения собственной индивидуальности. На ней можно перечислить технологический стек или написать о текущей работе.

5. Поддерживайте личный бренд

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

Поддерживайте портфолио в актуальном состоянии

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

Отзывы

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

• Добавьте цитаты из рекомендательных писем;
• Запросите и добавьте отзывы с текущего места работы;
• Добавьте отзывы от клиентов;
• Если работаете фрилансером, опубликуйте несколько тематических исследований.

Для каждого проекта рассмотрите возможность пояснения следующего: 

• Клиент: кто он и что искал;
• Проблема: какую проблему он решил с вами;
• Детали проекта: сроки, используемый стек и так далее;
• Ваша работа: что вы реализовали и почему;
• Результаты: как ваша работа повлияла на клиента.

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

6. Поддерживайте контакт

После демонстрации опыта, индивидуальности и проектов, нужно показать клиенту, как можно связаться с вами, если он заинтересован в сотрудничестве. Раздел «Контакты» должен стать точкой портфолио разработчика.

Несколько идей о том, что должно находиться на странице «Контакты»: 

• Форма обратной связи. Обратите внимание, что рекрутеры хотят связаться с вами здесь и сейчас, а не заполнять форму и ждать, когда им перезвонят;
• Адрес электронной почты. По сути, это то же самое, что и контактная форма + дополнительные усилия, чтобы открыть вкладку электронной почты;
• Телефонный номер. Лучший вариант контакта для рекрутеров и худший для общения с клиентами;
• Часы доступности. Особенно полезно при связи по телефону;
• Ссылки на соцсети. Используйте только связанные с вашей разработческой деятельностью учетные записи, такие как LinkedIn, GitHub, StackOverflow.

Хорошо составленное портфолио — это шанс быстрее продвинуться по карьерной лестнице и создать личный бренд. И, главное, не путайте резюме и портфолио: резюме — пыль в глаза, а портфолио — по делу.