Как сделать портфолио для программиста

Как новичку в ИТ собрать первое портфолио

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Менеджер программ трудоустройства и акселерации «Яндекс.Практикума»

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

Менеджер программ трудоустройства и акселерации «Яндекс.Практикума» Рита Головко рассказывает, для чего нужно портфолио и как начинающим карьеру в ИТ его составить.

Как портфолио помогает в поиске работы

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

В целом портфолио ― удобный инструмент для обеих сторон. Для специалиста оно служит подтверждением его практических навыков и доказательством опыта. Начиная с junior+/middle-позиций оно позволяет пассивно искать работу и снимает какую-то часть вопросов на тестовых заданиях. Работодателю портфолио помогает убедиться, что он получает не просто теоретика, который знает про все инструменты, но никогда не применял их на практике, а человека, который уже умеет что-то делать своими руками. Получается, портфолио отсеивает тех, кто рвётся в ИТ, просто прочитав несколько статей.

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

Для каких направлений в ИТ портфолио обязательно

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

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

Как составить портфолио

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

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

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

Главный вопрос для новичка в ИТ ― чем заполнить портфолио. Обычно в вакансиях даже на стартовые позиции требуется иметь уже два-три законченных проекта. И если дизайнерам проще найти проекты (те же фриланс-заказы), то у начинающих разработчиков вопрос о том, где искать проекты и идеи для них, возникает чаще, и фриланс далеко не всегда подходит.

Что делать:

Какие проекты не подойдут

Не стоит добавлять в портфолио всё подряд — это может вызвать обратный эффект и даже испортить впечатление о кандидате.

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

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

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

Чек-лист для начинающих

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

Источник

Что должно быть в портфолио веб-разработчика?

Эта спонсируемая статья была создана нашим контент-партнером BAW Media. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

Веб-разработчику не всегда легко найти и привлечь новых клиентов.

Во-первых, существует препятствие в том, как перевести то, что вы делаете, на язык, понятный клиентам. Если вы начнете говорить о таких вещах, как PHP, API и каркасы, глаза ваших потенциальных клиентов потускнеют. Они хотят собственными глазами увидеть, на что вы способны.

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

Хорошо продуманный сайт-портфолио веб-разработчика решит обе эти проблемы.

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

1. Произведите сильное первое впечатление с помощью привлекательной анимации.

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

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

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

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

Как использовать BeCode, чтобы произвести сильное первое впечатление о себе:

Здесь есть две вещи, которые делают этот сайт-портфолио таким впечатляющим:

Если вы хотите добиться чего-то подобного, заранее подготовленный веб-сайт BeCode 2 будет хорошим местом для начала:

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

2. Придайте своему сайту портфолио уникальный и современный вид.

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

Итак, подумайте, что делает вас уникальным веб-разработчиком. Ваш сайт в целом должен это отражать. Это единственный способ привлечь потенциальных клиентов из точки А (ваша домашняя страница) в точку Б (ваше портфолио).

Адхам Даннауэй, например, дизайнер / разработчик:

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

Этого достаточно, чтобы потенциальные клиенты подумали: «Хммм… Что еще я здесь найду?» Но наворотов нет. Остальная часть сайта-портфолио минималистична и не содержит сюрпризов. Это упрощает их привлечение к образцам портфолио.

Как использовать BeDesign, чтобы наполнить ваш сайт веб-разработчика настоящей индивидуальностью:

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

На чем вы хотите сосредоточиться, так это на том, как создать что-то уникальное для вас. Для начала рассмотрите возможность использования предварительно созданного сайта BeDesign 3 :

Как видите, это не что иное, как сайт Dannaway, но он по-прежнему обладает уникальным ощущением, играя со светом и тьмой и придавая уникальность параллаксу.

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

3. Разместите свое портфолио веб-разработчика на специальной странице.

Часто веб-разработчик размещает свое портфолио на домашней странице и заканчивает работу. Но нужно кое-что запомнить:

Клиенты нанимают вас не только потому, что ваша работа впечатляет. Они нанимают вас, потому что хотят работать с кем-то вроде вас.

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

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

Возьмем, к примеру, портфолио разработчика полного цикла Мэтью Уильямса :

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

Как с помощью BeArchitect сделать ваше портфолио разработчика более ярким:

Что хорошо в готовых сайтах BeTheme, так это то, что есть масса элементов и макетов, которые можно использовать в различных нишах. Возьмем, к примеру, страницу проектов для BeArchitect 5.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Эта каменная сетка проектов отлично подойдет для портфолио веб-разработчика. Особенно, если вы хотите, чтобы ваш был немного расклешен с точки зрения верстки и дизайна.

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

4. Добавьте на сайт отметки доверия.

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

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

Итак, вам нужно будет предоставить доказательства.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

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

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

Как завоевать доверие с помощью дизайна с помощью BeTheme:

Если вы хотите поделиться историями своих клиентов, подобными тому, как это делает Soueidan, вам будет полезен предварительно созданный сайт BeTheme по умолчанию :

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

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

На сайте также есть шаблон страницы портфолио:

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Страницу вы можете настроить, так что вы можете добавить все необходимые элементы укрепления доверия. Мокапы веб-страниц. Объяснения процессов. Отзывы клиентов.

5. Сделайте так, чтобы потенциальные клиенты могли легко сделать следующие шаги.

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

Что это обозначает?

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

У Джонни Макихерна есть прекрасный пример этого:

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Это должно быть так просто.

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

Они могут запросить расценки, если им интересно:

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Или они могут связаться через контактную форму или виджет живого чата:

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

Как превратить впечатленных потенциальных клиентов в клиентов с помощью BeSEO:

Чтобы построить это самостоятельно, вам нужно будет выяснить, какова ваша цель.

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

Если вы ищете что-то, что поможет вам сделать это четко и последовательно, посетите предварительно созданный сайт BeSEO 3 :

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Он очень чистый и простой по дизайну, что позволяет легко настроить его под свои нужды.

Пришло время создать собственное привлекательное портфолио веб-разработчиков.

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

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

Источник

7 портфолио разработчиков: примеры для вдохновения

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

1. Бруно Саймон

Когда начинаешь смотреть сайт Бруно Саймона, время будто останавливается – настолько здесь все впечатляет. Для навигации используется машина, с помощью которой можно сигналить, взаимодействовать с разными объектами и даже катать шары в боулинге.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

2. Робби Леонарди

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

3. Мэтью Фарли

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

4. Риккардо Занутта

Этот разработчик наполнил свое портфолио лаконичными и динамичными формами. Всю информацию он удобно разбил на слайды, а также предусмотрел светлый и темный режимы просмотра.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

5. Шон Халпин

Если вы поклонник минимализма, резюме Шона вам точно придется по душе. Примеры своих работ он разместил на карточках и добавил к ним ненавязчивую анимацию.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

6. Рафаэль Каферати

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

7. Яцек Езнах

Этот запоминающийся сайт-резюме принадлежит Front-End разработчику. Яцек добавил музыкальное сопровождение и красивую анимацию для букв: во время введения они подпрыгивают.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Какое портфолио впечатлило вас больше всего? Делитесь своим мнением в комментариях!

Источник

Как создать идеальное техническое портфолио

Привет, Хабр! представляю вашему вниманию перевод статьи «How To Build A Great Technical Portfolio» автора Emma Wedekind.

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

Предлагаю вам взглянуть на несколько моих советов по созданию идеального технического портфолио.

Заметьте: эти советы построены на моем личном опыте. Существует множество способов составить отличное портфолио, так что используйте их как рекомендации, а не как жесткие правила.

Что делает хорошее портфолио?

Портфолио объясняет, каким человеком вы являетесь, и какие навыки вы можете предложить. Также портфолио — это идеальный способ продемонстрировать свои навыки разработки!

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

Ваше портфолио должно говорить людям о вас.

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

Добавив несколько личных штрихов, вы даете потенциальным работодателям представление о том, как это работать с вами!

Вот небольшой отрывок с моей странички портфолио. Не стесняйтесь посмотреть его полностью здесь.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

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

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

Многие компании создают собственные (конфиденциальные) работы, поэтому вам может быть интересно, как вы можете включить их в публичное портфолио.

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

Чтобы отобразить вашу работу, опишите используемые технологии, вашу роль в проекте (если это применимо), включите скриншот или два и разместите ссылку на код (если есть возможность).

Вот как я изложила раздел «работа» в моем портфолио. Вы можете посмотреть его полностью здесь.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Ваше портфолио должно иллюстрировать ваши впечатляющие навыки разработки (и дизайна)

Один отличный способ привлечь внимание работодателя — это использовать свое портфолио как сторонний проект. Я использовала Gatsby на React.js, для того чтобы сделать свое портфолио простым, потому что я хотела поэкспериментировать с генератором сайтов и продемонстрировать свои навыки работы с React.

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Ваше портфолио должно быть актуальным

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

Если у вас новая роль, обновите портфолио. Если вы создали крутое новое приложение, обновите свое портфолио!

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

Ваше портфолио должно содержать ваши контакты

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

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

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

Предоставьте им какой-нибудь способ связи с вами.

Как я придумываю хороший дизайн?

Создание дизайна портфолио может быть одним из самых сложных заданий, особенно если вы back-end разработчик или если у вас практически нет опыта в дизайне проектов.

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

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

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

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

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Какие технологии я должен использовать, чтобы создать портфолио?

Существует множество различных технологий, с помощью которых вы можете создать свое портфолио. Давайте познакомимся с несколькими вариантами для back-end и front-end разработчиков.

Back-end разработчики

Система управления контентом управляет созданием и содержимым цифрового контента.

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

2.Используйте ванильные HTML и CSS

Если вы немного знаете основы веб-разработки, то отличным вариантом будет начать создание сайта, используя ванильные HTML и CSS. Не думайте, что вам придется мучить себя дизайном/моделированием интерфейса, если у вас нет блестящих навыков в этом. Но создание вашего сайта на HTML и CSS покажет, что вы способны осваивать навыки вне вашей зоны комфорта.

Вам даже не нужен JavaScript для создания впечатляющего портфолио!

3. Используйте CSS-фреймворки

Если вам достаточно комфортно с базовыми HTML и CSS, но хотите более последовательный UI, вы можете попробовать CSS-фреймворки.

CSS-фреймворки позволяют работать с элементами стилей быстрее и проще. Важно заметить, что если вы претендуете на вакансию Front-end разработчика, использование CSS-фреймворков может быть не лучшим вариантом, так как работодатели будут искать разработчика, который сможет развивать СSS. Но для back-end разработчика это может стать отличной возможностью.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

4. Используйте конструкторы сайтов

Если вы просто хотите просто разместить контент так быстро, насколько это возможно, то вы также можете использовать конструкторы сайтов, такие как Wix или Squarespace.

Они могут максимально быстро и легко создать сайт. Вы можете даже интегрировать собственный домен.

Однако, если вы претендуете на роль Front-end разработчика, я предостерегаю против использования платформ по созданию сайтов. Ведь это шанс показать свои навыки разработчика! Всё или ничего!

Front-end разработчики

Если вы Front-end разработчик, то у вас есть много доступных вариантов для создания сайта.

1. Используйте ванильный HTML, CSS, и JavaScript

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

2. Используйте JavaScript-фреймворки

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

3.Используйте генераторы статических сайтов.

Генераторы статических сайтов получили известность в компьютерной индустрии с внедрением популярных библиотек и фреймворков (React, Vue, Angular и др.). Я создала свое портфолио с помощью Gatsby: генератор сайтов для React.

Как сделать портфолио для программиста. Смотреть фото Как сделать портфолио для программиста. Смотреть картинку Как сделать портфолио для программиста. Картинка про Как сделать портфолио для программиста. Фото Как сделать портфолио для программиста

Существует множество разных генераторов сайтов, таких как Next.js для приложений на React и VuePress для Vue.js.

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

Рекомендации к коду в вашем портфолио.

Какой контент мне нужно добавить?

Я всегда рекомендую включить следующие пункты в ваше портфолио:

Помните, ваше портфолио — это отражение вас самих. Здесь представлен не единственный, подходящий для всех, вариант составления портфолио. Создайте свое!

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *