Ceci est une soumission pour Frontend Challenge v24.09.04, glamour mon balisage: espace

Ce que j'ai construit

La page de destination dispose d'un design rétro d'inspiration spatiale avec des considérations de convivialité modernes comme le bascule en mode clair / sombre, un défilement lisse et une disposition entièrement réactive. Les visiteurs peuvent explorer des planètes, des lunes et des objets célestes via un carrousel interactif, et le contenu est conçu pour être éducatif mais amusant à naviguer.

Les caractéristiques clés comprennent:

• Toggle en mode clair / sombre : les utilisateurs peuvent basculer entre les thèmes clairs et sombres pour une expérience plus personnalisée.
• Carrousel interactif : les carrousels dynamiques permettent aux visiteurs d'explorer différentes planètes, lunes et objets célestes.
• Smooth Scrolling : un bouton "Begin Exploration" déclenche un défilement lisse vers la section Présentation du système solaire.
• Design entièrement réactif : Le site est conçu pour être superbe sur les appareils de bureau et mobiles.

Démo

Vous pouvez afficher le code sur github: github Repository

et consultez la démo en direct ici: démo en direct

Captures d'écran

Mode lumineux:

Mode sombre:

Exemple de carrousel:

View mobile:

Voyage

Je suis entré dans cela sans plan de conception, et le plan a changé pendant que je travaillais dans le projet, qui peut imiter ce qui se passe dans le monde réel. Cependant, j'aurais aimé avoir passé plus de temps à mener mon projet et à réfléchir aux aspects pour tout rassembler.

Je suis initialement allé avec un style terminal vintage. Bien que amusant, j'avais l'impression que le vert néon ne me donnait pas le look professionnel pour lequel je recherchais.

Donc, j'ai opté pour un look plus minimaliste à la fin, tout en gardant des éléments amusants. Ma nouvelle vision a été inspirée par un manuel vintage, qui peut être vu par les couleurs utilisées et certains des éléments de conception tels que le diviseur ASCII et les polices.

Le plus grand défi que j'ai été confronté en plus de la conception était de veiller à ce que le projet soit super sur les appareils mobiles. J'ai dû écrire des CS mobiles spécifiques pour plusieurs sections pour optimiser la conception. Flexbox a aidé aux ajustements de mise en page, mais la création d'une expérience vraiment transparente a pris des essais et des erreurs.

Dans l'ensemble, ce projet m'a poussé à penser de manière créative, à s'adapter à la volée et à équilibrer l'esthétique de conception avec la convivialité, qui sont des compétences précieuses dans le développement du frontend.