ujeans/Interactive_Cards

인터렉티브한 요소를 볼 수 있는 프로젝트

📅 프로젝트 기간

• 1차 프런트엔드 개발 : 2024.06.08 ~ 2024.06.26

🔥 프로젝트 목표

• css를 활용하여 다양한 애니매이션과 인터렉티브한 요소 구현

💻 구현한 기술

• 스크롤 기반 카드 레이아웃
• keyframes를 사용하여 다양한 슬라이드 인 및 원형 확대/축소 애니메이션 적용
• svg를 활용하여 progress circle bar 구현

🛠️ 사용한 기술 스택

• Front : React JavaScript styled-components SVG
• 버전 및 이슈관리 : Github
• 서비스 배포 환경 : Vercel

📃 페이지 별 로직

HomePage(홈페이지)

1. 그리드 형태의 카드 목록을 볼 수 있습니다.
2. 스크롤을 내리면 더 많은 카드들을 볼 수 있습니다.
3. 카드를 호버했을 때 여러장의 카드를 볼 수 있습니다.

ModalPage(모달 페이지)

Link Icons

1. 각 프로젝트의 깃허브, 이메일, 링크드인 링크를 누르면 해당 페이지로 이동합니다.

Main Card

1. hover 했을 때 카드 뒷면을 볼 수 있습니다.
2. 카드 앞면에서는 프로젝트에 대한 간단한 설명을 볼 수 있습니다.
3. 카드 뒷면에서는 저에 대한 설명을 볼 수 있고 QR코드를 찍으면 모바일 버전을 볼 수 있습니다.

Progress Circle

• SVG를 사용하여 Progress Circle에 타이머 기능을 구현하였습니다.
• 타이머가 끝나면 자동으로 다음 카드를 볼 수 있게 변경됩니다.
• X 버튼을 클릭하면 모달창이 닫힙니다.

Mobile 버전