Caio

Posted on Apr 21, 2023 • Edited on Aug 14, 2024

Como personalizar seu GitHub

#braziliandevs #github #markdown #git

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 :

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)

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>

_
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)

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

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/

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

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

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>

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 .