Esse tutorial tem o objetivo de ajudar as pessoas a desenvolverem seus próprios perfis personalizados do GitHub, de maneira mas simplificada possível

Categorias

• Primeiros passos
  • Requisitos
  • Criando
  • Customizando
• Link Utilizados

Requisitos

• Único requisito para prosseguir nesse tutorial é ter uma conta criada no site GitHub.

Criando

• O primeiro passo é criar seu diretório de perfil GitHub. Para isso, clique em + ap lado de sua foto de perfil e após em New Repository

• Feito isso, você colocará o nome desse novo repositório. Ele precisa ser necessariamente igual ao seu nome de perfil do GitHub. Como o meu é andressansantos foi esse que coloquei.

Por fim, marque a opção Add a README file e por ultimo, no botão Create

Customizando Readme

Ele veem totalmente vazio ao ser criado.
Nele, você poderá colocar uma breve descrição do que você trabalha/estuda hoje.
Assim como em HTML, o Markdown como liguagem de marcação possuí os mesmos recursos que juntos com o HTML te dão maior flexibilidade.
Por isso, utilize os mesmos quando necessário sabiamente.

A primeira coisa importante é conhecer um pouco de Markdown. E para isso, você poderá acessar o link aqui para ter um tutorial mais completo.

Crie uma breve apresentação, e se quiser coloque emoticons. Poderá utilizar o site EmojiPedia para isso.

Agora, utilizaremos as informações do GitStats, um repositório no GitHub para colocar as estatisticas no nosso perfil.

Comecemos colocando uma < div > e dentro dela, colocaremos a informação do tema que queremos e nosso usuario.

 <img height="180em" src="https://github-readme-stats.vercel.app/api?username=andressansantos&show_icons=true&theme=tokyonight"/>
 <img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=andressansantos&layout=compact&theme=tokyonight"/>

Não esqueça de mudar no campo username para o nome do seu usuário de GitHub. Na ultima parte, de Theme ao final do código, poderá escolher o que
desejar na pagina do GitStats.

E esse será o resultado:

Adicione as redes sociais, para recrutadores ou outras pessoas queiram entrar em contato com você. Para isso, coloque o código conforme exemplo:

[![Discord](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/n9KBKHPA3H)

Nesse código, a primeira parte é o nome da rede, a segunda parte o link no post do Dev.To e a terceira parte o link da sua rede. Nesse meu caso, foi da comunidade no Discord do Ehmuitodrama. Para ter acesso a todos os Badges de redes sociais, acesse ao post completo com mais de 150 Badges no Dev.to

E esse será o resultado ao acabar e colocar o link e verificando no preview.

Agora iremos para a última parte que é adicionar as tecnologias que estamos aprendendo/dominando/trabalhando. Nessa parte, utilizaremos o site Dev Icon
O código que utilizaremos sempre será o SVG

  <img align="center" alt="Andressa-html" height="30" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"/>

No código passado, colocamos um nome, além de dimensões utilizando a tag img do HTML. A seguir no src, colocando a imagem do SVG

E o resultado será esse:

• Veja o resultado completo de como ficará no meu perfil, clicando aqui!
• Acesse ao vídeo tutorial no Youtube

Links utilizados

A seguir, listareis todos os sites consultados para a criação de Readme.

Emoticon:

Criação de Gifs ScreenToGif:

Icones Tecnologias:

Post Dev.To de Badges:

Criador de Gif com sua foto:

Repositório do GitHub Stats: