[깃허브 프로필 꾸미기] github 프로필 만들기

https://github.com/dkssud8150/dkssud8150

레포지토리 생성

레포지토리는 자신의 계정 이름과 동일한 이름으로 설정해야 한다. readme를 추가하여 생성하고 나면 홈 화면에 이 레포지토리가 나오는 것을 볼 수 있다.

README 꾸미기

Capsule render

![header](https://capsule-render.vercel.app/api?type=waving&color=gradient&height=120&animation=fadeIn&section=footer&text=🚗🚘🚛&fontAlign=70)

Capsule render라고 불리는 이것은 대체로 상단 메인으로 사용한다.

아래 사이트를 참고하여 다양한 capsule render를 사용할 수 있다.

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

나는 wave를 사용하였다.

---

GitHub-reamde-Stats

<a href="s">
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=dkssud8150&exclude_repo=dkssud8150.github.io&layout=compact&theme=tokyonight" />
</a>
<a href="s">
  <img src="https://github-readme-stats.vercel.app/api?username=dkssud8150&theme=tokyonight&show_icons=true" width="42%" />
</a>

이 또한, 많은 사람들이 사용하는 것으로 아래 사이트를 참고하여 작성하면 된다.

https://github.com/anuraghazra/github-readme-stats

---

github-stats-transparent

github stats와 거의 유사하나 배경이 투명하여 다크모드를 사용하는데 적합하다. 하지만 github stats는 config를 수정하여 쉽게 수정할 수 있지만, 이는 fork를 통한 조금 복잡한 방법으로 사용해야 하며, 수정하는데도 html과 css를 조금 알고 접근해야 색상이나 크기 수정이 가능하다.

<img src="https://raw.githubusercontent.com/dkssud8150/github-stats-transparent/output/generated/languages.svg" width="49.2%" />

https://github.com/rahul-jha98/github-stats-transparent

위의 레포지토리의 readme를 천천히 참고하여 제작하면 된다.

---

readme-typing-svg

텍스트를 타이핑하는 형식의 SVG 이미지 생성기이다.

https://github.com/DenverCoder1/readme-typing-svg

[![Typing SVG](https://readme-typing-svg.herokuapp.com/?color=f0f6fc&lines=Hello+World🐯🤖&font=Redressed&size=40)](https://git.io/typing-svg)

여기서 ?color=는 자신이 원하는 글자 색, lines=는 타이핑 내용, font=는 자신이 원하는 폰트인데 이는 구글 폰트에 포함되어 있는 어떤 것이든 상관없다. 폰트 종류들은 이 사이트를 참고하길 바란다. 그리고 size=는 자신이 원하는 글자의 크기이다.

---

github-readme-activity-graph

홈 화면의 잔디가 히트맵이라면, 이는 우리가 커밋한 숫자와 날짜를 이용한 그래프로 표현된다.

https://github.com/Ashutosh00710/github-readme-activity-graph

[![Ashutosh's github activity graph](https://activity-graph.herokuapp.com/graph?username=dkssud8150&theme=nord)](https://github.com/ashutosh00710/github-readme-activity-graph)

---

github-profile-summary-cards

github readme stats와 비슷하나 좀 더 다양한 지표를 볼 수 있는 카드이다.

https://github.com/vn7n24fzkq/github-profile-summary-cards

![](https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=dkssud8150&theme=nord_dark)

---

github-readme-streak-stats

깃허브 총 contribution 수와, 연속으로 커밋한 날짜를 계산해주는 카드이다.

https://github.com/DenverCoder1/github-readme-streak-stats

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=dkssud8150&theme=tokyonight)](https://git.io/streak-stats)

여기서 ?user= 부분만 자신의 계정으로 바꾸면 되고, 테마는 사이트를 참고하여 변경하면 된다.

---

Trophy

[![trophy](https://github-profile-trophy.vercel.app/?username=dkssud8150&theme=flat&column=7)](https://github.com/dkssud8150/)

---

Hits

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fdkssud8150%2F&count_bg=%232AB4E5D6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

---

Productive-box

productive-box를 만드는 방법은 다음 블로그에 리뷰했다. 참고하기 바란다.

---

waka-box

waka-box를 만드는 방법은 다음 블로그에 리뷰했다. 참고하기 바란다.

waka-box를 만들었다면, waka box에 대해 출력해주는 카드가 있다.

이 사이트 하단에 보면 wakatime week stats 라는 목록이 있다. 이를 참고하여 username만 수정하여 입력하면 된다.

[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=dkssud8150)](https://github.com/anuraghazra/github-readme-stats)

---

Tech Icons

많은 사람들이 img.shields.io를 사용하여 아래와 같은 아이콘을 많이 사용한다.

사용하는 방법은 shields 사이트를 참고하고, 아이콘에 대한 사이트는 이 곳을 참고하면 된다.

하지만, 나는 이런 색상과 모양이 마음에 들지 않았기 때문에, 다른 방법을 찾아보았다. 아래는 나의 프로필에 삽입된 아이콘들이다.

먼저 https://cdn.icons.com/에 들어가서 검색창에 자신이 원하는 언어나 프레임워크를 검색한다. 그리고는 자신이 표시하고 싶은 이미지를 클릭한 다음 이미지를 우클릭하여 주소를 복사한다.

그 다음 아래 코드에 src부분을 변경하고, 그에 맞게 텍스트도 변경한다. alt는 이미지가 출력되지 않을 경우 표기되는 부가 설명같은 것이고, height는 높이에 해당한다.

<code><img alt = "3.1 Python" height="20" src="https://cdn.icon-icons.com/icons2/2699/PNG/512/pytorch_logo_icon_170820.png"> pytorch</code>

---

OPGC ranking

OPGG라는 롤 사이트를 참고하여 제작했다는 OPGC(Over Programmed Good Coding) 이라는 툴이다. 제작자 개발 블로그는 https://jay-ji.tistory.com/84 이다.

깃허브 프로필에 적용하는 방법은 OPGC 사이트을 들어가서, 자신의 github 아이디를 입력하고 검색을 클릭한다.

검색을 하고 나면, README.md 에 프로필 추가하기 버튼을 클릭하면 프로필에 붙여넣을 수 있는 코드가 복사된다.

<a href="https://opgc.me/#/users/dkssud8150" target="_blank"><img src="https://api.opgc.me/githubs/users/dkssud8150/tag/?theme=basic" /></a>

---

backjoon profile

코딩 테스트 사이트 백준의 티어를 프로필에 보여줄 수 있다. 제작하는 방법은 이 곳 이나 이 곳을 참고하길 바란다.

간단하게 아래 코드에 자신의 백준 아이디로 바꿔 넣어주기만 하면 된다.

[![Solved.ac Profile](http://mazassumnida.wtf/api/v2/generate_badge?boj=백준아이디)](https://solved.ac/백준아이디/)

---

github-profile-3d-contrib

깃허브 커밋에 대한 잔디를 그래프로 사용하는 것은 위에서 살펴보았다. 이제는 3D로 잔디를 볼 수 있다. 이 깃허브가 공식 레포인지는 모르겠으나, 해당 깃허브 readme에서 테마 종류를 살펴볼 수 있다. 3d 잔디를 보기 위해서는 github actions을 작업해줘야 한다. 그에 대한 참고 사이트는 이 곳이다.

1. 먼저 생성된 자신의 프로필 레포지토리에서 actions를 들어가 set up a workflow yourself를 클릭한다.

그리고, main.yaml을 profile-3d.yml로 수정 후, 아래 코드를 그대로 가져온다.

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v2
      - uses: yoshi389111/github-profile-3d-contrib@0.6.0
        env:
          GITHUB_TOKEN: $
          USERNAME: $
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add -A .
          git commit -m "generated"
          git push

여기에 run부분에 git config 에 대한 github-actions 을 본인의 계정으로 수정한다. schedule에 있는 시간은 workflow가 reset되는 시간으로 하루에 1번씩 reset된다. 이 때, token을 프로필 레포지토리에도 추가해주어야 한다. token을 제작하고 추가하는 방법은 해당 사이트를 참고하길 바란다. 또는 위의 참고 사이트를 살펴봐도 나온다.

token을 프로필 레포지토리에 secrets token으로 추가해준 후, actions을 다시 들어가 제작한 Github-Profile-3D-Contrib을 들어가 run workflow를 클릭한다.

 

다 돌아가면 초록색 체크가 생겨나고, 아래 코드를 프로필에 추가해주면 3D 잔디를 볼 수 있다.

![](./profile-3d-contrib/profile-night-rainbow.svg)

Reference

• https://malangdidoo.tistory.com/34
• https://hing9u.tistory.com/78