2024.08.05 - Github Profile 꾸미기

👨‍💻 현재 프로필 모습

Github  바로가기

👨‍💻 시작

미루고 미루고 미루고 미루다 드디어 시작하는 Github Profile 꾸미기!

한 번에 완성하기보다는 꾸준히 업데이트해나가기 위해 정리해두려고 한다.

 

제일 먼저 프로필 꾸미기 전 순정 모습!

그냥 레파지토리 고정만 시켜두고 아무것도 꾸미지 않았다.

여기서 하나씩 꾸며보자

 

👨‍💻 프로필 생성하기

Github에 github user name과 동일한 이름의 repository를 만들면 프로필을 작성할 수 있다.

Add a README file에 체크해주고 Create repository를 눌러주면 프로필 꾸밀 준비 완료!

(Add a README file을 체크하지 못했어도, repository 최상단에 README.md 파일을 생성하면 된다.)

 

레파지토리 생성을 완료하고, 프로필로 가보면 레파지토리에 생성된 README.md 파일과 같은 내용으로 프로필 영역이 생긴 것을 확인할 수 있다.

이제 이 레파지토리 안의 README.md 파일을 수정해서 프로필 영역을 꾸미면 된다.

 

👨‍💻 Contact 뱃지 넣기

제일 먼저 메일, 블로그 등 나에 대한 정보를 뱃지로 나타내주려고 한다.

Shields.io를 사용하여 뱃지를 넣어줄 것이다.

 

기본적인 사용 코드는 다음과 같다.

<img src="https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>?style=<STYLE>&logo=<LOGO>&logoColor=<LOGO-COLOR>"/>

LABEL	벳지에 표시해줄 타이틀
MESSAGE	벳지에 넣어줄 정보(생략 가능)
COLOR	벳지 색깔
STYLE	벳지 스타일(flat, flat-square, plastic, for-the-badge, social)
LOGO	로고
LOGO-COLOR	로고 색깔

 

뱃지 색과 로고는 simpleicons.org에서 검색해서 사용하면 된다.

 

나의 경우 gmail을 넣어주고 싶어 다음 코드를 사용했다.

<img src="https://img.shields.io/badge/ysa8497@gmail.com-EA4335?style=flat-square&logo=gmail&logoColor=white"/>

뱃지를 눌렀을 때, 블로그나 인스타그램으로 페이지 이동시키려면 a태그로 감싸주면 된다.

<a href="https://happybplus.tistory.com/"><img src="https://img.shields.io/badge/Tech Blog-000000?style=flat-square&logo=tistory&logoColor=white"/></a>

그리고 이 뱃지 태그들을 p태그로 감싸주면 된다.

 

최종 코드

<p>
  <!-- gmail -->
  <img src="https://img.shields.io/badge/ysa8497@gmail.com-EA4335?style=flat-square&logo=gmail&logoColor=white"/>
  <!-- Tistory -->
  <a href="https://happybplus.tistory.com/"><img src="https://img.shields.io/badge/Tech Blog-000000?style=flat-square&logo=tistory&logoColor=white"/></a>
  <!-- Instagram -->
  <a href="https://www.instagram.com/happyy_bppl.yoo?igsh=Ym9wMHVhdHFkbmlw&utm_source=qr"><img src="https://img.shields.io/badge/instagram-E4405F?style=flat-square&logo=instagram&logoColor=white"/></a>
</p>

 

👨‍💻 헤더 넣기

capsule-render 오픈 API를 사용해 헤더를 추가해주었다.

한글 번역이 매우 잘 되어 있어서 그대로 따라하면 원하는 헤더를 추가할 수 있다.

 

나의 경우 waving 타입으로 마음에 드는 색을 찾아 넣어주었다.

<img src="https://capsule-render.vercel.app/api?type=waving&color=ACBCFF&fontColor=0F1035&height=200&section=header&text=Welcome+to+SeungAh's+Github!👋&fontSize=40"/>

또한 헤더를 추가하면서 Contact 뱃지를 중앙 정렬하는게 더 깔끔해 보일 것 같아 헤더와 뱃지를 둘 다 중앙 정렬했다.

<!-- header -->
<p align='center'>
  <img src="https://capsule-render.vercel.app/api?type=waving&color=ACBCFF&fontColor=0F1035&height=200&section=header&text=Welcome+to+SeungAh's+Github!👋&fontSize=40"/>
</p>

<!-- badge -->
<p align='center'>
  <!-- gmail -->
  <img src="https://img.shields.io/badge/ysa8497@gmail.com-EA4335?style=flat-square&logo=gmail&logoColor=white"/>
  <!-- Tistory -->
  <a href="https://happybplus.tistory.com/"><img src="https://img.shields.io/badge/Tech Blog-000000?style=flat-square&logo=tistory&logoColor=white"/></a>
  <!-- Instagram -->
  <a href="https://www.instagram.com/happyy_bppl.yoo?igsh=Ym9wMHVhdHFkbmlw&utm_source=qr"><img src="https://img.shields.io/badge/instagram-E4405F?style=flat-square&logo=instagram&logoColor=white"/></a>
</p>

 

👨‍💻 기술 스택 뱃지 넣기

Contact 뱃지와 마찬가지로 Shields.io를 사용하여 뱃지를 넣어줄 것이다.

위에서부터 백엔드, 프론트엔드, 툴 순서로 많이 사용해본 스택 먼저 오도록 배치했다.

<!-- 기술 스택 -->
## 💻 Tech Stacks
<p>
  <img src="https://img.shields.io/badge/Java-b07219?style=flat-square&logoColor=white"/>
  <img src="https://img.shields.io/badge/Spring Boot-6DB33F?style=flat-square&logo=springboot&logoColor=white"/>
  <img src="https://img.shields.io/badge/Spring Data JPA-6DB33F?style=flat-square&logoColor=white"/>
  <img src="https://img.shields.io/badge/MySQL-4479A1?style=flat-square&logo=mysql&logoColor=white"/>
  <img src="https://img.shields.io/badge/Python-3776AB?style=flat-square&logo=python&logoColor=white"/>
  <img src="https://img.shields.io/badge/Django-092E20?style=flat-square&logo=django&logoColor=white"/>
</p>
<p>
  <img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white"/>
  <img src="https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white"/>
  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=white"/>
  <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=white"/>
  <img src="https://img.shields.io/badge/Tailwind CSS-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white"/>
</p>
<p>
  <img src="https://img.shields.io/badge/Git-F05032?style=flat-square&logo=git&logoColor=white"/>
  <img src="https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=github&logoColor=white"/>
  <img src="https://img.shields.io/badge/GitLab-FC6D26?style=flat-square&logo=gitlab&logoColor=white"/>
  <img src="https://img.shields.io/badge/Jira-0053CC?style=flat-square&logo=jira&logoColor=white"/>
  <img src="https://img.shields.io/badge/Notion-000000?style=flat-square&logo=notion&logoColor=white"/>
</p>

👨‍💻 Most Used Languages 카드 만들기

기술 스택에 많이 사용한 언어 카드가 있으면, 좀 더 설득력이 있을 것 같아 추가했다.

github-readme-stats에서 Compact Language Card Layout을 사용했다.

테마를 바꿀 수 있는데, 이곳에서 테마를 골라 쿼리에 추가해주면 된다.

코드를 복사해오고 username을 내 깃헙 username으로 잘 바꿔준다.

<!-- 사용한 언어 순위 카드 -->
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=SeungAh-Yoo99&layout=compact&theme=algolia)

👨‍💻 Github Stats 카드 만들기

마찬가지로 github을 얼마나 활용하고 있는지에 대한 정보가 있으면 좋을 것 같아 추가했다.

Most Used Languages 카드와 마찬가지로 github-readme-stats에서 Github Stats Card를 찾고 코드를 추가해준다.

쿼리를 통해 아이콘을 표시하도록 하고, 테마도 변경하였다.

username과 뒤 깃헙 주소도 잘 변경해준다.

<!-- GitHub Stats Card -->
[![SeungAh-Yoo99's GitHub stats](https://github-readme-stats.vercel.app/api?username=SeungAh-Yoo99&show_icons=true&theme=tokyonight)](https://github.com/SeungAh-Yoo99/github-readme-stats)

👨‍💻 Solved.ac 프로필 만들기

알고리즘 역량도 어필하고 싶기 때문에 프로필에 추가해보겠다.

mazassumnida를 사용해 solved.ac 프로필을 추가했다.

v.2.0를 사용하고 싶기 때문에 아래 코드를 가져왔다.

<!-- solved.ac 프로필 -->
[![Solved.ac프로필](http://mazassumnida.wtf/api/v2/generate_badge?boj=ysa8497)](https://solved.ac/ysa8497)

코드를 복사해와서 {handle}에 내 solved.ac 아이디로 바꿔주어야 한다.