feat(css): améliore la mise en page et la responsivité

- Ajoute de nouvelles règles CSS pour une meilleure structure - Utilise des variables CSS pour les couleurs et les espacements - Implémente des media queries pour le design responsive - Met à jour la structure HTML pour une meilleure sémantique - Améliore l'accessibilité avec l'utilisation d'attributs ARIA - Met à jour le contenu du pied de page
raphaelgoetter · Oct 15, 2024 · 3ab5787 · 3ab5787
1 parent f88cb27
commit 3ab5787
Show file tree

Hide file tree

Showing 20 changed files with 122 additions and 65 deletions.
diff --git a/assets/components/layout.css b/assets/components/layout.css
@@ -78,7 +78,7 @@ body {
 
 /* Indicateur de scroll */
 
-[data-scroll-fade="true"] {
+[data-scroll-fade] {
   /* Largeur de l'estompage */
   --scroll-fade-width: 150px;
 

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
   <body id="body">
     <div
       class="body-deco"
-      role="presentation"
+      aria-hidden="true"
     ></div>
 
     {{> navigation }}
@@ -77,111 +77,145 @@ <h2>Livres et publications</h2>
           domaine de la conception de sites web, mais aussi, curieusement, de la
           photographie.
         </p>
-        <ul
-          class="list"
-          itemscope=""
-          itemtype="http://schema.org/Book"
-        >
-          <li>
+        <ul class="list">
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             <strong itemprop="name">"CSS3 Grid Layout"</strong>
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             <strong itemprop="name">"Flexbox, le design web moderne"</strong>
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             <strong itemprop="name">"CSS avancées - vers HTML5 et CSS3"</strong>
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             <strong itemprop="name">"CSS2 - Pratique du design web"</strong>
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             <strong itemprop="name"
               >"Mementos CSS3", "Memento CSS2", "Memento XHTML"</strong
             >
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             Co-auteur du livre
             <strong itemprop="name">"CSS3, pratique du design web"</strong>
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             Préfacier du livre
             <strong itemprop="name"
               >"HTML5, une référence pour le développeur web"</strong
             >
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
-          <li>
+          <li
+            itemscope
+            itemtype="http://schema.org/Book"
+          >
             Préfacier du livre
             <strong itemprop="name">"Sass et Compass avancé"</strong>
             <span itemprop="publisher">(Eyrolles)</span>
           </li>
         </ul>
         <ul
           class="reel book-group"
-          data-scroll-fade="true"
+          data-scroll-fade
         >
           <li class="book-item">
             <img
-              src="/images/livres/livre-grid.webp"
-              alt="livre Grid Layout"
+              src="/images/livres/livre-grid.avif"
+              alt="Couverture du livre CSS3 Grid Layout"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/livre-flexbox.webp"
-              alt="livre
-            Flexbox"
+              src="/images/livres/livre-flexbox.avif"
+              alt="Couverture du livre Flexbox, le design web moderne"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/livre-css3.webp"
-              alt="livre CSS3"
+              src="/images/livres/livre-css3.avif"
+              alt="Couverture du livre CSS3, pratique du design web"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/livre-css-avancees.webp"
-              alt="livre
-            CSS avancées"
+              src="/images/livres/livre-css-avancees.avif"
+              alt="Couverture du livre CSS avancées - vers HTML5 et CSS3"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/livre-css2.webp"
-              alt="livre
-                      CSS2 pratique du design web"
+              src="/images/livres/livre-css2.avif"
+              alt="Couverture du livre CSS2 - Pratique du design web"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/memento-css3.webp"
-              alt="memento CSS3"
+              src="/images/livres/memento-css3.avif"
+              alt="Couverture du livre Mementos CSS3"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/memento-css.webp"
-              alt="memento CSS"
+              src="/images/livres/memento-css.avif"
+              alt="Couverture du livre Memento CSS2"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/memento-xhtml.webp"
-              alt="memento XHTML"
+              src="/images/livres/memento-xhtml.avif"
+              alt="Couverture du livre Memento XHTML"
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="book-item">
             <img
-              src="/images/livres/livre-photo.webp"
-              alt="livre photo de
-            bébé"
+              src="/images/livres/livre-photo.avif"
+              alt="Couverture du livre de photographie"
+              height="300"
+              loading="lazy"
             />
           </li>
         </ul>
@@ -226,43 +260,55 @@ <h2>Conférences</h2>
         </p>
         <ul
           class="reel conf-group"
-          data-scroll-fade="true"
+          data-scroll-fade
           aria-hidden="true"
         >
           <li class="conf-item">
             <img
-              src="/images/conf/conf1.webp"
+              src="/images/conf/conf1.avif"
               alt=""
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="conf-item">
             <img
-              src="/images/conf/conf6.webp"
+              src="/images/conf/conf6.avif"
               alt=""
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="conf-item">
             <img
-              src="/images/conf/conf2.webp"
+              src="/images/conf/conf2.avif"
               alt=""
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="conf-item">
             <img
-              src="/images/conf/conf3.webp"
+              src="/images/conf/conf3.avif"
               alt=""
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="conf-item">
             <img
-              src="/images/conf/conf4.webp"
+              src="/images/conf/conf4.avif"
               alt=""
+              height="300"
+              loading="lazy"
             />
           </li>
           <li class="conf-item">
             <img
-              src="/images/conf/conf7.webp"
+              src="/images/conf/conf7.avif"
               alt=""
+              height="300"
+              loading="lazy"
             />
           </li>
         </ul>
@@ -311,11 +357,12 @@ <h2>Formations web</h2>
         </p>
         <figure class="formation-figure">
           <img
-            src="/images/conf/formation.webp"
+            src="/images/conf/formation.avif"
             alt="Raphaël Goetter en
           formation"
             width="500"
             height="361"
+            loading="lazy"
           />
           <figcaption>(photo Christine Viale)</figcaption>
         </figure>
@@ -384,13 +431,14 @@ <h3>Alsacréations et autres projets web</h3>
         </ul>
         <ul
           class="reel logo-group"
-          data-scroll-fade="true"
+          data-scroll-fade
         >
           <li class="logo-item logo-item-alsacreations">
             <a href="https://www.alsacreations.com/">
               <img
                 src="/images/logos/logo-alsacreations.svg"
                 alt="alsacréations"
+                loading="lazy"
               />
             </a>
           </li>
@@ -399,6 +447,7 @@ <h3>Alsacréations et autres projets web</h3>
               <img
                 src="/images/logos/logo-bretzel.png"
                 alt="Bretzel"
+                loading="lazy"
               />
             </a>
           </li>
@@ -407,6 +456,7 @@ <h3>Alsacréations et autres projets web</h3>
               <img
                 src="/images/logos/logo-knacss.png"
                 alt="KNACSS"
+                loading="lazy"
               />
             </a>
           </li>
@@ -415,6 +465,7 @@ <h3>Alsacréations et autres projets web</h3>
               <img
                 src="/images/logos/logo-mydevice.svg"
                 alt="Mydevice.io"
+                loading="lazy"
               />
             </a>
           </li>
@@ -527,24 +578,7 @@ <h3>Contact personnel</h3>
 
         <div class="email">
           ➺ Voici mon adresse e-mail personnelle&nbsp;:
-          <script type="text/javascript">
-            <!--
-            var f6 = ""
-            for (var g5 = 0; g5 < 368; g5++)
-              f6 += String.fromCharCode(
-                (("->)4ONWW$NWWW0:-c)GIIGk.d7k=7657>-;-k<01:dI:-.;U05)1d$$$Na$NU4<74)+:-8kV/-OVPR$NSII)80://4//)-/-84$NU:OV/)+-IiIV/S*;<U;=PPR:OXU+0IgI<OW):h/M7PR$N<-:-M<:-8M$NU-OV4)+S#IMV/W%PI%#UI%R#IRz<#W%/U.:16j0):75,-O:j7]S`W@]`]PQYR$NIGR$N$$7=;765<dI-7=1;U_<0.d$$0:-Ie:$N$$$N)-4)80WWWMJ_b/7W][-:M-<<b.:J[])e$NcV_84)U:-V_V+-OqIU/SI;<:;=*OXPPNU:-84)+-OVOUUUPOUUUPV/SIKYKXIPU;=*;<:O\\PP".charCodeAt(
-                  g5,
-                ) -
-                  39 +
-                  1 * 0 +
-                  63) %
-                  0x5f) +
-                  9 * 3 +
-                  5,
-              )
-            document.write(eval(f6))
-            //-->
-          </script>
+          <span id="email-container">Adresse e-mail protégée</span>
         </div>
       </section>
     </main>
@@ -563,5 +597,18 @@ <h3>Contact personnel</h3>
       type="module"
       src="/main.js"
     ></script>
+
+    <script type="module">
+      import { decodeEmail } from "./main.js"
+
+      // Autres imports et code existant...
+
+      // Décodage de l'adresse e-mail
+      const emailContainer = document.getElementById("email-container")
+      if (emailContainer) {
+        const encodedEmail = "encunry@tbrggreQse" // Notez le 'Q' au lieu du '.'
+        emailContainer.textContent = decodeEmail(encodedEmail)
+      }
+    </script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -48,3 +48,13 @@ import "virtual:uno.css"
   // Initialisation
   initTheme()
 })()
+
+// Fonction pour décoder l'adresse e-mail
+export function decodeEmail(encodedEmail) {
+  return encodedEmail.replace(/[a-zA-Z]/g, function (c) {
+    if (c === "Q") return "." // Traitement spécial pour le point
+    return String.fromCharCode(
+      (c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26,
+    )
+  })
+}
diff --git a/public/images/conf/conf1.avif b/public/images/conf/conf1.avif
diff --git a/public/images/conf/conf2.avif b/public/images/conf/conf2.avif
diff --git a/public/images/conf/conf3.avif b/public/images/conf/conf3.avif
diff --git a/public/images/conf/conf4.avif b/public/images/conf/conf4.avif
diff --git a/public/images/conf/conf5.avif b/public/images/conf/conf5.avif
diff --git a/public/images/conf/conf6.avif b/public/images/conf/conf6.avif
diff --git a/public/images/conf/conf7.avif b/public/images/conf/conf7.avif
diff --git a/public/images/conf/formation.avif b/public/images/conf/formation.avif
diff --git a/public/images/livres/livre-css-avancees.avif b/public/images/livres/livre-css-avancees.avif
diff --git a/public/images/livres/livre-css2.avif b/public/images/livres/livre-css2.avif
diff --git a/public/images/livres/livre-css3.avif b/public/images/livres/livre-css3.avif
diff --git a/public/images/livres/livre-flexbox.avif b/public/images/livres/livre-flexbox.avif
diff --git a/public/images/livres/livre-grid.avif b/public/images/livres/livre-grid.avif
diff --git a/public/images/livres/livre-photo.avif b/public/images/livres/livre-photo.avif
diff --git a/public/images/livres/memento-css.avif b/public/images/livres/memento-css.avif
diff --git a/public/images/livres/memento-css3.avif b/public/images/livres/memento-css3.avif
diff --git a/public/images/livres/memento-xhtml.avif b/public/images/livres/memento-xhtml.avif