발표에 사용할 포트폴리오는 수업중에 배웠던 개념과 디자인을 중심적으로 만들어보았다.
하지만 멋쟁이사자처럼 동아리에서 배웠던 JS를 조금 더 공부해서 JS 또한 사용해보고 싶었다.
또한 멀티 페이지 사이트가 아닌 원 페이지를 만들어보고 싶었다.
그리하여 V.2 포트폴리오를 만들게 되었다.
이 사이트는 nav바의 홈, 소개, 기술 등의 글씨를 눌러도 다른 페이지로 넘어가는 것이 아닌 한 페이지에서 스크롤이 움직이면서
해당하는 부분을 화면에 보여주는 식의 원 페이지 사이트이다.
위 이미지는 V.2 포트폴리오 사이트 (앞으로는 줄여서 V.2라고 하겠다)의 랜딩 홈페이지이다.
이미지라 보이진 않지만 아바타 이미지는 상하로 조금씩 움직이며 파랗게 빛나는 기능을 구현해봤다.
다음은 소개 영역이다.
간단한 자기소개와 중부대학교 2학년(Sophomore의 So.), 동아리 정보, 열정 % 카드를 추가해서 간단하게 내가 누구인지 보여주는 영역을 만들어보았다.
위는 기술 스택을 보여주는 영역이다.
각 카드는 마우스를 올릴경우 파란빛이 나오며 살짝 위로 뜨고 아이콘이 한바퀴 도는 애니메이션을 넣어 마이크로 리액션처럼 구현해봤다. 또한 카드 하단에 Skill bar를 배치하여 몇 %정도 해당 기술 스택을 공부했는지를 표현해봤다.
위 이미지는 팀 프로젝트 & 팀원을 나타내는 영역이다.
각 카드는 팀플, 팀원 소개, 깃허브, 과제 페이지로 이동되는 링크가 있다.
이 카드 또한 마우스를 올리면 반응을 하도록 디자인하였다.
위 이미지는 연락처 영역이다.
이메일, 깃헙, 블로그, 전화번호를 보여주는 카드를 배치했으며 이 또한 마찬가지로 마우스를 올리면 파랗게 강조되고 아이콘이 한바퀴 돈다.(이미지 속 이메일 아이콘이 세로로 납작해보이는 이유)
여기까지가 홈 페이지의 요소들이였다. 이 밑은 상단 nav바에 있는 과제소개 버튼을 누르면 이동되는 과제소개 페이지 부분이다.
원 페이지를 구현하려 했지만 한 페이지에 너무 많은 정보가 있는 것은 꽤나 불편했기에 UX를 생각하여 과제 부분은 따로 페이지를 만들어보았다.
과제 소개 페이지로 이동하면 가장 먼저 보이는 모습이다.
홈 페이지의 아바타 이미지처럼 저 파일 아이콘이 있는 둥근 푸른 구체도 상하로 움직이며 빛난다. 디자인 통일성을 주기위해 저렇게 만들었다.
이 페이지를 어떤 레포를 기반으로 만들었는지 소개하는 영역이다. 사실 아직 만들고 있는 페이지이기에 저 중에서 구현하지 못한 구조가 많다. 임시로 채워둔 문구라고 생각해도 좋다.
예전 수업중에 배웠던 내용들을 카드로 정리해봤다. 클릭하면 예전에 수업중에 배포했던 연습사이트로 이동된다.
아래 이미지는 카드 중에서 list.html 카드를 눌렀을 때 이동되는 페이지이다.
각 카드에는 해당되는 페이지로 이동되는 "배포 사이트 보기 ->" 링크가 있으며 마우스를 올리면 반응한다.
과제 소개 페이지 하단에도 깃허브와 티스토리 블로그로 이동되는 카드를 추가했다.
홈 페이지, 과제소개 페이지 모두 풋바에 깃허브, 링크드인으로 이동할 수 있는 아이콘과 저작권 문구가 있다.
다크/라이트 모드 토글 전환 버튼
V.2 페이지에서 먼저 만들어보고 제출한 포트폴리오 사이트에도 가져온 기능이 다크모드와 라이트모드를 전환하는 토글 기능이였다. 항상 다크/라이트 모드 기능을 우선으로 찾는 나에겐 꼭 구현해보고 싶은 기능이였다.
위는 화면 우측 하단에 있는 모드 변경 토글 버튼을 눌러 라이트모드로 전환됐을 때의 홈페이지 화면이다.
전체적으로 푸른 테마는 남겨두고 어두운 부분만 반전시켜 다크/라이트 모드를 만들어봤다. 한 번 누르면 다른 페이지로 이동해도 유지되며 이 기능에도 JS가 사용된다.
위는 라이트 모드에서의 소개 영역이다.
위는 라이트 모드에서의 팀 프로젝트 & 팀원 영역이다.
추후에 더 많은 기능과 구조를 추가해보고 싶은 V.2 포트폴리오 사이트였다.
간단히 소개하기 위해 만든 글이라서 상세한 코드는 글에 넣지 않았으며 나중에 따로 각 기능에 맞춰 나눠서 글을 써볼까 한다.
아래는 영상 녹화본이다. 용량이 커서 유튜브 링크로 업로드했다.
'웹프로그래밍 과제' 카테고리의 다른 글
| 웹의 기본 HTML,CSS,Javascript 3형제에 대하여 간단히 소개 (0) | 2026.03.20 |
|---|