Github 프로필

안녕하세요 여러분 같이 github 프로필을 만들어 봐요!

 

1. Github?

2. Github Profile

1. Github 이란?

 

저번에도 간단하게 보여드린적이 있죠?

다들 아실 것이라고 생각합니다.

 

- Github은 분산 버전 관리 툴인 깃 (Git)저장소 호스팅을 지원하는 웹 서비스입니다.

- Git은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템입니다.

 

오른쪽 그림 처럼 내 파일의 상태를 기록하면서 버전을 관리할 수 있는 도구입니다.

 

다시 github으로 들어와서 github은 git을 사용하면서 프로젝트를 진행하고 그것을 업로드할 수 있는 공간이예요.

오픈소스를 지향하는 개발자 세상에서 모두가 서로의 프로젝트를 공유할 수 있습니다.

github을 통해서 어떤 개발자들이 어떤 프로젝트를 했는지 확인할 수 있기 때문에 개발자들에게는 또하나의 이력서와 같이 사용됩니다!

 

다같이 자신의 포트폴리오를 만들어 가 봅시다!

 

github 링크 : https://github.com/

GitHub: Where the world builds software

github 초기화면 입니다.

아직 회원가입안하셨으면 회원가입하고 로그인해주세요!

로그인하면 처음 볼 수 있는 화면입니다.

여기서 자신의 메인 프로필 화면으로 가면 아래 사진처럼 보입니다.

처음에는 자신의 repository들이 나오고 두번째로 1년동안 commit한 내용을 하나의 네모상자로 색상을 통해서 보여줍니다. 이렇게만 보면 제가 누군지 알기엔 조금 힘들겠죠? 이곳에 자신의 프로필을 만들어서 처음들어온 사람이 제가 누군지 알 수 있게 할 수 있습니다!

2. Github Profile

현재 PnP에서 프로필을 만들어 두신 분이 두분 계십니다.

이지석님과 김대현님은 이쁘게 잘 꾸며놓으셨네요.

인터넷에서 다른 개발자분들의 프로필을 보니깐 이쁘게 해놓은 신 분들이 많더라고요.

하나씩 같이 해보겠습니다.

새로운 repository를 만들어 줍니다.

자신의 계정명과 똑같은 이름의 Repository를 만들어고 해당 Repository의 README.md 파일을 수정하면 프로필로 나타납니다.

이름을 똑같이 해주고 아래 Add a READBE file을 선택합니다.

이제 생성된 Repository를 확인해보면 Hi there이 있네요. 현재 Profile을 보면 Hi there이 보일거예요.

오른쪽에 녹색박스에 Edit README를 눌러서 수정해볼게요!

이곳에서 README파일을 수정하면 됩니다!

.md파일은 mark down이라는 건데 처음 사용해보신 분들은 좀 낯설 수 있으니 아래에 관련 블로그 링크하겠습니다.

이거 안보셔도 저 따라서 쭉 진행하셔도 됩니다! 그리고 html을 해보신 분들은 html 마크업 문법을 사용하셔도 됩니다.

markdown문법으로 하면 간단하게 할 수 있지만 html 문법 같이 마크업을 사용하시면 더 많이 표현 할 수 있습니다. 그런데 마크업을 전부다 지원하지는 않습니다! 안되는 것도 있어요...!

MarkDown 사용법 : https://heropy.blog/2017/09/30/markdown/

MarkDown 사용법 총정리

 

먼저 어떤 내용을 넣을지 생각해볼게요.

1. 사진

2. 자기소개 - Hi there! I'm Seongil. ~

3. 경력 - ~초졸, ~중졸, ~고졸, ~대학생, ~인턴, ~pnp

4. 자신의 sns - gmail, instagram, facebook, linkedin, twitter, blog  ... 등

5. 기술 스택

    언어 - C, C++, Python ~

    platform - Andorid, Flutter, git, docker ~ 

6. 기타 - github stats,... 등

 

자유롭게 넣고 싶은 것들로 채워가면 됩니다!

너무 많으면 복잡해보일 수도 있으니 자신의 취향껏!

 

그럼 이제 하나씩 해볼게요

 

1. 사진

이쁜 사진들이 많지만 일단 저는 pnp 홈페이지 메인 사진을 업로드해보겠습니다.

Repositoy에 들어가서 중간에 Add File이 있습니다. 그곳에서 Upload files를 눌러줍니다.

파일 선택해서 업로드해주고 아래 commit change를 누르면 업로드가 됩니다!

이제 이게 README로 나타날 수 있도록 수정하겠습니다. 다시 README 수정하는 곳으로 이동합니다.

markdown 이미지는 아래처럼 작성합니다. 파란색을 자신의 것으로 수정하면 됩니다.


저 같은 경우는 아래와 같습니다. 링크 설명은 안 써줘도 됩니다 ㅎ 확인해보면 이렇게 나오네요. 넣고 싶은 그림으로 올리시면 될 것 같습니다.


이미지를 가운데 정렬하고 싶다면 태그를 사용하셔야 됩니다.

 

2. 자기소개

글을 쭉 작성하면 됩니다.

조금 구조적으로 이쁘게 작성하려면 markdown문법이나  조금 알면 됩니다.

제목

제목은 #이나 <h#> 태그를 이용합니다. #이 많을 수록 작아지고 태그는 <h1> ~ <h6>사용할 수 있습니다. #, ## 나 h1, h2는 아래 밑줄이 생깁니다.

이렇게 하면 아래처럼 됩니다. 

정렬을 바꾸고 싶으면 태그를 사용해주세요 h1태그에 align='center' 을 추가해줍니다.

이렇게 쭉 글을 작성하시면 아래처럼 생깁니다. 원래 markdown에서 띄어쓰기 두 번하면 줄바꿈이 되는데 왜 안되는지 모르겠네요. <br>을 이용해서 줄바꿈을 해봤습니다. (다음 설명 부터는 위에 그림은 생략할게요ㅎㅎ)

3. 경력 

아래 처럼 list로 나타낼 수도 있습니다. html <ol>, <ul>과 같습니다.

이것을 이용해서 쓰면 그냥 쓰는 것 보다 조금 더 이쁘겠죠?

4. 자신의 sns, 5.  기술 스택

이런 것을 나타낼 때 Badge를 사용합니다! 

이렇게 파란색 글씨 자신의 것으로 수정해서 작성하시면 됩니다.

<a href="연결할 링크" target="_blank"><img src="https://img.shields.io/badge/쓰고 싶은 텍스트-컬러 코드?style=flat-square&logo=브랜드 이름&logoColor=white"/></a>

sns는 <a> 태그 포함해서 연결되도록 하고 기술 스택은 <a>태그 없이 아래처럼만 해서 작성합니다.

<img src="https://img.shields.io/badge/쓰고 싶은 텍스트-컬러 코드?style=flat-square&logo=브랜드 이름&logoColor=white"/>

 

이 badge들은 shields.io에서 제공합니다. 추가적인 badge를 사용하고 싶으면 참고하세요. 아니면 위에 코드 복붙해서 수정하면 됩니다.

https://shields.io/

Shields.io: Quality metadata badges for open source projects

들어갈 로고나 색상은  simpleicons에서 참고하면 됩니다.

https://simpleicons.org/

Simple Icons

- gmail을 넣고 싶으면 검색하고 찾아서 빈칸 채우면 됩니다.

<a href="tjddlf101@gmail.com" target="_blank"><img src="https://img.shields.io/badge/Gmail-EA4335?style=flat-square&logo=Gmail&logoColor=white"/></a>

 

- LinkedIn

<a href="https://www.linkedin.com/in/seongil-heo-5469aa1b3/" target="_blank"><img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=flat-square&logo=Linkedin&logoColor=white"/></a>

- Instagram

<a href="https://www.instagram.com/heoseongil2546/" target="_blank"><img src="https://img.shields.io/badge/Instagram-E4405F?style=flat-square&logo=Instagram&logoColor=white"/>

기타 등등...

 

기술스택

- C

<img src="https://img.shields.io/badge/C-A8B9CC?style=flat-square&logo=C&logoColor=white"/>

- AWS

<img src="https://img.shields.io/badge/aws-232F3E?style=flat-square&logo=AmazonAWS&logoColor=white"/>  

 

띄어쓰기는 그냥 붙여서 쓰면 됩니다! 이정도면 이해되셨을거라고 믿어요!

6. 기타

-github stats

이제 좀 재밌는 것들을 추가해보겠습니다.

자신이 github에서 얼마나 활동했는지 통계를 볼 수 있는 github stats!

파란색에 자신의 아이디를 입력하면 됩니다.

둘 중에 아무거나로 하셔도 됩니다!

 

[](https://github.com/anuraghazra/github-readme-stats)

 

<img src="https://github-readme-stats.vercel.app/api?username=SeongilHeo&show_icons=true&theme=tokyonight&count_private=true&include_all_commits=true" style="height: auto; margin-left: 20px; margin-right: 20px; padding: 10px;"/>

-방문자 수 hits

 방문자 수를 세는 뱃지는 hits를 이용한다. 

아래 사이트에서 Badge를 만들 수 있다. 그냥 아래 코드 복사해서 아이디만 수정해도 됩니다.

https://hits.seeyoufarm.com/

HITS

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FSeongilHeo&count_bg=%23EB8B10&title_bg=%23684327&icon=&icon_color=

%23E7E7E7&title=VISIT&edge_flat=false)](https://github.com/SeongilHeo)

이렇게 만들 수 있다.

조금 더 추가할 예정!

- 백준 티어 프로필 카드

우리가 앞으로 백준 문제를 해결하게되면 랭크가 생깁니다. 저도 백준은 많이 랭크가 아직 없지만 만들어봅시다!

먼저 백준 홈페이지로 들어갑니다.

우측 상단에 설정으로 들어가서 solved.ac를 선택합니다.

저는 이미 사용하기를 눌러버려서 사용중으로 나오네요. 사용하기를 눌러주세요 그럼 이렇게 나올거예요!

solved.ac에 한번들어가보겠습니다. 링크 : https://solved.ac/

solved.ac

우측 상단에 아이콘 클릭해서 로그인하면 하려면 이렇게 나올거예요. 이렇게 로그인하고

다시 메인페이지에서 프로필을 보면

자신의 등급이 나옵니다. 이걸 github에 나타나도록 해볼게요!

아직 아무것도 없어서 창피하지만 숨기지말고 띄어놓은 다음에 열심히 rank를 올려봐요!

 

[](https://solved.ac/tjddlf101)

 코드는 이렇게 됩니다. 마찬가지로 파란색만 자신의 boj 아이디로 변경해주세요!

 

이렇게 되는군요 저는 Unrated네요 ...

 

이런 모양도 가능하네요.

[](https://solved.ac/tjddlf101)

조금 다른 것들도 있으니 참고하세요 ! 링크 : https://github.com/mazassumnida/mazassumnida

 

- DailyTime

이런것도 있네요!

https://goodgid.github.io/Github-Actions-Daily-Coding-Time/

Github Actions를 사용하여 자신의 Daily Coding 시간 확인하기

https://github.com/techinpark/productive-box

techinpark/productive-box

 

 

다른 것들도 많으니 찾아서 해보세요!

여기까지 쓰겠습니다!