`Ceci est une soumission pour Frontend Challenge v24.09.04, CSS Art : Space.

Inspiration

Je voulais créer une représentation interactive et visuellement attrayante de notre système solaire en utilisant CSS Art et HTML. L'inspiration vient de ma fascination pour l'espace et la beauté des corps célestes. À travers ce projet, mon objectif était de combiner un design minimaliste avec des éléments interactifs qui encouragent les utilisateurs à explorer et à découvrir chaque planète du système solaire.

Démo

Démo en direct : Explorez le système solaire
https://solar-system-explorer-css-art.vercel.app

Vous pouvez également voir un aperçu du projet dans l'éditeur de code intégré ci-dessous :
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

Voyage

Dans ce défi, j'ai décidé de mélanger une conception CSS créative avec des fonctionnalités JavaScript interactives pour rendre l'expérience plus dynamique. Voici un aperçu du processus :

Conception des planètes : j'ai utilisé une combinaison de grille CSS et d'animations de survol pour créer des cartes de planètes offrant une interactivité amusante. Les noms des planètes et les informations clés sont présentés de manière dynamique.

Effets de survol interactifs : chaque planète a un effet de survol lumineux, inspiré de la façon dont les objets célestes émettent de la lumière. J'ai également ajouté une animation de rotation en survol pour simuler un mouvement orbital.

Modaux pour plus d'informations : lorsque vous cliquez sur une planète, un modal apparaît avec des informations supplémentaires, créant une expérience d'apprentissage immersive. Cela rend l'application à la fois interactive et informative.

Art CSS : au lieu d'utiliser des images externes, l'ensemble de l'art du système solaire a été construit en utilisant du CSS pur. Je me suis concentré sur les formes, les couleurs et les effets de lueur pour simuler l'apparence et la sensation des planètes.

Réactivité : la mise en page est entièrement réactive, s'adaptant à toutes les tailles d'écran pour garantir que les utilisateurs peuvent explorer le système solaire depuis n'importe quel appareil.

Ce que j'ai appris :
Le défi de rendre CSS Art interactif en utilisant un simple JavaScript.
Implémentation d'effets de survol et d'animations avancés pour donner vie aux éléments statiques.
La puissance de CSS Grid et Flexbox pour créer des mises en page réactives et propres.
Quelle est la prochaine étape ?
Je prévois d'ajouter des informations plus détaillées sur les planètes et éventuellement de mettre en œuvre une vue 3D interactive pour les planètes afin de simuler une expérience plus proche de la réalité.
Amélioration du modal pour afficher des données en temps réel telles que la vitesse de rotation de la planète et les variations de température.`