I used these stacks for this site.
How it works?
(1) Navigation bar
- 개인 로고와 메뉴로 구성
- 개인 로고
- 메뉴
- 각 메뉴 버튼에 마우스를 올리면 (hover) 해당 배경색이 진하게 바뀜
- 각 메뉴 버튼을 클릭하면 배경선이 생기고 해당 섹션으로 이동
- 처음에는 메뉴바가 투명, 스크롤링 됐을 때 색이 생기고 위에 고정 (sticky)
- 섹션이 이동될 때마다 해당 버튼 활성화
(2) Home (Main)
- 직접 디자인한 홈 배경
- 'contact me' 버튼 버튼을 누르면 맨 밑 'Contact' 섹션으로 이동
- 스크롤링 홈에서 스크롤링 시 컨텐트들이 점점 투명하게 바뀜
(3) About
- 나에 대한 간단한 소개 & 경력
원 안의 아이콘에 마우스를 올리면 (hover) 색 변경, 크기가 조금 커지면서 왼쪽으로 30도 기울어짐- (update) ID Card에 마우스를 올리면 (hover) 카드가 뒤집히면서 뒷장의 내용이 보임
- (update) 앞장은 간단한 소개 및 이력, 뒷장은 사용할 수 있는 기술 스택 상세 나열
(4) Skills
사용할 수 있는 스택들Skills스킬을 어느 정도 사용할 수 있는지에 따라 퍼센트로 표현- 태그를 사용해서 퍼센트 표현
- (update) About 페이지에 기술 스택 상세 나열로 section 삭제
(5) My work
- 그 동안 했던 프로젝트들 정리
- 프로젝트 분야 별로 세분화
All (전체)Front-end (프론트엔드)Back-end (백엔드)Mobile (모바일)- (update) 그룹 프로젝트와 개인 프로젝트로 분리
- 카테고리 버튼
버튼에 마우스를 올리면 (hover) 버튼 색 변경버튼에 마우스를 올리면 (hover) 프로젝트를 한 갯수 표시 (위에서 아래로 이동)버튼 클릭 시 분야 별로 했던 프로젝트들 표시- (update) 카드 형식으로 사진과 프로젝트에 사용한 기술만 보여줌
- 프로젝트
프로젝트에 마우스를 올리면 (hover) 프로젝트 이름과 사용했던 스택들 표시프로젝트 클릭 시 해당 프로젝트 github로 이동- (update) 카드를 클릭하면 해당 프로젝트의 상세 설명을 보여주는 모달 창이 나옴
- (update) 모달 창에는 기여자, 사용한 스택들, 깃허브 주소, 블로그 주소, 프로젝트 설명, 프로젝트 담당 업무 기술
(6) Testimonials
추천서 (임시)- (update) section 삭제
(7) Contact
- 연락 방법
- 아이콘에 마우스를 올리면 (hover) 해당 아이콘 색 변경, 크기가 커짐
- 아이콘 클릭 시 개인 Github와 개인 블로그로 이동
- (update) 이력서 사이트 추가
(8) Arrow-up
- Home 섹션에서는 버튼이 숨겨짐
- Home 섹션에서 벗어난 이후부터 오른쪽 하단에 버튼 생성
- 버튼 클릭 시 맨 위(Home 섹션)로 이동
(9) 모바일 ver.
- CSS Media query 사용하여 모바일 버전 구현
- 모바일 버전은 화면 가로 768px부터 적용
Issues that occurred while creating the project.
(1) Scrolling when tapping on the navbar menu
- Issue : 처음에는 해당 섹션의 selector들을 일일히 다 받아온 후에 해당 섹션의 좌표값을 받아와서 (window.pageYOffset, getBoundingClientRect().top 사용) 이동 (window.scrollTo() 사용)
- Solution : 해당 섹션의 selector을 받아온 후 scroll 기능을 수행할 수 있는 'scrollIntoView' 함수를 만듦.
(2) Projects filtering
- Issue : 카테고리 버튼에서 갯수를 표현한 부분을 클릭할 때 버튼이 작동하지 않음.
- Solution : 'dataset' 값을 받아오거나 parentNode의 필터 값을 받아옴.
(3) 'Contact' button error
- Issue : 'Home' 섹션에 있는 'Contact me' 버튼을 클릭했을 때 'Contact' 버튼 활성화 되지 않음.
- Solution : Javascript에서 'selectNavItem' 함수를 메뉴의 버튼을 클릭했을 때 작동할 수 있도록 했었는데, 'scrollIntoView' 함수 안에 구현.