Como adicionar as badges do Hacktoberfest no seu perfil do GitHub
Tags: hacktoberfest, hacktoberfest23, github, braziliandevs
Published: 2023-10-13 17:44:40

Para o Hacktoberfest de 2023, algumas das recompensas disponibilizadas pela organização do evento são badges para as pessoas que estiverem participando ou concluírem o objetivo de 4 Pull Requests mergeados. E essas badges possuem identificações e ficam hospedadas no site [Holopin](https://www.holopin.io/).

Além de ficarem disponíveis em seu perfil nesse site, você também agora pode adicionar na página inicial do seu perfil de GitHub e fica bem legal!

O próprio site do Holopin já te mostra como fazer isso, usando markdown. Bora lá?

> Para você adicionar as badges no seu GitHub, você deve ter um perfil criado. Se você ainda não tem esse perfil, aqui está um artigo chamado [GitHub Profile: como fazer?](https://dev.to/dii_lua/github-profile-como-fazer-54o0) da @dii_lua para você saber como fazer isso.

## Como requisitar badges recebidas?
No seu próprio [perfil criado no site do Hacktoberfest](https://hacktoberfest.com/profile/), você identificará alguns itens chamados de "Rewards" que serão as suas recompensas. O site avisa que você pode requisitar pelo link enviado ao seu e-mail. O mesmo e-mail que estiver cadastrado no site.

![Print da tela mostrando um exemplo de recompensa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qny56j9rbcnsalnrrzou.png)

Quando você requisitar, poderá notar pelo perfil criado dentro do site Holopin, que você pode acessar por holopin.io/@nome_de_usuárie_que_você_criou. 

![Print da tela do meu perfil para deixar de exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v989rhlrhdh3s3fehe9o.png)

## Como ajustar as badges para que fiquem disponíveis para visualização no perfil do Holopin?

Antes de irmos colocar no perfil do GitHub, vamos ajustar da forma que acharmos melhor no perfil do Holopin.

Na página do seu perfil, identifique a aba "board". Clique nela e, em seguida, identifique do lado direito um botão na cor verde escrito "show inventory".

Ao clicar nesse botão, um novo menu do lado esquerdo ficará disponível para uso. Nele, haverão todas as badges que você possui até o momento.

Cada uma das badges podem ser adicionadas ou removidas ao seu perfil de exibição. Você notará que a badge poderá ter ou um botão escrito "add" para adicionar ao board, ou um botão "remove" para retirar do board.

![Print da tela demonstrando o menu do lado esquerdo aberto com uma badge com a opção de adicionar e uma badge com a opção de remover.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rtqghx3j8ulnsuxs8zm.png)

Para finalizar a adição e remoção de badges, você poderá fechar esse menu da lateral esquerda clicando no botão localizado na parte superior direita, na cor vermelha e escrito "close".

## Ajustando posição, rotação e tamanho das badges no seu perfil do site Holopin

Conforme você for adicionando as badges, elas ficarão posicionadas uma em cima da outra. Você pode fazer alguns ajustes de posicionamento, rotação da imagem e tamanho.

### Para mudar a badge de posição:
Clique na badge desejada e arraste até o ponto da tela que você quer que fique. Ao fazer isso, você perceberá que existe um limite de tamanho do board, então você deverá ajustar dentro do espaço disponível.

### Para rotacionar a badge:
Clique na badge desejada e pressione ao mesmo tempo a tecla "ctrl". Movimente o cursor do mouse até encontrar a posição desejada.

### Para mudar o tamanho da badge:
Clique na badge desejada e pressione ao mesmo tempo a tecla "shift". Se você quiser aumentar o tamanho da badge, movimente o cursor do mouse para baixo e para a direita, em diagonal. Se você quiser diminuir o tamanho da badge, movimento o cursou do mouse para cima e para a esquerda, em diagonal. Faça isso até identificar o tamanho desejado.

## Adicionando o board de badges no seu perfil do GitHub

Depois de configurar o seu perfil de badges, você pode adicionar o comando abaixo no README.md do seu perfil do GitHub.

No próprio site do Holopin, você pode identificar as orientações de como fazer isso. Logo abaixo do board de badges.

![Print da tela do meu perfil mostrando o board das badges e logo abaixo, em destaque por uma seta amarela, o comando markdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcxvxdjkoidfcm8uxl29.png)

No meu caso, o comando ficará assim:

```
[![An image of @morgannadev's Holopin badges, which is a link to view their full Holopin profile](https://holopin.me/morgannadev)](https://holopin.io/@morgannadev)
```

No seu caso, ajuste o nome de pessoa usuária que você criou para o seu perfil.

O texto que consta no início do comando é para ajudar na acessibilidade. Você pode descrever a imagem em português se preferir. Mas recomendo muito que você não tire.

Copie esse comando e cole no README.md do seu perfil, na posição que achar melhor.

![Print do comando colado no meu README.md](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a4dqv9m8phibe3co276.png)

Dica: se quiser visualizar como ficou antes de salvar as alterações, você pode clicar na aba "Preview" do seu código, caso esteja fazendo diretamente na interface do seu GitHub. Ou caso esteja também fazendo na sua IDE favorita.

Faça o commit para salvar as alterações realizadas e aprecie, agora, suas novas badges do Hacktoberfest em seu perfil do GitHub.

![Print de uma parte do meu perfil do GitHub que mostra as badges adicionadas.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unwlrroc2hq24ms6fpso.png)

---

Curtiu? Compartilhe seu perfil nos comentários para acompanharmos como ficou o GitHub, caso esteja participando do Hacktoberfest. E lembre-se: qualquer dúvida, só mandar nos comentários também para te ajudarmos.