Anteriormente, a única maneira de personalizar seu perfil no Github era atualizando a imagem ou alterando seu nome. Isso significava que todos os perfis do Github pareciam iguais, as opções para personalizá-lo ou se destacar eram mínimas.

Desde então, você tem a opção de criar uma seção personalizada usando Markdown. Você pode incluir seu currículo, seus interesses e hobbies para que seu perfil reflita quem você é. É uma das principais seções que qualquer pessoa vê quando acessa seu perfil.

Neste artigo, mostrarei como criei meu leia-me do Github com um toque especial. Usarei o Markdown e resolverei seu problema principal. O problema é que pode ser altamente restritivo, já que não é possível alterar as cores, ajustar as posições e o espaçamento pode ser difícil. Para resolver, existe uma maneira de adicionar CSS ao seu leia-me do Github e até mesmo adicionar transições para apresentar uma UX melhor.

Mas vamos começar criando o leia-me primeiro. Para isso, você precisará criar um novo repositório público que seja exatamente igual ao seu nome de usuário no Github. Você verá um pequeno texto mostrando que este será um repositório único.

Agora, tudo o que você atualizar em seu arquivo [README.md](), será exibido em seu perfil. Você pode usar sintaxe Markdown ou HTML para exibir seu conteúdo. Se você adicionar qualquer estilo embutido, arquivos CSS ou JavaScript, ele será removido pelo Github, então essa solução será proibida.

A solução

No seu arquivo README.md você pode incluir imagens. Isso inclui arquivos SVG. A lacuna que nos permite adicionar CSS é incorporar HTML e CSS personalizados usando o elemento ForeignObject em um arquivo SVG. O elemento ForeignObject permite incluir elementos de outras linguagens de marcação dentro de um gráfico SVG.

Vamos criar um novo arquivo em nosso repositório, chamado header.svg. No meu caso, gostaria que um texto fosse exibido no meu perfil dizendo CodeFlow., com um belo gradiente e efeito de máquina de escrever. Para conseguir isso, escrevi alguns CSS e HTML aninhados em um ForeignObject em meu arquivo SVG:

Agora vamos atualizar o arquivo README.md para usar este SVG como imagem e exibi-lo em nosso perfil:

E é isso. Na verdade, são apenas CSS e HTML agrupados em um SVG. Confira o resultado final abaixo ou se quiser ver em ação, meu perfil no Github está aqui.