Наталья Кайда 05 февраля 2024

😺🐙💡 Как сделать креативный профиль на GitHub

Расскажем, как представить свои навыки, опыт и пет-проекты так, чтобы на профиль обращали внимание потенциальные работодатели и единомышленники.
😺🐙💡 Как сделать креативный профиль на GitHub

Если вы новичок на 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
Примеры форматирования текста с помощью Markdown

В дополнение к 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

Рисовать автопортреты с помощью ASCII-арта:

Автопортрет, нарисованный с помощью ASCII-арта
Автопортрет, нарисованный с помощью ASCII-арта

Использовать API и автоматические обновления для вывода метеорологических показателей:

API и автоматические обновления для вывода метеорологических показателей
API и автоматические обновления для вывода метеорологических показателей

Показывать треки, которые слушают на Spotify:

Треки, которые слушают на Spotify
Треки, которые слушают на Spotify

И автоматически отслеживать всю свою активность на различных платформах:

 Автоматическое отслеживание вашей активности на различных платформах
Автоматическое отслеживание вашей активности на различных платформах

Бейджи

Значки обычно используют для:

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

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

Значки серверов
Значки серверов

Если хочется сделать свой собственный, уникальный значок (статический или динамический) – можно воспользоваться сервисом shields.io. Процесс создания значков там объясняется просто и понятно:

Процесс создания значков
Процесс создания значков

Иконки

Для представления технологического стека и навыков креативные разработчики часто используют соответствующие иконки. Хорошим выбором иконок для иллюстрации навыков располагает репозиторий skill-icons.

Примеры иконок
Примеры иконок

Не нашли нужную иконку? Зайдите на 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 поддерживает все популярные эмодзи
GFM поддерживает все популярные эмодзи

Статистика GitHub Stats

Статистические показатели вашего личного репозитория помогут визуализировать карточки и диаграммы github-readme-stats. Оформление карточек можно настроить как угодно:

Статистические показатели вашего личного репозитория
Статистические показатели вашего личного репозитория

А всевозможные диаграммы наглядно продемонстрируют разнообразие ваших навыков:

Пример диаграмм
Пример диаграмм

Цитаты

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

Цитаты
Цитаты

Доступность

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

        <!-- Изображение в разметке Markdown -->
![Описание изображения](image-source)
<!-- HTML-тег -->
<img alt="Описание изображения" src="image-source" />
    

Инфографика

Главный инфографический Клондайк – metrics. Эти метрики помогут визуализировать любые аспекты ваших навыков, опыта и активности на GitHub – вот всего пара примеров из множества доступных опций:

Инфографика
Инфографика

Нужны еще идеи?

Два отличных источника идей – beautify-github-profile, где все способы оформления профилей удобно разделены на категории (значки, эмодзи, иконки, генераторы и т. д.), и топик github-profile, куда попадают все репозитории, предоставляющие декоративные элементы для профилей.

Достижения

Есть еще способ продемонстрировать ваши достижения на GitHub – награды Achievements, которые выдаются автоматически за определенные действия. В github-profile-achievements подробно рассказывается, какие ачивки есть на GitHub и как их можно получить.

В заключение

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

А если вы уже сделали себе креативный профиль – принесите в комментарии, оценим!

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
Разработчик С#
от 200000 RUB до 400000 RUB
Senior Java Developer
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ