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

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

❗️ Обновления из будущего 🛸, вот несколько последующих статей:
🚀 Прекратите делать эти 4 ошибки при создании сайта-портфолио
🚀 Как отображать Среднее количество сообщений на вашем сайте

Шаг 1. Пользовательские домены

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

Ваше доменное имя должно быть в идеале:

  • Содержит ваше настоящее имя
  • Запоминающийся (легко запоминающийся)
  • Значимый
  • Легко читать

Если у вас довольно распространенное имя, ваше желаемое доменное имя, вероятно, будет занято двойником где-нибудь по всему миру. Не бойтесь, попробуйте использовать другой TLD, например .net | .gg | .dev | .cc | или даже | .ai

Вот несколько хороших примеров выбора имени:

Джон Смит - https://thejohnsmith.dev

Гарри Поттер - https://harrypotter.gg

Наруто Узумаки - https://narutouz.com

Шаг 2 - Размещение вашего сайта с портфолио

Теперь, когда у вас есть адрес во всемирной сети, пора выбрать хостинг-провайдера, который построит дом по этому конкретному адресу.

Wix, WordPress, Squarespace - отличные конструкторы веб-сайтов, и мне лично нравится WordPress но, когда вы создаете сайт-портфолио: вы должны демонстрировать свои навыки в создании приложения / сайта. (не применяется - если вы ищете вакансии в WordPress / Wix / Squarespace)

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

2.1 Создать новую учетную запись

2.2 Создайте новый репозиторий (репо) - вот так 👇

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

Шаг 3 - Шаблоны начальной загрузки

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

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

  1. Https://startbootstrap.com/themes
  2. Https://www.creative-tim.com/bootstrap-themes/free
  3. Https://themewagon.com/theme_tag/free/
  4. Https://themefisher.com/free-bootstrap-templates/

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

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

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

Шаг 4 - Планирование содержания

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

4.1 Введение

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

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

4.2 Обо мне

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

4.3 Проекты

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

4.4 Блог (необязательно)

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

4.5 Контактная информация

Хороший сайт (портфолио) не был бы полноценным без эффективного призыва к действию (CTA), который позволяет вашему потенциальному работодателю легко отправить вам электронное письмо / позвонить. Настраиваемая форма, которая позволяет вашим пользователям отправлять вам электронные письма, оказалась очень эффективной. Кроме того, вы также должны включить ссылки LinkedIn / GitHub, чтобы они могли взаимодействовать с вами в дальнейшем.

Шаг 5 - Очистка

5.1 .html расширения

Если вы используете шаблон Bootstrap, скорее всего, все href будут переходить на другую HTML-страницу с .html расширением. Это сделает ваши ссылки такими уродливыми.

Конечно, мы этого не хотим, поэтому можем удалить расширение .html из всех href в каждом .html файле и заменить его на /. Вот пример 👇

Не беспокойтесь о том, что у вас нет доступа к страницам на localhost, потому что GitHub Pages выполнит всю маршрутизацию за вас, а это еще одна причина, по которой GitHub Pages великолепен.

5.2 Теги заголовка и описания
Не забудьте включить эти две строки кода в каждый .html файл.

<title>Tim Wong Portfolio Site | Software Engineer, Ex Flight Crew, Atomic Habits (JavaScript, Ruby, React, Python)</title>
<meta name="description" content="Tim Wong is a Software Engineer with a wide array of skills from programming, writing, design. Love to meet new people & learn all about startups and businesses.">

Чтобы, когда вы делитесь ссылкой на сайт своего портфолио, она будет содержать подробности как таковые, выглядит намного лучше, не так ли? 😉

Шаг 6 - развертывание

Теперь мы готовы к тому, чтобы мир увидел ваш шедевр. Идите вперед и инициализируйте свою папку как репозиторий Git. Вернитесь к ссылке репо и скопируйте коды командной строки, предоставленные GitHub (см. Шаг 2.2). Команды должны выглядеть примерно так:

git init
git add .
git commit -m "First commit"
git branch -M master
git remote add origin https://github.com/T31K/Portfolio-Site.git
git push -u origin master

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

Перейдите в Настройки ›Страницы и

  1. Выберите ветвь master или main для создания страниц из
  2. Вставьте личный домен, который вы настроили на шаге 1.
  3. Убедитесь, что вы установили флажок "Принудительно использовать HTTPS" для безопасного просмотра вашего сайта.

Шаг 7 - Трепет перед вашим шедевром

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

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

Как обычно, береги себя и до следующего раза.

Тим

Если вам нравится мой контент, подумайте купите мне кофе ☕️.
Если вы хотите получать уведомление по электронной почте, когда я снова отправлю сообщение, подумайте о подписке. (это бесплатно)

Больше контента на plainenglish.io