Add bilingual French/English support with Hugo multilingual config

Configure Hugo multilingual mode (fr default, en secondary) with
Hextra's language-switch menu entry, and translate all existing
content pages to English using Hugo's per-file language suffix
convention (.en.md alongside .fr.md).

content/_index.en.md

@@ -0,0 +1,112 @@
+---
+
+title: Damien's NoteBook
+layout: hextra-home
+
+---
+
+<!-- markdownlint-disable MD033 MD034-->
+
+<div class="hx-mt-6 hx-mb-6">
+{{< hextra/hero-headline >}}
+  Personal NoteBook  
+  for NetDevOps and SRE
+{{< /hextra/hero-headline >}}
+</div>
+
+<div class="hx-mb-12">
+{{< hextra/hero-subtitle style="margin:.3rem 0 2rem 0">}}
+  Documentation and NetLabs to deploy,  
+  To test and practice 🚀
+{{< /hextra/hero-subtitle >}}
+</div>
+
+<div class="hx-mt-6"></div>
+
+{{< hextra/feature-grid >}}
+  {{< hextra/feature-card
+    title="Documentation"
+    subtitle="List of documents and explanations on networking or system concepts"
+    link="documentation"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    image="/images/documentation.png"
+    imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(58, 56, 113, 0.1),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="NetLab"
+    subtitle="Labs to practice with"
+    link="netlab"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-lg:min-h-[340px]"
+    image="/images/netlab.png"
+    imageClass="hx:top-[40%] hx:left-[36px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(203, 28, 66, 0.1),hsla(0,0%,100%,0));"
+  >}}
+  {{< hextra/feature-card
+    title="Blog"
+    subtitle="Experience feedback and technical articles"
+    link="blog"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    image="/images/blog.png"
+    imageClass="hx:top-[40%] hx:left-[36px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
+    style="background: radial-gradient(ellipse at 50% 80%,rgba(142, 68, 173, 0.1),hsla(0,0%,100%,0));"
+  >}}
+{{< /hextra/feature-grid >}}
+
+<div style="margin-top: 8rem; margin-bottom: 1.5rem;">
+  <div style="text-align: center; margin-bottom: 3rem;">
+    <h2 class="tech-title" style="
+      font-size: clamp(2rem, 5vw, 3.5rem);
+      font-weight: 800;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 4s ease infinite;
+      letter-spacing: -0.02em;
+      margin: 0;
+      padding: 0.5rem 0;
+    ">
+      Technologies used
+    </h2>
+    <p style="
+      color: #6b7280;
+      font-size: 1rem;
+      margin-top: 0.75rem;
+      font-weight: 400;
+    " class="dark:text-gray-400">
+      The tools and platforms I work with
+    </p>
+  </div>
+  {{< tech-banner speed="60s" height="80px" gap="4rem" >}}
+</div>
+
+<style>
+  @keyframes gradient-shift {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    .tech-title {
+      background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%) !important;
+      background-size: 200% 200% !important;
+      -webkit-background-clip: text !important;
+      -webkit-text-fill-color: transparent !important;
+      background-clip: text !important;
+    }
+  }
+  
+  [data-theme="dark"] .tech-title {
+    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%) !important;
+    background-size: 200% 200% !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+  }
+</style>