Personal case study
개발 포트폴리오
Next.js와 React로 만든 개인 포트폴리오 사이트입니다. 프로젝트별 상세 페이지와 반응형 레이아웃, 모바일 메뉴, 검색 엔진용 메타데이터를 구현했습니다.
2025.06 — 현재Design & Development
01
프로젝트 상세 페이지와 반응형 UI
Context
기존 사이트는 프로젝트 내용을 모달에서 보여 주어 별도 주소로 열거나 공유하기 어려웠고, 모바일에서 긴 내용을 읽기에도 불편했습니다.
Goal
각 프로젝트를 독립된 페이지로 제공하고, 데스크톱과 모바일에서 같은 내용을 편하게 탐색할 수 있어야 했습니다.
What I changed
- 프로젝트 데이터를 목록과 상세 페이지에서 함께 사용하고, 프로젝트별 주소와 메타데이터를 생성하도록 구성했습니다.
- 화면 크기에 따라 바뀌는 메뉴와 카드, 상세 페이지 레이아웃을 구현했습니다.
- 본문 건너뛰기, 현재 페이지 표시, 키보드 포커스와 모바일 메뉴 상태 정보를 추가했습니다.
Outcome
각 프로젝트를 별도 주소로 열고 공유할 수 있게 됐고, 데스크톱과 모바일 어디에서나 같은 내용과 탐색 구조가 유지됩니다.