[Tip] Gthub profile 꾸미기

밋밋한 깃허브 프로필 멋들어지게 꾸며보자!

before, after

 

1. 프로필용 Git Repository 만들기

👇 방법은 아래와 같다

GitHub will display your profile README on your profile page if all of the following are true.

• You've created a repository with a name that matches your GitHub username.
• The repository is public.
• The repository contains a file named README.md in its root.
• The README.md file contains any content.GitHub will display your profile README on your profile page if all of the following are true.

그냥 내 github 아이디로 repository 만들면 된다~ (public이어야 함)

 

위처럼 github 아이디와 같은 이름의 repository를 만들면 오른쪽 사진처럼 귀엽게 만들어준다

 

하지만 그럼에도 밋밋하기만 한 내 프로필.. 

 

2. 프로필 꾸미기

1) 멋진 배너 만들기

capsule render를 이용하면 위처럼 멋진 배너를 만들 수 있다!

공식 사이트 : https://github.com/kyechan99/capsule-render

GitHub - kyechan99/capsule-render: Dynamic Coloful Image Render

 

2) Github stats

<h3 align="center">👩‍💻 My Github Stats 👩‍💻</h3>
<div align="center">

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=hyeinisfree&hide_title=true&show_icons=true&include_all_commits=true&disable_animations=true&theme=vue)](https://github.com/anuraghazra/github-readme-stats)
</div>

github stats을 통해 github 통계를 프로필에 표시할 수 있다! 사용법은 아래 공식 사이트를 통해 확인할 수 있다~

공식 사이트 : https://github.com/anuraghazra/github-readme-stats

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

 

3) Hits

 

<p align="center">
  <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fhyeinisfree&count_bg=%2341B883&title_bg=%23CDC2C2&icon=github.svg&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
</p>

hits를 사용해서 github 프로필의 방문자 수를 확인할 수 있다! 사용법은 아래 공식 사이트를 통해 확인할 수 있다!

공식 사이트 : https://hits.seeyoufarm.com

HITS

 

4) 배지 만들기 

<h3 align="center">📚 Tech Stack 📚</h3>
<p align="center">
  <img src="https://img.shields.io/badge/Java-007396?style=flat-square&logo=Java&logoColor=white"/></a>&nbsp
  <img src="https://img.shields.io/badge/Python-3766AB?style=flat-square&logo=Python&logoColor=white"/></a>&nbsp 
  <img src="https://img.shields.io/badge/Javascript-ffb13b?style=flat-square&logo=javascript&logoColor=white"/></a>&nbsp 
  <br>
  <img src="https://img.shields.io/badge/Spring-6DB33F?style=flat-square&logo=Spring&logoColor=white"/></a>&nbsp
  <img src="https://img.shields.io/badge/SpringBoot-6DB33F?style=flat-square&logo=SpringBoot&logoColor=white"/></a>&nbsp 
  <img src="https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=Node.js&logoColor=white"/></a>&nbsp
  <img src="https://img.shields.io/badge/Express-000000?style=flat-square&logo=Express&logoColor=white"/></a>&nbsp
  <br>
  <img src="https://img.shields.io/badge/Mysql-E6B91E?style=flat-square&logo=MySql&logoColor=white"/></a>&nbsp 
  <img src="https://img.shields.io/badge/AWS-232F3E?style=flat-square&logo=AmazonAWS&logoColor=white"/></a>&nbsp 
  <img src="https://img.shields.io/badge/Docker-2496ED?style=flat-square&logo=Docker&logoColor=white"/></a>&nbsp 
  <img src="https://img.shields.io/badge/Jenkins-D24939?style=flat-square&logo=Jenkins&logoColor=white"/></a>&nbsp 
</p>

<h3 align="center">🌈 Follow Me 🌈</h3>
<p align="center">
  <a href="https://velog.io/@hyeinisfree"><img src="https://img.shields.io/badge/Tech%20Blog-11B48A?style=flat-square&logo=Vimeo&logoColor=white&link=https://velog.io/@hyeinisfree"/></a>&nbsp
  <a href="https://www.instagram.com/dev.dobby/"><img src="https://img.shields.io/badge/Instagram-E4405F?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/hye_inisfree/"/></a>&nbsp
  <a href="mailto:kimhyein7110@gmail.com"><img src="https://img.shields.io/badge/Gmail-d14836?style=flat-square&logo=Gmail&logoColor=white&link=kimhyein7110@gmail.com"/></a>
</p>

다양한 배지들을 통해 프로필을 다채롭게 꾸밀 수 있다! shields와 simpleicons를 이용한다!

배지 공식사이트 : https://shields.io/

Shields.io: Quality metadata badges for open source projects

아이콘 공식사이트 : https://simpleicons.org/

Simple Icons