From 0d728a74d78a85439cc973503549855ce69a07bc Mon Sep 17 00:00:00 2001
From: beuleu <billyklotz789@gmail.com>
Date: Mon, 23 Oct 2023 18:30:27 +0200
Subject: [PATCH] lighthouse fixes

---
 src/components/Socials.astro          |  6 +++---
 src/components/shared/ThemeIcon.astro |  2 +-
 src/pages/cv.astro                    |  2 +-
 src/pages/projets/atike.astro         | 16 ++++++++--------
 src/pages/projets/educa.astro         | 17 ++++++++++++-----
 src/pages/projets/nohasba.astro       | 12 ++++++------
 6 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/Socials.astro b/src/components/Socials.astro
index 1d4dd12..3bd7789 100644
--- a/src/components/Socials.astro
+++ b/src/components/Socials.astro
@@ -13,14 +13,14 @@
 </div>
 <a href="https://www.codewars.com/users/beuleubeuleu" target="_blank" aria-label="Voir mon profile sur Codewars">
     <img class="codewars" src="https://www.codewars.com/users/beuleubeuleu/badges/micro" alt="Mon profile CodeWars"
-         width="264" height="28">
+         width="276" height="48">
 </a>
 
 
 <style>
   .social-img {
-    max-width  : 32px;
-    max-height : 32px;
+    max-width  : 48px;
+    max-height : 48px;
   }
 
   .codewars {
diff --git a/src/components/shared/ThemeIcon.astro b/src/components/shared/ThemeIcon.astro
index c82d4db..5166c72 100644
--- a/src/components/shared/ThemeIcon.astro
+++ b/src/components/shared/ThemeIcon.astro
@@ -1,4 +1,4 @@
-<button id="themeToggle">
+<button id="themeToggle" aria-label="theme sombre/clair">
     <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
         <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index 0cbad3f..25203f4 100644
--- a/src/pages/cv.astro
+++ b/src/pages/cv.astro
@@ -30,7 +30,7 @@ import BreadcrumbsItem from "../components/shared/BreadcrumbsItem.astro";
                     <a href="/CV-Billy-Klotz-FR-v4.pdf" download> Télécharger CV-Billy-Klotz (.pdf 258ko )</a>
                 </li>
             </ul>
-            <Image src={ cvPdf } alt="cv" width="960" height="1354" class="cv" format="webp"></Image>
+            <Image src={ cvPdf } alt="cv" width="960" height="1354" class="cv" format="webp" loading="eager"></Image>
         </section>
     </main>
 </Layout>
diff --git a/src/pages/projets/atike.astro b/src/pages/projets/atike.astro
index a4b516f..2a6c80e 100644
--- a/src/pages/projets/atike.astro
+++ b/src/pages/projets/atike.astro
@@ -28,15 +28,15 @@ import { Image }         from "astro:assets";
         l'abonnement
         wix. Je me suis lancé dans le projet en travaillant main dans la main avec les parties prenantes.
     </p>
-    <h3>Analyse du besoin</h3>
+    <h2>Analyse du besoin</h2>
     <p>Avant de commencer à développer tout et n'importe quoi, j'ai dû élaborer une stratégie d'action qui commence par
        l'analyse du besoin. <br>
        J'ai organisé plusieurs ateliers, un <span class="italic">event storming</span> et un <span class="italic">user story mapping</span>.
        Grâce à ceux-ci, une idée claire des fonctionnalités nécessaires s'est dessinée.</p>
-    <h4 class="italic">Event Storming</h4>
+    <h3 class="italic">Event Storming</h3>
     <p>Le premier atelier que j'ai organisé a été l'event storming qui nous a permis de comprendre et de visualiser les
        processus, interactions et événements sur l'ensemble du parcours utilisateur.</p>
-    <h4 class="italic">User Story Mapping</h4>
+    <h3 class="italic">User Story Mapping</h3>
     <div class="textAndImage">
         <div class="text">
             <p>À partir des événements et parcours identifié lors de l'event storming, j'ai réalisé un <span
@@ -51,7 +51,7 @@ import { Image }         from "astro:assets";
         <Image width="820" height="1180" src={ userStoryMapImage }
                alt="extrait du user story mapping réalisé" format="webp"></Image>
     </div>
-    <h3>Choix de la stack technique</h3>
+    <h2>Choix de la stack technique</h2>
     <p>
         Créer un site e-commerce est une démarche ambitieuse qui nécessite une planification minutieuse et des choix
         technologiques judicieux. Dans cette section, nous allons suivre le processus de réflexion qui m'a a conduit à
@@ -92,7 +92,7 @@ import { Image }         from "astro:assets";
         technologies que j'ai utilisé pour Atikè. Elles répondent à tous nos besoins, de
         l'accessibilité à l'économie, en passant par la performance, la légèreté et la facilité de développement.
     </p>
-    <h3>Développement du site</h3>
+    <h2>Développement du site</h2>
     <p>
         La clé de notre approche a été la mise à jour fréquente du site. J'ai adopté une méthodologie agile, ce
         qui signifie que j'ai pu réagir rapidement aux commentaires et aux nouvelles opportunités. L'itération
@@ -111,7 +111,7 @@ import { Image }         from "astro:assets";
         performance, de la sécurité, de l'accessibilité, et de la qualité de code. Et lorsqu'il ne
         le fait pas, c'est en connaissance de cause en sachant qui cela affecte et comment.
     </p>
-    <h3 id="TLDR">Too Long Didn't Read:</h3>
+    <h2 id="TLDR">Too Long Didn't Read:</h2>
     <p>
         En résumé, la refonte de l'e-commerce Wix visait à réduire les coûts d'abonnement tout en offrant une expérience
         améliorée. J'ai entamé ce projet en étroite collaboration avec les parties prenantes pour cerner les besoins. En
@@ -132,12 +132,12 @@ import { Image }         from "astro:assets";
     max-width : 800px;
   }
 
-  h3, h4 {
+  h2, h3 {
     text-align : center;
     margin     : 2em auto 1em;
   }
 
-  h4 {
+  h3 {
     font-size : 1rem;
   }
 
diff --git a/src/pages/projets/educa.astro b/src/pages/projets/educa.astro
index 44d4d31..085dd37 100644
--- a/src/pages/projets/educa.astro
+++ b/src/pages/projets/educa.astro
@@ -54,7 +54,7 @@ import validationImage  from "../../assets/projets/educa/educa-mern-validation.p
         dans un projet moderne (numérique responsable) qui passerait par les trois étapes suivantes du
         cycle de vie d’un produit.
     </p>
-    <h3>Explore</h3>
+    <h2>Explore</h2>
     <p>
         Dans la première phase, dite d'exploration, l’objectif principal est d’explorer le domaine et de
         comprendre les besoins du système. Cela implique une exploration approfondie des besoins des utilisateurs,
@@ -79,7 +79,7 @@ import validationImage  from "../../assets/projets/educa/educa-mern-validation.p
         <Image width="820" height="1180" src={ exploreImage }
                alt="page d'accueil du site lors de la phase explore" format="webp"></Image>
     </div>
-    <h3>Expand</h3>
+    <h2>Expand</h2>
     <p>
         Une fois que la phase d’exploration est terminée, la phase d’extension consiste à ajouter des fonctionnalités
         et à étendre les capacités du logiciel. Cela peut inclure la création de nouvelles fonctionnalités,
@@ -140,7 +140,7 @@ import validationImage  from "../../assets/projets/educa/educa-mern-validation.p
                alt="états de santé du site sur la page tableau de bord"
                format="webp"></Image>
     </div>
-    <h3>Extract</h3>
+    <h2>Extract</h2>
     <p>
         La phase d’extraction se concentre sur l’extraction des connaissances et des bonnes pratiques acquises lors des
         phases précédentes. Il s’agit de capturer les modèles, les meilleures pratiques, les composants réutilisables et
@@ -193,7 +193,7 @@ import validationImage  from "../../assets/projets/educa/educa-mern-validation.p
         gérer les contraintes dans le cadre d'un projet étudiant, où les idées et les objectifs évoluent en fonction des
         ressources disponibles.
     </p>
-    <h3 id="TLDR">Too Long Didn't Read:</h3>
+    <h2 id="TLDR">Too Long Didn't Read:</h2>
     <p>
         En résumé, le projet "Educa" a été développé pour valider ma certification de développeur web et web mobile. Il
         suit la méthodologie "Explore, Expand, Extract" de Kent Beck pour évoluer en fonction de la maturité du projet.
@@ -213,7 +213,7 @@ import validationImage  from "../../assets/projets/educa/educa-mern-validation.p
     max-width : 800px;
   }
 
-  h3 {
+  h2 {
     text-align : center;
     margin     : 2em auto 1em;
   }
@@ -274,6 +274,13 @@ import validationImage  from "../../assets/projets/educa/educa-mern-validation.p
     height  : 60px;
   }
 
+  .links {
+      margin-bottom: 2em;
+  }
+  .links li {
+      margin-top : .2em;
+  }
+
   @media only screen and (min-width : 800px) {
     .textAndImage {
       flex-direction : row;
diff --git a/src/pages/projets/nohasba.astro b/src/pages/projets/nohasba.astro
index 7dae78f..1c3ca22 100644
--- a/src/pages/projets/nohasba.astro
+++ b/src/pages/projets/nohasba.astro
@@ -36,7 +36,7 @@ import Accordion     from "../../components/shared/Accordion.astro";
         <a href="https://www.tricount.com/fr/" target="_blank">tricount</a>
         pour avoir un challenge en algorithme.
     </p>
-    <h3>Demo</h3>
+    <h2>Demo</h2>
     <p>Mais enfaite, il sert à quoi le site?</p>
     <p>
         En l'état, il ne sert à rien. J'ai très peu travailler sur le front mais j'ai tout de même quelques screenshot
@@ -66,7 +66,7 @@ import Accordion     from "../../components/shared/Accordion.astro";
         La création des dépenses et des utilisateurs d'un groupe se fait à l'aide de requêtes http (postman, insomnia,
         curl)
     </p>
-    <h3>BDD Relationnelle</h3>
+    <h2>BDD Relationnelle</h2>
     <p>
         N'ayant utilisé que mongoDB avant le développement de NoHasba, j'ai fait beaucoup de veille avant de commencer.
         Comment choisir, ou comment m'y prendre pour initialisé ma base de données ? <br>
@@ -135,7 +135,7 @@ import Accordion     from "../../components/shared/Accordion.astro";
            format="webp"
            class="diagram-image"></Image>
 
-    <h3>L'Algorithme</h3>
+    <h2>L'Algorithme</h2>
     <Accordion>
         <AccordionItem header="Voir le code">
             <Image width="2048"
@@ -205,7 +205,7 @@ import Accordion     from "../../components/shared/Accordion.astro";
         l'algorithme, mettant en lumière chacune de ses étapes clés et opérations.
     </p>
 
-    <h3>Inversion de Dépendance</h3>
+    <h2>Inversion de Dépendance</h2>
     <p>
         Au début de mon parcours de développement pour NoHasba, j'ai opté pour une solution simple mais limitée: stocker
         les données dans un fichier JSON et les manipuler en utilisant Node.js File System. Cela a permis un démarrage
@@ -262,7 +262,7 @@ import Accordion     from "../../components/shared/Accordion.astro";
         Cette transition a également renforcé la qualité du code en séparant clairement les responsabilités et en
         permettant une meilleure gestion des erreurs, tout en préservant la cohérence et la stabilité du projet.
     </p>
-    <h3 id="TLDR">Too Long Didn't Read</h3>
+    <h2 id="TLDR">Too Long Didn't Read</h2>
     <p>
         NoHasba est un projet personnel développé pendant ma formation en développement web et mobile. Il a été
         l'occasion d'explorer diverses technologies, notamment une base de données relationnelle et l'inversion de
@@ -290,7 +290,7 @@ import Accordion     from "../../components/shared/Accordion.astro";
     max-width : 800px;
   }
 
-  h3 {
+  h2 {
     text-align : center;
     margin     : 2em auto 1em;
   }