7 портфолио разработчиков: примеры для вдохновения
Эти интересные онлайн-портфолио программистов могут стать прекрасным стимулом для творчества. Мы уверены, что вы почерпнете здесь достаточно идей, как можно оригинально оформить свой сайт.
1. Бруно Саймон
Когда начинаешь смотреть сайт Бруно Саймона, время будто останавливается – настолько здесь все впечатляет. Для навигации используется машина, с помощью которой можно сигналить, взаимодействовать с разными объектами и даже катать шары в боулинге.
2. Робби Леонарди
Этот разработчик может похвалиться множеством наград в области CSS, и уровень его мастерства сразу становится очевидным, стоит только открыть это интерактивное портфолио . Резюме представлено в игровой форме, поэтому его очень интересно изучать.
3. Мэтью Фарли
Начав путь дизайнером, Мэтт продолжал совершенствоваться и включил в свою деятельность дополнительно не только фронтенд-разработку, но и наставничество. У него сайт оформлен очень достойно: информация подана в красивых формах со стильными иллюстрациями.
4. Риккардо Занутта
Этот разработчик наполнил свое портфолио лаконичными и динамичными формами. Всю информацию он удобно разбил на слайды, а также предусмотрел светлый и темный режимы просмотра.
5. Шон Халпин
Если вы поклонник минимализма, резюме Шона вам точно придется по душе. Примеры своих работ он разместил на карточках и добавил к ним ненавязчивую анимацию.
6. Рафаэль Каферати
Самый интерактивный сайт-портфолио в нашей подборке! Фишка главной страницы Рафаэля заключается в том, что ее можно уничтожить после прочтения и сыграть в простую игру, зарабатывая баллы, а потом сравнить свой результат с рекордами других игроков.
7. Яцек Езнах
Этот запоминающийся сайт-резюме принадлежит Front-End разработчику. Яцек добавил музыкальное сопровождение и красивую анимацию для букв: во время введения они подпрыгивают.
Какое портфолио впечатлило вас больше всего? Делитесь своим мнением в комментариях!
Больше интересных новостей
Лучшие библиотеки React: ТОП-7
Почему компьютер зависает? Что нужно делать?
JavaScript фреймворки / Какой учить в 2018 году?
Худшие (и при этом самые популярные) пароли: Топ-10 за 10 лет
Как составить портфолио начинающему программисту
Для большинства разработчиков портфолио — аккаунт на GitHub. Если вы занимаетесь формированием личного бренда, есть и другие варианты: сайт, блог или ютуб-канал.
Не храните на аккаунте только один проект с онлайн-курсов или по туториалам. Переработайте его, добавьте что-то своё, но не забывайте про паттерны и парадигмы. Укажите в README, что и почему модернизировали.
Один проект ≠ Портфолио
Больше всего ценятся pet-проекты, которые сделаны с нуля, поддерживаются и используются в продакшене. Одному и без опыта сделать их будет сложно, но в этом и смысл. Выберите тему, которая вам нравится. Например, кошки — создайте симулятор для котиков, которые будут лапкой ловить мышь. Если вы сейчас делаете ремонт, сделайте приложение для контроля выполнения работ или агрегатор скидок на строительные материалы в вашем городе. При реализации проекта с нуля вам помогут различные template/layout репозитории по нужному направлению. Их можно взять за основу.
Также не помешают личные эксперименты в разработке. Например, свой язык программирования или фреймворк ? Вы не только расширите портфолио, но и разберётесь, как всё устроено под капотом.
Большим бонусом в портфолио будет участие в опенсорс-проектах. Можно начать с утилит и фреймворков, которыми пользуетесь. Наверняка среди них найдутся проекты, открытые для новичков. Это принесёт не только опыт, но и полезные знакомства.
Как портфолио поможет при устройстве на работу
Собственные проекты в дополнение к тестовому повысят вероятность попасть на собеседование. Само их наличие в портфолио — уже преимущество: вместо стандартных вопросов на собеседовании техлид может пробежаться по вашему коду и аспектам, которые его заинтересуют.
При устройстве на работу вам могут предложить выполнить тестовое задание. Даже если есть готовые проекты. Как правило, это связано со спецификой проектов компании, а не потому что портфолио плохое. Ваш потенциальный техлид хочет увидеть, справитесь ли вы с технологиями и методами, которые используют они.
Также будьте готовы, что посмотрят и другие ваши репозитории. Обратят внимание на соблюдение git-flow, вашу вовлечённость и регулярную поддержку пет-проекта.
Если претендуете на высокие позиции, актуальный аккаунт тоже не повредит. Если текущие проекты под NDA, то попробуйте их обезличить. Так вы можете избавить себя от технических вопросов и свести собеседование к разговору по интересам.
В итоге
Как составить портфолио начинающему разработчику, чтобы оно приносило пользу:
- держите портфолио в актуальном состоянии;
- добавьте pet-проекты, по которым оценят опыт, целостный подход, архитектуру, best-practice, CI/CD и инфраструктуру;
- включите экспериментальные проекты и мелкие утилиты, участие в опенсорс-проектах;
- дополните всем, что покажет ваши интересы, стремление к развитию и кругозор.
Портфолио разработчика. Все секреты
Портфолио — это важный инструмент для любого разработчика, особенно для начинающего. Оно показывает ваши навыки, опыт и квалификацию, привлекает внимание работодателей и повышает шансы на получение оффера мечты.
Каким должно быть в портфолио
Портфолио должно дополнять резюме, показывая, что умеет специалист. Оно нарабатывается постепенно и первое время может состоять только из учебных проектов. Со временем, когда опыта будет больше, портфолио нужно обновлять: добавлять новые учебные и коммерческие проекты.
�� GitHub и GitLab — наиболее удобные площадки для оформления портфолио.
Важно правильно прикладывать портфолио к отклику на вакансию — давать только одну ссылку, которая ведёт на страницу со всеми проектами. На этой странице должны быть ссылки на макет, код, описание и опубликованную версию приложения или сайта. Сами проекты нужно подбирать так, чтобы они включали технологии и навыки, указанные в вакансии. Например, если в объявлении указано, что требуется разработчик со знанием Sass, то хотя бы в одном из проектов должен использоваться этот препроцессор.
Что добавить в портфолио
Название профиля. Не пишите нестандартные и несерьёзные названия. Портфолио — это ваш рабочий инструмент, в нём креатив излишен.
Личная информация. Обязательно добавьте имя, контакты и навыки, загрузите фото.
Рабочие и личные проекты. Для каждого проекта в файле Readme составьте краткое описание: что это, какие технологии вы использовали, какие проблемы решали и какие результаты получили. Идеально, если у проекта есть опубликованная версия.
�� Если у вас есть проекты под NDA и вы не можете выложить работу целиком, добавьте только лучшие кусочки кода. Пусть они покажут ваше умение справляться со сложными задачами.
По умолчанию проект должен быть доступным. Если в нём есть автоматизация и проект можно собрать, добавьте список команд для сборки.
Пока вы в поисках работы, портфолио нужно постоянно обновлять — добавлять новые работы и проекты. Когда потенциальный работодатель просматривает профиль, ему важно видеть, что вы поддерживаете страницу в актуальном виде.
Что не нужно добавлять в портфолио
Неудачные работы. Не добавляйте проекты, если не уверены в них. Показывайте только самое успешное и интересное, ведь на просмотр вашего портфолио у HR-специалиста не так много времени. Если вы работаете над проектом прямо сейчас, укажите это в описании.
Чужие проекты. Добавляйте только свои работы или работы, в которых участвовали. Если даёте ссылку на большой совместный проект и часть кода или дизайн делали не вы, напишите об этом в комментариях. Хорошая практика — добавить ссылки на написанный вами код и коммиты.
Сразу всё, над чем вы работали. Не добавляйте слишком много проектов. Лучше выбрать несколько самых сильных работ, чем показать, как много всего вы успели сделать.
Неактуальные проекты. Если ранее вы работали на другом стеке (например, для фронтендера неактуален язык С++), не добавляйте примеры таких работ. Можно оставить ссылку на отдельное портфолио на этом языке. Это может быть важным для будущего работодателя и станет вашим преимуществом при отборе.
Материалы по теме
- Как оформить профиль в LinkedIn
- Как попасть в компанию мечты, если там закрыты все вакансии
- Как написать хорошее сопроводительное письмо
- Как легко выполнить тестовое задание
- Стартапы и большие компании. Что выбрать для работы
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
10 правил онлайн-собеседований
В мире, полном удалённых работ и учёб, есть много нюансов, о которых легко забыть на онлайн-собеседовании. Делимся по своему опыту:
- 9 октября 2023
8 шагов, чтобы получать 200 тысяч за код
Сохраните в закладки сейчас, скажете спасибо через год. Сначала шаги, в конце каждого этапа — ссылки для внеклассного чтения.
- 12 июня 2023
Верстальщик. Гайд по профессии
В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.
Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.
Сейчас же грань размылась — теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.
В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флексов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.
С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2023 году требуют от верстальщика работодатели.
Мы в HTML Academy работаем над тем, чтобы верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.
- 8 июня 2023
Веб-разработка. С чего начать
На старте бывает непонятно, какой язык программирования выбрать первым. На самом деле, нет идеального языка, который раз и навсегда определит вашу карьеру. Освоить новый язык программирования — всё равно что выучить ещё один иностранный. Сначала надо определиться, что вам больше подходит: фронтенд или бэкенд.
- 2 июня 2023
Как устроиться туда, где закрыты все вакансии
Если вы мечтаете работать в определённой компании, но не нашли вакансий на сайтах по поиску работы — ещё не всё потеряно. Проверьте объявления на других площадках. Если и там ничего нет, воспользуйтесь «обходными путями»: начните со стажировки или познакомьтесь с рекрутёром.
- 14 февраля 2023
Хочу работать в IT, но…
Изучать что-то новое всегда — волнительное и завораживающее событие. Но некоторые останавливаются, даже не начав. Почему так происходит? По разным причинам, но бывают случаи, что из-за мыслей «ещё рано», «уже поздно», «нет технического образования», «не знаю английский». Мы покажем на примерах, что возраст, наличие образования и знание английского — не проблема для смены профессии.
- 19 января 2023
Как стать фулстек-разработчиком
В отличие от фронтендеров и бэкендеров, фулстек-разработчик способен полностью самостоятельно создать сайт или приложение. Такой специалист отлично разбирается в технологиях, базах данных, серверах, умеет разрабатывать веб-приложения и сайты, знает как фронтенд, так и бэкенд. Давайте узнаем, в чём преимущества профессии, насколько она востребована на рынке и как стать топовым специалистом.
Фулстек-разработчик сочетает несколько направлений и может заменить собой пару более узких специалистов. Главная его особенность — это универсальность. Именно поэтому спрос на таких специалистов всегда есть и постоянно растёт. Многим компаниям выгоднее нанять одного универсального разработчика, чем содержать штат программистов.
Топовых фулстек-разработчиков очень мало, они востребованы и имеют возможность выбирать из ряда предложений то, что им интересно. Джуны с небольшим опытом в сфере фулстек-разработки могут рассчитывать на зарплату от 30 до 100 000 ₽ в месяц. Опытный разработчик получает в среднем вдвое больше — 120—200 000 ₽.
�� Что должен уметь топовый фулстек-разработчик:
- Понимать полный цикл процесса разработки.
- Уверенно знать современный JavaScript (ECMAScript), применять TypeScript.
- Строить архитектуру клиентских и серверных приложений.
- Применять ООП и паттерны проектирования на практике.
- Проектировать и разрабатывать REST API.
- Проводить автоматизированное тестирование фронтенда и бэкенда.
- Работать с базами данных.
Зарплаты фулстек-направления
Исследования компании Хабр Карьеры за 2022 год говорят, что средняя зарплата разработчиков в России составляет 140 000 ₽. Сумма немного различается по регионам. В Москве зарплата подросла за год и составляет 180 000 ₽, в Санкт-Петербурге осталась на уровне начала года — 150 000.
Зарплата фулстек-разработчика в среднем составляет 200 000 ₽ в Москве, 160 000 ₽ в Санкт-Петербурге и 130 000 ₽ в регионах.
Этот анализ зарплат составлен по вакансиям сайта hh.ru.
Также специальность фулстек ценится за границей, зарплаты в Европе и в Америке очень достойные. В Нью-Йорке опытный фулстек зарабатывает 3000—3500 $. В Германии работодатели указывают в вакансиях зарплату 2500—4000 $.
Изучив вакансии и уровень дохода, скорее хочется прокачать навыки и стать фулстек-разработчиком. Что же для этого нужно?
- 20 декабря 2022
Как написать хорошее сопроводительное письмо
Вот вы нашли подходящую вакансию и уже готовы откликнуться — осталось только написать сопроводительное письмо. Оно дополнит резюме и поможет вам выделиться среди остальных кандидатов.
- 14 декабря 2022
К чему готовиться на IT-собеседовании
Перед первым собеседованием фронтендеры часто сидят и переживают — а что будут спрашивать? А как себя вести? А нужно знать всё-всё или достаточно конкретных вещей?
Короткий ответ — всегда и везде по-разному, угадать тяжело. Некоторые компании составляют собственные уникальные задания, другие берут списки популярных вопросов из интернета. Как повезёт.
Чтобы хоть как-то помочь вам, мы поговорили с коллегами из компаний Affinage и Takeoff-staff, компании Pitch, студии Лепёхина и веб-студии Thmoon. Они рассказали, что спрашивают на собеседованиях, как у них проходит тестовое задание и нужно ли фронтендеру уметь вообще всё, чтобы найти работу.
- 1 декабря 2022
Как легко выполнить тестовое задание
Волнуетесь, когда выполняете тестовое задание? Или быстро щёлкаете тестовые как орешки, но долго не получаете оффер? Давайте разберёмся, что важно знать при выполнении тестового задания и каких ошибок лучше избежать, чтобы получить оффер своей мечты.
- 30 ноября 2022
Как оформить портфолио программисту: 10 советов
Правильно оформленное портфолио позволит программисту претендовать на вакансии с лучшими условиями или брать более дорогие проекты на фрилансе. Начинающий разработчик может испытывать проблемы с самопрезентацией. При этом основная сложность не в том, чтобы показать свои работы, а чтобы сделать это правильно и заинтересовать потенциального работодателя. Советы более опытных разработчиков, а также HR-менеджеров помогут оформить сильное портфолио для программиста.
Что важно для портфолио программиста
В первую очередь нужно обращать внимание на качество самих работ, а также то, насколько они релевантны вашим навыкам. В идеале нужно подобрать те примеры, которые отражают как ваши умения и знания, так и демонстрируют решение актуальных задач в той или иной сфере.
Также важно правильно прикладывать свое портфолио к вакансии. Не скидывать все работы скопом, а показывать конкретный проект, который наиболее релевантен текущей вакансии.
На что обращать внимание при выборе работ
Портфолио говорит не только об умениях, но и о профессиональных качествах человека. Работодатели и менеджеры крупных проектов в первую очередь обращают внимание на:
- Составленное описание проекта. Здесь желательно расписать, что это за проект и какие задачи решает, какие технологии при его разработке использовались.
- Количество проектов и их обновление. Если в портфолио мало проектов, а обновления не происходили по несколько месяцев, то это может произвести впечатление, что специалист невостребован.
- Читаемость кода. Написанный код, в идеале, должен пониматься будущей командой разработчиков, с которой вы будете работать, без проблем. Еще лучше, если его на базовом уровне сможет понять даже человек, не разбирающийся в программировании.
- Внимание к деталям. По тому, насколько проработаны детали в представленных проектах можно сложить представление, справится ли кандидат с задачами конкретной вакансии.
Пример читаемого кода
Базовые советы для начинающих
Перед тем, как переходить к основным советам рассмотрим самые главные ошибки новичков в оформлении портфолио:
- в качестве портфолио приводятся работы с курсов. Такие примеры могут подойти для взятия задач на фрилансе из средней ценовой категории, но только при условии, что курсы были действительно качественные с продолжительной практикой. Лучше всего на основании полученного опыта сделать собственный проект для портфолио;
- используйте профессиональные среды для демонстрации или показывайте готовый проект. Не нужно отправлять работы архивом или ссылкой на облачные сервисы. Лучше всего для этого использовать профессиональные ресурсы, например, GitHub или демонстрировать уже работающий проект;
- не показывайте сырые или вовсе не готовые продукты. Даже если проект, который вы хотите показать в портфолио может быть интересен заказчику или работодателю, но еще не готов, то лучше показать какой-то другой. Еще, как вариант, можно скинуть сырой проект, предварительно указав, что он пока находится на стадии разработки, но вместе с ним 1-2 уже нормально функционирующих.
Дальше подробно рассмотрим другие советы, которые помогут выделить ваше портфолио на фоне конкурентов.
Расскажите о себе
Да, в портфолио важны выполненные проекты, но желательно постараться разместить какую-нибудь информацию о себе. Неплохим вариантом будет создать сайт-визитку, с информацией о вас, ваших навыках и ссылками на ваши лучшие проекты. Это даст работодателям информацию о том, какой вы человек и насколько комфортно с вами будет работать. Перечисление навыков, а также адекватная оценка уровня владения ими, позволит составить полное представление о ваших умениях и возможности обучаться новому.
Пример оформления блока “О себе”
Описывая себя, не забывайте, что вы описываете в первую очередь профессионала, поэтому делайте акцент на навыках, умениях и достижениях, которыми вы гордитесь. Мимоходом можно упомянуть свои хобби, характер и жизненную позицию, но это не должно отвлекать внимание от ознакомления с портфолио.
Не перегружайте портфолио
Размещайте только самые лучшие работы и старайтесь брать качеством, а не количеством. 1-2 полностью завершенных и хорошо оформленных проекта гораздо лучше 10 сырых проектов.
Если у вас много готовых проектов, то среди них нужно выбрать самые лучшие, которые должны быть интересны вашему потенциальному работодателю. У рекрутера обычно нет времени подробно рассматривать с десяток работ. 5 хорошо оформленных работ по теме должно хватить, чтобы о вас составили впечатление как о специалисте. Если же потребуется, то вы можете предоставить дополнительные работы уже в процессе собеседования.
Демонстрируйте только лучшие работы
Выносите на первые позиции в портфолио только лучшие проекты — наиболее хорошо проработанные, имеющие понятную документацию и, желательно, реальное применение. Те проекты, которые вы решили вынести на первые позиции в своем портфолио должны наглядно демонстрировать ваши способности программирования и разработки.
Блок с работами на личном сайте
Подробно опишите эти работы: используемые технологии, роль в проекте (если работали в команде), покажите исходный код, если есть возможность продемонстрируйте также процесс работы над проектом (записи, скетчи, прототипы и так далее).
Не забывайте обновлять портфолио
Рекомендуется раз в несколько месяцев пополнять портфолио новыми проектами и удалять старые. Так вы покажете, что развиваете свои навыки, пополняете свой опыт и обучаетесь новому. Также, в ходе развития умений, старые работы могут показаться вам примитивными и плохо выполненными.
Желательно примерно раз в 6-12 месяцев полностью обновлять портфолио, особенно, если вы только начинаете профессиональную деятельность. В качестве исключения можно оставить несколько успешных реальных проектов.
Поработайте над визуальным оформлением портфолио
Программист необязательно должен обладать навыками дизайна, да и работодатели этого не требуют. Однако у тех, кто оформил приятный графический интерфейс у работ в портфолио, поработал над графическим оформлением самого портфолио, больше шансов привлечь внимание рекрутера, следовательно, попасть на собеседование и получить работу.
Пример оформления портфолио
Неплохим вариантом для начинающего программиста будет создать себе сайт-визитку, где представлена основная информация, несколько наиболее релевантных работ. Оформление самого сайта можно сделать шаблонным, главное, чтобы все выглядело аккуратным и структурированным. Такой вариант портфолио подойдет тем программистам, которые больше предпочитают фриланс или проектную работу. Однако личный сайт может оказаться полезным и для новичка без реального опыта.
Комментируйте код
Если решили предоставлять в портфолио исходный код своих работ, то не поленитесь оставить комментарии. Техническим специалистам, проводящим интервью, некогда досконально разбираться в коде. Комментарии ключевых моментов позволят бегло оценить, как хорошо вы решаете задачи, плюс, покажет, что вы понимаете свой код.
Пример комментариев в коде
Наличие комментариев в коде также повышает шанс отбора вашей кандидатуры HR-менеджером. Да, они могут совершенно не понимать код, но наличие комментариев покажет, что вы прекрасно понимаете, за что отвечает тот или иной его отрезок. Этот факт будет вашим преимуществом перед другими соискателями, так как HR сочтет вас более профессиональным кандидатом и с большей вероятностью пригласит на собеседование.
Составьте техническую документацию
Помимо обычного описания у работ в портфолио нужно проработать документацию. Это касается только сложных и громоздких проектов. Сопроводите их юнит-тестами, лог-файлом и файлом в README от любого сервиса для сборки и тестирования ПО. Все это позволит выделиться на этапе собеседования с вашим будущим менеджером и коллегами.
Оставляйте контакты
Если ваше портфолио находится в открытом доступе, то продумайте в нем наличие блока с контактами. Рекрутеры время от времени могут его просматривать и, если оно их заинтересует, то смогут быстро с вами связаться. Так вы получите дополнительные приглашения на проекты, а возможно найдете работу с лучшими условиями, не прикладывая при этом усилий.
В блоке с контактами рекомендуется указать основной и альтернативный способы связи. Также напишите, когда отвечаете на сообщения, например, только в будние дни.
Используйте несколько площадок
Не нужно кидать потенциальному работодателю ссылки на свои проекты и документацию к ним. Используйте несколько площадок, на которых можно разместить свои работы. Это могут быть профессиональные сообщества, GitHub, фриланс-биржи, личный сайт или личный блог. Чем больше площадок вы задействуете, тем больше вероятность, что на вас выйдут с новым проектом или работой с лучшими условиями.
Развивайте личный бренд
Это будет больше актуально для фрилансеров и тех, кто хочет со временем начать работать на себя. Заведите личный блог в социальных сетях или создайте свой сайт. Там пишите о своей работе программистом, давайте советы коллегам, расписывайте как решаете рабочие задачи, делитесь профессиональными лайфхаками. Так на вас со временем начнет выходить больше работодателей, вы приобретете статус в профессиональном сообществе, вам будет больше доверия, следовательно, сможете претендовать на более выгодные условия.
Пример личного сайта
Ваш личный сайт и блог смогут тоже первое время послужить неплохим портфолио сами по себе. Правда, это актуально в следующих случаях:
- позиционируете себя как веб-разработчик;
- сайт сделан вами самостоятельно, а не на готовых шаблонах;
- это не статичный сайт — у него есть админка, обработчик форм, подключение к базам данным.
Заключение
Необязательно соблюдать все 10 советов, хватит 6-7 пунктов. Например, не все востребованные программисты ведут свой профессиональный блог и не у всех начинающих есть возможность составить подробную техническую документацию к проектам в портфолио.
Ответственный подход к портфолио, по мере его наполнения крутыми проектами, приведет к пассивному получению офферов от работодателей. Плюс, тех, у кого грамотно представлены предыдущие работы, реже “валят” на собеседованиях и чаще соглашаются на предоставление более лучших условий.