Na aula de hoje eu quero te mostrar como criar um Readme no GitHub, vamos utilizar os códigos HTML e personalizar seu perfil!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Fala impressionadores! Hoje vamos personalizar seu perfil no GitHub, é claro que, antes de tudo, vou te explicar o que é GitHub e como ele funciona.
A ideia é que você saiba como melhorar portfólio de projetos (ou seu portfólio de ciência de dados), dessa forma vai ter mais visibilidade e terá suas informações mais visíveis.
A criação do perfil é muito simples e vou fazer um breve passo a passo de como criar o arquivo markdown no GitHub, que é justamente a descrição com o arquivo readme.
Assim você vai conseguir ter um perfil muito mais visual, com ícones, links, imagens e ainda suas redes sociais!
E aí, vamos aprender como criar perfil no GitHub com readme e impressionar os recrutadores?
Primeiramente -> GitHub, o que é?
O GitHub é uma ótima ferramenta para gerenciamento dos seus códigos e para você utilizar como portfólio de projetos.
Nessa aula vamos aprender como criar seu GitHub do zero!
Se você ainda não tem um GitHub, o primeiro passo é você fazer o seu cadastro! Entre no site e clique em Sign up.
Em seguida, ele vai pedir para você preencher seu e-mail, senha e escolher o nome de usuário, e só seguir esses passos e em seguida clicar para se cadastrar:
Feito isso vamos ser direcionados para a página inicial, na página inicial vamos clicar em your profile.
Agora estamos na página onde iremos construir nosso perfil, perceba que o ambiente já está organizado, precisamos apenas personalizar e deixá-lo mais acolhedor para quem visitar o perfil.
Nosso objetivo é chegar neste resultado:
O primeiro passo é colocar a foto, clique em editar no Profile Picture e coloque uma foto de sua preferência.
A foto pode demorar um pouco para carregar, mas isso é normal, não se preocupe.
Em seguida preenchemos da melhor forma os campos com nossas informações pessoais e biografia. Deixe para depois apenas os campos de redes sociais, você já vai entender o porquê…
Após preencher, clique em update profile e o próprio site vai sugerir que você visualize as alterações feitas.
Feito isso vá para o seu perfil -> Clique em repositório -> Novo
Este novo repositório deverá obrigatoriamente ter o mesmo nome do seu perfil
Sinalize como Público e Add a README file -> Clique em Create repository
Agora podemos ver o arquivo REASME.md que é o arquivo que podemos personalizar.
Vamos clicar em Visit profile e começar as edições.
Comece editando a frase de apresentação “Hi There 👋” e coloque uma frase que tenha mais haver com você!
Uma coisa que eu gosto de fazer é utilizar alguns ícones para falar sobre mim…
Emojis
Como deixar em Negrito ou itálico?
Criando link
Observe que o nome da empresa está entre [] chaves e, ao lado, entre parênteses está o link do site da hashtag.
Fazendo nesta ordem quando clicarmos em Preview para visualizar como está ficando, o nome da empresa vai estar como link, assim, quem estiver vendo o perfil consegue clicar e ter acesso à página da hashtag.
Você pode criar o link dessa forma para a sua empresa ou para alguma página que faça sentido para você colocar no seu perfil.
Clique em Preview e vá acompanhando as mudanças da página sempre que quiser.
Esta é a estrutura que deixei minha página, já está muito mais apresentável do que antes, certo? Mas vamos evoluir ainda mais!
Estrutura
Agora vamos inserir ícones com as linguagens que trabalho, sugiro o site da Devicon para adquirir os links.
No site da Devicon vamos pesquisar pelos ícones que queremos, Python, por exemplo.
Feito isso do lado esquerdo da tela vamos escolher o ícone e copiar seu código, cole o código no seu perfil.
Você vai notar ao visualizar o resultado que a imagem está com um tamanho desproporcional.
Para corrigir vamos precisar usar um pouco de HTML.
O primeiro passo é inserir a tag “img” e passar um valor de largura e altura, é muito simples, observe a estrutura:
Resultado
Para conseguir colocar todos eles em uma mesma linha, vamos precisar utilizar outra estrutura do HTML chamada <div>, que é basicamente uma divisão do conteúdo e permite o parâmetro display.