프론트엔드 개발자 Github 프로필 꾸미기

안녕하세요 히새입니다!

 

오늘은 github 프로필 꾸미는 방법에 대해 포스팅 해 볼게요

먼저 제 깃허브 프로필은 이렇습니다

 

---

 

 

Repositories 에 New 버튼을 누르고 본인 아이디와 똑같은 이름인 레포를 하나 만들어줍니다

저는 이미 만들어놔서 already exists 라고 뜨지만 처음 만드신다면 잘 만들어질겁니다!

 

---

 

그리고 아 다 만들었고 다 귀찮고 설명 필요없고 복사해서 똑같이 쓸거니까 코드 내놔 🦖🧟 🦕 🧟‍♂️ 라고 하신다면...

여기있습니다..

![header](https://capsule-render.vercel.app/api?type=waving&color=gradient&height=150&section=header&text=heeso&fontSize=50)

### I am a junior front-end developer
---

### 📝 Education 🏆
<img src="https://img.shields.io/badge/Techit_FE_School-9999FF?style=for-the-badge&logo=lionair&logoColor=white">

### 👩🏻‍💻 Technologies 💻
<div style="display:flex;">
<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white">
<img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white">
<img src="https://img.shields.io/badge/Tailwind-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white">
<img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black">
<img src="https://img.shields.io/badge/axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white">
<img src="https://img.shields.io/badge/zustand-7F2B7B?style=for-the-badge&logo=zustand&logoColor=white">
<img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=Sass&logoColor=white">
<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">
<img src="https://img.shields.io/badge/pocketbase-FFCA28?style=for-the-badge&logo=pocketbase&logoColor=black">
</div>

### ⏰ Currently Studying ... 🔍

<img src = "https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white"> <img src = "	https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D">
<img src="https://img.shields.io/badge/chakra ui-319795?style=for-the-badge&logo=chakra ui&logoColor=white">
<img src="https://img.shields.io/badge/chart.js-FF63845?style=for-the-badge&logo=chart.js&logoColor=white">


[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=h2s0&layout=compact)](https://github.com/h2s0/github-readme-stats)
[![Heeso's GitHub stats](https://github-readme-stats.vercel.app/api?username=h2s0)](https://github.com/h2s0/github-readme-stats)

 

zustand 는 아이콘이 없어서 그냥 마음에 드는 색깔만 넣어서 작성했습니다.

 

그리고 라이브러리, 언어 등등을 구분해서 넣으시는 분들도 많던데 그렇게 하려니 너무 머리가 아프고 node.js , pnpm , eslint 나 prettier 같이 자잘한..? 것들까지 쓰면 한 번 써본 것도 다 넣어야하는지도 애매하고 해가지고 그냥 간단하게만 .. 작성했는데 핵심적인? 더 적을거리가 있다면 공유해주세요!!! :)

 

---

 

헤더 꾸미기

 

 

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

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

여기에 들어가보시면 디자인, 색깔, 폰트 등등 다양하게 설정값을 주어서 커스텀 할 수 있어요

 

이것도 귀찮으시다! 하시는 분들은

![header](https://capsule-render.vercel.app/api?type=waving&color=gradient&height=150&section=header&text=문자입력&fontSize=50)

 

이거 복사해서 문자입력 부분에 문자만 입력해주시면 됩니다!

 

디자인을 바꾸고 싶으시다면 type=부분에 waving 외에 디자인 여기서 보실 수 있게 링크 바로 퍼왔습니다

https://github.com/kyechan99/capsule-render?tab=readme-ov-file#wave

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

 

 

색깔은 다양하게 설정할 수 있는데요 저는 랜덤 파스텔 컬러가 나오게 설정해뒀습니다

나오는 색깔 커스텀도 가능해요!

 

세로길이, 폰트 크기 등등은 숫자만 바꿔주시면 됩니다 그 외에도 다양한 기능들이 있는데 .. 죄송합니다 저도 귀찮아서 잘 안봤으니까 이건 귀찮아서 복붙하실 분들만 보세

---

 

기술 스택 아이콘

 

 

 

아래에 기술 스택을 추가하고 싶으시다면 아래 링크 들어가셔서 그 아래의 코드에 이름, 색깔만 복사해다 붙히지면 되는데요

https://simpleicons.org/

Simple Icons

<img src="https://img.shields.io/badge/이름-색깔?style=for-the-badge&logo=이름&logoColor=white 혹은 black">

 

pnpm 을 추가한다고 가정해보면,

여기서 " pnpm  : 이름 " 과 " F69220 : 색깔" 을 위 코드의 한글에 알맞게 붙여넣기 해주시면 됩니다.

 

<img src="https://img.shields.io/badge/pnpm-F69220?style=for-the-badge&logo=pnpm&logoColor=white">

 

완성해보면 이런 코드가 되겠네요!

 

화면에서는 이렇게 보입니다. 맨 뒤에 logoColor 는 나오는 글자 색과 똑같이 white 로 설정해주었습니다.

 

---

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=본인아이디&layout=compact)](https://github.com/본인아이디/github-readme-stats)
[![이름's GitHub stats](https://github-readme-stats.vercel.app/api?username=본인아이디)](https://github.com/본인아이디/github-readme-stats)

 

이거 두개는 여기에다가 본인 아이디만 넣어주시면 됩니다

 

오른쪽에 보이는 거는 아래 링크 들어가시면 설정 가능한 테마가 정리되어 있습니다!

 

https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md

github-readme-stats/themes/README.md at master · anuraghazra/github-readme-stats

 

+ 저 몰랐는데... 최하점이 B 라고 하더라구요..? 그것도 모르고 와! 내가 뭐했다고 B 지? 생각했는데 ....^_ㅠ

 

 

---

 

이 외에도 이거 쓰면서 알아보니까 몇시에 커밋을 주로하는지와 총 커밋,pr 등등 횟수를 보여주는게 있던데!!!

fork 하고 여러 과정이 있어서 귀찮아서 이렇게만 끝냈습니다!