깃허브 프로필 꾸미기

mallin·2022년 8월 10일
4

ETC

목록 보기
1/1
post-thumbnail

여러분 그걸 알고 계신가요 ?

깃허브에 프로필을 작성할 수 있다는 사실을 !!

프로필을 작성하니깐 뭔가 되게 막 ... 들어가고 싶고 커밋하고 싶고 개발하고 싶고 ...
그러진 않지만 그래도 기분이 좋으니깐 깃허브 프로필을 꾸며봅시다.

일단 제 깃허브 프로필입니다. 👇

간단한 자기소개 + Tech Stack + Follow me 로 구성되어 있는데요.
하나하나 어떻게 구현하는지 알아보도록 하겠습니다🙂

💡 전체코드는 아래를 확인해주세요 !
https://github.com/soyeon207/soyeon207

깃허브 프로필 만들기

깃허브 프로필을 만드는 방법은 정말 간단합니다.
repository 를 만들 때 깃허브 아이디로 만들어주면 됩니다 !

저는 이미 프로필이 만들어져 있기 때문에 만들어지지 않지만, 깃허브 아이디를 입력하면 해당 repository 는 ✨특별한✨ repository 라는 걸 알려줍니다.

아래 사항을 참고해서 만들어주면 준비는 완료 !

✔️ public repository 로 만들어주세요.
✔️ repository 를 만들고 README.md 파일을 만들어주세요.

그러면 본격적으로 깃허브 프로필 꾸미기에 들어가보도록 하겠습니다.

자기소개

가장 상단에 노출되는 자기소개입니다 !
배경으로 파도처럼 울렁거리는 모션과 간단한 자기소개 문구를 노출 해줬는데요.

자기소개는 capsule-render 를 사용해서 구현했습니다.

capsule-render 의 기본적인 문법으로는
![](https://capsule-render.vercel.app/api?section=footer)
해당 문구를 기본 베이스로 하고 뒤에 ? 로 파라미터를 붙여서 커스텀 합니다.

저의 경우에는

type = waving (배경타입)
color = auto (배경 색)
height = 150 (높이)
section = header (footer 의 경우 아래로 reverse 되어서 노출)
fontSize = 30 (폰트 사이즈)
animation = twinkling (애니메이션 효과)
text = 안녕하세요%20백엔드%20개발자%20박소연입니다%20🙋‍♀️ (노출 문구)

로 커스텀해서 사용했고, 그 외에도 엄청나게 다양한 커스텀 방식을 제공합니다.
다른 커스텀 방식은 아래 github 를 참고해주세요 👀

capsule-render github 👉 https://github.com/kyechan99/capsule-render

Tech Stack

Tech Stack 은 간단하게 뱃지를 통해서 제가 보유하고 있는 스킬에 대해서 표현해줬습니다 !

뱃지는 shieldsSimple Icons, techstack-generator 를 사용했는데요.
정적으로 멈춰있는게 shields + Simple Icons, 동적으로 움직이는게 techstack-generator 입니다 👾

정적으로만 있으면 뭔가 단조롭고, 너무 동적으로만 있으면 정신 없을 수 있는데 이렇게 두개를 섞어서 배치하니깐 눈에 훨씬 잘들어오더라구요 😇

정적 뱃지

뱃지 모양 같은 경우에는 shields 를 사용했는데요.
https://img.shields.io/badge/<텍스트>-<색>?logo=<로고>
로 적어주되, 로고와 색은 https://simpleicons.org/ 에서 찾아서 적어주면 됩니다.

예를 들어서 Ruby 뱃지를 만들고 싶다 ? 라고 한다면
1. Simple Icons 페이지에 들어간 다음
2. ruby 를 검색하면 아래와 같이 결과가 나오게 됩니다.

3. 위의 결과를 가지고
<img src="https://img.shields.io/badge/Ruby-CC342D?logo=Ruby">
라고 작성해주면
짜잔 그러면 Ruby 모양 뱃지가 노출되게 됩니다.

동적 뱃지

동적 뱃지의 경우에는 shellboy님의 techstack-generator 를 사용했는데요.

  1. https://techstack-generator.vercel.app/ 해당 사이트에 들어간 다음
  2. 원하는 뱃지를 선택해주고 SETTING 버튼을 눌러줍니다.
  3. 그 다음으로 원하는대로 커스텀 해주고 RESULT 버튼을 눌러주면
  4. 바로 사용할 수 있도록 소스를 제공해줍니다. 이걸 가져다가 사용하면 됩니다

EX)
소스 = <img src="https://techstack-generator.vercel.app/docker-icon.svg" alt="icon" width="43" height="43" />
결과 =

Follow me

FOLLOW ME 에서는 velog 링크 및 github hit 수, 그리고 가장 최근에 작성한 velog 글을 노출합니다.

velog 링크

velog 뱃지는 역시 shields 를 사용했고, a 문법으로 velog 로 바로 갈 수 있는 링크를 걸어줬습니다.

logo 를 vimeo 로
뱃지 색은 11B48A 로 설정해주면 됩니다 !

<a href="https://velog.io/@soyeon207"><img src="https://img.shields.io/badge/velog-11B48A?style=flat-square&logo=Vimeo&logoColor=white&link=https://velog.io/@soyeon207"/>

github hit 수

github hit 수는 hits 를 통해서 쉽게 가져올 수 있습니다.

  1. https://hits.seeyoufarm.com/ 에 접속해줍니다.
  2. hit 를 세고 싶은 URL 과 OPTIONS 를 설정해주고, 생성되는 MARKDOWN 을 복사해서 붙여넣기 하면 끝 ..... 입니다. 너무 쉽죠 ?

제가 사용한 github hit 수를 보여주는 코드는 아래와 같습니다 👇

<a href="https://github.com/soyeon207"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fsoyeon207&count_bg=%23000000&title_bg=%23000000&icon=github.svg&icon_color=%23E7E7E7&title=GitHub&edge_flat=false)"/></a> <a href="https://solved.ac/whkakrkr">

가장 최근 작성한 velog 글

가장 최근에 작성한 velog 글 같은 경우에는 Eungyeol 님의 velog-readme-stats 를 사용했습니다 !

[![Velog's GitHub stats](https://velog-readme-stats.vercel.app/api?name=soyeon207)](https://velog.io/@soyeon207)

위처럼 사용하면 되고, name 을 가지고 오고 싶은 velog 의 이름으로 변경해주시면 간단하게 사용할 수 있습니다 :)

+) 추가적으로 꾸미기

Most Used Languages

가장 많이 사용한 언어를 보여주는 기능으로 github-readme-stats 를 통해 보여줄 수 있습니다.

사용 예시 👇

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

결과물 👇

그래프로 활동 보여주기

활동을 보여주는 그래프로 github-readme-activity-graph 를 사용해서 노출 할 수 있습니다.

사용 예시 👇

 [![soyeon207's github activity graph](https://activity-graph.herokuapp.com/graph?username=soyeon207&theme=monokai)](https://github.com/soyeon207/github-readme-activity-graph)

결과물 👇

0개의 댓글