[개인 프로필 사이트] 2. 프로젝트 기획

Intro

저번 시간에 프로젝트 주제와 세부 테마를 정하고, 참고할 만한 사이트들을 찾아봤었다.

이번엔 메인 페이지와 각 세부 테마가 포함할 내용을 정하는 시간을 갖겠다.

---

메인 페이지

메인 페이지는 각 세부 테마에 해당하는 섹션을 선택하여 클릭 시 페이지를 이동시켜주는 일종의 허브 역할을 하도록 할 생각이다.

페이지 UI 구조는 아래의 링크를 참고할 예정이다.

https://webstoryboy.github.io/portfolio/port2/

Portfolio Site

 

기본적인 UI 구성은 같고, 가운데의 이미지와 텍스트, 메뉴 구성 등을 변경하여 개발한다.

 

설계한 UI 구조는 다음과 같다.

Portfolio	Hobby
	Feedback

---

포트폴리오 페이지

포트폴리오 페이지엔 나에 대한 간략한 소개, 강점, 기술, 회사에서 해왔던 프로젝트들과 Contact 등의 내용을 포함하도록 구성할 예정이다.

 

페이지 UI 구조는 아래의 링크를 참고할 예정이다. 코드 구조가 직관적이고 다양한 애니메이션 응용 기술들이 들어가 있어 따라 해봤을 때 기본적인 개념과 구조 등을 익히는데 도움이 많이 될 것 같다.

http://findmatthew.com/

http://findmatthew.com/

 

설계한 UI 구조는 다음과 같다.

Main Page
fixed nav
Introduce		Skills
Strength1	Strength2	Strength3	Strength4
Projects
	Contact

---

취미 페이지

재밌게 플레이했던 게임, 좋아하는 유튜브 카테고리 등의 내용을 담을 예정이다.

 

썸네일엔 게임사에서 제공하는 짧은 소개영상을 자동으로 스크롤되며 보여줄 수 있도록 개발한다.

게임의 카테고리 별로 3~4개 정도씩 추가할 예정이며, 빠른 이동이 가능하도록 우측에 메뉴를 추가할 예정이다.

 

설계한 UI 구조는 다음과 같다.

제목	메뉴
썸네일 (동영상)
소개1
소개2
소개3

---

개인 프로젝트 & 피드백 페이지

그동안 해왔던 프로젝트들과 자유롭게 댓글을 남길 수 있는 사이트를 만들 예정이다.

댓글 기능이 있기에 이 프로젝트를 하며 가장 많은 시간이 소요되지 않을까 하는 생각이 든다.

새로운 프로젝트를 완료할 때마다 추가가 쉽도록 UI는 간단하게 할 예정이다.

 

설계한 UI 구조는 다음과 같다.

제목
썸네일4	소개4
썸네일3	소개3
썸네일2	소개2
썸네일1	소개1
댓글