From 4b45521f0180b9c700ab13c4cbc78fb2be43b863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Le=20Pr=C3=A9vost-Corvellec=20Arnault?=
 <arnault.le.prevost.corvellec@carbon-it.com>
Date: Wed, 8 Apr 2026 23:44:26 +0200
Subject: [PATCH] Enhance index.html and home.css for improved presentation
 layout and functionality

- Updated index.html to include an introductory section, quick links with QR codes, and a structured layout for presentations.
- Added styling in home.css for new sections, including .masthead-lead, .intro, and .qr-section, to improve visual hierarchy and user experience.
- Implemented QR code generation for easy access to the code repository and presentation slides.
---
 content/css/home.css | 125 +++++++++++++++++++++++++++++++++++++++++++
 content/index.html   |  79 ++++++++++++++++++++++++---
 2 files changed, 196 insertions(+), 8 deletions(-)

diff --git a/content/css/home.css b/content/css/home.css
index c8290c4..740a891 100644
--- a/content/css/home.css
+++ b/content/css/home.css
@@ -85,6 +85,131 @@ body::after {
   max-width: 42em;
 }
 
+.masthead-lead {
+  max-width: 42em;
+}
+
+.masthead-lead strong {
+  color: var(--accent-cyan);
+  font-weight: 600;
+}
+
+.section-title {
+  margin: 0 0 1rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+
+.intro {
+  margin-bottom: 2.25rem;
+}
+
+.intro p {
+  margin: 0 0 1rem;
+  font-size: 0.98rem;
+  line-height: 1.6;
+  color: var(--text-muted);
+  max-width: 52em;
+}
+
+.intro p:last-child {
+  margin-bottom: 0;
+}
+
+.intro code {
+  font-size: 0.9em;
+  padding: 0.12em 0.35em;
+  border-radius: 6px;
+  background: var(--accent-cyan-bg);
+  border: 1px solid var(--border-very-subtle);
+}
+
+.qr-section {
+  margin-bottom: 2.5rem;
+}
+
+.qr-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .qr-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.qr-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1.25rem 1.35rem;
+  border-radius: 12px;
+  border: 1px solid var(--border-subtle);
+  background: rgba(13, 17, 21, 0.55);
+  box-shadow: var(--panel-glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
+}
+
+.qr-card h3 {
+  margin: 0 0 0.35rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--accent-cyan);
+}
+
+.qr-card-desc {
+  margin: 0 0 0.75rem;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  color: var(--text-subtle);
+}
+
+.qr-link {
+  display: inline-block;
+  margin-bottom: 1rem;
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: var(--accent-cyan);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.qr-link:hover,
+.qr-link:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  outline: none;
+}
+
+.qr-link:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.qrcode-wrap {
+  align-self: center;
+  margin-top: auto;
+  padding: 0.5rem;
+  background: #fff;
+  border-radius: 8px;
+  line-height: 0;
+}
+
+.qrcode-wrap canvas,
+.qrcode-wrap img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.talks-section .section-title {
+  margin-bottom: 1rem;
+}
+
 .talks-grid {
   display: grid;
   gap: 1rem;
diff --git a/content/index.html b/content/index.html
index 6466bcb..d2597c9 100644
--- a/content/index.html
+++ b/content/index.html
@@ -12,21 +12,84 @@
   <div class="page">
     <header class="masthead">
       <h1>Talks</h1>
-      <p>Présentations (Reveal.js) — même charte visuelle que le site Specificat.</p>
+      <p class="masthead-lead">
+        Présentations techniques au format <strong><a href="https://revealjs.com/" target="_blank" rel="noopener noreferrer">Reveal.js</a></strong>
+   
+      </p>
     </header>
 
-    <main class="talks-grid" aria-label="Liste des présentations">
-      <a class="talk-card" href="kubernetes-hell-to-heaven/">
-        <h2>Kubernetes Operators</h2>
-        <p>De l’enfer au paradis — Kubernetes, opérateurs et boucle de réconciliation.</p>
-        <span class="meta">Dossier · kubernetes-hell-to-heaven</span>
-      </a>
-    </main>
+    <section class="intro" aria-labelledby="intro-heading">
+      <h2 id="intro-heading" class="section-title">À propos de ce site</h2>
+      <p>
+        Ce site regroupe les slides utilisées pour nos conférences et ateliers : navigation clavier, mode plein écran,
+        export PDF possible selon les thèmes. Le contenu vit dans le dépôt Git <em>Talks</em> ; les mises à jour du
+        dossier <code>content/</code> sont déployées automatiquement.
+      </p>
+      <p>
+        En salle ou en visio, vous pouvez partager l’URL des slides ou le dépôt source pour que le public récupère les
+        liens et le code — les QR codes ci-dessous facilitent l’accès depuis un téléphone.
+      </p>
+    </section>
+
+    <section class="qr-section" aria-labelledby="qr-heading">
+      <h2 id="qr-heading" class="section-title">Liens rapides</h2>
+      <div class="qr-grid">
+        <article class="qr-card">
+          <h3>Dépôt de code</h3>
+          <p class="qr-card-desc">Sources, CI et configuration du site.</p>
+          <a class="qr-link" href="https://git.specificat.io/arnault/Talks">git.specificat.io/arnault/Talks</a>
+          <div id="qrcode-repo" class="qrcode-wrap" aria-hidden="true"></div>
+        </article>
+        <article class="qr-card">
+          <h3>Ce site (slides)</h3>
+          <p class="qr-card-desc">URL à projeter ou à partager pendant une présentation.</p>
+          <a class="qr-link" id="qr-site-link" href="./">…</a>
+          <div id="qrcode-site" class="qrcode-wrap" aria-hidden="true"></div>
+        </article>
+      </div>
+    </section>
+
+    <section class="talks-section" aria-labelledby="talks-heading">
+      <h2 id="talks-heading" class="section-title">Présentations</h2>
+      <div class="talks-grid">
+        <a class="talk-card" href="kubernetes-hell-to-heaven/">
+          <h2>Kubernetes Operators</h2>
+          <p>De l’enfer au paradis — Kubernetes, opérateurs et boucle de réconciliation.</p>
+          <span class="meta">Dossier · kubernetes-hell-to-heaven</span>
+        </a>
+      </div>
+    </section>
 
     <footer class="site-footer">
       Contenu servi depuis le dépôt <em>Talks</em> (dossier <code>content/</code>).
     </footer>
   </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
+  <script>
+    (function () {
+      var u = new URL(window.location.href);
+      u.hash = "";
+      var siteUrl = u.href;
+
+      var siteLink = document.getElementById("qr-site-link");
+      if (siteLink) {
+        siteLink.href = siteUrl;
+        siteLink.textContent = siteUrl.replace(/^https?:\/\//, "");
+      }
+
+      new QRCode(document.getElementById("qrcode-repo"), {
+        text: "https://git.specificat.io/arnault/Talks",
+        width: 200,
+        height: 200,
+      });
+      new QRCode(document.getElementById("qrcode-site"), {
+        text: siteUrl,
+        width: 200,
+        height: 200,
+      });
+    })();
+  </script>
 </body>
 
 </html>