DEV Community

TechSisters Brasil
TechSisters Brasil

Posted on

Criando um README para o seu perfil no GitHub

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

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

Você será redirecionada para uma tela parecida com essa e, então, clique no lápis à direita para editar o arquivo:
img03 - editando README

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

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

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">
Enter fullscreen mode Exit fullscreen mode

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

Badges

img05 - badges

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>
Enter fullscreen mode Exit fullscreen mode

⚠️ Lembre-se de trocar 'USERNAME' pelo seu usuário!

Nesse repositório do @iuricode, você encontra uma lista de badges prontas, mas você também pode criar novas no site shields.io

Cards

Top Langs

Vamos usar o card de linguagens mais usadas, mas deixaremos aqui 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)
Enter fullscreen mode Exit fullscreen mode

Bônus

  • Transforme seu grid de contribuições num jogo da cobrinha™ gif02 - snake game
![Snake animation](https://github.com/USERNAME/USERNAME/blob/output/github-contribution-grid-snake.svg)
Enter fullscreen mode Exit fullscreen mode

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

📝 escrito com 💜 por Regina

Latest comments (3)

Collapse
 
davansep profile image
Priscila Davanse

Obrigada, estava querendo colocar o jogo da cobrinha mesmo, me ajudou muito, amei!

Collapse
 
theusmpm profile image
Matheus Martins

como vc colocou o jogo da cobrinha? Não estou conseguindo

Collapse
 
simonepedrosa profile image
Simone Pedrosa

Ameeeei! Vou usar como referencia para estilizar o meu gitHub! <3