# Como criar um README.md pessoal no github --- 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)](https://github.github.com/gfm/), que é basicamente um markdown with steroids. Você pode checar a documentação aqui [https://github.github.com/gfm/](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 ```plaintext # Sou uma tag `

` ## Sou uma tag `

` ###### Sou uma tag `

` ``` #### Destaques de Texto ```plaintext *Texto em itálico* **Texto em negrito** ~~Texto riscado~~ ``` #### Citações ```plaintext > Isso é uma citação ``` #### Divisórias #### Listas ```plaintext Tecnologias que eu mais gosto - Python - Javascript - React ``` #### Código ````plaintext // Bloco de código ``` const name = "Ana Luiza"; ``` // ou inline `const age = 29` ```` #### Links e Imagens ```plaintext [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://cdn-images-1.medium.com/max/788/1*H7YiDpoLgHJRRtJoM-n7kw.png align="left") [https://github.com/sw9brl](https://github.com/sw9brl) em 24/08/2020 Mais sobre formatação: [Mastering Markdown](https://guides.github.com/features/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 ```plaintext - 🔭 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 ```plaintext - 🖥️ Backend: Golang, Node.js - 🎨 Frontend: React, Vue - 🗄️ Banco de Dados: PostgreSQL, MongoDB ``` #### Objetivos 2024 ```plaintext - [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. ```plaintext IMAGE ALT TEXT HERE ``` #### 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](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) #### Badges 🏆 Use [Shields.io](https://shields.io/) para criar badges personalizados: ```plaintext ![GitHub followers](https://img.shields.io/github/followers/seuusuario?style=social) ``` O [codewars](https://www.codewars.com/users/jhoffner/badges) 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. ![](https://cdn-images-1.medium.com/max/788/0*Bu9oZ14MQwG2qNWl align="left") ![](https://cdn-images-1.medium.com/max/591/0*EgggNnUk9AsUc48s.jpg align="left") [**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](https://github.com/Naereen/badges) #### Estatísticas 📊 Use [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats) para mostrar suas estatísticas automaticamente: ```plaintext ![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](http://recordit.co/) para criar gravações de tela do seu desktop e exporte como `GIF`s. ![](https://cdn-images-1.medium.com/max/788/0*g9XeWVTKuYlMM-Zs align="left") Gravação da sua tela * Voce também pode gravar sua sessão no terminal com o [ttystudio](https://github.com/chjj/ttystudio) que também suporta exportar para`GIF`s. ![](https://cdn-images-1.medium.com/max/788/0*u0RI5LLCUxyCaeN-.gif align="left") 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: ```plaintext

NextLevelWeek

``` Com o align center a imagem fica centralizada Podemos editar o tamanho das imagens também se usarmos a tag ```plaintext ``` Alguns exemplos legais são de githubs que criaram ilutrações legais deles mesmos para personalizar o readme.md: ![](https://cdn-images-1.medium.com/max/591/1*qpwOT3CHA73E9teaJ8KWtQ.png align="left") ![](https://cdn-images-1.medium.com/max/394/1*vayY16KxHQXdfKeywUWfLg.png align="left") ![](https://cdn-images-1.medium.com/max/591/1*kBUBuK5Aa28MHYbpGz448Q.gif align="left") 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. ```plaintext ``` Para usar icones ou ilustrações use ferramentas como: * [Flaticon](https://www.flaticon.com/) * [Simple Icons](https://simpleicons.org/) * [Canva](https://www.canva.com/pt_br/criar/logotipo/) #### Redes Sociais 🌍 ```plaintext [![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 🛠️ ```plaintext ![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://cdn-images-1.medium.com/max/788/1*AKKd8S1lNGZkLlGoWMnDHA.png align="left") [https://github.com/Sancho41](https://github.com/Sancho41?fbclid=IwAR1PgBrrEZmx0Kys3fvG2lm0kp_PZa_vj0mEIypdsHYY-lD8LChh1EZue1k) ### Projetos em Destaque 🚀 Destaque seus melhores repositórios: ```plaintext [![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? 🚀