Превращаем Github в портфолио
Наверное, все замечали, что в каждой социальной сети у тебя есть некоторое количество информации, которое позволяет тебе разместить информацию о себе.
Для примера, это Twitter, Instagram, Clubhouse, Telegram и т.д.
Но ведь Github среди прочего тоже является социальной сетью, только вместо обмена фотографиями в Instagram – здесь мы обмениваемся кодом.
Так вот, почему бы не превратить наш Github в мини-портфолио? Страница нашего профиля будет включать в себя некоторые, по нашему мнению, важные пункты о нас, как о разработчике, и превью к профилю.
Тем более, что Github в середине 2020 года зарелизили такой функционал.
Сначала об ограничениях
Немного про Markdown. В нём отсутствует как таковая динамичность данных. Обычно файлы включают в себя заголовки, какой-то текстовый контент, изображения (можно добавить анимацию с помощью GIF).
Но что, если мы хотим реализовать динамичность в наших данных? Получать какие-то данные из API, обновлять информацию автоматически?
На помощь приходят Github Actions. Это пайплайны, которые позволяют разработчику автоматизировать процессы и задачи. В первой ревизии нашего портфолио мы обойдёмся статическим контентом, но после появления веб-интерфейса моего Telegram канала Вёрстка жизни, я сделаю Github Action для автоматического добавления последних статей в моё README и опишу этот процесс отдельной статьёй 💁♂️
Приступим к созданию репозитория
Первое, что нужно сделать – создать репозиторий, название которого совпадает с Вашим логином на Github. https://github.com/new
Я указал, что данный репозиторий приватный, так как не хочу чтобы он появился на странице моего профиля до того, как я его доделаю. Можете оставить публичным и будете видеть результат сразу после коммитов.
Добавляем баннер
Дисклеймер: дальнейшую идею оформления профиля я взял у Braydon Coyer. Так же, другие примеры вы можете посмотреть на проекте Awesome Github Profiles. Я понимаю, что копировать – плохо, поэтому если Braydon Coyer напишет мне по любому из контактов в профиле – я заменю стартовый баннер на другой :)
Задача на этом этапе – сделать интересное приветствие посетителя. Вы можете указать здесь свою фотографию, просто представиться, но я решил использовать баннер. Процесс создания баннера – руководство к другой сфере, поэтому расскажу как добавить его в Ваш README.md файл.
В корне репозитория добавляем директорию assets, в которой будут храниться все дополнительно требуемые ресурсы. В самом README.md указываем путь до изображения 
Добавляем бейджи других соц. сетей
Следующее, что я хочу сделать – указать контактные данные для связи со мной помимо стандартной почты в Github профиле.
Для генерации бейджей воспользуемся Shields.io
Я сделаю бейджи Instagram, Telegram, а так же счетчик посещений профиля.
Бейдж для добавления Instagram с моей цветовой конфигурацией и описанием выглядит вот так:
[](https://www.instagram.com/elinoril1337/)
Делаем остальные, коммитим!
Делаем блок с последними публикациями
Это тот самый блок, который в дальнейшем будет автоматизирован с помощью Github Actions. Но я хочу привлечь внимание к своим переведённым и написанным статьям уже прямо сейчас, поэтому пока сделаем этот блок статическим.
Делаем блок в виде обычного списка с ссылками.
## Последние посты 👀
– [Превращаем Github профиль в портфолио](https://teletype.in/@life_verstka/github-profile-to-portfolio)
– [6 полезных паттернов во Vue](https://teletype.in/@life_verstka/6_vue_2_patterns)
– [Хотите сделать анимацию на сайте? Расскажу, как сделать это правильно](https://teletype.in/@life_verstka/good_css_animations)
Секция с навыками
Если вы собираетесь написать каждый, освоенный вами инструмент, с помощью списка, то это будет простыня текста, которую человек чаще всего просто проскроллит.
Хорошим решением будут бейджи, которые мы использовали при оформлении соц. сетей. Но не надо делать все бейджи в единую кучу.
Сделаем две секции – первая, в которой вы указываете активно используемые технологии. А уже во второй можно написать все инструменты, с которыми вы работали за свою карьеру. Но вторую часть мы не будем показывать всегда, а выделим в отдельный спойлер, который Markdown позволяет делать, за счёт своей привязанности к HTML.
Полный код данной секции можно посмотреть в коммите, а здесь покажу с помощью чего мы реализуем выпадающую секцию
<details>
<summary>Все навыки </summary>
<!-- Здесь скрытый по умолчанию контент -->
</details>
Коммитим изменения!
Заключение
Теперь, после того как описаны все основные секции, можно сделать репозиторий публичным. Мини-портфолио готово и в дальнейшем его можно улучшать и дополнять. Вы можете прикрутить статистику вашего профиля через Github Readme Stats. Можете выделить ваши самые достойные работы в отдельный блок либо сгенерировать какой-то контент и сделать его динамическим через Github Actions.
Спасибо за прочтение!
Ещё больше контента по разработке, дизайну в моём Telegram канале по разработке – Вёрстка Жизни (life_verstka). Удачи!