이것은 Frontend Challenge v24.09.04에 대한 제출입니다. 내 마크 업을 Glam : Space

내가 만든 것

방문 페이지에는 Light/Dark Mode 토글링, 부드러운 스크롤 및 완전히 반응 형 레이아웃과 같은 현대적인 유용성 고려 사항이있는 복고풍 공간에서 영감을 얻은 디자인이 있습니다. 방문객들은 대화식 회전식을 통해 행성, 달 및 천상의 물건을 탐험 할 수 있으며, 내용은 교육적이면서도 탐색하기가 재미 있도록 설계되었습니다.

주요 기능은 다음과 같습니다.

• Drigh/Dark Mode 토글 : 사용자는보다 개인화 된 경험을 위해 밝은 테마와 어두운 테마를 전환 할 수 있습니다.
• Interactive Carousel : 동적 회전식이 방문자가 다른 행성, 달 및 천상의 대상을 탐험 할 수있게 해줍니다.
• Smooth Scrolling : "시작 시작"버튼은 태양계 개요 섹션에 부드러운 스크롤을 트리거합니다.
• 완전 반응 형 디자인 :이 사이트는 데스크탑과 모바일 장치 모두에서 멋지게 보이도록 설계되었습니다.

데모

github : github Repository에서 코드를 볼 수 있습니다

그리고 여기에서 라이브 데모를 확인하십시오 : 라이브 데모

스크린 샷

라이트 모드 :

다크 모드 :

회전 목마 예 :

모바일보기 :

여행

나는 디자인 계획없이 이것에 들어갔고, 프로젝트를 통해 일할 때 계획이 바뀌었다. 그러나 나는 프로젝트 와이어 프레임과 모든 것을한데 모아서 브레인 스토밍하는 데 더 많은 시간을 보냈 으면 좋겠다.

나는 원래 빈티지 터미널 스타일로 갔다. 재미 있지만, 나는 네온 그린이 내가 노력하고있는 전문적인 모습을주지 않는 것처럼 느꼈다.

그래서, 나는 결국 더 재미있는 요소를 유지하면서 더 최소한의 모습을 선택했습니다. 저의 새로운 비전은 빈티지 교과서에서 영감을 얻었으며, 사용 된 색상과 ASCII 분배기 및 글꼴과 같은 일부 디자인 요소로 볼 수 있습니다.

디자인을 제외하고 내가 직면 한 가장 큰 과제는 프로젝트가 모바일 장치에서 훌륭하게 보이도록하는 것이 었습니다. 디자인을 최적화하기 위해 여러 섹션에 대한 특정 모바일 CSS를 작성해야했습니다. Flexbox는 레이아웃 조정에 도움이되었지만 진정으로 원활한 경험을 만드는 데 약간의 시행 착오가 필요했습니다.

전반적 으로이 프로젝트는 창의적으로 생각하고, 즉석에 적응하고, 전면 엔드 개발에서 귀중한 기술인 유용성으로 디자인의 미학을 균형을 잡았습니다.