Letícia Silva

Posted on Oct 16, 2020

Github Profile: Como fazer?

#github #beginners #design #tutorial

Você já deve ter entrado em algum perfil do Github e se deparado com um página totalmente diferente do que já viu. Isso acontece porque o Github implantou uma nova feature chamada Github Profile, que permite personalizar o seu perfil com foto de capa, linguagens mais utilizadas, links para redes sociais e informações pessoais, como aquela bio que nos esforçamos para fazer no LinkedIn.

Tá, mas como fazer isso? Vem comigo que eu te ensino!

O primeiro passo é criar uma conta no Github. Se já tiver uma conta, pode pular essa etapa ;)
Crie um repositório com o seu nome de usuário. O meu por exemplo é leticiadasilva, então criei um repositório com o mesmo nome.
ㅤ

Repare que o Github já te conta sobre essa nova funcionalidade, explica que o repositório tem ser público, e que deve ser inicializado com o README para começar.

Agora é onde a diversão começa! Nessa parte pensaremos na arte da sua capa, e uniremos elementos que te lembrem para criar algo personalizável e que fique com a sua cara 😃

Tá difícil de pensar? Faça uma lista! Eu juntei diversas características na minha imagem, de coisas que eu amo e ilustram quem eu sou, como:

plantinhas;
bichinhos de estimação (sou mãe de duas gatinhas maravilhosas);
computador (é onde eu passo a maior parte do meu dia);
itens de papelaria;
ideias (vivo cheia delas!);
uma boa dose de capuccino;
ferramentas de ciência de dados;

E voilá, temos um escopo da arte! 😍

A minha ficou assim, mas vale soltar a imaginação por aí! Ah, eu também coloquei as minhas redes sociais e o canal que tenho no YouTube.

Eu não sou design (nem manjo tanto de edição de imagens), mas usei algumas ferramentas que ajudaram MUITO a tornar o processo mais fácil e rápido. São elas:

Edição

Canva;
GIMP;

Imagens em png (com fundo transparente)

Toda a minha arte foi montada no Canva, mas com elementos diversos desses links. A parte mais legal é que você consegue personalizar do seu jeito, tornando a sua arte única!

Segue outro modelo que montei no Canva, dessa vez para o Willian Frantz:

E se você não sabe por onde começar, eu te ajudo! Vamos pensar num tema para fazermos nossa arte 😄

Capa

A primeira coisa a fazer é listar os elementos que você quer que estejam presentes na sua capa! Vamos listar uma persona e suas características:
- designer;
- sobretons;
- elementos que lembrem design;
- cores alegres.

Eu peguei a imagem abaixo como inspiração, do Blush.

O próximo passo é abrir o Canva e procurar a opção "Capa para Facebook":

E você terá uma página em branco para chamar de sua! Pode usar sua criatividade A VON-TA-DE!

Eu resolvi começar com um fundo laranja 🧡;

Adicionei um gradiente, no mesmo grupo de tons do laranja;

Coloquei transparência no gradiente;

Adicionei algumas linhas, também em tons quentes e que combinassem com o fundo;

Inseri nossa imagem de inspiração (uma pessoa trabalhando com seu laptop);

Coloquei um círculo em tons de degradê em torno da figura da pessoa;

Adicionei um nome fictício para a persona (utilizei uma das fontes e modelos já disponíveis no Canva);

Também coloquei um texto para identificar as áreas em que nossa persona trabalha ("DESIGN & UX");

Peguei itens que lembrem essas áreas e inseri na imagem;

Inseri uma figura geométrica na arte;

Apliquei uma transparência na figura geométrica, inseri mais duas cópias dela, e pronto! Terminei a nossa arte, YAY \o/

OBS.: Eu utilizo a versão PRO do Canva, pois possuo a licença de estudante. Para saber mais a respeito, é só clicar aqui.

Painéis interativos

ㅤ

MUITA gente me perguntou sobre essa parte. Acontece que, eu não reinventei a roda. Esses painéis estão disponibilizados num repositório do Github, e a única coisa que eu fiz foi colocá-los no meu arquivo README.md.

Caso você queira os códigos, vou deixá-los aqui. A única coisa que precisa ser feita é alterar seu_usuário para o seu nome de usuário do Github.

<img width="400px" align="left" src="https://github-readme-stats.vercel.app/api/top-langs/?username=seu_usuário&hide=html&layout=compact&theme=buefy" />

<td><img width="495px" align="left" src="https://github-readme-stats.vercel.app/api?username=seu_usuário&theme=buefy"/>

Código completo:

<center>
<table>
    <tr>
        <td><img width="400px" align="left" src="https://github-readme-stats.vercel.app/api/top-langs/?username=seu_usuário&hide=html&layout=compact&theme=buefy" /></td>
        <td><img width="495px" align="left" src="https://github-readme-stats.vercel.app/api?username=seu_usuário&theme=buefy"/></td>
    </tr>   
</table>
</center>

É possível alterar as cores de tema dos painéis, basta entrar no link do repositório que eu deixei ali em cima.

Texto de boas vindas

Aqui é onde você oficialmente se apresenta! Vale contar das suas coisas preferidas, linguagens e tecnologias que trabalha, quais as skills que são mais desenvolvidas, falar dos bichinhos de estimação... Use a imaginação e faça uma descrição incrível! Ah, para colocar a imagem da mãozinha dando um tchau, você pode salvá-la aqui, subir para o seu repositório e colocá-la desse jeito no seu código:

### Texto de boas vindas <img src="link_da_imagem" width="30px"></h2>

Se precisar de uma ajudinha com o Markdown (linguagem de marcação que o Github utiliza nos seus repositórios), você pode consultar esses links:

Anotações de Markdown;
Curso Aprenda Markdown.

Os emoticons utilizados podem ser encontrados nessa lista.

Redes sociais

Para as imagens das redes sociais, eu entrei no Flaticon e baixei os modelos que escolhi no formato .png. Depois foi só subir elas no repositório e linkar com minhas redes, dessa forma:

<a href="https://www.linkedin.com/in/seu_usuário"><img src="https://github.com/seu_usuário/seu_usuário/linkedin.png" width="16"></img></a> [LinkedIn](https://www.linkedin.com/in/seu_usuário)

Mude seu_usuário para o seu nome de usuário das respectivas redes sociais :)

Número de visitantes do perfil

Essa foi uma feature que também peguei pronta, aqui. Inclusive, um agradecimento ao Jonathan Mota que mandou essa dica lá no meu Twitter!

Não esqueça de alterar seu_usuário para o seu nome de usuário do Github.

![](https://komarev.com/ghpvc/?username=seu_usuário&color=blue&style=flat

É possível alterar as cores de tema dos painéis, basta entrar no link do repositório que coloquei ali em cima.

Conclusão

E depois de todos esses passos, você ✨ finalmente ✨ terá um perfil incrível! O meu ficou assim:

Caso queira visualizá-lo no Github, o repositório pode ser encontrado aqui.

Espero que a jornada até aqui tenha sido divertida e que esse tutorial tenha tornado tudo um pouco mais fácil e claro :) Gostaria de agradecer a Vyc, que foi quem me inspirou a montar meu Github Profile ❤️

Qualquer dúvida, é só me mandar uma mensagem pelo Twitter que eu tento ajudar 😊