Github Profile: Como fazer?  
Tags: github, beginners, design, tutorial
Published: 2020-10-16 00:17:05

Você já deve ter entrado em algum perfil do [Github](https://github.com) 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!  

<p align="center"><img src="https://media.giphy.com/media/13hxeOYjoTWtK8/giphy.gif"></p>  

* O primeiro passo é criar uma conta no [Github](https://github.com). 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.
ㅤ
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yqajn0g9pkr83eq4onfi.png)

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 :smiley:  

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! :heart_eyes:  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q7by0ysorjix1n8ruekh.png)

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](https://canva.com);
* [GIMP](https://www.gimp.org/);

### Imagens em png (com fundo transparente)  

* [Blush](https://blush.design/pt);  
* [Lukaszadam](https://lukaszadam.com/);  
* [Freepik](https://www.freepik.com/);

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](https://twitter.com/frantz_willian):  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wrf4zr1mlp4y5ek6906h.png)

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

---
### 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](https://blush.design/pt/collections/40G09koP55fYh86yZDnX/character-sitting-on-floor/LQqJkHLd7).  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0i5mbm73i69pmtfbss5d.png) 

* O próximo passo é abrir o [Canva](https://canva.com) e procurar a opção _"Capa para Facebook"_:  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/84jaxqimeockwd32oehv.png) 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n1skut3iix2wreizk729.png)

* Eu resolvi começar com um fundo laranja :orange_heart:;  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/81vxvw8131k6jkwvyfzj.png) 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g6r54mtjx6ruil7qhpvc.png)

* Coloquei transparência no gradiente;  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hixjx0didkk9zpdcld7c.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/27kjhwzhwgq42qaj7nug.png) 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xt74dhfpy3r4rzataekk.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7cv2z7ttml9iwee3w0gm.png) 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/actt666lvlmjxvzm88jw.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bsjgrtmz79uq8babr073.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vsijn4j3kq2qhhb1qaav.png)

* Inseri uma figura geométrica na arte;  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6lb43lqw9pq3ey8sjqxe.png) 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wka6myc5n85f1xh13i8y.png) 

**_OBS.: Eu utilizo a versão PRO do Canva, pois possuo a licença de estudante. Para saber mais a respeito, é só clicar [aqui](https://www.canva.com/pt_br/educacao/)._**  

---
### Painéis interativos  
ㅤ
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hsd3o14yx42689t2yyi8.png)

**MUITA** gente me perguntou sobre essa parte. Acontece que, eu não reinventei a roda. Esses painéis estão disponibilizados num [repositório](https://github.com/murilothink/github-readme-stats) 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.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zg4mmnldhti4wc5obwcb.png)

    <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" />  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q8b8x9qdn5i7vo7z5fjo.png)

    <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](https://raw.githubusercontent.com/iampavangandhi/iampavangandhi/master/gifs/Hi.gif), 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](https://github.com/leticiadasilva/notas-de-aula/blob/master/markdown/anota%C3%A7oes-markdown.md);  
* Curso [Aprenda Markdown](https://www.udemy.com/course/aprenda-markdown/).  

Os emoticons utilizados podem ser encontrados nessa [lista](https://gist.github.com/rxaviers/7360908).  

---

### Redes sociais  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mkw1uap9ibm59t4hzxy5.png)

Para as imagens das redes sociais, eu entrei no [Flaticon](https://www.flaticon.com/) 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](https://github.com/antonkomarev/github-profile-views-counter). Inclusive, um agradecimento ao [Jonathan Mota](https://twitter.com/jnthmota) 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ê :sparkles: finalmente :sparkles: terá um perfil incrível! O meu ficou assim:  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cp17rena2qour0w0xxoi.png)

**_Caso queira visualizá-lo no Github, o repositório pode ser encontrado [aqui](https://github.com/leticiadasilva)._**

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](https://twitter.com/vyckarina), que foi quem me inspirou a montar meu Github Profile :heart:  

Qualquer dúvida, é só me mandar uma mensagem pelo [Twitter](https://twitter.com/dii_lua) que eu tento ajudar :blush:

<p align="center"><img src="https://media.giphy.com/media/TgrXouvj1MwKoREXap/giphy.gif"></p>  

Beijinhos, 

Lê <3