0

Criando um perfil personalizado no GitHub

#GitHub #Git
Tássio Costa
Tássio Costa

Por que criar um perfil personalizado no GitHub?

Compartilhar informações sobre você com a comunidade no GitHub.

As informações que geralmente incluímos no perfil são:

  • Formação acadêmica;
  • Área de atuação;
  • Experiências profissionais;
  • Redes sociais;
  • Competências técnicas (hard skills);
  • Estatísticas de uso do GitHub (por exemplo, total de commits).


📋 Passo a passo:

  1. Crie um repositório com o nome idêntico ao seu nome de usuário;
  2. Definir o repositório como público;
  3. Adicionar um arquivo README.md na raiz do repositório contendo as informações que deseja apresentar no perfil.

Pronto, agora tudo o que você adicionar no README.md será apresentado na seção Overview da sua conta no GitHub.

O README.md pode ser escrito usando markdown e HTML.


A seguir veremos como rechear o seu README.md pela inclusão dos seguintes elementos:

- Redes Sociais:


- Competências Técnicas: Java SpringBoot


- Estatísticas:


Estes elementos foram extraídos das informações do meu README.md. Clique aqui para visualizá-lo por completo.


👥 Adicionando badges de redes sociais

Edite o seu README.MD e inclua os códigos abaixo de acordo com o badge que deseja adicionar.


ADICIONANDO O BADGE:

Forma Geral:

<a href="https://github.com/<USERNAME>" alt="github" target="_blank">

<img src="https://img.shields.io/badge/GitHub-000000?&style=flat-square&logo=GitHub&logoColor=white">

</a>

Exemplo retirado do meu GitHub:

<a href="https://github.com/tassiotfc" alt="github" target="_blank">

<img src="https://img.shields.io/badge/GitHub-000000?&style=flat-square&logo=GitHub&logoColor=white">

</a>


ADICIONANDO O BADGE:

Forma Geral:

<a href="https://www.linkedin.com/in/<SEUNOMEDECONTATO>" alt="linkedin" target="_blank">

<img src="https://img.shields.io/badge/LinkedIn-%230077B5.svg?&style=flat-square&logo=linkedin&logoColor=white">

</a>

Exemplo retirado do meu GitHub:

<a href="https://www.linkedin.com/in/tássio-fernandes-87a58b114" alt="linkedin" target="_blank">

<img src="https://img.shields.io/badge/LinkedIn-%230077B5.svg?&style=flat-square&logo=linkedin&logoColor=white">

</a>


ADICIONANDO O BADGE:

Forma Geral:

<a href="https://wa.me/<SEUNUMERO>" alt="WhatsApp" target="_blank">

<img src="https://img.shields.io/badge/-WhatsApp-25d366?style=flat-square&labelColor=25d366&logo=whatsapp&logoColor=white&link=https://wa.me/<SEUNUMERO>"/>

</a>

Exemplo retirado do meu GitHub:

<a href="https://wa.me/5584981430120" alt="WhatsApp" target="_blank">

<img src="https://img.shields.io/badge/-WhatsApp-25d366?style=flat-square&labelColor=25d366&logo=whatsapp&logoColor=white&link=https://wa.me/5584981430120"/>

</a>


ADICIONANDO O BADGE:

Forma Geral:

<a href="mailto:<SEUEMAIL>" alt="gmail" target="_blank">

<img src="https://img.shields.io/badge/-Gmail-FF0000?style=flat-square&labelColor=FF0000&logo=gmail&logoColor=white&link=mailto:<SEUEMAIL>" />

</a>

Exemplo retirado do meu GitHub:

<a href="mailto:tassiofernandescosta@gmail.com" alt="gmail" target="_blank">

<img src="https://img.shields.io/badge/-Gmail-FF0000?style=flat-square&labelColor=FF0000&logo=gmail&logoColor=white&link=mailto:tassiofernandescosta@gmail.com" />

</a>


💻 Adicionando badges de competências técnicas

Edite o seu README.MD e inclua os códigos abaixo de acordo com o badge que deseja adicionar.


Forma Geral:

![<NOMEDACOMPETÊNCIA1>](https://img.shields.io/badge/-<NOMEDACOMPETÊNCIA2>-333333?style=flat&logo=<NOMEDACOMPETÊNCIA2>&logoColor=007396)

Regras Importantes:

- Clique aqui para ter acesso as competências cujo ícones podem ser adicionados aos badges. ATENÇÃO: Se a competência procurada não for encontrada não é possível adicionar o ícone no badge.

- Após encontrar no simpleicons.org o nome da competência (ele localiza-se no rodapé do ícone) que deseja adicionar ao seu perfil, atente-se aos seguintes detalhes:

  • <NOMECOMPETÊNCIA1>: Pode ser descrito de qualquer forma.
  • <NOMECOMPETÊNCIA2>: Se o nome for composto deve ser separado com os caracteres "%20" e se o nome for composto e separado por "-" então troque-o por "--".
  • <NOMECOMPETÊNCIA3>: Se o nome for composto preencha o espaço entre as palavras com "-" e se o nome contiver um ícone mantenha-o normalmente na descrição.

- As numerações 333333 e 007396 correspondem, respectivamente, a cor do background do badge e a cor da logo.


Exemplo de inclusão das seguintes competências: Java SpringBoot

/*Competência com nome simples*/
![Java](https://img.shields.io/badge/-Java-333333?style=flat&logo=Java&logoColor=007396)

/*Competência com nome composto*/
![SpringBoot](https://img.shields.io/badge/-Spring%20Boot-333333?style=flat&logo=spring-boot)


📊 Adicionando Dashboard com Estatísticas

Edite o seu README.MD e inclua os códigos abaixo de acordo com o badge que deseja adicionar.


Forma Geral:

<img src="https://github-readme-stats.vercel.app/api?username=<USERNAME>&show_icons=true&theme=tokyonight"/>

<img src="https://github-readme-stats-eight-theta.vercel.app/api/top-langs/?username=<USERNAME>&layout=compact&langs_count=8&theme=tokyonight&include_all_commits=true&count_private=true"/>

Exemplo de dashboard de estatísticas do meu README.md:

<img height="180em" src="https://github-readme-stats.vercel.app/api?username=tassiotfc&show_icons=true&theme=tokyonight"/>

<img height="180em" src="https://github-readme-stats-eight-theta.vercel.app/api/top-langs/?username=tassiotfc&layout=compact&langs_count=8&theme=tokyonight&include_all_commits=true&count_private=true"/>


📝Informações Adicionais

Você encontra excelentes templates para o seu perfil acessando: https://github.com/iuricode/readme-template


Se você quer uma diversidade de emojions para personalizar seu README.md acesse: https://github.com/ikatyang/emoji-cheat-sheet


Se você não gostou do uso dos badges para apresentar suas competências técnicas, uma alternativa a isso é apresentá-las através de ícones da seguinte forma:

Ícones como estes podem ser encontrados neste repositório: https://github.com/devicons/devicon.

Para adicioná-los ao seu perfil, edite o seu README.md e inclua o seguinte código:

<code>
<img height="30" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg"></code>

Obs.: o link que consta na tag src corresponde ao link do ícone encontrado no repositório devicon.

Ao clicar no ícone, se você preferir redirecionar para a página da documentação relacionada com a competência apresentada, utilize o código da listagem abaixo.

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> 
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> 
</a>


📚 Referências:

  1. Documentação no GitHub
  2. Personalização de Badges
  3. Personalização de Badges 2
  4. Ícones para os Badges
  5. Como criar um Readme


Quaisquer dúvidas estou a disposição para ajudá-los. Até breve 🙂

1
16

Comentários (2)

0
Ronaldo

Ronaldo

06/08/2021 14:03

Muito bom!!

1
Arcyleu Júnior

Arcyleu Júnior

05/08/2021 00:23

Caraca! Isso que é tutorial!

Ficou muito bom, parabéns!

Bacharel em TI | Graduando em Engenharia de Software

Brasil