`Frontend Challenge v24.09.04, CSS Art: Space에 대한 제출물입니다.

영감

저는 CSS Art와 HTML을 사용하여 우리 태양계를 시각적으로 매력적인 대화식으로 표현하고 싶었습니다. 영감은 우주와 천체의 아름다움에 대한 나의 매력에서 비롯됩니다. 이 프로젝트를 통해 저는 사용자가 태양계의 각 행성을 탐색하고 배울 수 있도록 장려하는 인터랙티브 요소와 미니멀한 디자인을 결합하는 것을 목표로 삼았습니다.

데모

라이브 데모: 태양계 탐험
https://solar-system-explorer-css-art.vercel.app

아래 임베디드 코드 편집기에서 프로젝트 미리보기를 볼 수도 있습니다.
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

여행

이 챌린지에서 저는 창의적인 CSS 디자인과 대화형 JavaScript 기능을 결합하여 경험을 더욱 역동적으로 만들기로 결정했습니다. 프로세스를 자세히 살펴보면 다음과 같습니다.

행성 디자인: CSS 그리드와 호버 애니메이션의 조합을 사용하여 재미있는 상호작용을 제공하는 행성 카드를 만들었습니다. 행성 이름과 주요 정보가 동적으로 표시됩니다.

대화형 호버 효과: 각 행성에는 천체가 빛을 방출하는 방식에서 영감을 받은 빛나는 호버 효과가 있습니다. 또한 궤도 움직임을 시뮬레이션하기 위해 호버링할 때 회전하는 애니메이션을 추가했습니다.

자세한 정보를 위한 모달: 행성을 클릭하면 추가 정보가 포함된 모달 팝업이 나타나 몰입형 학습 경험을 선사합니다. 이는 앱을 상호작용적이고 유익하게 만듭니다.

CSS 아트: 외부 이미지를 사용하는 대신 전체 태양계 아트가 순수 CSS를 사용하여 제작되었습니다. 행성의 모양과 느낌을 시뮬레이션하기 위해 모양, 색상, 발광 효과에 중점을 두었습니다.

반응성: 레이아웃은 모든 화면 크기에 맞춰 완벽하게 반응하므로 사용자는 어떤 기기에서든 태양계를 탐색할 수 있습니다.

내가 배운 것:
간단한 JavaScript를 사용하여 CSS Art를 대화형으로 만드는 과제.
고급 호버 효과와 애니메이션을 구현하여 정적 요소에 생기를 불어넣습니다.
반응성이 뛰어나고 깔끔한 레이아웃을 만드는 CSS Grid 및 Flexbox의 강력한 기능.
다음은 무엇인가요?
더 자세한 행성 정보를 추가하고 행성에 대한 대화형 3D 보기를 구현하여 현실에 더 가까운 경험을 시뮬레이션할 계획입니다.
행성 회전 속도 및 온도 변화와 같은 실시간 데이터를 표시하도록 모달을 향상시킵니다.`