[Git] Github profile 꾸미기

📌안녕하세요

 

Github 프로필을 꾸미고 작성하는 방법을 알아보려고 합니다.

 

아래에 보이는 이미지 처럼 꾸며보도록 하겠습니다.

---

1. 프로필 생성

먼저 Repository를 이름으로 생성합니다.
저희는 이 repo의 readme를 수정하여 프로필을 소개하려고 합니다.

 

2. 프로필 상단 꾸미기

먼저 기준이 되는 url입니다

https://capsule-render.vercel.app/api?

위 url뒤에 파라미터 값을 부여해서 원하는 테마에 맞게 설정합니다.

 

간단하게 색상과 모양 설정 방법만 설명하고 자세한 내용은 링크를 올리겠습니다.

색상은 총 7개가 있습니다.

 

🎨색상

• &color=auto: 랜덤 컬러.
• &color=timeAuto: 무작위 색상이지만 시간에 따라 결정됩니다.
• &color=random: 정말 임의의 색상. 어떤 색이 나오는지 모르겠습니다.
• &color=gradient: 랜덤 그라데이션
• &color=timeGradient: 무작위 그라데이션이지만 시간에 따라 결정됩니다.
• &color=_hexcode: 기본값(#B897FF) 코드를 입력해서 색을 설정합니다.
• &color=_custom_gradient: 사용자 그라데이션 ex(&color=0:EEFF00,100:a82da8{ 0%: 'EEFF00', 100%: 'a82da8' })

원하는 색상을 선택한 뒤 기준이 되는 url뒤에 붙여서 사용하면 됩니다.

[예시]

![header](https://capsule-render.vercel.app/api?color=auto)

 

다음은 모양입니다.

모양은 10개가 있으며 움직임의 방식, 도형의 모양에 따라서 나눠집니다.

🎈모양

• [wave] 웨이브 (Default)
• [egg] 계란 
• [shark] 상어
• [slice] 일부분
• [rect] 똑바로
• [soft] 부드러운
• [rounded] 둥근
• [cylinder] 실린더
• [waving] 흔들며
• [transparent] 투명한

위와 같은 색들이 있으며 아래 예시처럼 작성하면 됩니다.

![header](https://capsule-render.vercel.app/api?type=slice)

 

자세한 내용은 아래 링크를 참고하세요.

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

GitHub - kyechan99/capsule-render: 🌈 Dynamic Coloful Image Render

 

3. Hits

다음은 hits수를 체크하여 몇명이 방문했는지를 보여주겠습니다.

hits

위와 같은 이미지로 나타낼 수 있습니다.

👇🏻아래에 올린 링크로 접속하면 아래와 같은 창이 나타납니다.

https://hits.seeyoufarm.com/

HITS

옵션에서 색, 아이콘을 설정하고 Target URL에 본인의 github주소를 입력하면 적용할 수 있는 text를 보여줍니다.

👆🏻위 이미지와 같은 텍스트를 복사해서 markdown에 붙여넣으면 됩니다.

4. 뱃지

다음은 스킬 뱃지 및 email 같은 뱃지를 만드는 방법을 알아보겠습니다

 

아래 페이지에 명세되어있는 방식으로 사용하려합니다.

https://shields.io/

Shields.io: Quality metadata badges for open source projects

먼저 md에서 설정하는 방법 두가지 입니다.

base : "https://img.shields.io/badge/" < 위 베이스에 파라미터 값으로 넣어주는 방식입니다.

 

예시

<img src="https://img.shields.io/badge/{내용}-{배경 색깔}?style={스타일}&logo={로고이름}&logoColor={로고 색깔}"/>

<img src="https://img.shields.io/badge/{내용}-{배경 색깔}?style={스타일}&logo={로고이름}&logoColor={로고 색깔}"/>
[![{discription}](https://img.shields.io/badge/?style={스타일}&logo={로고}&logoColor={색}&link={링크})](mailto:{이메일})

위 양식 둘중 하나를 선택해서 사용하면 됩니다.

스타일은 총 5가지가 있으며 저는 여기서 flat-square을 사용했습니다.

 

스타일을 정하고 스타일 옆에 넣을 로고의 이미지를 선택합니다.

👇🏻로고는 아래의 사이트에서 사용했습니다.

simpleicons.org 

Simple Icons

 

사이트에 점속하면 검색할 수 있는 창과 아래 검색 결과가 나옵니다.

 

위 이미지를 보면 색상코드, 이미지의 이름이 적혀있습니다.

저희는 여기서 로고의 이름만 확인하면됩니다. 위에 적혀있는 양식에서 &logo={로고이름}&logoColor={로고 색깔} 에서 {}사이에 원하는 정보를 입력하면 됩니다.

 

👆🏻이런식으로 만들 수 있습니다.

 

5. 트로피

다음은 깃의 정보를 담은 트로피를 보여주려합니다.

👇🏻아래 사이트의 내용을 이용해서 만듭니다.

https://github.com/ryo-ma/github-profile-trophy

GitHub - ryo-ma/github-profile-trophy: 🏆 Add dynamically generated GitHub Stat Trophies on your readme

 

간단하게 위 링크에 들어가서 원하는 테마를 선택하고 자신의 github아이디를 입력해서 사용합니다.

테마는 위와 같이 있으며 사용할 테마를 선택합니다. 자세한 내용은 링크에서 확인할 수 있습니다.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)

 

위와 같은 방식으로 테마를 넣어주고 유저 이름을 넣어주면 완성입니다.

 

6. Status

다음은 깃의 상태를 띄워봅시다.

👇🏻아래의 링크를 이용합니다.

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

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

먼저 위의 내용에 있는 테마중 하나를 선택하고 아래의 "username = {이름}" 에는 본인의 아이디를 "theme = {테마 이름}" 에는 정한 테마의 이름을 넣어주면 됩니다.

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)

사이트에 들어가면 아래와 같은 방식으로도 github의 사용언어를 보여줄 수 있습니다. 자세한 내용은 링크를 참고하면 됩니다.

 

7. 백준 티어

다음은 백준온라인 저지의 티어를 나타내보겠습니다.

👇🏻마찬가지로 아래의 링크를 사용합니다.

https://github.com/mazassumnida/mazassumnida

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

 

백준 티어는 solved.ac의 내용을 참고해서 만들어집니다. 위 링크에서 원하는 테마와 모양을 선택하고 넣으면 됩니다.

테마는 크게 두개로 나눠집니다. 위의 이미지 같이 작게 나타내는 방식이 있으며

이처럼 크게 상세한 내용을 포함해서 보여주는 방식이 있습니다. 원하는 양식을 고르고 백준 아이디를 넣으면 본인의 티어에 맞게 만들어지게 됩니다.

[![Solved.ac
프로필](http://mazassumnida.wtf/api/generate_badge?boj={handle})](https://solved.ac/{handle})

위와 같은 양식으로 넣으면 됩니다. {handle} 부분에 본인의 아이디를 넣어주면 끝입니다.

---

위와 같은 방식들중 원하는 방법을 선택하면 쉽고 간단하게 본인의 github 페이지를 꾸밀 수 있습니다.

마지막으로 참고할 제 github 링크를 올려두도록 하겠습니다.

https://github.com/GoGangH

GoGangH - Overview