Портфолио разработчика по Джошу Комо: структура, наполнение, смысл
В прошлом году Джош Комо, автор туториалов и учебных материалов для разработчиков, на своем аккаунте в Твиттере вызвался посмотреть и покритиковать сайты-портфолио всех желающих. В ходе мероприятия он заметил интересную вещь: обратная связь получалась не очень разнообразной, недоработки при оформлении портфолио у большей части начинающихся программистов оказывались примерно одни и те же. Тогда у Комо и возникла мысль о том, что неплохо бы собрать часто повторяющиеся замечания в один список. В итоге у него получился довольно обширный материал, который был оформлен в электронную книгу – она доступна на сайте автора бесплатно. Под катом вы найдете основные тезисы, рекомендации и источники, которые в ней приводятся.
Общие вопросы
Что подразумевается под портфолио разработчика?
В большинстве случаев речь идет о сайте, где представлены личные проекты, по которым можно судить о его опыте и навыках.
Нет. Далеко не все разработчики включают портфолио в резюме и далеко не все работодатели ждут такой информации. Более того, есть и такие, кто даже не станет открывать ссылку. Портфолио опционально, но оно может дать неплохое преимущество перед конкурентами и максимально наглядно показать, что вы умеете.
Разве нет других способов продемонстрировать свою работу?
Есть. В резюме сейчас часто включают, допустим, ссылки на LinkedIn или Github – ресурсы, с помощью которых тоже неплохо можно осветить свою деятельность. Преимущество сайта-портфолио в том, что он позволяет рассказать о себе в той форме, которая удобна и выгодна для вас. Нет необходимости следовать заданному формату, можно давать для каждого проекта столько контекста, сколько покажется нужным.
Для кого предназначены эти советы?
Для разработчиков-джуниоров, которым, с одной стороны, уже есть что показать, а с другой – хочется компенсировать в глазах работодателя недостаток рабочего опыта и выделиться из общей массы. Автор ориентируется, прежде всего, на фронтенд и фулстек, однако большая часть рекомендаций будет полезна также и тем, кто занимается бэкендом или мобильной разработкой.
Сколько проектов должно быть на сайте?
Оптимальное количество – от двух до пяти. Подход «чем больше, тем лучше» тут не работает – портфолио рассчитано на то, чтобы продемонстрировать самые удачные образцы работы, а не охватить всю хронологию. Если очень хочется показать побольше, по крайней мере, ранжируйте их – пусть самые лучшие висят на главной странице, а остальные открываются по клику на кат «Показать еще» или вкладку с архивом.
Если проект только один, но масштаб и качество у него достойные, допустимо добрать количество за счет чего-то менее впечатляющего: сделать простенький продукт чисто для портфолио или небольшую вариацию на тему основного (например, расширение на базе мобильного приложения), указать текущий проект с пометкой «В процессе», рассказать о какой-то деятельности, не связанной напрямую с кодом (документации, организации мероприятий для разработчиков).
Какие проекты включать нельзя?
Есть несколько категорий проектов, которые следует использовать с большой осторожностью:
Какие проекты стоит включать в первую очередь?
Помимо очевидного (хорошие и интересные), есть несколько характеристик, которые работодатели склонны ценить особенно высоко:
Структура и наполнение сайта
У сайтов-портфолио обычно не слишком разветвленная структура. По сути, она сводится к набору следующих смысловых блоков: раздел «О себе», список/сетка проектов, с развернутыми описаниями для каждого, контакты. Далее мы рассмотрим каждый из них в отдельности.
Аудитория сайтов-портфолио складывается из двух групп: специалисты по найму и разработчики. На разных этапах трудоустройства ваш сайт, вероятно, будут просматривать те и другие. Соответственно, нужно лавировать так, чтобы произвести впечатление на обе группы сразу.
Раздел «О себе» предназначен в большей степени для кадровиков. Основная его задача – сделать ваше «личное дело» хоть немного запоминающимся на фоне других. На взгляд автора, главный бич сайтов-портфолио сейчас – полная обезличенность, стремление вписаться в корпоративный стиль, который использует один и тот же структурный костяк (закончил такой-то университет, работал или работаю там-то, владею такими-то технологиями) и набор речевых клише.
Если вы беретесь писать развернутый текст для этого блока, постарайтесь добавить в него что-то оригинальное – хоть как вы пришли в разработку, хоть какая у вас философия жизни и программирования. Низшая планка для оценки оригинальности предлагается такая: если вы увидите свой текст на чужом сайте, то сразу опознаете плагиат или в первый момент подумаете, что кто-то просто рассказал о себе в тех же самых выражениях?
Разработчики редко проявляют интерес к этому разделу, так что для них лучше вынести список языков и технологий, с которыми вы работаете, куда-нибудь на видное место.
Выбирая тон своего рассказа, имейте в виду еще один момент: кадровики и разработчики смотрят на ваши мягкие навыки джуниоров сквозь разные призмы. Кадровики скорее оценят энтузиазм и увлеченность своим делом. Для разработчиков в первую очередь важна адекватная самооценка – им еще предстоит вас обучать. Поэтому, расписывая свою любовь к коду, старайтесь не впадать в излишний апломб. Если вы представляете себя как сложившегося специалиста и аса разработки, кадровики, может, и проникнутся вашей уверенностью, но будущие наставники, скорее всего, подумают, что работать с вами будет тяжело.
Проекты и их описания
Рассказ о проектах составляет центральный смысловой блок в структуре сайта. Обычно на главной странице помещается сетка или список проектов с кратким представлением каждого: название, скриншот, пара строк описания, технологический стек, ссылка на демо-версию.
Каждая такая карточка обязательно должна переводить на страницу с подробным описанием. Если информация исчерпывается перечисленными пунктами, смысл сайта-портфолио, по сути, теряется.
Рассчитывать, что продукт будет говорить за себя сам – серьезная ошибка, которую совершают многие разработчики. «Продавать» свою работу считается неуместным, поэтому дело ограничивается ссылкой на демо-версию и, в идеальном сценарии, кодовую базу – работодателю предоставляется возможность самому составить мнение.
Критических недостатков у такого подхода два. Во-первых, без вашего курирования взаимодействие посетителя сайта с продуктом становится непредсказуемым. Вам будет очень сложно заранее угадать, как будет проходить пользовательское путешествие и на каком моменте оно прервется, особенно если вы никогда не занимались UX-дизайном. Человек может просто не добраться именно до тех вещей, которыми вы больше всего гордитесь и на которые делаете ставку.
Также обстоят дела и с кодом. Ни для кого не секрет, что с точки зрения качества кодовые базы обычно неоднородны: какие-то части сделаны умно и изящно, какие-то держатся на изоленте. По воле случая, смотрящему вполне могут броситься в глаза вторые, а не первые.
Второй недостаток заключается в том, что этот подход в принципе плохо работает на конечную цель. Портфолио служит для того, чтобы рассказать о вас как о специалисте. Стоящий особняком продукт дает не так уж много информации о том, кто его делал, особенно если учесть, что знакомство с демо-версией или кодом в девяти случаях из десяти будет очень беглым. В начале статьи мы говорили о том, что личный сайт в отличие от чужих платформ дает возможность привести больше контекста. Речь здесь идет о взгляде на проект изнутри, о том, как именно происходили проектирование и разработка. Именно такая информация полезна для работодателя и наилучшим образом освещает ваши профессиональные качества.
Комо предлагает план, на который можно опираться при написании текста о проекте. Необязательно раскрывать все пункты, сосредоточьтесь на тех, о которых действительно есть что сказать.
Текущий статус – опциональная секция. Ее имеет смысл включить, если продуктом в реальности кто-то пользуется; тогда можно упомянуть, какая у него аудитория и что говорят люди. Если проект делался специально для портфолио, распространяться об этом не стоит.
Текста, скорее всего, получится довольно много – описание одного проекта может занимать две-три страницы. Чтобы повысить шансы на то, что читатель дойдет до конца, адаптируйте его под чтение по диагонали: короткие абзацы, заголовки, списки.
Как правило, в этом блоке представлена форма обратной связи. Если вам удобнее общаться по электронной почте, можно ограничиться прямой ссылкой mailto. Сюда же выносятся ссылки на страницы в соцсетях и профессиональный блог, если вы его ведете. Сейчас наметилась тенденция встраивать блог непосредственно в сайт-портфолио, но автор относится к этой идее скептически. Портфолио заточено в первую очередь под общение с работодателем – вероятность того, что он найдет время на чтение постов, крайне мала. Кроме того, вам придется особенно пристально следить за регулярностью обновлений и качеством контента.
Техническая реализация
Сначала о грустном: дизайн имеет большой вес. Контент контентом, но особенности зрительного восприятия работают без перебоев, поэтому чем красивее (даже не удобнее, именно красивее) сайт, тем более профессионально вы будете выглядеть в глазах посетителей.
Далеко не все разработчики сильны в дизайне или могут позволить себе заказной, так что оптимальным по ресурсозатратности к результату вариантом представляется использование готовых шаблонов. Самое лучшее – отобрать несколько и сделать микс из них, чтобы интерфейс смотрелся более-менее свежо.
Комо отмечает, что в ходе своего массового просмотра портфолио неоднократно сталкивался с одним и тем же популярным дизайном, просто скопированным пиксель в пиксель:
Так делать точно не надо. Даже если дизайн в открытом доступе, это оставляет неприятное ощущение вторичности и вызывает вопросы насчет легальности заимствования.
Вот ряд шаблонов, на которые можно опираться при создании дизайна:
Если вы претендуете на должность фронтендера или фуллстек-разработчика, делать сайт нужно своими силами, без nocode-решений – положение обязывает. Инструменты можно использовать любые, лучше всего те, с которыми вы хорошо знакомы, чтобы не тратить лишнего времени. Как варианты можно рассмотреть: ванильные HTML/CSS/JS, 11ty, Gatsby, Next, Jekyll. Лично от себя автор рекомендует Gatsby, не в последнюю очередь за то, что для него сделано много тем и плагинов, сильно экономящих усилия.
Очень выигрышно смотрятся на сайтах интерактивные элементы, небольшие анимации и прочие визуальные бонусы, которые оживляют просмотр. Не бойтесь добавить что-то забавное или неожиданное от себя.
В идеале это должно быть что-то в духе имяфамилияналатинице.com. При необходимости (например, если имя уже занято) можно вставить элемент code или dev. Ники использовать нежелательно, если только вы не видная персона в онлайн-сообществе.
Сайты-портфолио обычно статические, так что проблем с серверами они не создают. Для хостинга статических сайтов существует целый ряд сервисов, среди которых Комо выделяет Vercel, Netlify, Github Pages, Surge.
В дополнение к теории для наглядности Комо приводит два примера портфолио с подробным разбором. Первый – сайт Чарли Смит, вымышленного лица, который автор сделал сам, ориентируясь на типичный, усредненный образец из Сети. Второй – сайт Джулии Джонсон, студентки и стажерки IBM, который произвел на него самое приятное впечатление на фоне других, присланных подписчиками. Сравнивая один с другим, легко заметить, как они соотносятся с рекомендациями.
Сайт Чарли – невыразительный дизайн без изюминок, шаблонный рассказ о себе, краткое и поверхностное описание проектов
Сайт Джулии – более эффектный дизайн, удачная структура, сдержанный, но не безликий рассказ о себе, много элементов, оживляющих страницу, подробные описания для каждого проекта
Составляем идеальное портфолио программиста
Каким должно быть портфолио программиста? Для каждой должности оно свое, но есть общие характеристики, на которые обращают внимание работодатели.
Обычно новички стараются произвести впечатление большим портфолио. Но часто в области, которая интересует работодателя, им нечего показать. Это напрямую влияет на заработную плату и вообще на шанс того, что человека возьмут.
Рассмотрим различные варианты.
Портфолио программиста
Первое, что приходит на ум – это GitHub, и не даром: сегодня абсолютно все проекты и прогрессы по работе над ними хранятся в удобных репозиториях. Но не так сложно разобраться с Git, как с тем, чем именно забивать свой «портфель». Именно со вторым мы будем разбираться.
Во-первых, абстрагируйтесь от мысли, что задач из курсов и коротких видео-туторилов будет достаточно, дабы удовлетворить интерес работодателя. Вам придется создать что-то действительно интересное самостоятельно, без помощи книг, YouTube, преподавателя, напарника по проектам, etc.
Что это может быть?
Не заваливайте резюме всевозможными программами, которые были призваны объяснить принцип работы того или иного инструмента именно вам. Работодатель 100% знает все эти «фишки», и если уж хотите реализовать что-то, делайте это максимально емко и интересно.
По этой же причине не стоит показывать проекты «в процессе разработки», даже если они ну о-о-очень классные. Вот как закончите – смело демонстрируйте. Плюс это будет лично для вас стимулом довести начатое до конца.
Портфолио программиста должно включать в себя то, что объявлено в требованиях к вакансии. Например, если это должность Java-разработчика, и в условиях указано знание Hibernate, не поленитесь добавить в портфель соответствующую разработку. Также не упустите возможность внедрить базы данных : это неписанный закон, который актуален если не для всех, то точно для 99,99% вакансий.
Что касается последовательности работ, сделайте так, чтобы наиболее интересные работодателю находились в списке выше, поскольку первое впечатление играет важную роль, а иногда даже решающую.
Также необязательно оформлять свое резюме в Word или любом другом текстовом документе. Проявите креативность: заведите блог, в котором будут собраны ссылки на ваши работы. Если в этом блоге также будут вопросы от новичков и ваши осмысленные комментарии к ним – это огромный плюс: поверьте, такое не проигнорируют.
Портфолио веб-разработчика
Теперь переходим к самому сочному – к тому, что можно не только почитать, но и «пощупать». У веб-разработчиков в плане портфелей полное раздолье: любые знания и навыки можно продемонстрировать на личном сайте-одностраничнике либо обратиться к готовым проектам, если до этого уже был опыт работы.
Золотое правило: не позволяйте работодателю подозревать в вас только веб-дизайнера. Красивое оформление – это здорово, но в первую очередь вы показываете портфолио программиста. Продемонстрируйте, каким функционалом вы можете снабдить сайт: не почтовыми формами или еще чем-то банальным, а полноценным инструментарием.
Например, это сайт для поставщика автозапчастей, который связывается со своими клиентами не напрямую, а посредством операторов. Привяжите программу, отвечающую за звонки, к сайту, с возможностью записи времени звонка со стороны оператора в БД.
Распространенная ошибка – считать работодателя дураком. Не бойтесь описывать в портфеле технические стороны своей работы.
Например:
Это особенно важно. И только в дополнительную информацию можно внести что-то вроде:
Но все снова возвращается к требованиям работодателя, на которые необходимо обращать внимание. Например, компания ищет специалиста по программной логике, а верстка и дизайн остаются за другими. Или ситуация может быть обратной, и в требованиях будет полноценный сайт.
Что вообще может содержать в себе сайт-визитка как портфолио программиста?
Портфолио программиста фрилансера
Здесь не нужно открывать Америку, так как фриланс-сервисы уже предполагают наличие портфолио, и придумывать различные сайты-визитки не придется.
Как можно быстрее заполните свое портфолио качественными работами. Ваша сила в том, что вы можете выбрать, и если проект кажется откровенно слабеньким – просто отсейте его, предпочтя действительно интересные варианты.
Не стоит думать, что политика фриланса слишком отличается от политики стандартной занятости, особенно если речь идет о долгосрочном сотрудничестве. Пытайтесь заинтересовать, впечатлить, узнавайте подробности работы, задавая при этом максимально правильные вопросы.
Вот пример хорошего ответа на одну из фриланс-вакансий:
Разработчик с порога показывает, что знает, что умеет, и каков его приблизительный уровень. Это действительно впечатляющий ответ, подкрепив который сильным портфелем (даже просто в виде ссылок на GitHub), можно гарантированно получить должность.
Вас также могут заинтересовать другие статьи по теме:
Как оформить портфолио программисту: 10 советов
Правильно оформленное портфолио позволит программисту претендовать на вакансии с лучшими условиями или брать более дорогие проекты на фрилансе. Начинающий разработчик может испытывать проблемы с самопрезентацией. При этом основная сложность не в том, чтобы показать свои работы, а чтобы сделать это правильно и заинтересовать потенциального работодателя. Советы более опытных разработчиков, а также HR-менеджеров помогут оформить сильное портфолио для программиста.
Что важно для портфолио программиста
В первую очередь нужно обращать внимание на качество самих работ, а также то, насколько они релевантны вашим навыкам. В идеале нужно подобрать те примеры, которые отражают как ваши умения и знания, так и демонстрируют решение актуальных задач в той или иной сфере.
Также важно правильно прикладывать свое портфолио к вакансии. Не скидывать все работы скопом, а показывать конкретный проект, который наиболее релевантен текущей вакансии.
На что обращать внимание при выборе работ
Портфолио говорит не только об умениях, но и о профессиональных качествах человека. Работодатели и менеджеры крупных проектов в первую очередь обращают внимание на:
Пример читаемого кода
Базовые советы для начинающих
Перед тем, как переходить к основным советам рассмотрим самые главные ошибки новичков в оформлении портфолио:
Дальше подробно рассмотрим другие советы, которые помогут выделить ваше портфолио на фоне конкурентов.
Расскажите о себе
Да, в портфолио важны выполненные проекты, но желательно постараться разместить какую-нибудь информацию о себе. Неплохим вариантом будет создать сайт-визитку, с информацией о вас, ваших навыках и ссылками на ваши лучшие проекты. Это даст работодателям информацию о том, какой вы человек и насколько комфортно с вами будет работать. Перечисление навыков, а также адекватная оценка уровня владения ими, позволит составить полное представление о ваших умениях и возможности обучаться новому.
Пример оформления блока “О себе”
Описывая себя, не забывайте, что вы описываете в первую очередь профессионала, поэтому делайте акцент на навыках, умениях и достижениях, которыми вы гордитесь. Мимоходом можно упомянуть свои хобби, характер и жизненную позицию, но это не должно отвлекать внимание от ознакомления с портфолио.
Не перегружайте портфолио
Размещайте только самые лучшие работы и старайтесь брать качеством, а не количеством. 1-2 полностью завершенных и хорошо оформленных проекта гораздо лучше 10 сырых проектов.
Если у вас много готовых проектов, то среди них нужно выбрать самые лучшие, которые должны быть интересны вашему потенциальному работодателю. У рекрутера обычно нет времени подробно рассматривать с десяток работ. 5 хорошо оформленных работ по теме должно хватить, чтобы о вас составили впечатление как о специалисте. Если же потребуется, то вы можете предоставить дополнительные работы уже в процессе собеседования.
Демонстрируйте только лучшие работы
Блок с работами на личном сайте
Подробно опишите эти работы: используемые технологии, роль в проекте (если работали в команде), покажите исходный код, если есть возможность продемонстрируйте также процесс работы над проектом (записи, скетчи, прототипы и так далее).
Не забывайте обновлять портфолио
Рекомендуется раз в несколько месяцев пополнять портфолио новыми проектами и удалять старые. Так вы покажете, что развиваете свои навыки, пополняете свой опыт и обучаетесь новому. Также, в ходе развития умений, старые работы могут показаться вам примитивными и плохо выполненными.
Желательно примерно раз в 6-12 месяцев полностью обновлять портфолио, особенно, если вы только начинаете профессиональную деятельность. В качестве исключения можно оставить несколько успешных реальных проектов.
Поработайте над визуальным оформлением портфолио
Программист необязательно должен обладать навыками дизайна, да и работодатели этого не требуют. Однако у тех, кто оформил приятный графический интерфейс у работ в портфолио, поработал над графическим оформлением самого портфолио, больше шансов привлечь внимание рекрутера, следовательно, попасть на собеседование и получить работу.
Пример оформления портфолио
Неплохим вариантом для начинающего программиста будет создать себе сайт-визитку, где представлена основная информация, несколько наиболее релевантных работ. Оформление самого сайта можно сделать шаблонным, главное, чтобы все выглядело аккуратным и структурированным. Такой вариант портфолио подойдет тем программистам, которые больше предпочитают фриланс или проектную работу. Однако личный сайт может оказаться полезным и для новичка без реального опыта.
Комментируйте код
Если решили предоставлять в портфолио исходный код своих работ, то не поленитесь оставить комментарии. Техническим специалистам, проводящим интервью, некогда досконально разбираться в коде. Комментарии ключевых моментов позволят бегло оценить, как хорошо вы решаете задачи, плюс, покажет, что вы понимаете свой код.
Пример комментариев в коде
Наличие комментариев в коде также повышает шанс отбора вашей кандидатуры HR-менеджером. Да, они могут совершенно не понимать код, но наличие комментариев покажет, что вы прекрасно понимаете, за что отвечает тот или иной его отрезок. Этот факт будет вашим преимуществом перед другими соискателями, так как HR сочтет вас более профессиональным кандидатом и с большей вероятностью пригласит на собеседование.
Составьте техническую документацию
Помимо обычного описания у работ в портфолио нужно проработать документацию. Это касается только сложных и громоздких проектов. Сопроводите их юнит-тестами, лог-файлом и файлом в README от любого сервиса для сборки и тестирования ПО. Все это позволит выделиться на этапе собеседования с вашим будущим менеджером и коллегами.
Оставляйте контакты
Если ваше портфолио находится в открытом доступе, то продумайте в нем наличие блока с контактами. Рекрутеры время от времени могут его просматривать и, если оно их заинтересует, то смогут быстро с вами связаться. Так вы получите дополнительные приглашения на проекты, а возможно найдете работу с лучшими условиями, не прикладывая при этом усилий.
В блоке с контактами рекомендуется указать основной и альтернативный способы связи. Также напишите, когда отвечаете на сообщения, например, только в будние дни.
Используйте несколько площадок
Не нужно кидать потенциальному работодателю ссылки на свои проекты и документацию к ним. Используйте несколько площадок, на которых можно разместить свои работы. Это могут быть профессиональные сообщества, GitHub, фриланс-биржи, личный сайт или личный блог. Чем больше площадок вы задействуете, тем больше вероятность, что на вас выйдут с новым проектом или работой с лучшими условиями.
Развивайте личный бренд
Это будет больше актуально для фрилансеров и тех, кто хочет со временем начать работать на себя. Заведите личный блог в социальных сетях или создайте свой сайт. Там пишите о своей работе программистом, давайте советы коллегам, расписывайте как решаете рабочие задачи, делитесь профессиональными лайфхаками. Так на вас со временем начнет выходить больше работодателей, вы приобретете статус в профессиональном сообществе, вам будет больше доверия, следовательно, сможете претендовать на более выгодные условия.
Пример личного сайта
Ваш личный сайт и блог смогут тоже первое время послужить неплохим портфолио сами по себе. Правда, это актуально в следующих случаях:
Заключение
Необязательно соблюдать все 10 советов, хватит 6-7 пунктов. Например, не все востребованные программисты ведут свой профессиональный блог и не у всех начинающих есть возможность составить подробную техническую документацию к проектам в портфолио.
Ответственный подход к портфолио, по мере его наполнения крутыми проектами, приведет к пассивному получению офферов от работодателей. Плюс, тех, у кого грамотно представлены предыдущие работы, реже “валят” на собеседованиях и чаще соглашаются на предоставление более лучших условий.