Если вы новичок на GitHub, или в основном работаете с корпоративными репозиториями – скорее всего, оформлением своего профиля вы еще не занимались. Между тем, в профиле можно наглядно и креативно представить всю нужную информацию о ваших навыках и достижениях. Это продемонстрирует вашу неординарность и поможет:
- Выделиться на фоне других кандидатов, когда будете искать новую работу.
- Рассказать о вашем опыте коллегам по опенсорсному проекту.
- Найти единомышленников или инвесторов для реализации собственной идеи.
В этой статье мы собрали советы и ссылки на ресурсы, которые помогут вам сделать информативный и небанальный профиль. Приступим!
Как создать профиль на GitHub
Аккаунт на GitHub у вас уже наверняка есть. А чтобы создать профиль, надо завести репозиторий с таким же названием, что и ваш логин: если юзернейм – vasya777, то и репозиторий должен называться точно так же. В этом репозитории обязательно должен быть файл README.md – именно его GitHub будет рендерить в HTML для визуализации вашего профиля, который будет доступен по адресу https://github.com/username/.
С чего начать оформление профиля
В GitHub’овском профиле можно и нужно показать творческую сторону вашей личности – он не должен быть скучным и формальным, как официальный профиль на LinkedIn. Но, чтобы не переборщить с креативом, начать лучше с самых простых (и одновременно – самых важных) вещей: вашего стека, опыта работы и краткого описания пет-проектов.
Markdown и HTML
Форматирование текста в README.md делается с помощью Markdown-разметки и HTML-тегов. Диалект Markdown/HTML разметки, который поддерживается на GitHub, называется GitHub Flavored Markdown (GFM). Если вам раньше не приходилось сталкиваться с Markdown-разметкой – начать знакомство лучше всего с раздела документации GitHub, посвященного базовому синтаксису форматирования.
![Примеры форматирования текста с помощью Markdown](https://media.proglib.io/posts/2024/01/23/4c7e09abc77492eed422b30bd68cc2d8.png)
В дополнение к Markdown можно использовать HTML. Например, <div align="center">
</div>
поможет
выровнять заголовки по центру, а nbsp;
вставит неразрывный пробел. В README.md можно
использовать почти любые HTML-теги, но эти будут проигнорированы:
<title>
<textarea>
<style>
<xmp>
<iframe>
<noembed>
<noframes>
<script>
<plaintext>
Подробнее о тонкостях использования HTML-тегов – здесь.
Источники вдохновения
Интересные варианты оформления профилей собраны в репозиториях awesome-github-profile-readme и creative-profile-readme. Некоторые разработчики умудряются проводить в профилях шахматные турниры:
![😺🐙💡 Как сделать креативный профиль на GitHub](https://media.proglib.io/posts/2024/01/23/41171087bbb55421066058fa0106dbd1.png)
Рисовать автопортреты с помощью ASCII-арта:
![Автопортрет, нарисованный с помощью ASCII-арта](https://media.proglib.io/posts/2024/01/23/c5b33b9259f8879c07300145fca0a5f7.png)
Использовать API и автоматические обновления для вывода метеорологических показателей:
![API и автоматические обновления для вывода метеорологических показателей](https://media.proglib.io/posts/2024/01/23/793db630f5cd01354e9ee4467254c506.png)
Показывать треки, которые слушают на Spotify:
![Треки, которые слушают на Spotify](https://media.proglib.io/posts/2024/01/23/735c97d4eb2f6622e5799fb1f3fa7667.png)
И автоматически отслеживать всю свою активность на различных платформах:
![Автоматическое отслеживание вашей активности на различных платформах](https://media.proglib.io/posts/2024/01/23/8f1c034d1af8e78995f49b21cc256bb1.png)
Бейджи
Значки обычно используют для:
- Визуализации разнообразной информации о проекте (версии ПО, статуса сборки, количества строк кода и т. д.)
- Выражения приверженности определенным технологиям или платформам.
Огромный выбор значков можно найти в репозитории markdown-badges: здесь есть бейджи для чего угодно, от языков программирования и фреймворков до игр и криптовалют.
![Значки серверов](https://media.proglib.io/posts/2024/01/23/d862529d40ce10aaaa3c86e9e68eb9a3.png)
Если хочется сделать свой собственный, уникальный значок (статический или динамический) – можно воспользоваться сервисом shields.io. Процесс создания значков там объясняется просто и понятно:
![Процесс создания значков](https://media.proglib.io/posts/2024/01/23/aa64bcfa3884fa5b01b3b3c8adf404d5.png)
Иконки
Для представления технологического стека и навыков креативные разработчики часто используют соответствующие иконки. Хорошим выбором иконок для иллюстрации навыков располагает репозиторий skill-icons.
![Примеры иконок](https://media.proglib.io/posts/2024/01/23/662485ce16f4d1839ea02bae90fdc7e6.png)
Не нашли нужную иконку? Зайдите на Simple Icons, там уже 2973 SVG-иконок популярных брендов.
Эмодзи
В диалекте GitHub Flavored Markdown можно использовать эмодзи – список поддерживаемых находится в emoji-cheat-sheet. Кроме того, список поддерживаемых эмодзи можно получить с помощью API, или просмотреть в браузере:
{
"+1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8",
"-1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8",
"100": "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8",
"1234": "https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8",
...
"zipper_mouth_face": "https://github.githubassets.com/images/icons/emoji/unicode/1f910.png?v8",
"zombie": "https://github.githubassets.com/images/icons/emoji/unicode/1f9df.png?v8",
"zombie_man": "https://github.githubassets.com/images/icons/emoji/unicode/1f9df-2642.png?v8",
"zombie_woman": "https://github.githubassets.com/images/icons/emoji/unicode/1f9df-2640.png?v8",
"zzz": "https://github.githubassets.com/images/icons/emoji/unicode/1f4a4.png?v8"
}
![GFM поддерживает все популярные эмодзи](https://media.proglib.io/posts/2024/01/23/c05cb4404508320560f283328681d901.png)
Статистика GitHub Stats
Статистические показатели вашего личного репозитория помогут визуализировать карточки и диаграммы github-readme-stats. Оформление карточек можно настроить как угодно:
![Статистические показатели вашего личного репозитория](https://media.proglib.io/posts/2024/01/23/c1110823c2cff6f30df9e629bbcbd9ce.png)
А всевозможные диаграммы наглядно продемонстрируют разнообразие ваших навыков:
![Пример диаграмм](https://media.proglib.io/posts/2024/01/23/aa1cfd5196e89d12ab7f9d4fc7969485.png)
Цитаты
Высказывания влиятельных людей добавляют авторитетности любому контексту. В репозитории github-readme-quotes есть цитаты на все случаи жизни. Как и все остальные декоративные элементы для профилей, их оформление можно настраивать в соответствии с вашими предпочтениями:
![Цитаты](https://media.proglib.io/posts/2024/01/23/f636e9ffa856ab1e419afd073cc7e8db.png)
Доступность
Ваш профиль должен быть доступен для максимального количества людей, включая тех, кто не может загружать или просматривать изображения. Добавление описания alt text
к изображениям – общепринятый способ улучшения доступности:
<!-- Изображение в разметке Markdown -->
![Описание изображения](image-source)
<!-- HTML-тег -->
<img alt="Описание изображения" src="image-source" />
Инфографика
Главный инфографический Клондайк – metrics. Эти метрики помогут визуализировать любые аспекты ваших навыков, опыта и активности на GitHub – вот всего пара примеров из множества доступных опций:
![Инфографика](https://media.proglib.io/posts/2024/01/23/ce08cf9ba6e0c1475a4d0682c0044e5b.png)
Нужны еще идеи?
Два отличных источника идей – beautify-github-profile, где все способы оформления профилей удобно разделены на категории (значки, эмодзи, иконки, генераторы и т. д.), и топик github-profile, куда попадают все репозитории, предоставляющие декоративные элементы для профилей.
Достижения
Есть еще способ продемонстрировать ваши достижения на GitHub – награды Achievements, которые выдаются автоматически за определенные действия. В github-profile-achievements подробно рассказывается, какие ачивки есть на GitHub и как их можно получить.
В заключение
Если у вас нет времени или желания размечать README вручную, то это можно сделать автоматически с помощью одного из специальных генераторов, например:
А если вы уже сделали себе креативный профиль – принесите в комментарии, оценим!
Комментарии