Раньше единственным способом настроить свой профиль на Github было обновление изображения или изменение имени. Это означало, что каждый профиль Github выглядел одинаково, возможности его настройки или выделения были минимальными.

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

В этой статье я покажу вам, как я создал свой файл readme на Github с некоторыми особенностями. Я буду использовать Markdown и решить эту главную проблему. Проблема в том, что это может быть очень ограничительным, поскольку вы не можете менять цвета, регулировать положение и интервал может быть сложно. Чтобы решить эту проблему, вы можете добавить CSS в свой файл readme на Github и даже добавить переходы, чтобы улучшить UX.

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

Теперь все, что вы обновите в файле [README.md](), будет отображаться в вашем профиле. Вы можете использовать синтаксис Markdown или HTML для отображения вашего контента. Если вы добавите какие-либо встроенные стили, файлы CSS или JavaScript, они будут удалены Github, так что решение будет бесполезным.

Решение

В файл README.md вы можете включать изображения. Сюда входят файлы SVG. Лазейка, которая позволяет нам добавлять CSS, — это встраивание собственных HTML и CSS с помощью элемента ForeignObject в SVG-файл. Элемент ForeignObject позволяет включать элементы из других языков разметки в графику SVG.

Давайте создадим новый файл в нашем репозитории под названием header.svg. В моем случае я бы хотел, чтобы в моем профиле отображался текст с надписью CodeFlow., с красивым градиентом и эффектом пишущей машинки. Чтобы добиться этого, я написал немного CSS и немного HTML, вложенных в объект ForeignObject в моем SVG-файле:

Теперь давайте обновим файл README.md, чтобы использовать этот SVG в качестве изображения и отобразить его в нашем профиле:

И все. На самом деле это просто CSS и HTML, заключенные в SVG. Посмотрите конечный результат ниже или, если вы хотите увидеть его в действии, мой профиль на Github здесь.