O post ensina Como personalizar seu perfil no Github utilizando o Readme de maneira fácil e rápida tornando o mesmo mais atraente.
Como personalizar o perfil do Github utilizando o Readme
Um README é um arquivo com extensão md, ou seja, ele é escrito em Markdown. Para mais informações sobre, leia o artigo Como criar um Readme excelente no Github.
O que colocar no arquivo?
Fale um pouco sobre você
Fale sobre coisas que você ache essencial para que as pessoas que passarem pelo seu perfil do GitHub vejam. Seguem algumas coisas que particularmente gosto de demonstrar, mas é totalmente opcional:
- Se você trabalha ou estuda. Se sim, é legal citar onde e em qual área;
- O que você anda aprendendo;
- Suas experiências, caso tenha, como atividades acadêmicas ou antigos trabalhos. Caso esteja em transição de carreira, acredito que seja legal citar também;
- Contatos, mas é importante pensar direitinho quais colocarem;
- Conhecimentos adquiridos;
- Região onde mora, mas não especifique tanto;
- Entre outros, coloque apenas o que você se sentir confortável para colocar.
Nessa etapa, você pode colocar em forma de texto mesmo ou em tópicos e com emojis, como o próprio GitHub sugere:
- 🔭 Atualmente estou trabalhando em ...
- 🌱 Atualmente estou aprendendo ...
- 👯 Estou procurando colaborar em ...
- 🤔 Estou procurando ajuda com ...
- 💬 Pergunte-me sobre ...
- 📫 Como entrar em contato comigo: ...
- 😄 Pronomes: ...
- ⚡ Curiosidade: ...
Para encontrar mais emojis, dê uma olhadinha nesse Gist do Rafael Xavier de Souza.
Tecnologias e Ferramentas
Para colocar seus conhecimentos adquiridos sobre tecnologias e ferramentas, você pode utilizar os logos das mesmas para tornar o perfil mais atrativo.
O Devicon é uma ferramenta excelente para te auxiliar nisso, pois nele é possível encontrar ícones de diversas tecnologias e ferramentas, atreladas a seu respectivo código em html para utilizar. Como o README aceita tags em HTML, você pode colá-las no seu arquivo.
Por exemplo, ao escolher o ícone do Git, irá surgir na barra esquerda versões em SVG com suas tags <img>
. Sendo assim, você pode copiá-las e colar no seu arquivo README escolhendo o tamanho com height
e width
.
![Tela do Devicon com uma listagem de ícones à direita com um fundo branco, onde está selecionado o ícone do Git. E à esquerda, com fundo verde, estão versões font e SVG com seus respectivos códigos, sendo em destaque o código da tag <img decoding=](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem7.png)
Dessa forma:
## Ferramentas e Tecnologias
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" width="40" height="40"/>
Resultado:
![Fundo branco com o título “Ferramentas e Tecnologias”, seguido do ícone do Git em laranja.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem8.png)
Assim por diante, você pode ir adicionando outros ícones na frente. E além disso, caso queira, você pode inserir as tecnologias e ferramentas que está estudando. Um exemplo:
## Estou aprendendo
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" width="40" height="40"/> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" width="40" height="40"/>
Resultado:
![Fundo branco com o título “Estou aprendendo”, seguido dos ícones do Java (uma xícara de café) e do Linux (pinguim).](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem9.png)
Contatos
Para que as pessoas que visitarem seu perfil no GitHub entrem em contato com você, é interessante colocar suas redes sociais, principalmente se você produz conteúdos, pois assim é possível divulgar seu trabalho.
Para isso, você pode utilizar badges das suas redes sociais linkados para redirecionar os visitantes, exemplo:
## Contatos:
<div>
<a href="https://www.youtube.com/seu-canal-youtube-aqui" target="_blank"><img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" target="_blank"></a>
<a href="https://instagram.com/seu-usuário-instagram-aqui" target="_blank"><img src="https://img.shields.io/badge/-Instagram-%23E4405F?style=for-the-badge&logo=instagram&logoColor=white" target="_blank"></a>
<a href="https://www.twitch.tv/seu-usuário-aqui" target="_blank"><img src="https://img.shields.io/badge/Twitch-9146FF?style=for-the-badge&logo=twitch&logoColor=white" target="_blank"></a>
<a href = "mailto:contato@seu-usuário-aqui"><img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" target="_blank"></a>
<a href="https://www.linkedin.com/in/seu-usuário-linkedln-aqui" target="_blank"><img src="https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge&logo=linkedin&logoColor=white" target="_blank"></a>
</div>
Note que onde está seu-usuário-aqui no código, é preciso colocar o seu nome de usuário para que seja redirecionado para sua rede social, caso contrário, pode dar erro.
Resultado:
![Fundo branco com o título “Contatos:”, seguido de diversas badges, sendo elas, Youtube com o ícone do mesmo à esquerda e fundo da badge em vermelho, Instagram com o ícone de câmera à esquerda e fundo da badge em rosa, Twitch com o ícone da mesma à esquerda e fundo da badge em roxo, Gmail com ícone de carta à esquerda e fundo da badge em vermelho e, por fim, o Linkedln com o ícone do mesmo à esquerda com o fundo da badge azul.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem10.png)
Estatísticas GitHub
Com o repositório GitHub Readme Stats, você consegue colocar quadros como esse contendo a porcentagem da quantidade de cada linguagem em seus repositórios e o total de stars, commits, pull requests (PRs), total de issues e contribuições.
![Dois quadros de estatísticas do GitHub, sendo o da esquerda “Most used Languages”, com uma barra de porcentagens tendo como legenda: JavaScript 70,34%, Java 18,91%, C 5,02%, HTML 4,76% e CSS 0,96%. E o quadro da direita representa “Camila Fernanda’s GitHub Stats” sendo composto por um círculo de porcentagem com A+ no interior, à esquerda do quadro temos “Total Stars Earned: 5, “Total Commits: 133”, “Total PRs: 2”, “Total Issues: 0” e “Contributed to: 2”.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem11.png)
Como fazer:
<div>
<a href="https://github.com/seu-usuário-aqui">
<img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=seu-usuário-aqui&layout=compact&langs_count=7&theme=dracula"/>
<img height="180em" src="https://github-readme-stats.vercel.app/api?username=seu-usuário-aqui&show_icons=true&theme=dracula&include_all_commits=true&count_private=true"/>
</div>
Note que onde está seu-usuário-aqui no código, é preciso colocar o seu nome de usuário do GitHub para que seja demonstrado suas estatísticas, caso contrário, pode dar erro.
Gifs e imagens
Assim como a Alura Star Jeniffer Bittencourt, você também pode colocar gifs ou algum avatar que te represente.
Ela criou esse avatar com o Avatoon:
![Avatar que representa a Jeniffer Bittencourt, que é um personagem com camiseta vermelha, utilizando óculos, cabelo castanho em penteado de coque, com uma expressão feliz acenando com a mão direita.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem12.png)
Animação de cobrinha
Caso queira, você pode colocar uma animação de uma cobrinha “comendo” suas contribuições no grid, ela é fornecida pelo repositório snk e fica dessa forma no seu perfil:
![Gif do grid de contribuições do GitHub, ele é composto por diversos quadrados pretos empilhados, onde os dias em que houve contribuições, ficam em cor verde. No gif uma cobrinha formada pelos mesmos quadrados, porém de cor roxa, vai passando por todo o grid sumindo com os quadrados em verde, como se estivesse comendo-os.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem15.gif)
Para implementar ela, primeiro coloque o seguinte código no seu arquivo README.md:
![Snake animation](https://github.com/seu-usuário-aqui/seu-usuário-aqui/blob/output/github-contribution-grid-snake.svg)
Note que onde está seu-usuário-aqui no código, é preciso colocar o seu nome de usuário do GitHub para que seja demonstrado seu grid de contribuições, caso contrário, pode dar erro.
Em seguida, vá em Actions e selecione set up a workflow yourself →
![Tela do repositório camilafernanda2/camilafernanda2 no GitHub, onde está em destaque com o número 1 a opção Actions na barra superior ao arquivo. E com o número 2, está em destaque o texto em azul “set up a workflow yourself →”.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem16.png)
E cole o seguinte código no editor de texto que irá abrir:
name: Generate Datas
on:
schedule: # execute every 12 hours
- cron: "* */12 * * *"
workflow_dispatch:
jobs:
build:
name: Jobs to update datas
runs-on: ubuntu-latest
steps:
# Snake Animation
- uses: Platane/snk@master
id: snake-gif
with:
github_user_name: seu-usuário-aqui
svg_out_path: dist/github-contribution-grid-snake.svg
- uses: crazy-max/ghaction-github-pages@v2.1.3
with:
target_branch: output
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Note que onde está seu-usuário-aqui no código, é preciso colocar o seu nome de usuário do GitHub para que seja utilizado seu grid de contribuições, caso contrário, pode dar erro.
E clique em Start commit e Commit new file:
![Tela do repositório camilafernanda2/camilafernanda2/.github/workfloes/main.yml no GitHub, com destaque no botão da opção Start commit no canto superior direito.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem17.png)
Prontinho! A cada 12 horas a animação será atualizada, mas você pode rodar selecionando o arquivo yml e em seguida, View runs:
![Tela do repositório camilafernanda2/camilafernanda2/.github/workfloes/main.yml no GitHub, com destaque no botão da opção View runs no canto superior direito.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem18.png)
E rodar com Run workflow:
![Tela do repositório camilafernanda2/camilafernanda2/.github/workfloes/main.yml no GitHub, na janela View runs, com destaque no botão da opção Run workflow no canto superior direito.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem19.png)
Exemplos para você utilizar como base
No próprio GitHub, existem repositórios com uma infinidade de READMEs para perfis para utilizarmos como inspiração, confira esse dois que são bem completinhos:
Lembrando que para olhar o código fonte, em Markdown, clique na opção Raw no canto superior direito do README:
![Barra superior de um arquivo README no GitHub com destaque na opção Raw no canto direito, esta opção está entre os botões de “Copiar” e “Blame”.](https://www.alura.com.br/artigos/assets/como-criar-um-readme-para-seu-perfil-github/imagem20.png)
Fonte do artigo: Alura
Super dicas
Aprenda na prática como programar se inscrevendo no curso Programação Orientada a Objetos utilizando a linguagem C#.
Se inscreva em nosso canal e compartilhe as matérias que gostar com os seus colegas.
Participe dos nossos grupos de estudos do Facebook e Telegram.
Aproveite também e venha fazer parte do nosso clube de vantagens e ter acesso exclusivo a vídeos, tutoriais, cursos e muito mais.
Clique no link para se tornar um membro do dfilitto – clube de vantagens e ter acesso a todos os benefícios do nosso clube.