[GitHub] Profile

1. Repository 생성

1) New repository 선택

2) Repository name은 owner명과 동일하게 작성

3) Public 선택

4) Add a README file 항목 체크

5) Create repository 선택으로 Repository 생성 완료

2. README.md 작성

- 생성된 repository의 README.md에 작성된 내용이 GitHub Profile에 적용

- Markdown을 사용하여 작성

1) Header

- capsule-render: type, color, height, section, text, fontSize를 사용하여 설정

# Markdown
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)
# HTML
<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />

2) Stats Card

- github-readme-stats: username, layout, theme, hide_border, show_icons, include_all_commits를 사용하여 설정

- commit, 기여도 등을 나타내는 카드

# Markdown
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=cogito21g)](https://github.com/anuraghazra/github-readme-stats)
# HTML
<img align="center" style="height:180px" src="https://github-readme-stats.vercel.app/api?username=cogito21g&show_icons=true&include_all_commits=true&theme=nord&hide_border=true" />

3) Top Languages Card

- github-readme-stats: username, layout, theme를 사용하여 설정

- github에 올린 소스코드를 분석해 사용한 언어들의 분포를 시각화

# Markdown
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=cogito21g)](https://github.com/anuraghazra/github-readme-stats)
# HTML
<img align="center" style="height:180px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=cogito21g&layout=compact&theme=nord&hide_border=true" />

4) 방문자수 확인

- productive-box: 

- HITS: 방문자수를 체크할 수 있는 도구

# Markdown
[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fcogito21g%2Fhit-counter&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
# HTML
<a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fcogito21g%2Fhit-counter&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>

 

5) Coding Test

- 백준 온라인 저지 티어: GitHub Profile에서 boj 프로필을 보여주는 뱃지. boj에 본인의 id 입력

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

6) Skills

- simpleicons: 원하는 언어를 검색하면 해당 언어의 색상 확인

- shileds.io: 언어의 로고 삽입하여 뱃지 생성. badgetContent, style, logo, logoColor를 사용하여 설정

- awesome-badges: 뱃지의 이미지 링크 제공

# Markdown
![image_name](url_link)
# HTML
<img src="https://img.shields.io/badge/Python-3776AB?style=flat-square&logo=Python&logoColor=white"/>

7) Footer

 - icon8: 아이콘 이미지 탐색

# Markdown
[<img align="left" alt="cogito21g_tistory" width="48px" src="https://img.icons8.com/color/48/000000/blog.png" />][blog]
[blog]: https://cppdeveloper.tistory.com
# HTML
<a href="https://cppdeveloper.tistory.com/"><img align="center" alt="cogito21g_tistory" width="48px" src="https://img.icons8.com/color/48/000000/blog.png" /></a>

Summary && Result

<header>
  <img src="https://capsule-render.vercel.app/api?type=rounded&color=gradient&height=250&section=header&text=Cogito21&fontSize=90" />
</header>

<main>
  <h2> Introduce </h2>
  <p>Welcome to {username}!!</p>
  <p>I’m currently interested in <code>System Programming</code>, <code>Data Analysis</code></p>
  <p>2024 Goals: </p>
  
  <div style="display: flex, height:180px">
  <img align="center" style="height:180px" src="https://github-readme-stats.vercel.app/api?username={username}&show_icons=true&include_all_commits=true&theme=nord&hide_border=true" alt="cogito21g's github stats" />
  <img align="center" style="height:180px" src="https://github-readme-stats.vercel.app/api/top-langs/?username={username}&layout=compact&theme=nord&hide_border=true" />
  </div>
  <br />
  
  <h2> Languages and Tools </h2>
  <div>
  <img src="https://img.shields.io/badge/C%20language-%23A8B9CC?style=flat-square&logo=C&logoColor=white"/> </t>
  <img src="https://img.shields.io/badge/C%2B%2B%20-%20%2300599C?style=flat-square&logo=C%2B%2B&logoColor=white"/>
  <img src="https://img.shields.io/badge/Python-3776AB?style=flat-square&logo=Python&logoColor=white"/> 
  <img src="https://img.shields.io/badge/Django%20-%20%23092E20?style=flat-square&logo=Django&logoColor=white"/>
  <img src="https://img.shields.io/badge/PyTorch%20-%20%23EE4C2C?style=flat-square&logo=Pytorch&logoColor=white"/>
  <img src="https://img.shields.io/badge/Tensorflow%20-%20%23FF6F00?style=flat-square&logo=tensorflow&logoColor=white"/>
  </div>
  <div>
  <img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=HTML5&logoColor=white"/> 
  <img src="https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=CSS3&logoColor=white"/> 
  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=white"/>
  <img src="https://img.shields.io/badge/react%20-%20%2361DAFB?style=flat-square&logo=react&logoColor=white"/>
  <img src="https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=Node.js&logoColor=white"/>
  <img src="https://img.shields.io/badge/Express%20-%20%23000000?style=flat-square&logo=express&logoColor=white"/>
  </div>
  <div>
  <img src="https://img.shields.io/badge/Git%20-%20%23F05032?style=flat-square&logo=Git&logoColor=white"/>
  <img src="https://img.shields.io/badge/GitHub-%23181717?style=flat-square&logo=GitHub&logoColor=white"/>
  <img src="https://img.shields.io/badge/Notion%20-%20%23000000?style=flat-square&logo=Notion&logoColor=white"/>
  </div>
</main>

<footer>
  <h2>Connect with me</h2>

  <div>
    <a href="https://{username}.tistory.com/"><img align="center" alt="cogito21g | tistory" width="48px" src="https://img.icons8.com/color/48/000000/blog.png" /></a>
    <a href="https://www.youtube.com/{username}"><img align="center" alt="cogito21g | youtube" width="48px" src="https://img.icons8.com/color/48/000000/youtube-play.png" /></a>
    <a href="https://instagram.com/{username}"><img align="center" alt="cogito21g | Instagram" width="48px" src="https://img.icons8.com/color/48/000000/instagram-new--v2.png" /></a>
    <a href="https://www.linkedin.com/in/{username}/"><img align="center" alt="cogito21g | LinkedIn" width="48px" src="https://img.icons8.com/color/48/000000/linkedin.png" /></a>
    <a href="https://twitter.com/"><img align="center" alt="cogito21g | Twitter" width="48px" src="https://img.icons8.com/color/48/000000/twitter-squared.png" /></a>
  </div>

</footer>

References

- Managing your profile README

- Online Markdown Editor