O README.md já era um arquivo essencial para documentação de projetos, mas agora ele também pode ser utilizado para apresentar quem você é no GitHub. Com a possibilidade de fixá-lo no perfil, podemos ser criativos e transformar esse arquivo em um verdadeiro portfólio interativo.

Neste artigo, vamos explorar algumas ideias e dicas para você criar um README.md pessoal que realmente se destaque!

1. Formatação Básica

O Github na verdade tem um markdown proprio chamado GitHub Flavored Markdown (GFM), que é basicamente um markdown with steroids.

Você pode checar a documentação aqui https://github.github.com/gfm/

Mas além disso, você ainda pode usar HTML dentro do seu markdown, o que possíbilita modificar tamanho de imagem e o alinhamento dos elementos.

MAS ainda assim o markdown é bem sanitizado pelo github o que faz com que boa parte das propriedades e tags não funcionem principalmente a tag style que possibilitaria colocar estilos mais dinamicamente 😢

Algumas tags possíveis são: address, article, aside, base, basefont, blockquote, body, caption, center, col, colgroup, dd, details, dialog, dir, div, dl, dt, fieldset, figcaption, figure, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, header, hr, html, iframe, legend, li, link, main, menu, menuitem, nav, noframes, ol, optgroup, option, p, param, section, source, summary, table, tbody, td, tfoot, th, thead, title, tr, track, ul .

Essa limitação deixa aberto para sermos criativos em que elementos vamos usar!!

Headers

# Sou uma tag `<h1>`
## Sou uma tag `<h2>`
###### Sou uma tag `<h6>`

Destaques de Texto

*Texto em itálico*
**Texto em negrito**
~~Texto riscado~~

Citações

> Isso é uma citação

Divisórias

Listas

Tecnologias que eu mais gosto
  - Python
  - Javascript
    - React

Código

// Bloco de código
```
const name = "Ana Luiza";
```

// ou inline
`const age = 29`

Links e Imagens

[Texto do Link](https://www.exemplo.com)
![Texto Alternativo](https://github.githubassets.com/images/modules/profile/badge--acv-64.png)

Tabelas

Voce pode usar tabelas para descrever também experiencias, ferramentas e skills.

https://github.com/sw9brl em 24/08/2020

Mais sobre formatação: Mastering Markdown

2. O Que Incluir no Seu README?

Sobre Você

Quem você é? Onde trabalha ou estuda? O que voce se interessa? O que anda estudando? Que tipo de projetos voce costuma colaborar? Qual sua stack? Está procurando por emprego ou freelance? O que anda estudando? Qual seu objetivo?
FAQ, Curriculo, Experiencias de trabalho, Projetos pessoais, interesses, quais seus valores, tecnologias que voce usa, como voce costuma trabalhar?

Exemplos de Estrutura:

Características Sobre Mim

- 🔭 Trabalhando atualmente em projetos open source
- 🌱 Aprendendo mais sobre DevOps e Cloud
- 💬 Me pergunte sobre React, Golang e banco de dados

Tecnologias Que Eu Mais Gosto

- 🖥️ Backend: Golang, Node.js
- 🎨 Frontend: React, Vue
- 🗄️ Banco de Dados: PostgreSQL, MongoDB

Objetivos 2024

- [x] Contribuir para um projeto open source
- [ ] Criar meu próprio curso online

3. Como Deixar Seu README Mais Interativo

Adicionar Videos

O readme.md não suporta videos, MAS suporta tags a, então podemos linkar o embbeded do video ao video em si.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=ID_DO_VIDEO
" target="_blank"><img src="http://img.youtube.com/vi/ID_DO_VIDEO/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Emojis 😎

Adicione emojis para dar mais personalidade ao seu README! Use :emoji: para inserir emojis.

Aqui tem um cheat sheet com todos os emojis!

emoji-cheat-sheet/README.md at master · ikatyang/emoji-cheat-sheet
A markdown version emoji cheat sheet. Contribute to ikatyang/emoji-cheat-sheet development by creating an account on…github.com

Badges 🏆

Use Shields.io para criar badges personalizados:

![GitHub followers](https://img.shields.io/github/followers/seuusuario?style=social)

O codewars também disponibiliza badges para mostrar sua pontuação na ferramenta.

Se voce costuma colaborar com o open source nada mais justo do que deixar claro como as pessoas podem te ajudar.

Faz sentindo criar links para Donates como paypal, patreon, gratipay etc.

GitHub — Naereen/badges: Markdown code for lots of small badges (shields.io, forthebadge.com etc) …
pencil: Markdown code for lots of small badges :ribbon: :pushpin: (shields.io, forthebadge.com etc) :sunglasses…github.com

Estatísticas 📊

Use GitHub Readme Stats para mostrar suas estatísticas automaticamente:

![Estatísticas do GitHub](https://github-readme-stats.vercel.app/api?username=seuusuario&show_icons=true)

Gifs e Imagens Customizadas 🎨

Crie ilustrações, icones ou gifs personalizados e adicione ao seu README:

Gifs

Algumas dicas:

Use Recordit para criar gravações de tela do seu desktop e exporte como GIFs.

Gravação da sua tela

Voce também pode gravar sua sessão no terminal com o ttystudio que também suporta exportar paraGIFs.

Gravação do terminal

No giphy ao clicar no “ Stickers” você consegue achar gifs com fundo transparente.

Imagens

A maneira mais segura de manter os arquivos é criar uma pasta screenshots, github, assets, resources ou nome que você quiser e deixar os arquivos nela. Se você usar um CDN de imagens ou gif pode funcionar mas corre o risco do quebrar o link algum dia.

Usar a tag img do html possíbilita que possamos dinamizar um pouco mais as imgs.

Supondo que você tenha criado uma pasta assets no seu projeto e tem o arquivo banner.png, é assim que você pode adicionar a imagem:

<h1 align="center">
  <img alt="NextLevelWeek" title="#NextLevelWeek" src="./assets/banner.png" />
</h1>

Com o align center a imagem fica centralizada

Podemos editar o tamanho das imagens também se usarmos a tag

<img align="right" height="200" src="https://github.com/rajput2107/rajput2107/blob/master/Assets/Developer.gif"/>

Alguns exemplos legais são de githubs que criaram ilutrações legais deles mesmos para personalizar o readme.md:

Alguns exemplos legais de ilustrações de si mesmo

Com isso podemos também colocar icones que linkem para nossas redes sociais ou para tecnologias que gostamos

Ou então hospedar os slides em algum lugar e postar apenas a primeira pagina deles.

<img align="right" height="200" src="https://github.com/rajput2107/rajput2107/blob/master/Assets/Developer.gif"/>

Para usar icones ou ilustrações use ferramentas como:

Redes Sociais 🌍

[![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=flat-square&logo=linkedin)](https://www.linkedin.com/in/seuusuario)
[![Twitter](https://img.shields.io/badge/Twitter-blue?style=flat-square&logo=twitter)](https://twitter.com/seuusuario)

Tecnologias e Ferramentas 🛠️

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
![Python](https://img.shields.io/badge/Python-3776AB?style=flat-square&logo=python&logoColor=white)
![Java](https://img.shields.io/badge/Java-007396?style=flat-square&logo=java&logoColor=white)
![Golang](https://img.shields.io/badge/Go-00ADD8?style=flat-square&logo=go&logoColor=white)

https://github.com/Sancho41

Projetos em Destaque 🚀

Destaque seus melhores repositórios:

[![Repo](https://github-readme-stats.vercel.app/api/pin/?username=seuusuario&repo=seurepo)](https://github.com/seuusuario/seurepo)

4. Dicas Extras para SEO

Adicione palavras-chave relacionadas ao seu nicho
Inclua seu nome completo em texto
Linke para redes sociais, portfólio e projetos
Atualize regularmente

Conclusão 🎯

O README.md do seu perfil no GitHub é uma grande oportunidade de destacar suas habilidades, experiências e paixões. Personalize-o, torne-o único e mostre ao mundo o que você sabe fazer!

E aí, pronto para atualizar o seu? 🚀

Como criar um README.md pessoal no github