여러분 그걸 알고 계신가요 ?
깃허브에 프로필을 작성할 수 있다는 사실을 !!
프로필을 작성하니깐 뭔가 되게 막 ... 들어가고 싶고 커밋하고 싶고 개발하고 싶고 ...
그러진 않지만 그래도 기분이 좋으니깐 깃허브 프로필을 꾸며봅시다.
일단 제 깃허브 프로필입니다. 👇
간단한 자기소개 + 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 은 간단하게 뱃지를 통해서 제가 보유하고 있는 스킬에 대해서 표현해줬습니다 !
뱃지는 shields와 Simple 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 를 사용했는데요.
EX)
소스 = <img src="https://techstack-generator.vercel.app/docker-icon.svg" alt="icon" width="43" height="43" />
결과 =
FOLLOW ME 에서는 velog 링크 및 github hit 수, 그리고 가장 최근에 작성한 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 수는 hits 를 통해서 쉽게 가져올 수 있습니다.
제가 사용한 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 글 같은 경우에는 Eungyeol 님의 velog-readme-stats 를 사용했습니다 !
[![Velog's GitHub stats](https://velog-readme-stats.vercel.app/api?name=soyeon207)](https://velog.io/@soyeon207)
위처럼 사용하면 되고, name 을 가지고 오고 싶은 velog 의 이름으로 변경해주시면 간단하게 사용할 수 있습니다 :)
가장 많이 사용한 언어를 보여주는 기능으로 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)
결과물 👇