Como personalizar o seu perfil no Github (Readme)

Oi gente, sejam bem-vindos a mais um vídeo aqui do canal. Eu sou a Rafaela Ballerini e hoje eu vou mostrar pra vocês como fazer um perfil personalizado do GitHub como esse daqui.

Caso você ainda não esteja familiarizado ou familiarizado com o Git e o GitHub, que são essas duas ferramentas de versionamento de código, você pode conferir aqui nos meus vídeos.

Eu fiz uma playlist, na verdade, explicando como que funciona o Git e como que você aplica na prática esses conhecimentos. Então hoje eu vou mostrar para vocês como deixar o perfil do GitHub parecido com o meu, que é desta forma aqui, como eu já mostrei para vocês. E também vou mostrar algumas coisas adicionais que vocês podem colocar, porque não necessariamente eu coloquei tudo que dá para colocar, na verdade. da pra colocar

zilhões de coisas, inúmeras coisas. E eu vou mostrar pra vocês algumas diferentes aí que eu achei pela internet que são bem legais. Lembrando que os vídeos que eu tenho feito, eu tenho escrito o roteiro em Markdown e subido esse roteiro num repositório do GitHub que eu vou deixar aqui na descrição. Então a primeira coisa que eu vou mostrar pra vocês é como está o meu perfil, né? O que que tem tão

legal aqui que a gente vai colocar durante esse vídeo. Eu tenho esse repositório aqui todo, que é o que eu vou ensinar vocês a fazer nesse vídeo. Tem várias

informações, esse GitHub stats que mostra todos os commits, as estrelas que eu tenho, as linguagens que eu mais uso. Aqui eu coloquei fotos também, fotos não, imagens das linguagens que eu utilizo, minhas redes sociais todas e essa cobrinha super legal que come os commits, além do meu GIF aqui também, que eu fiz no começo do ano, eu achei muito fofo e tá aí. Então, para esse vídeo, gente, para eu mostrar o

passo a passo para vocês, eu criei uma conta diferente da minha, para poder começar do zero e criar com vocês as coisas. E não me sigam nela, por favor.

Vai ser o Rafa Ballerini 2, mas a minha conta oficial é essa daqui, o Rafa Ballerini normal. Então aqui temos o meu perfil fake, que é utilizado para stalkear as pessoas aqui no GitHub. A gente já tem aqui as contribuições, aquela tabela de commits que de fato tinha no meu perfil. Não tem nenhum. porque eu nunca usei essa conta, e conforme eu for fazendo os comits, ele vai aumentando. Aqui eu já

vou colocar que eu quero que as contribuições privadas apareçam também. Então,

vou colocar isso aqui ligado. E o que seria isso, na verdade? Quando

você vê no meu perfil, deixa eu entrar no meu perfil, Rafa Ballerini normal, você pode ver que tá cheio de coisa e tem muita contribuição, muito commit que eu fiz em repositório privado, que não é público. E esses commits, eles só vão entrar aí nessa tabela, nessa contagem, se eu deixar ligado. E aí aqui eu já liguei porque aí aparece mais coisa, né? Parece que eu faço mais coisa aqui. Vamos

agora, finalmente, fazer a parte mais interessante, que é realmente personalizar esse readme aqui.

Como vocês podem ver, tá escrito aqui como que é o readme, gente. Ele é

um repositório apenas com esse arquivo readme, com todas as informações que eu quero dentro dele. E aqui tá escrito já como que é esse repositório, né? Como que é

dele. E aqui tá escrito já como que é esse repositório, né? Como que é feito esse projeto. Ele é apenas um repositório que se chama rafa-ballerini-readme, que é o arquivo que eu escrevi todas essas coisas. Então eu vou entrar nesse repositório de fato. Eu tô aqui, lembrando, dentro da minha conta fake, e eu tô olhando... eu estou criando meu perfil normal, que nem vocês podem olhar, e eu

tô olhando... eu estou criando meu perfil normal, que nem vocês podem olhar, e eu vou deixar o link aqui na descrição. Vou entrar aqui nesse repositório meu que é o do perfil, e vocês podem ver que tem, olha só, só tem um arquivo, essa pasta aqui de workflows, depois eu vou explicar para vocês o que é, mas só tem esse arquivo readme com todas as informações, então ele já está mostrando tudo

aqui. Beleza? Então a primeira coisa que a gente vai fazer é ir no meu

aqui. Beleza? Então a primeira coisa que a gente vai fazer é ir no meu perfil fake e criar esse repositório. Porém, o nome não vai ser Rafa Ballerini, né?

Porque, tipo assim, o Rafa Ballerini é pra aquela conta. Aqui, o nome do repositório tem que ser o nome do seu usuário no GitHub. Então se seu nome é Pedro, vai ser Pedro. Seu nome é Gabriela, vai ser Gabriela. Quer dizer, seu nome não, seu usuário. Então aqui é Rafa Ballerini... Olha só que legal que aparece. Logo

que eu digito o meu nome no GitHub, ele mostra aqui uma mensagem. You found

a secret. Rafaela Ballerini 2, barra Rafaela Ballerini 2, que é o repositório que eu acabei de criar, is a special repository that you can use to add a readme to your GitHub profile. Make sure it's public and initialize it with the readme to get started. Ou seja... Ele está falando que esse é um repositório especial e você

get started. Ou seja... Ele está falando que esse é um repositório especial e você pode utilizar um readme para o seu perfil do GitHub. Tenha certeza de que ele estará público para poder aparecer no perfil, obviamente, e inicialize ele com o readme para começar. Então, olha só, aqui embaixo já tem, ele já está público, eu vou deixar

começar. Então, olha só, aqui embaixo já tem, ele já está público, eu vou deixar ele assim, e eu posso já adicionar o readme agora que eu vou criar, que nem ele tinha falado. Já inicialize com o readme. Gostaram do meu inglês, gente? Foi

engraçado, né? Eu tentando ler inglês aqui pra vocês ao vivo. Então, pra personalizar aqui o nosso perfil, eu vou clicar no lapisinho pra gente editar esse arquivo. E lembrando

que esse readme.md, ele é essa extensão .markdown. E esse markdown, ele é uma linguagem de marcação um pouco diferente do HTML, mas ele aceita HTML dentro, né? Esse

especificamente do GitHub aceita. E vocês podem ver que ele já vem aqui com umas coisas também configuradas. Olha só, tem um comentário comentário aqui dizendo algumas coisas que você pode colocar que o próprio github tá falando para gente mas assim deixando claro o markdown eu vou colocar aqui na descrição e também no roteiro que eu tô desse vídeo aqui que eu tô gravando é um guia de markdown mas assim você consegue

colocar títulos como se fosse h1 h2 h3 com as 7 tags você pode deixar o texto em negrito pode deixar em itálico é legal vocês darem uma olhada aqui para vocês verem todas as possibilidades que vocês podem colocar aqui dentro desse arquivo A primeira coisa aqui que a gente vai fazer é levar em conta o que o GitHub está mostrando para a gente. É um comentário aqui, mas olha só que

legal. Deixar o perfil... Deixa eu só tirar esse comentário aqui. Olha só, eu

legal. Deixar o perfil... Deixa eu só tirar esse comentário aqui. Olha só, eu estou atualmente trabalhando com tal coisa, estou atualmente estudando tal coisa. Isso é algo legal de colocar no perfil, esses emojis com algumas informações importantes, muita gente faz. Vou

até deixar no final aqui do vídeo também alguns exemplos de perfis que também vão fazer isso. E você pode colocar. No meu, por exemplo, o meu atual, Rafa Ballerini,

fazer isso. E você pode colocar. No meu, por exemplo, o meu atual, Rafa Ballerini, eu não tenho esses emojis, mas se você quiser colocar e deixar, é uma opção legal. Lembrando que os emojis para você pegar... você pode, se estiver utilizando Windows, apertar

legal. Lembrando que os emojis para você pegar... você pode, se estiver utilizando Windows, apertar Windows ponto que ele já vai te dar os emojis listados. Eu não sei se apareceu aqui no vídeo porque eu estou compartilhando a janela e não a tela. Mas

se não, se você tiver com outro sistema operacional, você pode pesquisar esse bag, que é o Emojipedia bag. Ele tem todos os emojis que você pode utilizar. Olha só

que legal. E aí você pode copiar e colar, literalmente. Você copia aqui o emoji e cola aqui que você vai poder utilizar. Então fica aí a dica, vou deixar na descrição o link também desse bag. E vamos começar a meio que copiar o que eu fiz no meu perfil original. Lembrando que quando a gente vai editando a gente pode também ir vendo nesse preview, nessa aba de preview como tá ficando. Então

olha só que legal que fica, né? E eu vou na verdade colocar algumas coisas aqui interessantes, né? Eu tô trabalhando com... Eu vou dar um speed aqui enquanto eu mudo no vídeo, mas eu vou só escrever algumas informações.

Aqui eu coloquei então algumas informações que é hoje trabalho com front-end, estudando o TypeScript, contate-me no e-mail tal. Na verdade, esse aqui nem precisa porque já aparece, né? Eu

coloquei lá no meu perfil. E pro nome isso que eu utilizo também. É legal.

Vamos ver o preview como que tá ficando. Olha só, ficou bonitinho aí com esses emojis. Vou tirar esse Hi There e vou usar um Olá.

emojis. Vou tirar esse Hi There e vou usar um Olá.

Opa, Olá. Ah, meu Deus. Eu sou... a Rafaela

Ballerine 2, porque o A1 já existe ali. E agora eu vou pegar o que tem já no meu perfil original. Vamos abrir aqui o repositório desse meu perfil, que como a gente lembra é o nome do próprio usuário do GitHub, né? e eu

vou abrir o arquivo readme do repositório vou clicar no lapisinho quando eu clico aqui ele vai criar um fork no meu perfil no seu perfil né quando você clicar do meu projeto mas você pode apagar depois aqui não tem jeito gente aí quando você clicar no lapisinho você consegue ver o código inteiro e você consegue copiar e colar então vamos lá eu coloquei um título que nem eu tinha feito aqui aqui

eu coloquei Olá eu sou a Rafaela Ballerini 2 mas aqui tem o Oi eu sou a Rafaela Ballerini beleza que é essa parte aqui logo em Em seguida já vem essa div com o GitHub Stats, que são essas duas imagens gigantes com o total de commits, as estrelas que eu tenho, as linguagens que eu mais uso, o que é bem legal, isso é que vocês sempre me perguntam

como faz. Como que faz? Só copiar e colar do meu perfil, mas não é

como faz. Como que faz? Só copiar e colar do meu perfil, mas não é só isso aí não. Vamos lá, eu copiei aqui então essa div, vou colar aqui, calma, agora eu já não sei onde eu vou colocar. É, eu vou colocar embaixo aí dessas informações. Div. E o que tem aqui? Tem a tag E que vai ser o clicável. Quando eu clicar nessas imagens ele vai redirecionar para o

meu próprio perfil do GitHub. E lembrando que aqui está redirecionando para o Rafa Ballerini, que não é o meu perfil, esse fake. E não vai ser o seu também se você copiar. Você tem que mudar aqui para o seu usuário. Então eu já vou mudar aqui para o Rafa Ballerini 2. Ou você pode colocar para redirecionar para qualquer outro website que você quiser. Na verdade, eu acho que eu vou colocar aqui

pra redirecionar pro meu Beacons. Olha que legal. Acho que vai ser interessante, hein? Depois

eu vou mudar no meu original, por sinal. E logo em seguida vem as duas tags de imagem, que são as duas imagens de fato. Mas a gente também tem que perceber que, olha só, aqui tá falando dos stats da Rafaela Ballerini. Eu não

sou a Rafaela Ballerini, eu sou a Rafaela Ballerini 2. Eu não tenho isso tudo de estrela nem de commit e muito menos linguagens, né? Porque eu não fiz nada ainda nessa conta. Então a gente tem que dar uma olhada aqui na URL. Eu

vou, na verdade, mostrar pra vocês o que é isso tudo que tá acontecendo, né?

Aqui é a altura da imagem, que vai ser 180EM. E aqui é a URL que faz automaticamente essa contagem de commits e também das estrelas e tal que você tem. Vocês podem ver que é um GitHub readmeStatsVercel, então ele está rodando

você tem. Vocês podem ver que é um GitHub readmeStatsVercel, então ele está rodando ali na Vercel. E tem algumas informações que a gente está passando na própria URL, que a gente pode alterar. Por exemplo, o username. Você não pode deixar o Rafa Ballerini, senão vai aparecer as minhas informações no seu perfil. Então a gente troca aqui

o Rafa Ballerini para Rafa Ballerini 2. Aqui embaixo também tem o username e você troca para Rafa Ballerini 2. O que mais que tem? Show

icons. Então vamos ver o que é esse show icons. Tem o show icons true.

Vou tirar, vou colocar false. Vamos ver como que aconteceu. Ah, então, ó, ele tirou aqui os ícones que tinham antes do total stars, total commits. Então, ó, deixa eu mostrar de novo, né? True. Aí, olha só, mostrou aqui os ícones, é uma coisa que você pode configurar. O tema, Drácula, deve existir outros

temas, deve ter o Dark, por exemplo. A gente tá mudando a primeira imagem, né?

Lembrando, preview, ó... Apareceu o tema da lição tem o tema da que legal que é diferente já e aí você pode colocar esse tema da aqui embaixo também provavelmente ao tema Drácula colocar esse Dark é esse github estete gente eles têm um repositório com todas essas informações né eles são um projeto de verdade é eu vou deixar aqui na descrição mas eu vou mostrar para vocês daqui a pouco também quais

são as configurações que vocês podem fazer olha O que eu achei foi esse, né?

Talvez possa ter um outro com essa mesma proposta, né? De GitHub Stats. Mas é

esse aqui que eu uso. Olha só, no Redmi deles, desse repositório, tem todas as especificações. Olha só quanta coisa... quantos temas diferentes que dá pra você colocar. Olha todas

especificações. Olha só quanta coisa... quantos temas diferentes que dá pra você colocar. Olha todas

as propriedades que você pode passar ali na URL. Então, eu recomendo você dar uma olhada mesmo aqui. Vou deixar também no roteiro do vídeo que tá no repositório aí também do... na descrição. E é isso, gente. Esse é o GitHub Stats. E para

também do... na descrição. E é isso, gente. Esse é o GitHub Stats. E para

vocês também terem uma noção, por exemplo, aqui no meu preview, você pode ver que está um A+. Então ele já começa com a contagem A+, de...

comits, estrelas, eu acho que ele conta realmente tudo que está aqui, sabe? Pull requests,

issues... E você vê, por exemplo, no meu preview, que eu sou A++, no meu original. Então também tem S, S+, se não me engano, S++. E aí

original. Então também tem S, S+, se não me engano, S++. E aí

você vai crescendo conforme for aumentando aí a quantidade de estrelas, commits e essas coisas.

Mas assim, gente, isso é algo pra aumentar o nosso próprio ego, né? Porque de

fato... Ninguém entra no perfil dos outros e fica, ah, ele é mais. Não, assim,

é bem bobo assim, sabe? É só pra deixar bonitinho o perfil. Até por isso que ele já começa com a mais, que já é uma nota bem legal. Então,

legal, né, gente? A gente aqui já colocou o nosso GitHub Stats. De fato, não tá aparecendo aqui nada porque eu não fiz nenhum commit, mas se vocês tiverem commit, vocês vão ver que vai aparecer. E vamos pra próxima parte do nosso GitHub Profile.

Eu aqui, o que eu coloquei? são todas as imagens das linguagens que eu utilizo.

Então eu vou copiar e vou colar lá também. Aqui no preview vocês podem ver.

Então são essas daqui que eu tenho. Vou copiar e colar, mas eu vou mostrar para vocês onde vocês podem encontrar, porque vocês podem não necessariamente usar essas mesmas linguagens que eu utilizo. Eu não sei exatamente de onde eu peguei. Eu não lembro, sendo muito sincera. Mas eu vou passar para vocês um site que eu já conheço, que

muito sincera. Mas eu vou passar para vocês um site que eu já conheço, que eu sei que tem todas as linguagens, que é o Devicons. Devicons. Ah, estava lá.

Devicons. Olha só. Ele tem todas as linguagens que você pode pegar e você pode baixar o SVG e usar. Vou voltar aqui para o meu perfil. Tenho esse tracinho que eu tinha jogado aqui. Esses dois hashtags formam um tracinho. Vou colocar também para ficar bonitinho.

E o que eu tinha colocado depois? Ah, as informações das minhas redes sociais. Olha

só que legal. Tem o YouTube, Instagram, Twitch, Discord, Gmail, LinkedIn. E pra isso, então, gente, eu vou também copiar aqui. É uma div, mas eu vou pegar apenas as partes das redes sociais aqui pra colar. E vou criar uma própria div minha aqui.

Div e fechar. Div. E aqui dentro... Nossa, ele fica...

causando aqui na identação, né? E vou colar. Aqui, então, tem todas as tags as com as referências para as minhas redes sociais. Então, quando você vê aqui o YouTube, ele está redirecionando para o meu canal.

sociais. Então, quando você vê aqui o YouTube, ele está redirecionando para o meu canal.

Essa aqui é a imagem. Então, eu já vou mostrar para vocês exatamente esse site aqui que mostra todas as imagens que vocês podem utilizar. É no dev.to. Esse aqui.

Também vou deixar aqui na descrição esse link. Opa. É, esse aqui tem. Mano, tem

muito site que mostra bastante coisa. Olha só que legal, gente. Vocês podem simplesmente copiar.

Que é a... Cadê o do YouTube, por exemplo?

Bom, vou pegar aqui o do Gmail mesmo. Copiar. Provavelmente é o mesmo.

E colar aqui no SRC do botão. Mudou alguma coisa. Tem

esse site, tem outro também que eu utilizo, deixa eu só lembrar qual que é.

Ah, é esse Shields. Então esse Shields também tem algumas badges bem legais que você pode fazer. Vou deixar aqui na descrição o repositório com todos esses links.

pode fazer. Vou deixar aqui na descrição o repositório com todos esses links.

E é isso, gente. Vocês vão adicionando o que vocês quiserem. Vocês podem ver que tem WhatsApp, Telegram, Messenger... ProtonMail, Slack, o que você quiser. Você faz a tag A, manda para onde você quer o link, que vai

quiser. Você faz a tag A, manda para onde você quer o link, que vai ser o seu WhatsApp, e coloca o image, a tag image com a SRC, com a imagem aí, com o link dessa imagem. Olha só como já está ficando. Tá

com todas as minhas redes sociais aqui já. Ele tá quebrado aqui, mas esse negócio às vezes dá um bug, sabe? Tem alguns perfis de algumas pessoas que o tamanho dá uma bugada, então ele não fica na mesma linha. Mas às vezes ele no preview não fica e no perfil fica. Então dá uma olhada nisso. Mas às vezes o que você tem que alterar é ali naquele height, altura, largura também. Aí vai

só mexer ali no HTML e CSS, que é bem tranquilo. E a última coisa, gente, que tem aqui no meu perfil... Ah não, calma, ainda tem o meu gifzinho aqui. Onde que eu deixei o meu gif? Gente, cadê o meu

aqui. Onde que eu deixei o meu gif? Gente, cadê o meu gif? Eu tô chocada, cadê meu gif? É esse

gif? Eu tô chocada, cadê meu gif? É esse

aqui, será? Vamos ver se é esse o meu GIF. Ah, era

esse mesmo. Nossa, aqui tava Yoda. Eu lembro que antigamente eu tinha colocado um GIF do Yoda, por isso que... Vou até trocar. Vou mostrar pra vocês como eu fiz o meu GIF. Aqui é esse site. Acredito eu ser o japonês. E você pode montar o seu GIF também. Na verdade, você monta uma foto e aí você vai num criador de GIFs e coloca duas fotos e essas duas fotos ficam intercalando. Você

faz diferente, duas imagens aqui suas. E aí ela vira um GIF. Foi assim que eu fiz a minha. Mandei lá no servidor do Discord em alguma mensagem. Copiei o

link da mensagem e aí é o link do GIF em si. Fica aí a dica. Embaixo, a gente vai colocar o quê? cobrinha. E a cobrinha, gente, pra

dica. Embaixo, a gente vai colocar o quê? cobrinha. E a cobrinha, gente, pra fazê-la, a gente utiliza o GitHub Workflow, né? O GitHub

Action. Eu não vou explicar sobre isso aqui nesse vídeo, porque senão vai estender muito.

Se vocês quiserem o vídeo explicando, deixe aqui nos comentários. E eu tenho um post no Instagram mostrando passo a passo de como criar a cobrinha. Mas eu vou mostrar pra vocês o que é exatamente essa cobrinha. Vocês podem ver que é um... é

um SVG. Eu vou copiar e vou colar aqui também.

Mas sempre lembrando que essas coisas que copia do meu perfil, elas são do meu perfil. Então as informações que vem, que nem os commits que a cobrinha vai comer,

perfil. Então as informações que vem, que nem os commits que a cobrinha vai comer, é do meu perfil original, não é desse que eu tô colando. Mas não é só, tipo, mudar aqui pra Rafa Ballerini 2. Tem uma coisa que você tem que fazer no GitHub Actions pra ele poder ficar recarregando toda hora que você faz um commit novo, né? E se a gente for fazer aqui o preview, for dar o

preview certinho aqui, ele vai simplesmente quebrar a meu Snake Animation. Por quê? Porque ele

que tá diretamente linkado ali com o GitHub Actions, que eu não tenho, eu não fiz aqui no meu. Como eu falei, eu vou deixar aqui embaixo na descrição o link do post do meu Instagram, que eu ensino passo a passo a fazer a cobrinha, e vou fazer ela aqui rapidinho pra não ficar um vídeo muito extenso.

Carregou. Então agora vamos lá no meu perfil. Vamos ver se ele já foi. Olha

só, ainda tá com problema na minha Snake Animation. Provavelmente tem alguma configuração que eu ainda não arrumei. Deixa eu ver aqui. O workflow eu já arrumei certinho. Aqui, Rafa Ballerini 2, né? Então vamos

arrumei certinho. Aqui, Rafa Ballerini 2, né? Então vamos

ver. E foi! Olha só.

Tem aqui dois commits, né, meus? Olha só, mas que diferente, né? Eu fiz um commit ontem e agora hoje? Porque me deu meia-noite... Nossa, velho, deu o tempo, porque passou meia-noite e aí tem dois dias aí que eu fiz commit nesse perfil. Olha

só que legal. Eu espero que vocês tenham gostado. Eu vou propor pra vocês jogarem aqui embaixo nos comentários o GitHub de vocês e a gente dá uma olhada. Todo

mundo que for chegando vai olhando aí o perfil e vai dando like no que você achar legal. E aí a gente vai fazendo meio que um... Não sei, eu acredito aqui que nos comentários do YouTube eles sempre colocam mais pra cima os que são mais gostados, né? Mais curtidos. Então a gente vai fazendo meio que um stack overflow de perfis pro pessoal poder acompanhar e se inspirar também se você se sentir

à vontade de colocar o seu aqui. É isso, gente. Eu espero que vocês tenham gostado do vídeo de hoje. Não esqueça de se inscrever no canal, que eu sempre tenho postado vídeo a cada 15 dias, talvez. Não é mais toda semana, porque eu sou bem corrida. Também me segue nas outras redes sociais que eu tenho, que eu vou deixar aqui na descrição. Um beijo pra vocês e obrigado por assistirem o vídeo até aqui.