RYUNGFOLIO 🎄

📢 프로젝트 개요

🏠 ryungfolio.vercel.app

프로젝트 기술 위주의 프론트엔드 개발자 포트폴리오 사이트 (2024)

Next.js의 App Router 특징에 기반하여 Server Component 위주로 활용. 사용자와 상호작용이 필요한 Header와 같은 일부 Client Componenet를 제외하고는 Server Componenet를 기본으로 적용하여 Next.js의 권장 사항을 준수
INTRO 섹션을 기준으로 Header의 스타일을 전환하기 위해 사용자의 스크롤 위치와 브라우저의 크기 속성에 접근해 상태를 전환하도록 구현
Supabase를 통해 업무 경험과 프로젝트 경험 같은 개인적인, 그리고 잦은 수정이 일어날 수 있는 내용을 데이터베이스로 관리하는 방식을 선택. 각 데이터는 RESTful API 형태로 반환하고, 프로젝트에서 이를 호출하여 사용하는 방식을 채택
- 🔗 수파베이스를 이용해서 RESTful API 만들고 사용하기
Nodemailer 라이브러리를 활용하여 포트폴리오의 사용자에게 메일을 발송하는 기능 구현. Next.js의 API Route를 활용하여 클라이언트에서 Nodemailer로 이메일 전송을 위한 요청(POST)을 보내고 수행

CSS의 고유 기능인 keyframes와 animation, 그리고 SASS의 고유 기능인 변수 지정과 반복문 등을 결합하여 다양하고 부드럽고 가벼운 애니메이션 효과 연출
media-query를 활용하여 최소 너비 360px의 모바일 기기까지 대응할 수 있는 반응형 디자인 적용
가독성을 위해 단순한 UI와 한글 적용. 적극적인 웹 접근성 준수를 위해 sementic한 html 태그 사용 및 대체 텍스트 탑재