From 4eb495c0215fcf94a187e655fba80c03d41d6ecb Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 13 Mar 2026 09:06:14 +0100
Subject: [PATCH] =?UTF-8?q?Refactor:=20header=20s=C3=A9mantique=20+=20back?=
 =?UTF-8?q?drop=20limit=C3=A9=20=C3=A0=20expertise/about/blog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header : <nav> enveloppée dans <header> (landmark sémantique)
- Backdrop navbar restreint aux slides about et blog (scroll > 100px)
- Portfolio : $effect navbar backdrop supprimé + import navigation retiré

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/layout/Header.svelte | 76 +++++++++++++++--------------
 src/views/Portfolio.svelte          | 12 ++---
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 8e6efbf..e43ae0c 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -26,9 +26,11 @@
     navigation.toggleMenu()
   }
 
+  const scrollableSlides = new Set(['about', 'blog'])
+
   onMount(() => {
     function onScroll(e) {
-      if (e.target?.classList?.contains('page-scrollable')) {
+      if (e.target?.classList?.contains('page-scrollable') && scrollableSlides.has(slides.active?.id)) {
         navigation.setScrolled(e.target.scrollTop > 100)
       }
     }
@@ -37,44 +39,46 @@
   })
 </script>
 
-<nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
-  <a href="/" class="navbar-logo">
-    <img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
-  </a>
+<header>
+  <nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
+    <a href="/" class="navbar-logo">
+      <img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
+    </a>
 
-  <ul class="navbar-list">
-    {#each menuItems as slide}
-      <li>
-        <a
-          href={slide.path}
-          class="navbar-item"
-          class:active={activeId === slide.id}
-        >
-          {getTitle(slide)}
-        </a>
-      </li>
-    {/each}
-  </ul>
+    <ul class="navbar-list">
+      {#each menuItems as slide}
+        <li>
+          <a
+            href={slide.path}
+            class="navbar-item"
+            class:active={activeId === slide.id}
+          >
+            {getTitle(slide)}
+          </a>
+        </li>
+      {/each}
+    </ul>
 
-  <button
-    class="navbar-toggle"
-    onclick={toggleMenu}
-    aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
-    aria-expanded={isMenuOpen}
-    aria-controls="main-menu"
-  >
-    <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="7"  cy="7"  r="2" fill="white" class="dot dot-tl" />
-      <circle cx="17" cy="7"  r="2" fill="white" class="dot dot-tr" />
-      <circle cx="7"  cy="17" r="2" fill="white" class="dot dot-bl" />
-      <circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
-      <line x1="9"  y1="9"  x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
-      <line x1="15" y1="9"  x2="9"  y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
-    </svg>
-  </button>
-</nav>
+    <button
+      class="navbar-toggle"
+      onclick={toggleMenu}
+      aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
+      aria-expanded={isMenuOpen}
+      aria-controls="main-menu"
+    >
+      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="7"  cy="7"  r="2" fill="white" class="dot dot-tl" />
+        <circle cx="17" cy="7"  r="2" fill="white" class="dot dot-tr" />
+        <circle cx="7"  cy="17" r="2" fill="white" class="dot dot-bl" />
+        <circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
+        <line x1="9"  y1="9"  x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
+        <line x1="15" y1="9"  x2="9"  y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
+      </svg>
+    </button>
+  </nav>
 
-<Menu />
+  <Menu />
+</header>
 
 <style>
   .navbar {
diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
index 00540d9..7b0992e 100644
--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@@ -1,7 +1,6 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
-  import { navigation } from '@state/navigation.svelte'
   import { createScrollNav } from '@composables/useScrollNav.svelte.js'
   import GalleryAnimation from '@components/ui/GalleryAnimation.svelte'
   import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
@@ -18,10 +17,6 @@
   const backgroundImage   = $derived(data?.backgroundImage ?? null)
   const currentProject = $derived(projects[currentIndex] ?? null)
 
-  $effect(() => {
-    if (isActive) navigation.setScrolled(currentIndex > 0)
-  })
-
   // Capture du hash synchrone avant que tout effect puisse le modifier
   const initialHash = window.location.hash.slice(1)
 
@@ -241,10 +236,11 @@
     color: var(--color-primary);
   }
 
-  .portfolio-description {
-    font-size: var(--font-size-subtitle);
-    line-height: 1.5;
+  .portfolio-description :global(p) {
+    font-size: var(--font-size-paragraph-mobile);
+    line-height: 1.4;
     opacity: 0.8;
+    letter-spacing: -2%;
   }
 
   .portfolio-keywords {