[Github.io] 나만의 포트폴리오 웹사이트 만들기 2

이제 그럴 듯한 페이지를 만드는 것이 목표다.

본인이 만든 react, html, css, js를 쓰는 경우도 있지만(사실 이게 베스트긴 하다)

보통 템플릿을 퍼와서 만드는 경우가 많다.

 

나 역시 템플릿을 퍼다가 만들었다.

 

1. 템플릿 고르기

https://jekyllthemes.io/free

Free Jekyll Themes

 

 

https://github.com/topics/website-template

GitHub · Build and ship software on a single, collaborative platform

https://themeforest.net/category/site-templates/personal

Personal Website Templates | ThemeForest

https://github.com/sjoleee/very-simple-portfolio

GitHub - sjoleee/very-simple-portfolio: 심플한 디자인의 포트폴리오 템플릿

 

구글에 github.io 포토폴리오 템플릿이라고 검색하면 이런 저런 템플릿들이 많이 나온다.

정답은 없다. 자기 입맛에 맞는 대로 퍼오면 된다.

 

그러나!

템플릿을 퍼오고 그걸 수정하려면 그 코드를 대략은 알아야 한다는 것...

나는 html을 몇번 다뤄봤기에 그게 더 익숙해서...

html 템플릿을 퍼왔다.

 

내가 사용한 템플릿:

https://startbootstrap.com/theme/resume

Start Bootstrap

html, css, js 코드로 이루어져 있고

무엇보다 편안하게 심플하다.

 

나는 임베디드 개발자(를 목표로 하고 있는 학생)이었기 때문에

화려한 것보다는 실용적이고 심플한 디자인을 택하고자 했다.

 

2. 커스텀 하기

 

나는 vscode와 깃허브를 연동시켜서

vscode에서 코드를 수정 시킨 후, github로 push했다.

 

연동 방법:

https://wikidocs.net/195126

05장. git, github, vscode 연동하기

 

 

vscode에서 확장 프로그램인 live server를 깔면 쓴 코드가 실시간으로 적용되는 웹페이지도 볼 수 있다.

이를 사용하면 손 쉽게 웹 사이트를 구성 가능하다.

 

2-1. 써야할 내용

보통 '자기소개', '프로젝트', '취미', '학력' 등을 나타낸다.

 

나는

1. About 자기 소개
2. Project 프로젝트
3. Club 동아리 활동
4. Education 교육 (학력)
5. Skills 스킬
6. Interests 흥미
7. Awards 상

 

와 같은 내용을 포함 했다.

 

이것은 개인의 선택이다. 

내가 동아리 안 넣고 싶음 마는 거고... 흥미 안 넣고 싶으면 마는 거고...

 

그러나 '프로젝트 소개'는 꼭 넣는 것이 좋다.

사실 상 포트폴리오는 프로젝트를 보여주기 위해 존재하는 것이라...

 

프로젝트 소개란에

프로젝트 이름과 여러 프로젝트 세부사항들을 모두 적어놓는 사람도 있고

프로젝트 이름과 간단한 소개만 적어놓는 사람도 있고

천차만별이다. 본인이 원하는 방향으로 적어두면 된다.

 

나 같은 경우는 프로젝트 명과 간단한 소개, 진행 기간을 적어둔 다음

프로젝트 명을 클릭하면 관련 깃허브로 이동하도록 해뒀다.

프로젝트의 세부 내용은 깃허브를 참조할 수 있도록...

 

3. 최종 완성

코드를 완성했다면 git push를 이용해 깃허브로 업로드 해주자

이때 master가 아닌 main으로 해주어야 한다!

 

(사용자이름).github.io를 주소창에 입력하면 내가 만든 포토폴리오 사이트가 뜬다!

 

완성이닷!

 

다음은 나의 깃허브 포토폴리오 사이트다.

https://youngmumi.github.io/

임베디드 개발자 김유정의 포트폴리오

맞다...  사실 이거 보여줄려고 어그로 끌었다.