Criando um README para o seu perfil no GitHub
Tags: github, readme
Published: 2021-06-17 17:04:07

Desde que decidiu entrar para o mundo da Tecnologia, você tem escutado muita gente falar em Git e, frequentemente, as pessoas sugerem que você coloque os seus projetos num tal de Github, certo? 

Aí, você foi lá, criou seu perfil, salvou alguns projetos, mas não vê muito sentido naquela tela sem graça, cheia de repositórios. Talvez até já tenha visto alguns perfis personalizados, com gifs, ícones, gráficos, links para redes sociais, etc. Mas como fazer isso, se o Github não te mostra essa opção? 

Esse tutorial veio pra te ajudar a criar um README lindão para o seu perfil e deixar o seu repositório com a sua cara. Vamos lá?

📌 *se você ainda não tem uma conta no Github, corre nesse vídeo pra ver como faz: https://abre.ai/conta-github*

--- 

O README é escrito em Markdown, uma linguagem de marcação simples que converte o texto em HTML. Mas **calma**! Deixamos aqui [um tutorial](https://abre.ai/markdown) rapidinho pra você entender como ela funciona.

--- 

Agora vamos colocar a mão no código 👩‍💻

Primeiro de tudo, você vai criar um novo repositório com o mesmo nome do seu usuário:
![img01 - criando repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqsgebel06bmlx4refl3.png)

Note que vai aparecer uma mensagem dizendo que esse é um repositório *especial* — se não aparecer, é porque o nome do repo está diferente do nome de usuário... confere lá! 

O repositório deve ser **público** e o README deve ser adicionado no momento da criação:
![img02 - Add a README file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0wewggvjkvonkd51e0w.png)

Você será redirecionada para uma tela parecida com essa e, então, clique no lápis à direita para editar o arquivo:
![img03 - editando README](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zv055bnpam87xckgpze.png)

O README já vem com uma sugestão de texto, mas nesse exemplo, vamos fazer um modelo personalizado, mais ou menos assim:
![gif01 - perfil techsisters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ht59p9q5ca38w9tfaep.gif)

No nosso perfil, nós adicionamos um título, uma breve descrição, uma animação e algumas badges para as nossas redes sociais. Mas você pode incluir uma lista de interesses, ícones de linguagens que você tem estudado, além de cards com gráficos indicadores sobre o seu repositório. 

Nesse tutorial, vamos focar nesses elementos customizados, já que as ferramentas básicas de texto foram apresentadas no vídeo lá no comecinho desse artigo, ok?

---

### Vamos começar pelos ícones!
![img04 - ícones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sa96si54rv5wvs3qsah.PNG)

Para inserir ícones das suas linguagens favoritas, basta adicionar uma tag `img` com o link da imagem, de preferência com a extensão SVG:
```
<img src=" https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg" width="50px">
```

Você pode inserir quantos ícones quiser e posicionar da forma que preferir, usando as propriedades de estilo inline do HTML 😉

### Badges
![img05 - badges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hubs3ek2o653iexa3hoa.PNG)

Você pode usar badges ao invés de ícones para as suas linguagens,  e também pode usá-las como links para suas redes sociais. Basta envolver a tag `img` pela tag de âncora do HTML:
```
<a href="https://www.instagram.com/USERNAME" alt="Instagram" target="_blank">
  <img src="https://img.shields.io/badge/-Instagram-DF0174?style=for-the-badge&labelColor=DF0174&logo=instagram&logoColor=white&link=https://www.instagram.com/USERNAME">
</a>
```
⚠️ Lembre-se de trocar *'USERNAME'* pelo seu usuário!

Nesse [repositório](https://github.com/iuricode/README-template/blob/main/badges/badges.md) do [@iuricode]( https://www.instagram.com/iuricode), você encontra uma lista de badges prontas, mas você também pode criar novas no site [shields.io]( https://shields.io)

### Cards
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=reginokaa&layout=compact)](https://github.com/reginokaa/github-readme-stats)

Vamos usar o card de linguagens mais usadas, mas deixaremos [aqui]( https://github.com/anuraghazra/github-readme-stats) um repositório completinho, onde você vai encontrar outros modelos, temas e cores para aplicar nos seus cards 😊
```
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=USERNAME&layout=compact)](https://github.com/USERNAME/github-readme-stats)
```
---

### Bônus

* Transforme seu grid de contribuições num jogo da cobrinha™
![gif02 - snake game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0wrmqnbhqdczt47iag7.gif)

```
![Snake animation](https://github.com/USERNAME/USERNAME/blob/output/github-contribution-grid-snake.svg)
```

* Crie um Octocat com a sua cara para colocar no seu README ou como foto de perfil: https://myoctocat.com/
![img07 - octocat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzz4aiyq59wenwggm8uw.png)

---

Se esse conteúdo foi útil pra você, compartilhe!

📝 escrito com 💜 por [Regina]( https://github.com/reginokaa)