프론트엔드 포트폴리오

프론트엔드 포트폴리오를 만들기 위한 Next.js 프로젝트 초기 세팅 방법을 정리합니다.

폴더 구조 설계

레이아웃 구성 (Header, Footer, Main)

포트폴리오 페이지의 핵심 콘텐츠를 구성하는 Hero, About, Projects, Skills, Contact 섹션을 개발합니다.

각 포트폴리오 섹션에 들어갈 콘텐츠(데이터)를 정리하고, 사용자에게 의미 있는 프로젝트 설명을 보완하는 것이 핵심입니다.

단일 페이지로 구성된 포트폴리오 프로젝트에서 각 섹션을 자연스럽게 연결하고, Next.js App Router 기반으로 라우팅과 기본 SEO 설정까지 정리하는 과정을 진행했습니다.

모든 섹션과 컴포넌트가 다양한 디바이스에서 자연스럽게 동작하는지 점검하고, 다크 모드 대응 상태를 확인한 뒤, GitHub와 Vercel을 연동하여 실제 배포를 진행합니다.

오늘은 Framer Motion을 활용해서 포트폴리오 첫 화면에 보여줄 인트로 애니메이션을 구현했습니다. "퍼블리셔에서 → 프론트엔드 개발자로" 문구가 순차적으로 나타났다 사라지는 형태입니다.

사용자가 스크롤할 때 현재 보고 있는 섹션을 네비게이션에서 하이라이트하는 패턴을 스크롤 스파이라고 합니다.

포트폴리오에서 가장 눈에 띄는 부분 중 하나는 프로젝트 섹션입니다. 단순히 “프로젝트 나열”이 아니라, 한눈에 요약 정보를 제공하고 성과 지표와 기술 스택을 강조하며 심화 설명(Case Study)을 담을 수 있는 구조로 만들고자 했습니다.