8

Você sabia que através de um simples HTML é possível estilizar o seu README no Github?

#GitHub #HTML #CSS
Ralf Carneiro
Ralf Carneiro

Para as pessoas que tem interesse em deixar o seu README mais profissional, seguem aqui algumas dicas.


O Gitgub é o seu cartão de visitas!


Vou deixar um modelo para que vocês possam realizar alguns testes.


Primeiro passo:

No github, crie um repositório com exatamente o seu nome de usuário.

"Sim" é um segredinho do github"


Ao fazer isso você poderá editar seu readme para configurar da maneira que você preferir.

Pode inserir cards estáticos, exibir informações técnicas do seu desenvolvimento, adicionar imagens e etc...


Você terá um editor de texto com todos os recursos do HTML.

Fantástico não acha?

Pense nisso!


A baixo um modelo e algumas dicas:


//Não esqueça de alterar o nome do usuário!!!


Basta copiar e colar dentro do readme criado e pronto!

--------------------------------------------------------------------------------------------------------------------------

<h2 align="center">Helloooooo!</h1>

<h1 align="center">Welcome to my profile 👋</h1>

<h3 align="center">Front-end Developer Jr</h3>


 <div align="center">

  <span>

   <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black"/>

   <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white"/>

   <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white"/>

   <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white"/>

   <img src="https://img.shields.io/badge/C%23-239120?style=for-the-badge&logo=c-sharp&logoColor=white"/>

  </span>

 </div>

</br>


<div align="center">


[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=ralfprezia&layout=compact&theme=tokyonight)](https://github.com/ralfprezia/github-readme-stats)

  


</div>




<div align="center">

  

- 📫 How to reach me **ralfprezia@gmail.com**

  

</div>



 <h3 align="center">Connect with me:</h3>

  

 <p align="left">

  <li align="center">

   <a class="url" href="https://www.linkedin.com/in/ralf-prezia-6a38181a3/" img> 

    Linkedin

   </a>

  </li>

  <li align="center">

   <a class="url" href="https://api.whatsapp.com/send?phone=5535992446440/" img> 

    Whatsapp

   </a>

  </li>

  



<h3 align="center"> 🚀 Frameworks </h3>

<div align="center">

 <span>

  <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"/>

  <img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white"/>

  <img src="https://img.shields.io/badge/.NET-512BD4?style=for-the-badge&logo=dotnet&logoColor=white"/>

  <img src="https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white"/>

  <img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white"/>

 </span>

</div>


</br>


<div align="center">

 <span>  

  <img src="https://img.shields.io/badge/NuGet-004880?style=for-the-badge&logo=nuget&logoColor=white"/>

  <img src="https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white"/>  

  <img src="https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&logo=Postman&logoColor=white"/>

  <img src="https://img.shields.io/badge/firebase-ffca28?style=for-the-badge&logo=firebase&logoColor=black"/>  

  <img src="https://img.shields.io/badge/Docker-2CA5E0?style=for-the-badge&logo=docker&logoColor=white"/>

 </span>

</div>


</br>


</br>



<div align="center">

  

![Ralf's GitHub stats](https://github-readme-stats.vercel.app/api?username=ralfprezia&show_icons=true&theme=tokyonight)


</div>

--------------------------------------------------------------------------------------------------------------------------


Agora se você estiver bem na pegada, segue aqui alguns links com muito mais informação para a evolução do seu github!


Repositório com muito material aplicado

https://github.com/alexandresanlim/Badges4-README.md-Profile#-contact-


Artigo com links e referências muito boas para você editar na mão.

https://natansl.medium.com/criando-um-readme-para-seu-perfil-no-github-6eb119218c4


Quer criar um README sem escrever uma linha de código?

Utilize o gerador Markdown


https://rahuldkjain.github.io/gh-profile-readme-generator/



Galera qualquer dúvida que eu puder ajudar é só chamar!

Meu gituhub => https://github.com/ralfprezia


Grande abraço!

Bora codar!

4
47

Comentários (10)

0
Pedro Gomes

Pedro Gomes

04/07/2021 04:17

que massa, Ralf!!


*sugestão*

Eu acredito que as imagens tu pode utilizar do próprio git (colocando elas dentro de algum repositório e pegando o link para elas)


Edit1: Ao utilizar percebi que as imgs tu criou utilizando o img.shild.io (elas são dinamicas), que legal, depois de bater um pouquinho aprendi a usar.

0
Jorbson Guimarães

Jorbson Guimarães

04/07/2021 02:51

Vou wardar aqui para ver com mais paciência pela manhã, alguém pode curtir ?

Vou aproveitar e mostrar o que eu fiz com o GitHub

https://jobsguimaraes.github.io/

Achei legal o seu gráfico de pizza, vou tentar implementar isso ao meu. []'s

0
Katia Santos

Katia Santos

04/07/2021 00:37

Super útil, obrigada!

0
E

Ewerton Xavier

04/07/2021 00:31

Só falta a opção de dar like aqui kkkkk. Post incrível, Ralf. Se possível, continua transmitindo mais informações como essa, por favor.

0
Robson Santos

Robson Santos

04/07/2021 00:23

Muito bom!

0
Juliana Almeida

Juliana Almeida

04/07/2021 00:13

TOP

Obrigada

0
Amanto Moura

Amanto Moura

03/07/2021 23:56

Que dica incrível!

0
Eduardo Santana

Eduardo Santana

03/07/2021 23:40

Fantástico, man * -*

0
João Amaral

João Amaral

03/07/2021 23:37

Nossa muito bom, obrigado!!

0
J

João Silva

03/07/2021 23:29

Genial

Estudante de programação com foco em me tornar um fullstack.

Brasil