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:
[](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.
Top comments (0)