Цитаты для портфолио веб разработчика

Обновлено: 21.11.2024

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

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

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

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

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

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

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

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

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

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

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

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

2. UX и UI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующая цитата

Все мы время от времени употребляем устоявшиеся выражения / высказывания в нашей среде. И мне стало интересно, а какие же выражения / высказывания популярны в IT сфере. С этим вопросом я обратился к моей аудитории портала МойКруг. И вот какую обратную связь я получил (предлагаю на этом не останавливаться и активно дополнять этот список):

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

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

Разработчик Шон Ван постоянно обновляет свое портфолио

Для программистов

«Это не баг, это фича»

«Сдал релиз иди в Ливиз» (примечание: выражение употребляется Питерскими программистами. Ливиз — местный ликеро водочный завод)

«Когда я вижу, как ты верстаешь, Малыш, ты меня пугаешь»

«Хорошо написанная программа — это программа, написанная 2 раза»

«Ничто так не ограничивает полет мысли начинающего программиста, как компилятор»
вариация на тему: «Ничто так не ограничивает полет мысли зрелого программиста, как Project Manager»

Хорошая жена может провожать мужа-программиста на работу словами «Чистого кода тебе!»

«Тяжела и неказиста жизнь без парня-программиста» (примечание: выражение должно употребляться девушками)

Ставшее теперь популярным выражения «писать говнокод»
вариация на тему: «Адовъ говнокод!» (источник перлов тут)

«Программисты — это устройства, преобразующие кофеин в код»

«Sex, drugs & rock'n'roll? — Bugs, hex & source control!»
вариация на тему: «Sex, drugs & rock'n'roll? — Sux, bugs & plug'n'play!»

«Улучшение работающего продукта приводит к его ухудшению»

«Хорошо задокументированный баг, автоматически становится фичей!»

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

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

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

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

Для тестировщиков

«Критичный баг, найденный тестировщиком в последний день, является багом в работе самого тестировщика» @Tanyapdr

«Если что-то может сломаться, оно должно сломаться именно сейчас»

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

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

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

Для админов

«Все пропатчить и проапдейтить»

«Быстро откаченное выложенным не считается»

«Семь бед — один reset»

«Не было печали — апдейтов накачали»

«Первый файл com’ом»

«Какой error не мечтает стать general’ом…»

«Как сервер назовешь, так он и будет работать»

«Первый тост за локалхост»

«Стабильного коннекта, Быстрого пинга!» @Лукьяненко, трилогия Лабиринт отражений

«Господь Бог — самый первый админ… Уж забанит так забанит!»

«Сервер — не суетись под клиентом!»

«Один сервер — хорошо, а два лучше»

«Знаю отличную шутку про UDP, но не факт, что она до вас дойдет» (разъяснение тут)

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

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

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

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

Адаптация веб-сайта для людей с особыми потребностями

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

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

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

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

Для всех

«Не USB мне мозги»

По поводу windows: «it works but it isn't working»

«Как два байта переслать»

«Восстановление системы после критического сбоя» (примечание: про похмелье)

«А rar-чик просто открывался»

Из прошлого: «Типун тебе на модем»

Из прошлого: «Провайдер не лошадь, к утру повезет» (примечание: речь идет о том, что по модему приходилось дозваниваться часами)

«Ясна консоль» (примечание: смысл выражения — все предельно понятно)

«Глаза болят, а руки делают»

«Большой программе — большие глюки»

«Нас Reboot, а мы крепчаем»

Резюмируя
Предлагаю всем принять участие в пополнении коллекции интересных высказываний / выражений в IT сфере.

Отзывы

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

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

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

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

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

Следующая цитата

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

Общие вопросы

Что подразумевается под портфолио разработчика?

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

Это обязательно?

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

Разве нет других способов продемонстрировать свою работу?

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

Для кого предназначены эти советы?

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

Сколько проектов должно быть на сайте?

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

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

Какие проекты включать нельзя?

Есть несколько категорий проектов, которые следует использовать с большой осторожностью:

Всё, что сделано по инструкции – скажем, с опорой на туториал или в ходе воркшопа. В таких проектах слишком велик вклад человека, который вас направлял, они не дают четкого представления о том, что вы умеете делать самостоятельно. К тому же можно нажить проблемы с авторскими правами. Проект можно считать своим, только если вы использовали чужой материал как отправную точку и очень существенно (на 50% и более) его расширили или переработали.
Проекты с предыдущих или текущего места работы. Причина здесь очевидна – велик риск нарушить соглашение о неразглашении. Если все же решаетесь разместить рабочий проект на сайте, обязательно обсудите все подробности и узкие места с работодателем.
Сам сайт-портфолио. Обычно это производит удручающее впечатление – как будто разработчик не нашел среди своих работ ничего более яркого. Исключение составляют случаи, когда вы реализовали что-то сложное и нетривиальное под капотом. Если же кроме того, что посетитель видит невооруженным глазом, показать нечего, то на уровень портфолио сайт сам по себе не тянет.
Проекты, не имеющие отношения к разработке. Все прочие умения и увлечения лучше оставить для раздела «О себе». Комо также не рекомендует уделять слишком много внимания своим навыкам в смежных областях, вроде графического дизайна или написания технических текстов. Это несколько меняет жанр сайта, создавая ощущение, что вы занимаетесь фрилансом и работаете по краткосрочным контрактам. Работодатель, который ищет сотрудника на постоянную основу, может сделать неверные выводы о ваших предпочтениях.

Какие проекты стоит включать в первую очередь?

Помимо очевидного (хорошие и интересные), есть несколько характеристик, которые работодатели склонны ценить особенно высоко:

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

Структура и наполнение сайта

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

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

Раздел «О себе» предназначен в большей степени для кадровиков. Основная его задача – сделать ваше «личное дело» хоть немного запоминающимся на фоне других. На взгляд автора, главный бич сайтов-портфолио сейчас – полная обезличенность, стремление вписаться в корпоративный стиль, который использует один и тот же структурный костяк (закончил такой-то университет, работал или работаю там-то, владею такими-то технологиями) и набор речевых клише.

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

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

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

Проекты и их описания

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Техническая реализация

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

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

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

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

Вот ряд шаблонов, на которые можно опираться при создании дизайна:

Разработка сайта

Если вы претендуете на должность фронтендера или фуллстек-разработчика, делать сайт нужно своими силами, без nocode-решений – положение обязывает. Инструменты можно использовать любые, лучше всего те, с которыми вы хорошо знакомы, чтобы не тратить лишнего времени. Как варианты можно рассмотреть: ванильные HTML/CSS/JS, 11ty, Gatsby, Next, Jekyll. Лично от себя автор рекомендует Gatsby, не в последнюю очередь за то, что для него сделано много тем и плагинов, сильно экономящих усилия.

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

Доменное имя

Домены верхнего уровня можно выбирать на свой вкус (co, io, специфические домены разных стран). Единственный момент: стоит избегать .info, который у многих ассоциируется со спамом и мошенниками.

Сайты-портфолио обычно статические, так что проблем с серверами они не создают. Для хостинга статических сайтов существует целый ряд сервисов, среди которых Комо выделяет Vercel, Netlify, Github Pages, Surge.

В дополнение к теории для наглядности Комо приводит два примера портфолио с подробным разбором. Первый – сайт Чарли Смит, вымышленного лица, который автор сделал сам, ориентируясь на типичный, усредненный образец из Сети. Второй – сайт Джулии Джонсон, студентки и стажерки IBM, который произвел на него самое приятное впечатление на фоне других, присланных подписчиками. Сравнивая один с другим, легко заметить, как они соотносятся с рекомендациями.

Сайт Чарли – невыразительный дизайн без изюминок, шаблонный рассказ о себе, краткое и поверхностное описание проектов

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

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

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

Читайте также: