Tutorial Fácil de Customização do Perfil do GitHub
source link: https://dev.to/andressansantos/tutorial-facil-de-customizacao-do-perfil-do-github-1igf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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"/>
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:
[](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.
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:
- 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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK