From 6b914f088e9c9fe62891933c367ff377f5d7de07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20SAILLANT?=
 <108685187+electron-rare@users.noreply.github.com>
Date: Mon, 30 Mar 2026 10:25:15 +0000
Subject: [PATCH] fix: add 60vh PCB spacers between sections for board
 visibility

- 6x pcb-spacer (60vh transparent) between each content section
- Allows the PCB 3D model to be visible during scroll transitions
- Camera zooms on components during spacer gaps

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/WebGLBackground.tsx |  8 ++++----
 src/pages/preview.astro            | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/WebGLBackground.tsx b/src/components/WebGLBackground.tsx
index 0260e1f..702bd3b 100644
--- a/src/components/WebGLBackground.tsx
+++ b/src/components/WebGLBackground.tsx
@@ -37,9 +37,9 @@ function RealPCB() {
   return (
     <primitive
       object={glb.scene.clone()}
-      scale={8}
+      scale={120}
       rotation={[-Math.PI / 2, 0, 0]}
-      position={[0, 0.1, 0]}
+      position={[0, 0, 0]}
     />
   );
 }
@@ -52,9 +52,9 @@ function SwitchBoard() {
   return (
     <primitive
       object={glb.scene.clone()}
-      scale={8}
+      scale={120}
       rotation={[-Math.PI / 2, 0, 0]}
-      position={[8, 0.1, 3]}
+      position={[12, 0, 5]}
     />
   );
 }
diff --git a/src/pages/preview.astro b/src/pages/preview.astro
index 2170a2c..38cb429 100644
--- a/src/pages/preview.astro
+++ b/src/pages/preview.astro
@@ -42,6 +42,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- ABOUT -->
     <section class="section-dark webgl-section" id="a-propos">
       <div class="section-content webgl-card" style="--card-accent: #5bd1d8">
@@ -49,6 +51,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- CASE STUDIES -->
     <section class="section-dark webgl-section">
       <div class="section-content webgl-card" style="--card-accent: #f1c27a">
@@ -56,6 +60,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- PHOTO CAROUSEL (atomic orbit) -->
     <section class="section-dark webgl-section atomic-carousel" aria-label="Photos de terrain">
       <div class="section-content">
@@ -116,6 +122,8 @@ const headerItems = [
       <div class="atomic-carousel-track" id="video-track"></div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- SPRINTS -->
     <section class="section-dark webgl-section" id="graphic-sprints-title">
       <div class="section-content webgl-card" style="--card-accent: #b6d18f">
@@ -123,6 +131,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- FAQ -->
     <section class="section-dark webgl-section" id="faq">
       <div class="section-content webgl-card" style="--card-accent: #5bd1d8">
@@ -327,6 +337,12 @@ const headerItems = [
     color: #5bd1d8 !important;
   }
 
+  /* ============ PCB SPACER ============ */
+  .pcb-spacer {
+    height: 60vh;
+    pointer-events: none;
+  }
+
   /* ============ CONTACT 3D POPUP ============ */
   .contact-3d-popup {
     position: fixed;