Como criar um perfil incrível no GitHub?
Tags: github, markdown, opensource, git
Published: 2021-06-17 18:33:20

Esse artigo é uma tradução [autorizada](https://dev.to/supritha/comment/1fem3) do original da @supritha:
{% link https://dev.to/supritha/how-to-have-an-awesome-github-profile-1969 %}

##Começando

Customize o `readme.md` do seu perfil no GitHub para torná-lo atraente ao seguir os passos abaixo. Também dou alguns exemplos de recursos muito legais para dar um tchan a mais!

![Notebook entreaberto com tela vermelha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtaqls0tcwn2n9hsxdku.jpg)

Se o seu perfil do GitHub é tipo ESSE 👇...

![Foto de um perfil simples no GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0aatrbav2gc7yurg0qw.png)

Transforme-o NISSO 👇 ou em algo ainda melhor!

![Foto de um perfil com vários detalhes no GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95tsn9hl7sfx3avlxjep.png)

##Siga os passos
###1. Crie um novo repositório
- Vá até 👉 [criar novo repositório](https://github.com/new)
- Digite o nome do repositório, que deve ser o mesmo que o seu usuário. Isso cria um repositório secreto.
- Torne o repositório Público
- Selecione a caixinha de adicionar um `readme` ("Add a README file")
- Clique em **Criar Repositório**

![Passo a passo de como criar o repositório pessoal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usc7jxvt2ee2depz66iw.png)

###2. Modifique o arquivo `README`
- O arquivo inicial se parece com o da imagem abaixo, com uma mensagem simples. Você pode editá-lo ao clicar no botão **Edit README**, à direita.

![Foto do aspecto inicial do repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cza2kz9wusdx4ohxdea.png)

- Como pode ver, o arquivo tem um modelo feito em markdown. Você pode editá-lo do jeito que preferir.
- Quando acabar, clique em **Commit changes**. Se quiser, pode adicionar uma mensagem de commit.

![Exemplo de como editar o README pela interface do GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frsblo1gimwp5k40hw4e.png)

###3. ✨Embeleze seu perfil!✨
Há muitos recursos de código aberto disponíveis para chegar a uma página de perfil linda. Aqui está uma lista de recursos para escolher!

####Estatísticas para o GitHub `README`

![Exemplos de estatísticas do GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvu7twstiv4zrt7jj70o.png)

![Exemplo de linguagens usadas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vk6sv180zjndjzx8p28.jpeg)

{% github anuraghazra/github-readme-stats %}

####Troféus para o perfil do GitHub

{% github ryo-ma/github-profile-trophy %}

####Adicione um cabeçalho ou capa
```
[![MasterHead](your image link)](your GitHub link)
```
- [Custom HEADER generator](https://reheader.glitch.me/)
- [Custom BANNER generator](https://liyasthomas.github.io/banner/)

####Adicione uma imagem flutuante ou GIF
```
<img align="right" alt="Coding" width="400" src="coloque o link aqui">
```

![Exemplos de troféus para o GitHub](https://res.cloudinary.com/practicaldev/image/fetch/s--sNXjzc6P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.tenor.com/images/0c34272909ee2a4db5606a014082312b/tenor.gif%3Fitemid%3D15828752)

####Seção de ícones de rede social
```
<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" alt="" height="30" width="40"/></a>
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>
```

####Seção de linguagens e ferramentas
```
<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://www.w3schools.com/cpp/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg" alt="cplusplus" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> <a href="https://flutter.dev" target="_blank"> <img src="https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg" alt="flutter" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.linux.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg" alt="linux" width="40" height="40"/> </a> <a href="https://www.photoshop.com/en" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg" alt="photoshop" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> </p>
```
[Mais ícones de Dev](https://github.com/devicons/devicon/tree/master/icons)

####Sequência GitHub

![Exemplo de estatísticas de sequencia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kp42o3bhis7qopn7i3j.png)

1. Copie e cole o markdown abaixo no `README` do seu perfil do GitHub
2. Substitua o texto após `?user=` com o seu usuário do GitHub.

```
[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)
```

Customize ele 👉[aqui](http://github-readme-streak-stats.herokuapp.com/demo/)!

####Em execução no Spotify

![Exemplo de widget para mostrar o que está em execução no Spotify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvwvr4cyg204tpcgniqb.png)

{% github JeffreyCA/spotify-recently-played-readme %}

####Medalhas / Distintivos / Escudos
```
![badges1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n8fc8zw8pawxveffitx.png)
```
[Linguagens, ferramentas e ícones de redes sociais](https://github.com/Ileriayo/markdown-badges)
[Mais ícones](https://naereen.github.io/badges/)

![Exemplos de escudos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojfq2xpvjl4twr9zj186.png)

####Readme Typing SVG ⌨️

Gera um SVG com animação da digitação

[Demonstração](https://readme-typing-svg.herokuapp.com/demo/)

![Foto do gerador de SVG com animação de digitação](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7kxkqglk00s27chze7o.png)

{% github denvercoder1/readme-typing-svg %}

####Contador de visualizações

![Foto de diferentes contadores de visualização](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2eq5igqs8n1desbj84p.png)

{% github antonkomarev/github-profile-views-counter %}

####Blog post workflow

Mostra o seu histórico de postagens em um blog

{% github gautamkrishnar/blog-post-workflow %}

####Adicione emojis 

![Imagem mostrando uma porção de emojis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn694sxma4ehyvgv7tx3.png)

[Lista de emojis e seus códigos](https://gist.github.com/rxaviers/7360908)

####Piadas de `README`

{% github ABSphreak/readme-jokes %} 

####Frases/Citações de `README`

{% github PiyushSuthar/github-readme-quotes %}

####Métricas de Dev

{% github anmol098/waka-readme-stats %}

###4. MÉTODO ALTERNATIVO!

Se você achou isso tudo coisa demais, não se preocupe! Aqui estão **duas maneiras fáceis** de fazer isso:

####Gerador de `README` do @rahuldkjain

👉 https://rahuldkjain.github.io/gh-profile-readme-generator/ 

![Foto do gerador de README](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvazkssu2fyt0m3ibmma.png)

####GitHub Profilinator

👉 https://profilinator.rishav.dev/

{% github https://github.com/rishavanand/github-profilinator %}

####Ou...

1. Faça o *fork* do repositório de alguém
![Exemplo de como dar fork em um repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kagalbn58u2d32lswgxc.png)
2. Clique no ícone de *editar* no arquivo `README`
![Exemplo de como editar um arquivo no repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksey59g35j4p3d68wlq0.png)
3. Copie o código e cole no seu arquivo `README`. Claro que você pode (e deve) modificá-lo como quiser.
![Exemplo de como copiar o conteúdo de um arquivo no repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhs4thlppwcwjj1tpd2f.png)

###5. Algumas inspirações e ideias!

{% github abhisheknaiidu/awesome-github-profile-readme %}

{% github EddieHubCommunity/awesome-github-profiles %}

##Obrigado por ler!🙌
Compartilhe seu incrível perfil no GitHub nos comentários abaixo para que o mundo veja! :)
[SuprithaRavish1 twitter](https://twitter.com/SuprithaRavish1)

Curta e compartilhe para mais artigos assim.

Gostou do que ela fez?
Apoie [comprando um café para ela](https://www.buymeacoffee.com/suprithaa) ☕.