`Esta es una presentación para Frontend Challenge v24.09.04, CSS Art: Space.

Inspiración

Quería crear una representación interactiva y visualmente atractiva de nuestro Sistema Solar usando CSS Art y HTML. La inspiración surge de mi fascinación por el espacio y la belleza de los cuerpos celestes. A través de este proyecto, mi objetivo era combinar un diseño minimalista con elementos interactivos que alienten a los usuarios a explorar y aprender sobre cada planeta del Sistema Solar.

Manifestación

Demostración en vivo: Explora el Sistema Solar
https://solar-system-explorer-css-art.vercel.app

También puedes ver una vista previa del proyecto en el editor de código incorporado a continuación:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

Viaje

En este desafío, decidí combinar un diseño CSS creativo con la funcionalidad interactiva de JavaScript para hacer la experiencia más dinámica. Aquí hay un desglose del proceso:

Diseñando los planetas: utilicé una combinación de CSS Grid y animaciones flotantes para crear tarjetas de planetas que brindan interactividad divertida. Los nombres de los planetas y la información clave se presentan dinámicamente.

Efectos de desplazamiento interactivos: cada planeta tiene un efecto de desplazamiento brillante, inspirado en la forma en que los objetos celestes emiten luz. También agregué una animación giratoria al pasar el cursor para simular el movimiento orbital.

Modales para obtener más información: cuando se hace clic en un planeta, aparece un modal con información adicional, lo que crea una experiencia de aprendizaje inmersiva. Esto hace que la aplicación sea interactiva e informativa.

Arte CSS: en lugar de utilizar imágenes externas, todo el arte del sistema solar se creó utilizando CSS puro. Me concentré en formas, colores y efectos de brillo para simular la apariencia de los planetas.

Capacidad de respuesta: el diseño es totalmente responsivo y se adapta a todos los tamaños de pantalla para garantizar que los usuarios puedan explorar el sistema solar desde cualquier dispositivo.

Lo que aprendí:
El desafío de hacer que CSS Art sea interactivo usando JavaScript simple.
Implementar animaciones y efectos de desplazamiento avanzados para dar vida a elementos estáticos.
El poder de CSS Grid y Flexbox para crear diseños limpios y responsivos.
¿Qué sigue?
Planeo agregar información más detallada sobre los planetas y potencialmente implementar una vista 3D interactiva de los planetas para simular una experiencia más cercana a la realidad.
Mejora del modal para mostrar datos en tiempo real, como la velocidad de rotación del planeta y las variaciones de temperatura.`