오픈소스를 사용하여 적당한 웹 포트폴리오 만들기

이 포스팅은 아직 미완성이며 검색엔진에 노출되지 않는 미발행 포스트입니다.

This post is still unfinished, is not the subject of the post that are not exposed in the search engine.

 그저께 한상곤님의 블로그를 눈팅하다가 괜찮은 오픈소스 웹 포트폴리오 템플릿을 발견했다. 안그래도 최근에 웹 포트폴리오를 하나 정도 만들어보고 싶어서 이것저것 건드려봤는데, 워낙 프론트쪽 능력이 부족하다보니 고통받고 있었는데 덕분에 쉽게 만들 수 있었다.

준비물

github 계정

약간의 html/css 능력 + Bootstrap 지식

사용할 주요 오픈소스

xriley/Orbit-Theme : 포트폴리오 템플릿

font-awesome : 포트폴리오에서 사용되는 아이콘 제공

이 외에도 몇가지가 있긴 하지만 딱히 손댈 것은 없다.

저장소 Fork 하기

지금부터 xriley/Orbit-Theme를 내 저장소로 fork한 뒤에 적당한 수정을 거쳐 github.io로 호스팅까지 할 것이다. 우선 해당 저장소로 들어가 fork하게되면 내 저장소에 같은 것이 생기고 수정후 push할 수 있게된다.

xriley의 Oribit-Theme 저장소. 오른쪽 상단에 Fork 버튼이 있다.

내 저장소로 Fork되었다. fork된 뒤에는 저장소 이름, 파일 내용들을 입맛에 따라 수정할 수 있다.

내용 수정하기

포크가 잘 되었다면 git clone을 사용하여 내 저장소에서 로컬로 불러오자. 그 뒤 적당한 에디터로 내용을 수정하자. 색상 테마는 style-1.css 부터 style-6.css 까지 6가지를 지원한다. 나는 대충 다음 내용을 수정했다.

1. 기존 저장소는 프로필 이미지가 Circle 모양으로 static 이다. 나는 그런 처리를 하기 귀찮으므로 기존 이미지에  width, height를 주고 img-circle 클래스를 걸었다.

2. Section을 몇 가지 더 추가하고 내용을 추가했다. 섹션 내용에 사용되는 css 클래스는 가능한한 추가하지 않고 위에서 사용한 것들을 재사용했다. 

3. 그래도 추가한 css 클래스와 이미지 파일을 customs라는 디렉토리를 생성하여 따로 관리했다.

4. 사이드바에 몇 가지 연락 가능한 매체를 추가했다. 여기에 사용되는 왠만한 아이콘은 font-awesome 홈페이지에 방문하여 확인해 보면 다있다.

6. 페이스북에서 사용되는 os 메타 태그를 추가했다. os:image를 설정해두면 페이스북 링크 공유시 다음과 같이 썸네일이 뜬다.

github.io로 호스팅하기

github 계정이 있고, gh-pages 브랜치로 푸시만 할 수 있으면 github에서 제공하는 static hosting 서비스를 이용할 수 있다. gh-pages 브랜치를 만들고 해당 브랜치의 내용들이 github.io를 통해 호스팅된다. '본인계정명.github.io/저장소이름' 이 기본 경로다. 나 같은 경우는 uyu423.github.io/portfolio/ 이된다.

마무리

수정하기가 귀찮고 원하는 결과물이 내 것과 비슷하다면 그냥 내 저장소를 fork해가서 사용하는 것이 더 나을 수도 있다.

조금씩 보완해나가긴 하겠지만 우선 프로젝트 목록 클릭시 상세 내용을 모달로 띄워주는 것 부터 해야겠다. vim으로 프론트 코딩하려니 지옥이 따로 없다. 아니 니가 못해서 그래