🌐 Portfolio Site

📌 프로젝트 개요

• Next.js(App Router) 기반으로 제작한 개인 포트폴리오 사이트로, 프로젝트 소개, 상세 페이지, SEO 최적화를 중심으로 설계하였습니다.
• MDX 기반 콘텐츠 구조를 도입하여 프로젝트별 상세 설명, 이미지, 기술 스택을 유연하게 관리할 수 있도록 구성하였습니다.
• 프로젝트 리스트 페이지와 상세 페이지를 분리하고, 동적 라우팅을 통해 확장 가능한 구조를 설계하였습니다.
• Lighthouse 성능 개선 작업을 통해 모바일 기준 Performance 90점 이상을 달성하였으며, 이미지 최적화 및 전역 배경 구조 개선을 적용하였습니다.
• Google Search Console, sitemap, robots 설정을 통해 검색 엔진 색인 및 메타데이터 최적화를 완료하였습니다.

🧑‍💻 기술 스택 및 설계

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• 콘텐츠 관리: MDX
• 이미지 최적화: next/Image, WebP 변환, Priority 및 Lazy Loading
• SEO 설정: Metadata API, Open Graph, Canonical URL, Sitemap, Robots.txt
• 성능 최적화: Lighthouse, Performance Budget, Image Optimization
• 분석 도구: Google Analytics 4
• 배포 환경: Vercel, Custom Domain, HTTPS 적용

🚀 프로젝트 링크

• 🔗 Portfolio Site 배포 사이트
• 💻 GitHub 레포지토리