какие сайты сделать для портфолио веб разработчика
Составляем идеальное портфолио программиста
Каким должно быть портфолио программиста? Для каждой должности оно свое, но есть общие характеристики, на которые обращают внимание работодатели.
Обычно новички стараются произвести впечатление большим портфолио. Но часто в области, которая интересует работодателя, им нечего показать. Это напрямую влияет на заработную плату и вообще на шанс того, что человека возьмут.
Рассмотрим различные варианты.
Портфолио программиста
Первое, что приходит на ум – это GitHub, и не даром: сегодня абсолютно все проекты и прогрессы по работе над ними хранятся в удобных репозиториях. Но не так сложно разобраться с Git, как с тем, чем именно забивать свой «портфель». Именно со вторым мы будем разбираться.
Во-первых, абстрагируйтесь от мысли, что задач из курсов и коротких видео-туторилов будет достаточно, дабы удовлетворить интерес работодателя. Вам придется создать что-то действительно интересное самостоятельно, без помощи книг, YouTube, преподавателя, напарника по проектам, etc.
Что это может быть?
Не заваливайте резюме всевозможными программами, которые были призваны объяснить принцип работы того или иного инструмента именно вам. Работодатель 100% знает все эти «фишки», и если уж хотите реализовать что-то, делайте это максимально емко и интересно.
По этой же причине не стоит показывать проекты «в процессе разработки», даже если они ну о-о-очень классные. Вот как закончите – смело демонстрируйте. Плюс это будет лично для вас стимулом довести начатое до конца.
Портфолио программиста должно включать в себя то, что объявлено в требованиях к вакансии. Например, если это должность Java-разработчика, и в условиях указано знание Hibernate, не поленитесь добавить в портфель соответствующую разработку. Также не упустите возможность внедрить базы данных : это неписанный закон, который актуален если не для всех, то точно для 99,99% вакансий.
Что касается последовательности работ, сделайте так, чтобы наиболее интересные работодателю находились в списке выше, поскольку первое впечатление играет важную роль, а иногда даже решающую.
Также необязательно оформлять свое резюме в Word или любом другом текстовом документе. Проявите креативность: заведите блог, в котором будут собраны ссылки на ваши работы. Если в этом блоге также будут вопросы от новичков и ваши осмысленные комментарии к ним – это огромный плюс: поверьте, такое не проигнорируют.
Портфолио веб-разработчика
Теперь переходим к самому сочному – к тому, что можно не только почитать, но и «пощупать». У веб-разработчиков в плане портфелей полное раздолье: любые знания и навыки можно продемонстрировать на личном сайте-одностраничнике либо обратиться к готовым проектам, если до этого уже был опыт работы.
Золотое правило: не позволяйте работодателю подозревать в вас только веб-дизайнера. Красивое оформление – это здорово, но в первую очередь вы показываете портфолио программиста. Продемонстрируйте, каким функционалом вы можете снабдить сайт: не почтовыми формами или еще чем-то банальным, а полноценным инструментарием.
Например, это сайт для поставщика автозапчастей, который связывается со своими клиентами не напрямую, а посредством операторов. Привяжите программу, отвечающую за звонки, к сайту, с возможностью записи времени звонка со стороны оператора в БД.
Распространенная ошибка – считать работодателя дураком. Не бойтесь описывать в портфеле технические стороны своей работы.
Например:
Это особенно важно. И только в дополнительную информацию можно внести что-то вроде:
Но все снова возвращается к требованиям работодателя, на которые необходимо обращать внимание. Например, компания ищет специалиста по программной логике, а верстка и дизайн остаются за другими. Или ситуация может быть обратной, и в требованиях будет полноценный сайт.
Что вообще может содержать в себе сайт-визитка как портфолио программиста?
Портфолио программиста фрилансера
Здесь не нужно открывать Америку, так как фриланс-сервисы уже предполагают наличие портфолио, и придумывать различные сайты-визитки не придется.
Как можно быстрее заполните свое портфолио качественными работами. Ваша сила в том, что вы можете выбрать, и если проект кажется откровенно слабеньким – просто отсейте его, предпочтя действительно интересные варианты.
Не стоит думать, что политика фриланса слишком отличается от политики стандартной занятости, особенно если речь идет о долгосрочном сотрудничестве. Пытайтесь заинтересовать, впечатлить, узнавайте подробности работы, задавая при этом максимально правильные вопросы.
Вот пример хорошего ответа на одну из фриланс-вакансий:
Разработчик с порога показывает, что знает, что умеет, и каков его приблизительный уровень. Это действительно впечатляющий ответ, подкрепив который сильным портфелем (даже просто в виде ссылок на GitHub), можно гарантированно получить должность.
Вас также могут заинтересовать другие статьи по теме:
🌐 Собираем портфолио начинающему веб-разработчику
Если вы уже отучились на веб-разработчика или только начинаете осваивать профессию, стоит задуматься о трудоустройстве. Чтобы получить хотя бы фриланс-проект, вам придется показать все свои умения.
Мы расскажем о ресурсах и инструментах, которые помогут вам самостоятельно собрать привлекательное для работодателей портфолио. Обойтись без него не получится: даже если речь идет о начальной позиции, наниматели захотят увидеть подтверждение навыков соискателя в реализованных кейсах.
В статье речь пойдет скорее об участии в проектах, которые можно будет показать в портфолио. Как его сделать – другой вопрос, ответ на который нетрудно найти (учитывайте разницу между портфолио для фрилансера и портфолио для фул-тайма), а здесь можно получить информацию по оформлению и наполнению.
Что нужно учесть приступая к работе
Где брать работы для портфолио
1. Вы наверняка делали какие-то проекты в процессе или после обучения. Бесплатные курсы иногда включают их в программу. Такое практикуется, например, в сертификации Free Code Camp или в недорогом курсе Bootcamp от Udemy. Он пропитан практикой, предоставляет возможность общаться с другими студентами и получать фидбек.
2. Сделайте сайт-визитку и реализуйте там интересные фичи:
3. Участвуйте в конкурсах и хакатонах. Даже если вы делали проект в команде, его можно положить в портфолио, указав свой вклад с доказательствами в виде скриншотов.
7. Создайте сайт по бартеру. Можно, например, помочь начинающему дизайнеру с разработкой, чтобы он помог вам с дизайном. Если таких знакомых на примете нет, предлагайте свои услуги на разных платформах: ищите людей, которые предлагают что-то в обмен на разработку. Вот несколько вариантов:
Такие проекты предполагают в основном удаленное участие, а здесь можно посмотреть еще. Другой вариант – найти небольшую некоммерческую организацию, которая недостаточно хорошо представлена в интернете или нуждается в специальных фичах.
На Code Triage собраны проекты c GitHub, которые нуждаются в помощи. Лучше отсортировать их по языку программирования.
Кроме этого подписывайтесь на интересующие вас проекты и получайте уведомления о новых issues на почту: на сайте есть подробная инструкция по взаимодействию с основанными на открытом коде разработками.
На First Timers Only можно посмотреть и другие ресурсы по open source.
Показываем, как выглядят портфолио начинающих веб-разработчиков
Проекты есть. Что дальше?
1. Регулярно пополняйте портфолио свежими работами.
2. Включайте в описание проекта ссылку на репозиторий GitHub, где клиент или работодатель смогут посмотреть ваше решение задачи через код, а не только красивую картинку. Давайте ссылки на Link to your CodePen projects.
3. Опишите, когда и для кого вы делали этот проект (даже если для мамы или в качестве эксперимента), и какие требования предъявлялись к продукту. Читателю нужно понимать, в каком контексте реализовывалось решение.
4. Самые удачные проекты ставьте в начало портфолио.
5. Подготовьте разные портфолио для фрилансерской работы и для фул-тайма. В первом случае заказчику важнее посмотреть на результат, поэтому его не очень интересуют использованные фреймворки и языки программирования. Во втором – не бойтесь описывать технические подробности реализации проекта.
Для портфолио стоит искать оригинальные решения реальных проблем, что может оказаться непростым делом. Если вы только начинаете свой путь в профессии, стоит пройти курс факультета веб-разработки онлайн-университета GeekBrains. За время обучения вы сделаете 4 достаточно серьезных работы для портфолио, а также получите возможность стажировки в открытом проекте или стартапе. К тому же у популярного онлайн-университета есть компании-партнеры, которые охотно помогают выпускникам с трудоустройством.
Портфолио разработчика по Джошу Комо: структура, наполнение, смысл
В прошлом году Джош Комо, автор туториалов и учебных материалов для разработчиков, на своем аккаунте в Твиттере вызвался посмотреть и покритиковать сайты-портфолио всех желающих. В ходе мероприятия он заметил интересную вещь: обратная связь получалась не очень разнообразной, недоработки при оформлении портфолио у большей части начинающихся программистов оказывались примерно одни и те же. Тогда у Комо и возникла мысль о том, что неплохо бы собрать часто повторяющиеся замечания в один список. В итоге у него получился довольно обширный материал, который был оформлен в электронную книгу – она доступна на сайте автора бесплатно. Под катом вы найдете основные тезисы, рекомендации и источники, которые в ней приводятся.
Общие вопросы
Что подразумевается под портфолио разработчика?
В большинстве случаев речь идет о сайте, где представлены личные проекты, по которым можно судить о его опыте и навыках.
Нет. Далеко не все разработчики включают портфолио в резюме и далеко не все работодатели ждут такой информации. Более того, есть и такие, кто даже не станет открывать ссылку. Портфолио опционально, но оно может дать неплохое преимущество перед конкурентами и максимально наглядно показать, что вы умеете.
Разве нет других способов продемонстрировать свою работу?
Есть. В резюме сейчас часто включают, допустим, ссылки на LinkedIn или Github – ресурсы, с помощью которых тоже неплохо можно осветить свою деятельность. Преимущество сайта-портфолио в том, что он позволяет рассказать о себе в той форме, которая удобна и выгодна для вас. Нет необходимости следовать заданному формату, можно давать для каждого проекта столько контекста, сколько покажется нужным.
Для кого предназначены эти советы?
Для разработчиков-джуниоров, которым, с одной стороны, уже есть что показать, а с другой – хочется компенсировать в глазах работодателя недостаток рабочего опыта и выделиться из общей массы. Автор ориентируется, прежде всего, на фронтенд и фулстек, однако большая часть рекомендаций будет полезна также и тем, кто занимается бэкендом или мобильной разработкой.
Сколько проектов должно быть на сайте?
Оптимальное количество – от двух до пяти. Подход «чем больше, тем лучше» тут не работает – портфолио рассчитано на то, чтобы продемонстрировать самые удачные образцы работы, а не охватить всю хронологию. Если очень хочется показать побольше, по крайней мере, ранжируйте их – пусть самые лучшие висят на главной странице, а остальные открываются по клику на кат «Показать еще» или вкладку с архивом.
Если проект только один, но масштаб и качество у него достойные, допустимо добрать количество за счет чего-то менее впечатляющего: сделать простенький продукт чисто для портфолио или небольшую вариацию на тему основного (например, расширение на базе мобильного приложения), указать текущий проект с пометкой «В процессе», рассказать о какой-то деятельности, не связанной напрямую с кодом (документации, организации мероприятий для разработчиков).
Какие проекты включать нельзя?
Есть несколько категорий проектов, которые следует использовать с большой осторожностью:
Какие проекты стоит включать в первую очередь?
Помимо очевидного (хорошие и интересные), есть несколько характеристик, которые работодатели склонны ценить особенно высоко:
Структура и наполнение сайта
У сайтов-портфолио обычно не слишком разветвленная структура. По сути, она сводится к набору следующих смысловых блоков: раздел «О себе», список/сетка проектов, с развернутыми описаниями для каждого, контакты. Далее мы рассмотрим каждый из них в отдельности.
Аудитория сайтов-портфолио складывается из двух групп: специалисты по найму и разработчики. На разных этапах трудоустройства ваш сайт, вероятно, будут просматривать те и другие. Соответственно, нужно лавировать так, чтобы произвести впечатление на обе группы сразу.
Раздел «О себе» предназначен в большей степени для кадровиков. Основная его задача – сделать ваше «личное дело» хоть немного запоминающимся на фоне других. На взгляд автора, главный бич сайтов-портфолио сейчас – полная обезличенность, стремление вписаться в корпоративный стиль, который использует один и тот же структурный костяк (закончил такой-то университет, работал или работаю там-то, владею такими-то технологиями) и набор речевых клише.
Если вы беретесь писать развернутый текст для этого блока, постарайтесь добавить в него что-то оригинальное – хоть как вы пришли в разработку, хоть какая у вас философия жизни и программирования. Низшая планка для оценки оригинальности предлагается такая: если вы увидите свой текст на чужом сайте, то сразу опознаете плагиат или в первый момент подумаете, что кто-то просто рассказал о себе в тех же самых выражениях?
Разработчики редко проявляют интерес к этому разделу, так что для них лучше вынести список языков и технологий, с которыми вы работаете, куда-нибудь на видное место.
Выбирая тон своего рассказа, имейте в виду еще один момент: кадровики и разработчики смотрят на ваши мягкие навыки джуниоров сквозь разные призмы. Кадровики скорее оценят энтузиазм и увлеченность своим делом. Для разработчиков в первую очередь важна адекватная самооценка – им еще предстоит вас обучать. Поэтому, расписывая свою любовь к коду, старайтесь не впадать в излишний апломб. Если вы представляете себя как сложившегося специалиста и аса разработки, кадровики, может, и проникнутся вашей уверенностью, но будущие наставники, скорее всего, подумают, что работать с вами будет тяжело.
Проекты и их описания
Рассказ о проектах составляет центральный смысловой блок в структуре сайта. Обычно на главной странице помещается сетка или список проектов с кратким представлением каждого: название, скриншот, пара строк описания, технологический стек, ссылка на демо-версию.
Каждая такая карточка обязательно должна переводить на страницу с подробным описанием. Если информация исчерпывается перечисленными пунктами, смысл сайта-портфолио, по сути, теряется.
Рассчитывать, что продукт будет говорить за себя сам – серьезная ошибка, которую совершают многие разработчики. «Продавать» свою работу считается неуместным, поэтому дело ограничивается ссылкой на демо-версию и, в идеальном сценарии, кодовую базу – работодателю предоставляется возможность самому составить мнение.
Критических недостатков у такого подхода два. Во-первых, без вашего курирования взаимодействие посетителя сайта с продуктом становится непредсказуемым. Вам будет очень сложно заранее угадать, как будет проходить пользовательское путешествие и на каком моменте оно прервется, особенно если вы никогда не занимались UX-дизайном. Человек может просто не добраться именно до тех вещей, которыми вы больше всего гордитесь и на которые делаете ставку.
Также обстоят дела и с кодом. Ни для кого не секрет, что с точки зрения качества кодовые базы обычно неоднородны: какие-то части сделаны умно и изящно, какие-то держатся на изоленте. По воле случая, смотрящему вполне могут броситься в глаза вторые, а не первые.
Второй недостаток заключается в том, что этот подход в принципе плохо работает на конечную цель. Портфолио служит для того, чтобы рассказать о вас как о специалисте. Стоящий особняком продукт дает не так уж много информации о том, кто его делал, особенно если учесть, что знакомство с демо-версией или кодом в девяти случаях из десяти будет очень беглым. В начале статьи мы говорили о том, что личный сайт в отличие от чужих платформ дает возможность привести больше контекста. Речь здесь идет о взгляде на проект изнутри, о том, как именно происходили проектирование и разработка. Именно такая информация полезна для работодателя и наилучшим образом освещает ваши профессиональные качества.
Комо предлагает план, на который можно опираться при написании текста о проекте. Необязательно раскрывать все пункты, сосредоточьтесь на тех, о которых действительно есть что сказать.
Текущий статус – опциональная секция. Ее имеет смысл включить, если продуктом в реальности кто-то пользуется; тогда можно упомянуть, какая у него аудитория и что говорят люди. Если проект делался специально для портфолио, распространяться об этом не стоит.
Текста, скорее всего, получится довольно много – описание одного проекта может занимать две-три страницы. Чтобы повысить шансы на то, что читатель дойдет до конца, адаптируйте его под чтение по диагонали: короткие абзацы, заголовки, списки.
Как правило, в этом блоке представлена форма обратной связи. Если вам удобнее общаться по электронной почте, можно ограничиться прямой ссылкой mailto. Сюда же выносятся ссылки на страницы в соцсетях и профессиональный блог, если вы его ведете. Сейчас наметилась тенденция встраивать блог непосредственно в сайт-портфолио, но автор относится к этой идее скептически. Портфолио заточено в первую очередь под общение с работодателем – вероятность того, что он найдет время на чтение постов, крайне мала. Кроме того, вам придется особенно пристально следить за регулярностью обновлений и качеством контента.
Техническая реализация
Сначала о грустном: дизайн имеет большой вес. Контент контентом, но особенности зрительного восприятия работают без перебоев, поэтому чем красивее (даже не удобнее, именно красивее) сайт, тем более профессионально вы будете выглядеть в глазах посетителей.
Далеко не все разработчики сильны в дизайне или могут позволить себе заказной, так что оптимальным по ресурсозатратности к результату вариантом представляется использование готовых шаблонов. Самое лучшее – отобрать несколько и сделать микс из них, чтобы интерфейс смотрелся более-менее свежо.
Комо отмечает, что в ходе своего массового просмотра портфолио неоднократно сталкивался с одним и тем же популярным дизайном, просто скопированным пиксель в пиксель:
Так делать точно не надо. Даже если дизайн в открытом доступе, это оставляет неприятное ощущение вторичности и вызывает вопросы насчет легальности заимствования.
Вот ряд шаблонов, на которые можно опираться при создании дизайна:
Если вы претендуете на должность фронтендера или фуллстек-разработчика, делать сайт нужно своими силами, без nocode-решений – положение обязывает. Инструменты можно использовать любые, лучше всего те, с которыми вы хорошо знакомы, чтобы не тратить лишнего времени. Как варианты можно рассмотреть: ванильные HTML/CSS/JS, 11ty, Gatsby, Next, Jekyll. Лично от себя автор рекомендует Gatsby, не в последнюю очередь за то, что для него сделано много тем и плагинов, сильно экономящих усилия.
Очень выигрышно смотрятся на сайтах интерактивные элементы, небольшие анимации и прочие визуальные бонусы, которые оживляют просмотр. Не бойтесь добавить что-то забавное или неожиданное от себя.
В идеале это должно быть что-то в духе имяфамилияналатинице.com. При необходимости (например, если имя уже занято) можно вставить элемент code или dev. Ники использовать нежелательно, если только вы не видная персона в онлайн-сообществе.
Сайты-портфолио обычно статические, так что проблем с серверами они не создают. Для хостинга статических сайтов существует целый ряд сервисов, среди которых Комо выделяет Vercel, Netlify, Github Pages, Surge.
В дополнение к теории для наглядности Комо приводит два примера портфолио с подробным разбором. Первый – сайт Чарли Смит, вымышленного лица, который автор сделал сам, ориентируясь на типичный, усредненный образец из Сети. Второй – сайт Джулии Джонсон, студентки и стажерки IBM, который произвел на него самое приятное впечатление на фоне других, присланных подписчиками. Сравнивая один с другим, легко заметить, как они соотносятся с рекомендациями.
Сайт Чарли – невыразительный дизайн без изюминок, шаблонный рассказ о себе, краткое и поверхностное описание проектов
Сайт Джулии – более эффектный дизайн, удачная структура, сдержанный, но не безликий рассказ о себе, много элементов, оживляющих страницу, подробные описания для каждого проекта
Какие годные идеи проектов для портфолио веб-разработчика вы знаете?
Если бы я искал для себя программиста, то меня бы порадовало в его портфолио следующее:
1) Знание математики [ лучший способ доказать сделать 3D объекты в 2D].
2) Алгоритмное мышление [ работа с древовидными списками и реализация наиболее эффективных алгоритмов сортировки, так же нужно показать что Вы умеете работать с пикселями и цветом создав собственный эффект для Bitmap ].
3) Должны доказать, что с Вами можно объяснятся на языке программирования, то есть Вы должны доказать, что знаете около двадцети паттернов проектирования.
4) Доказательство знания пяти++ языков программирования.
5) Код в репе, чтобы показать, что Вы умеете хорошо документировать и названия свойств у Вам не etoNetFantazei.
Вот, и скрывать здесь нечего. Если Вы этого не знаете и не умеете,
тогда, кто Вы?
vasIvas: Можно на 42.5 языках написать хелов ворд, изучит 28 паттернов, а можно на C# рассказывать о плюсах и минусах Reflection и особенностях использования IQueryable в плане оптимизации производительности Linq выборок. На с++ самостоятельно написать умные указатели с подсчетом ссылок, для того чтобы объяснить молодому коллеге, что такое указатель, и почему важно освобождать используемую память, и как проще это реализовать, чтобы об этом постоянно не беспокоится. В данном конкретном случае указать, что Абстрактная фабрика, будет перебор, так как всего (и в обозримом будущем) надо будет конструировать всего 2 класса, с чем легко справится простой if, вместо дополнительной обвязки в виде класса фабрики, что 8 синглтон, на проект это уже как то чересчур, и наверное изначальная архитектура имела брешь, раз такое всплыло..
Количество языков для программиста, это не то мерило которым стоит мерятся. Глубина каждого языка практически недосягаема. А хеловорды писать на разных языках.. сможет любой, кто достиг просветления хотя бы в одном.
Alexander Sydorenko: разве собственная реализация алгоритмов сортировки, это не углубленное знание и не его ли демонстрация?
Или Вы выбирали бы сотрудников по количеству сайтов, которые они сверстали на чужих движках с использованием чужих компонентов и библиотек?
По этому я и предлагаю делать акцент на алгоритмах, а не на библиотеках, которые сортируют по этим алгоритмам и предлагаю создавать эффекты, а не показывать, как готовый эффект в страничку встроили.
А знание паттернов. Разве их может знать КОДЕР?
Кодер не знает алгоритмов, он не умеет создавать эффекты, он не знает паттернов. Кодер это тот, кто работает с готовым.
Но да, если бы я желал автору быть кодером, то да, не слушайте мой совет.