Como Personalizar o Seu Perfil do GitHub

Olá pessoal ! Recentemente descobri que como nos repositórios do GitHub, que você pode colocar um README.md que ele será interpretado pelo GitHub, existe um README especial de perfil, onde você pode personaliza-lo, e ele também será interpretado pelo GitHub quando alguém acessar seu perfil.

Então decidi fazer esse artigo para quem ainda não conhece essa funcionalidade do GitHub, ou nem mesmo a linguagem de marcação Markdown.

Para os iniciantes, vamos começar do inicio, o que seria Markdown ?

Markdown é uma linguagem de marcação para formatar textos na web de forma fácil e rápida, usando caracteres especiais para adicionar estilo, como negrito, itálico, títulos e listas. É amplamente suportado e pode ser convertido em HTML.

Esse site foi o que usei no inicio para aprender as noções básicas do Markdown: Guia Básico de Markdown

OBS: Se você perguntar no ChatGPT ele também ira lhe auxiliar nos códigos MarkDown.

O que é README no GitHub, e sua ligação com Markdown

O README.md é o arquivo principal de documentação do projeto e é exibido automaticamente na página principal do repositório no GitHub. Ele fornece informações essenciais sobre o projeto, como o propósito do projeto, como usá-lo, como instalar dependências, como contribuir para o projeto e qualquer outra informação relevante que os usuários precisem saber.

O uso do Markdown no README facilita a criação de um documento formatado e legível, com ênfase na simplicidade. O GitHub reconhece a linguagem de marcação Markdown e o converte em HTML para exibir o conteúdo do README de forma adequada.

Onde posso fazer os meus arquivos Markdown gratuitamente ?

No VS Code existe várias extensões para te ajudar a escrever e visualizar os seus códigos enquanto escreve, basta ir em extensões, escrever Markdown e escolher a de sua preferencia.

Agora que já falamos sobre as noções básicas, que você precisava saber para personalizar o README do seu perfil, agora vamos começar a personalização !!!

Primeiramente, teremos que criar o repositório especial onde ficara o arquivo README

• Dentro do seu GitHub, entre em "Repositories", e clique no botão "New" no canto superior direito.

• Na pagina de criação do repositório, no campo "Repository name" você vai escrever o mesmo nome do seu perfil do GitHub, que está no campo anterior, "Owner".

• Ira aparecer a seguinte mensagem:

• "SeuNome/SeuNome is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started."

• Tradução: "SeuNome/SeuNome é um repositorio especial que você pode usar para adicionar um README.md ao seu perfil do GitHub. Certifique-se de que seja publico e inicialize-o com um README para começar."

• Então vamos marcar a opção "Public" e a caixa de seleção logo abaixo "Add a README file", e em segui ir para o final da pagina e podemos finalizar a criação clicando no botão "Create repository".

• Agora volte para a pagina inicial do seu perfil, você vera que foi gerado um arquivo README.md, clique no lápis no canto direito do arquivo para edita-lo.

Pronto ! Agora você ja pode editar o seu arquivo Markdown do seu Perfil GitHub.

Aqui vão algumas dicas para colocar no seu README:

Você pode usar emoticons para personalizar ainda mais seus arquivos - Site de Emoticons

Você pode colocar imagens contendo links ao clicar, normalmente se usa "Badges" - Site com modelos prontos

O código que usei para fazer a badge da dio:

[<img src="https://hermes.digitalinnovation.one/assets/diome/logo-full.svg" width="70">](Link do Seu Perfil da DIO)

Código para badge de envio de e-mail:

<a href="mailto:seuemailaqui@gmail.com">
<img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white"/>
</a>

Código linkedin:

[<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white">](Link do Linkedin aqui)

Eu criei um parte com os bootcamps, codecamps e formações que estou fazendo na dio, quando você clica na imagem, vai direto para o link do seu certificado de conclusão na plataforma da DIO.

Segue o código:

Formação em andamento:

[<img src="https://hermes.dio.me/tracks/aa71615b-e701-4cec-bb64-71ba6974c5fe.png" width="70">](Link do Curso em Andamento)

Bootcamps Concluidos:

[<img src="https://hermes.dio.me/tracks/608ecefd-1d10-42ea-9f58-3e7a4548ab3e.png" width="70">](Link do Certificado)

CodeCamps Concluidos:

[<img src="https://hermes.dio.me/tracks/e3092c08-98c4-4131-aec1-f3affe6db45d.png" width="70">](Link do Certificado)[<img src="https://hermes.dio.me/tracks/cc708075-49ef-4974-85ca-c9a33a19e32d.png" width="60">](Link do Certificado)

OBS: Nos CodeCamps os dois códigos estão um em seguida do outro, para as imagens ficarem lado a lado.

OBS: Para pegar o link da imagem do bootcamp, codecamp ou formação, basta dentro da plataforma da dio, clicar com botão direito do mouse em cima da imagem, e clicar em "Copiar endereço de imagem".

Você pode colocar também um gráfico que pega a porcentagem do uso das linguagens em seus repositórios, e um com as atividades realizadas por você no GitHub.

Esse é o repositório onde peguei os gráficos interativos: https://github.com/anuraghazra/github-readme-stats

Existem vários modelos, os códigos estão no repositório que passei, é só copiar o código do modelo que você quer, alterar o nome do perfil GitHub dentro do código, que o gráfico ira automaticamente mudar para os seus dados.

Segue um exemplo do "Most Used Languages", eu alterei o código, para HTML, para poder diminuir o tamanho da imagem no meu README.

<div style="width: 200px;">
<a href="https://github.com/SeuPerfilAqui/github-readme-stats">
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=SeuPerfilAqui&langs_count=8" alt="Top Langs" />
</a>
</div>

Bom, espero que seja útil para alguém, se alguém usou esse tutorial, posta seu perfil do GitHub aqui, para os demais terem ideais para modificar os seus também, falando nisso, segue o meu perfil: Ariel Riello.