From 37b6ca7a5f5f7d7c6d310983d0e507550204cd59 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 6 Mar 2026 12:17:58 +0100
Subject: [PATCH] Feat: ancres URL par projet dans la page Portfolio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Navigation scroll/clavier → history.replaceState('#slug')
- Clic sidebar → idem
- Chargement avec #slug dans l'URL → affiche le bon projet directement
- Quitter la slide Portfolio → efface le hash

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/Portfolio.svelte | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
index a23a142..9510344 100644
--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@@ -11,10 +11,30 @@
   let sectionEl    = $state(null)
 
   // --- Derived ---
-  const isActive      = $derived(slides.active?.id === 'portfolio')
-  const projects      = $derived(data?.projects ?? [])
+  const isActive       = $derived(slides.active?.id === 'portfolio')
+  const projects       = $derived(data?.projects ?? [])
   const currentProject = $derived(projects[currentIndex] ?? null)
 
+  // --- Ancres ---
+  function setAnchor(index) {
+    const slug = projects[index]?.slug
+    if (!slug) return
+    history.replaceState(null, '', '#' + slug)
+  }
+
+  function clearAnchor() {
+    history.replaceState(null, '', window.location.pathname + window.location.search)
+  }
+
+  // Initialisation depuis l'ancre URL — une seule fois quand projects est prêt
+  $effect(() => {
+    if (projects.length === 0) return
+    const hash = window.location.hash.slice(1)
+    if (!hash) return
+    const idx = projects.findIndex(p => p.slug === hash)
+    if (idx > 0) currentIndex = idx
+  })
+
   // --- Scroll nav composable ---
   const nav = createScrollNav({
     isActive: () => isActive,
@@ -24,6 +44,7 @@
         : Math.max(currentIndex - 1, 0)
       if (next === currentIndex) return false
       currentIndex = next
+      setAnchor(next)
     },
   })
 
@@ -44,6 +65,7 @@
     if (!isActive) {
       nav.reset()
       currentIndex = 0
+      clearAnchor()
     }
   })
 </script>
@@ -97,7 +119,7 @@
       <button
         class="portfolio-nav-item"
         class:active={i === currentIndex}
-        onclick={() => { currentIndex = i }}
+        onclick={() => { currentIndex = i; setAnchor(i) }}
       >
         <span class="portfolio-nav-number">{String(i + 1).padStart(2, '0')}</span>
         <img src={project.thumbnail} alt={project.title} />
@@ -207,7 +229,7 @@
   }
 
   .portfolio-nav-item.active {
-    transform: scale(1.25);
+    transform: scale(1.25) translateX(-50%);
     opacity: 1;
   }