DEV Community

Andressa Santos
Andressa Santos

Posted on • Edited on

24 7 1 1 1

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:

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more