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:
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:
Você será redirecionada para uma tela parecida com essa e, então, clique no lápis à direita para editar o arquivo:
O README já vem com uma sugestão de texto, mas nesse exemplo, vamos fazer um modelo personalizado, mais ou menos assim:
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!
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
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 do @iuricode, você encontra uma lista de badges prontas, mas você também pode criar novas no site shields.io
Cards
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 😊
[](https://github.com/USERNAME/github-readme-stats)
Bônus
- Transforme seu grid de contribuições num jogo da cobrinha™
- Crie um Octocat com a sua cara para colocar no seu README ou como foto de perfil: https://myoctocat.com/
Se esse conteúdo foi útil pra você, compartilhe!
📝 escrito com 💜 por Regina
Top comments (3)
Obrigada, estava querendo colocar o jogo da cobrinha mesmo, me ajudou muito, amei!
como vc colocou o jogo da cobrinha? Não estou conseguindo
Ameeeei! Vou usar como referencia para estilizar o meu gitHub! <3