DEV Community

Cover image for Como personalizar seu GitHub
Caio
Caio

Posted on • Updated on

Como personalizar seu GitHub

Gostaria de personalizar seu GitHub ?

Lembrando que para fazer isso será necessário um entendimento de Markdown.

Vamos começar !

Primeiro você deve criar um repositório público e o nome dele precisa ser exatamente igual ao nome do seu usuário do GitHub e inicializa-lo com Readme.

GitHub Stats Card

Mostra o número de commits , estrelas , inssues ,etc , enfim , é um quadro geral para tido no seu GitHub.

Copie este código e mude o nome Anurag's para seu nome e o anuraghazra para seu nome de usuário

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)

Para adicionar a contagem de contribuições privadas à contagem total de commits
Você pode adicionar a contagem de todas as suas contribuições privadas à contagem total de commits usando o parâmetro &count_private=true

Ocultando estatísticas individuais
Você pode passar um parâmetro &hide= para ocultar quaisquer estatísticas específicas com valores separados por vírgula.

Todos os temas embutidos
GitHub readme stats vem com vários temas integrados (por exemplo, dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula).

Para mudar de tema será necessário trocar a ultima palavra do código por alguma dessas logo acima :

Image description

GitHub Extra Pins

Os pinos extras do GitHub permitem que você fixe mais de seis repositórios em seu perfil usando um perfil leia-me do GitHub.

Com isso você não está mais limitado a 6 repositórios fixados.

Copie este código e mude o nome Anurag's para seu nome e o anuraghazra para seu nome de usuário

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

Image description
Se quiser um ao lado do outro bastas fazer assim :

<div  style= "display:center">
 <a href="https://github.com/nickgithub"></a>  
<img height="180em" src="https://github-readme-stats.vercel.app/api?username=nickgithub&show_icons=true&theme=radical" alt="Stars">&ensp;  
<img height="180em"  src="https://github-readme-stats.vercel.app/api/top-langs/?username=nickgithub&layout=compact&amp;langs_count=7&amp;theme=dark" alt="Linguagens">                                                                                                                                       
</div>
Enter fullscreen mode Exit fullscreen mode

_
Obs:Onde está escrito nickgithub trocar por seu nike do Github._
Usei &ensp;para dar espaçamento estre os dois.

Top Languages Card

O cartão principal de linguagens mostra as linguagens principais usado com mais frequência por um usuário do GitHub.

Copie este código e mude o nome Anurag's para seu nome e o anuraghazra para seu nome de usuário.

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

Image description

Fonte : https://github.com/anuraghazra/github-readme-stats

Lá você encontra mais informações de personalização .

Github Readme Streak Stats

Exiba suas contribuições totais, sequência atual,
e sequência mais longa em seu perfil do GitHub README

Configuração rápida

Copie e cole a marcação abaixo em seu perfil do GitHub LEIA-ME
Substitua o valor após ?user= pelo seu nome de usuário do GitHub
[![GitHub Streak](https://streak-stats.demolab.com/?user=DenverC

Image description

Para adicionar temas use &theme=dark depois de user=

_ Mais temas_

https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/themes.md

Existe também o formato de datas mas para isso acesse o link abaixo.

Fonte: https://github.com/DenverCoder1/github-readme-streak-stats

Bônus

Esses dois sites são para emoji e para símbolos das linguagens.

https://emojipedia.org/

Image description

É só clicar em copiar e colar onde você quiser

Image description

https://dev.to/envoy_/150-badges-for-github-pnk ou
https://github.com/tandpfun/skill-icons#readme

Image description

Copie os links e faça um código assim , mas lembrando sempre do alt de digitar a linguagem para se caso não carregar a imagem aparecer o escrito .

<div align="center">
  <img  alt="HTML5" src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white"/>
  <img  alt="CSS3" src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white"/>
  <img  alt="Sass" src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white"/>
  <img  alt="Js" src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black"/>
  <img  alt="Angular" src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white"/>
  <img  alt="Java" src="https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=openjdk&logoColor=white"/> 
</div>
Enter fullscreen mode Exit fullscreen mode

Se acontecer alguma erro siga esses passos:

https://github.com/anuraghazra/github-readme-stats/issues/1093

Animações:

https://github.com/Ashutosh00710/github-readme-activity-graph

https://github.com/Platane/snk

https://ashutosh00710.github.io/github-readme-activity-graph/

Diferentes tipos de ícones

https://github.com/marwin1991/profile-technology-icons

https://github.com/tandpfun/skill-icons

https://devicon.dev/

PS: Nos links há todos os passo a passo .

Top comments (2)

Collapse
 
marcelluscaio profile image
Caio Marcellus Cabral

Ter isso faz muita diferença!

Collapse
 
rodrijr profile image
Rodrigo

Isso vai me ajudar !