SookDev

1. 깃허브 꾸미기 🌱 리드미 꾸미기 레퍼런스 사이트 2. 내가 꾸민 리드미 🌱 기술스택 아이콘 🌿 깃허브 3D 잔디, GitHub-Profile-3D

1. 깃허브 꾸미기

🌱 리드미 꾸미기 레퍼런스 사이트

내 깃허브만 심심해 🥲

갑자기 내 깃허브가 심심해 보였다. 원래 공부 못하는애들이 책상정리부터 시작해야 직성이 풀리는것처럼

나또한 이 깃허브를 꾸며야 공부가 잘 될것같은 마음이 들었다. 하지만 막상 어떻게 꾸며야 할 지 선뜻 손이 안간다.

여기저기서 많은 소스는 본것 같은데, 어떤 레이아웃과 조합으로 꾸며야 나를 대표하는 리드미가 될 지

생각보다 고민을 많이 하게 됐다.

이럴때 남들의 best practice 만 모아놓은 github 사이트를 참고하면 도움이 된다.

꾸미기 타입별로 정리되어 있어 하나씩 살펴보고 레퍼런스 삼아 보다 쉽게 디자인 할 수 있다.

(중간중간 404가 뜨는 함정 사이트들도 있다.)

awesome-github-profile-readme

abhisheknaiidu • Updated Mar 11, 2024

나는 “깔끔하지만 나를 나타낼 수 있는 리드미” 를 목표로 두고 레퍼런스를 찾기 시작했다.

목표가 추상적이긴 하지만 저 단어만큼 내가 원하는것을 표현하는것이 없다.

그래서 사이트 리스트 하나하나 들어가보며 구경하기 시작했다.

여러 사이트들을 들어가보니 다들 이력들이 너무 화려하다.. 😭

자랑할만한 깃 랭킹과 stars, 컨트리뷰터 들로 가득찬 readme 파일들을 그대로 따라하다간 내 리드미가 더 초라해 보일 것 같았다.

반대로 프로필을 게임으로 만든다던가 코드형식으로 만드는 등등, 너무 힘을주어 꾸며놓은 레퍼런스는 조잡하고 이력을 한눈에 보기 어려웠다. 나에게는 탈락 대상!!

그래서 가장 기본에 충실하면서도 내용이 비어보이지 않는 세가지 레퍼런스를 찾았다.

🍃

내가 꼽은 가장 깔끔한 스타일

Jvillegasd
Jvillegasd • Updated Mar 7, 2024

WaylonWalker
WaylonWalker • Updated Mar 7, 2024

이모지로 표현하기

깃 커밋을 날릴때 깃모지를 사용하며 더 보기 편해진것 처럼, 나를 소개할때도 이모지를 통해 시각적으로 눈에 띄도록 하는 방식이 제일 들어왔다.

상대적으로 개발 연차가 적은 나에게 화려한 이력을 영끌해서 나열하는 것 보다,

나의 경험과 관심사를 전부 나타낼 수 있으면서도 조잡해 보이지 않아 좋아 보였다.

개발 스택표현은 마지막 사이트처럼 아이콘으로 변경하기로 했다.

이전에는 tag 형식으로 표현했는데 뭔가 느껴지는 “구림” 이랄까..

나혼자 느끼는 것일수도 있겠지만 옛것의 느낌이 났다.

태그의 백그라운드 색깔을 통일하고 싶은데 각 스택이 가진 고유의 색깔이 있기때문에 변경하면 이상할것 같았다.

이번 리드미는 “깔끔함” 에 초점을 둔 만큼 통일성을 지키기 위해 아이콘을 선택했다.

통계부분은 GitHub-Profile-3D 를 적용해보려고 한다.

한창 3d, three.js 에 빠져있어 미친듯이 판 적 있었는데 우연히 깃허브 잔디가 3d 로 구현되어있는것을 발견했다.

우와.. 이건뭐냐 하고 그냥 지나갔는데 갑자기 생각났다.

UI 적으로 앞의 내용들이 심플하기 때문에 마지막에 들어가주는것도 나쁘지 않다고 생각했다.

또한 GitHub-Profile-3D 는 공식문서를 보고 천천히 따라한다면 쉽게 설정할 수 있다.

공수는 덜 드는것에 비해 사람들의 이목을 쉽게 끌 수 있기 때문에 한번쯤 적용 해 볼만 한것 같다.

무엇보다 GitHub-Profile-3D 는 나의 초라한 등급을 나타내지 않기때문에 약간 마음이 편안해진다.

2. 내가 꾸민 리드미

🌱 기술스택 아이콘

기존에 디자이너가 만든 스킬 아이콘을 쓸 수 있는 사이트들

skill-icons

tandpfun • Updated Mar 11, 2024

profile-technology-icons

marwin1991 • Updated Mar 11, 2024

skill-icons 와 profile-technology-icons 둘 다 이미지 파일에 각 제작자가 만든 이미지 형태의 아이콘을 사용한다.

skill-icons 의 공식문서에는 엘리먼트 형식으로 작성하는 코드가 같이 나오지만 profile-technology-icons 는

엘리먼트를 원하는 형태로 컨버팅 해주는 별도의 사이트가 있다.


//skill-icons 
[![My Skills](https://skillicons.dev/icons?i=aws,gcp,azure,react,vue,flutter&perline=3)](https://skillicons.dev)

<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>

😄 Profile Technology Icons

Here is my profile on the GitHub service, where I have add icons generated with this site. On a daily basis I try to make World a better place using Java 🌎 ✨ 🤣

https://marwin1991.github.io/profile-technology-icons/

둘 다 내가 사용하고 있는 스택 모두를 가진것은 아니나 skill-icons 가 좀 더 다양하게 존재한다.

더 다양하게 존재하더라도 어찌됐든 내가 사용하려는 아이콘이 하나라도 없으면 의미가 없으니

원하는 아이콘 스타일에 따라 선택하면 될 것 같다. 나같은 경우 검정색 배경의 skill-icons 보다 흰 배경의 profile-technology-icons 에 코드 엘리먼트로 감싸고 없는 스택아이콘에 대해서 직접 캡쳐하여 이미지파일로 삽입하였다.


<code><img width="37" alt="스크린샷 2024-02-10 오후 3 10 30" src="https://github.com/22sook00/22sook00/assets/80618616/695e65f5-22fe-453a-9498-6944708b72c7"></code>
<code><img width="37" src="https://user-images.githubusercontent.com/25181517/189716855-2c69ca7a-5149-4647-936d-780610911353.png" alt="Firebase" title="Firebase"/></code>
<code><img width="37" src="https://user-images.githubusercontent.com/25181517/202896760-337261ed-ee92-4979-84c4-d4b829c7355d.png" alt="Tailwind CSS" title="Tailwind CSS"/></code>

🌿 깃허브 3D 잔디, GitHub-Profile-3D

GitHub-Profile-3D 는 github action 을 기반으로 이용되기 때문에 토큰추가가 필요하다.

settings → Developers settings → personal AccessToken → Tokens(classic)

Developer Settings 에서 토큰 생성 시 New personal access token (classic) 를 클릭하여 생성한다.

Expiration 는 원하는 기간만큼 설정한다. 너무 짧게 설정하면 토큰 기한을 그만큼 자주 바꿔줘야 해서 나같은 경우 매우 귀차니즘이기 때문에 No Expiration 로 설정했다.

Select scopes 는 본인이 원하는 만큼 권한 설정을 하고 토큰을 생성해 준다.

이 때 생성된 토큰은 나의 리드미 레포에 적용되어야 하니 어딘가에 잘 간직하고 있자. 잃어버리면 다시 찾을 수 없다!

readme 레포의 settings → Developers settings → personal AccessToken → Tokens(classic)

Name 에는 특수문자, 대문자를 제외한 스트링값으로 작성하고 Secret 에는 아까 생성한 토큰을 붙여넣는다.

그다음 Actions 에 들어가서 설정값을 추가해야한다.

초기에는 아무것도 안보이는게 맞으니 안심하고 Set up workflow 를 클릭한다.


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@v3
      - uses: yoshi389111/github-profile-3d-contrib@0.7.1
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - 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

공식문서에 나온대로 형식에 맞게 추가한다.

여기서 .env 의 GITHUB_TOKEN 은 ${{ secrets.TOKEN }} 으로 수정하고 저장하도록 한다.

git config user.name 과 user.email 도 본인의 git 이름과 email 을 넣으면 되는데,

헷갈린다면 터미널에서 git config user.name 혹은 git config user.email명령어로 확인 할 수 있다.

잘 돌아가는것을 확인했다면 Run workflow 버튼이 뜰것이다.

Run workflow 버튼을 클릭한 후 내가 적용할 리드미 레포로 이동한다.