이것은 Frontend Challenge의 제출입니다 -12 월 에디션, 내 마크 업을 Glam : Winter Solstice

내가 만든 것

나는 전 세계적으로 Winter Solstice의 과학적, 문화적 중요성을 탐구하는 대화식, 교육적인 단일 페이지 응용 프로그램을 만들었습니다. 이 프로젝트는 기본 HTML 컨텐츠를 React, TypeScript 및 Tailwind CSS를 사용하여 현대적이고 매력적인 웹 경험으로 변환합니다.

주요 기능 :

• 부드러운 스크롤을 사용한 반응 형 탐색
• 호버 효과가있는 대화식 UI 요소
• 아름다운 그라디언트와 애니메이션
• React 구성 요소를 사용하여 최적화 된 성능
• 접근성 중심 디자인
• Lucide React
를 사용한 동적 아이콘
• unsplash의 멋진 이미지

데모
라이브 사이트는 :

• 애니메이션 태양/문 아이콘이있는 영웅 섹션
• 스크롤에 나타나는 스티커 내비게이션
• 아름답게 스타일링 된 콘텐츠 섹션
• 축하 및 전통을위한 카드 기반 레이아웃
• 부드러운 전환 및 호버 효과
• 모바일 응답 디자인

여행
기술 구현

• 구성 요소 기반 아키텍처에 반응을 사용했습니다
• 유형 안전을위한 타입 스크립트 구현
• 응답 스타일링을 위해 Tailwind CSS를 활용
• 유지 관리 가능성을 위해 재사용 가능한 구성 요소를 만들었습니다
• 부드러운 스크롤 내비게이션이 추가되었습니다
• 일관된 비주얼을위한 통합 루시드 반응 아이콘

구성 요소 구조

1. 내비게이션 : 스크롤 감지 기능이있는 스마트 네이바
2. 컨텐츠 섹션 : 각 주제에 대한 모듈 식 구성 요소
3. 카드 구성 요소 : 축하 및 전통을위한 재사용 가능한 카드
4. 바닥 글 : 탐색 링크가있는 반응 바닥기

주요 학습
1. 성능 최적화

• 이미지에 대한 게으른로드 구현
• 원활한 전환을 위해 CSS 애니메이션을 사용했습니다
• 최적화 된 구성 요소 렌더링

2. 접근성

• 시맨틱 HTML 구조
• 대화식 요소에 대한 Aria 레이블
• 키보드 내비게이션 지원

3. 반응 형 디자인

• 모바일 우선 접근
• Tailwind CSS
를 사용한 유연한 레이아웃
• 동적 컨텐츠 적응

자랑스러운 업적

1. 청소하고 유지 관리 가능한 코드 구조
2. 부드럽고 직관적 인 사용자 경험
3. 세부 사항에주의를 기울이는 아름다운 비주얼 디자인
4. 장치에서 작동하는 반응 형 레이아웃
5. 접근성 고려 사항

향후 개선

1. Solstice 설명을위한 대화식 애니메이션 추가
2. 어두운/라이트 모드 토글 구현
3. 더 많은 문화 축하 행사 추가
4. Solstice History의 대화식 타임 라인 만들기
5. 다중 언어 지원 추가