L'objectif du projet est de présenter l'ensemble des médailles obtenues par continents en suivant ce modèle.

• Page statique hébergée sur github pages

Le projet a été créé avec vite, pour le démarrer, il faut installer les dépendances et lancer le serveur de développement (avec le gestionnaire de paquet de votre choix).

pnpm install
pnpm run dev

Si vous voulez des données fraiches pour les médailles, vous pouvez récupérer les derniers résultats à l'aide de la commande fetch.

pnpm run fetch

Vu que le projet est petit, j'ai essayé d'utiliser peu de librairies / outils pour avoir quelque chose de léger et facile à lancer.

• Preact, alternative légère à React, pour gérer les anneaux olympique (la flemme de manipuler le DOM à la main)
• NodeJS & JSDOM, pour parser une page HTML et générer le JSON des médailles (pas trouvé d'API, pour cet exercice je m'autorise donc à scrapper un site)

Côté CSS, j'ai décidé de faire les anneaux en utilisant des divs pour faire des cercles. Les guidelines sont très précises sur les dimensions ce qui permet le pilotage de la taille des anneaux avec une seule variable CSS.

• Un anneau doit avoir un diamètre extérieur qui est 12 fois la taille de la bordure (donc diamètre intérieur = 10 x bordure).
• Les anneaux sont espacés d'une fois la taille de la bordure (la largeur total est donc de 38 fois la bordure).

• Guidelines du logo (page 13)
• Source pour les médailles
• Reset css
• Générateur de box-shadow
• Générateur de courbe de béziers
• Photopea (pour créer l'image en noir & blanc)

Un easter egg est caché lors du clic sur un des continent. On peut cliquer sur plusieurs continents rapidement pour plus d'ambiances.