Next.js 포트폴리오에 대한 회고

개요

요즘 유명한 Next.js 프레임워크를 사용해서, 웹 포트폴리오를 구현했다. 최근에 학습하고 있는 프레임워크이기도 하고, 완성된 포트폴리오를 Vercel을 통해서 배포할 예정이어서, Next.js를 선택해서 구현했다.

초기 버전

초기 버전은, header와 main, footer로 나눠, 한 페이지로 구현했었다. 그 중 main은 4개의 section으로 나눴는데, 아래와 같이 구성했다.

• 사용자가 가장 먼저 보게 될 Hero Section.
• 소개를 위한 About Section.
• 구현한 프로젝트들에 대한 소개를 위한 Projects Section.
• 연락을 받기 위한 Contacts Section.

프로젝트 개선

버전 업데이트

• 프로젝트를 시작할 때는, Next.13버전으로 시작했지만, 10월 말에 Next.js 의 버전이 14로 업데이트 되어, 버전 업데이트를 진행했다.

UI 개선

• 처음에는, 프로젝트 목록을 첫 페이지에서 모두 볼 수 있도록 구현했으나, 첫 페이지에서는 최신 프로젝트를 보여주고, 그 외 다른 프로젝트들은 My Projects 페이지를 추가해서, 해당 페이지에서 전체 프로젝트 목록을 확인할 수 있도록 수정했다. 최신 프로젝트의 경우, Swiper를 사용해서, 좌우로 프로젝트를 넘겨 볼 수 있도록 구현했다.

구현 결과

• 미리보기

• 보러가기

• 소스 코드