RYUNGFOLIO 🎄

📢 프로젝트 개요

🏠 ryungfolio.vercel.app

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

🌈 기술 스택

• 스크립트 언어 :
• 프레임워크 : (v14 App Router)
• 스타일링 :
• 데이터베이스 :
• API 통신 및 테스트 :
• 배포 :
• 디자인 :
• 형상 관리 :

🥁 주요 작업

FEATURE

• 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)을 보내고 수행

MARKUP

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