DEV Community

Andressa Santos
Andressa Santos

Posted on • Updated on

Tutorial Fácil de Customização do Perfil do GitHub

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

Animação

  • 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.

create-repo

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.
edit-perfil

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"/>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Discord

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"/>
Enter fullscreen mode Exit fullscreen mode

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:

Andressa-html



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:

Top comments (0)