style button and earth icon variant

site/blueprints/pages/portfolio.yml

@@ -11,16 +11,34 @@ tabs:
   content:
     label: Contenu
     icon: text
-    sections:
+    columns:
-      # Projets
+      - width: 1/3
-      projects_list:
+        sections:
-        type: pages
+          meta_fields:
-        headline: Liste des projets
+            type: fields
-        layout: cards
+            fields:
-        size: medium
+              backgroundImage:
-        image:
+                label: Image d'arrière-plan
-          query: page.thumbnail.toFile
+                type: files
-          cover: true
+                layout: cards
-        template: project
+                multiple: false
-        info: "{{ page.catchphrase }}"
+                uploads:
-        create: project
+                  accept: image/*
+                size: huge
+                image:
+                  cover: true
+                  ratio: 15/9
+      - width: 2/3
+        sections:
+          projects_list:
+            type: pages
+            headline: Liste des projets
+            layout: cards
+            size: small
+            image:
+              query: page.thumbnail.toFile
+              cover: true
+              back: #0E1E43
+            template: project
+            info: "{{ page.catchphrase }}"
+            create: project

site/templates/portfolio.json.php

@@ -1,6 +1,7 @@
 <?php
 
 $specificData = [
+  'background_image' => $page->backgroundImage()->toFile()?->url(),
   'projects' => $page->children()->listed()->map(function($project) {
     return [
       'title'          => $project->title()->value(),

src/styles/buttons.css

@@ -2,48 +2,51 @@
 .button {
   width: 14vmax;
   min-width: 130px;
+  position: sticky;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: sticky;
   z-index: var(--z-base);
   padding: 12px 16px;
   transition: 0.5s ease-out;
-  font-family: "Danzza Bold";
-  background-color: var(--color-primary);
   border: none;
   cursor: pointer;
+
+  font-family: "Danzza Bold";
+  font-size: var(--font-size-button);
+  text-transform: uppercase;
+  color: #000;
+
+  background: linear-gradient(270deg, var(--color-primary) 50%, transparent 0)
+    100%;
+  background-size: 201% 100%;
+  outline: 2px solid #04fea0;
 }
 
 .button:hover {
-  background-position: left;
+  background-color: initial;
-  background-color: transparent;
+  background-position: 0;
-  outline: solid 2px var(--color-primary);
+  outline: 2px solid #04fea0;
+  color: var(--color-primary);
 }
 
-.button p {
+.button:hover::before {
-  color: black;
+  filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg)
-  margin: 0;
+    brightness(100%) contrast(99%);
-  transition: color 0.3s;
 }
-
+.button.earth-icon::before {
-.button:hover p {
+  content: "";
-  color: var(--color-primary) !important;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII=");
-}
+  background-size: 100%;
-
+  width: 1.125rem;
-.earth-icon {
+  height: 1.125rem;
-  width: 24px;
+  transform: translateX(-0.5rem);
-  height: 24px;
+  transition: all 0.5s ease-out;
-  background-image: url('/assets/img/icon-earth-green.png');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin-right: 8px;
-  transition: filter 0.3s;
 }
 
 .button:hover .earth-icon {
-  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) hue-rotate(91deg) brightness(101%) contrast(97%);
+  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
+    hue-rotate(91deg) brightness(101%) contrast(97%);
 }
 
 /* Clickable elements */

src/views/Portfolio.svelte

@@ -11,8 +11,9 @@
   let sectionEl    = $state(null)
 
   // --- Derived ---
-  const isActive       = $derived(slides.active?.id === 'portfolio')
+  const isActive          = $derived(slides.active?.id === 'portfolio')
-  const projects       = $derived(data?.projects ?? [])
+  const projects          = $derived(data?.projects ?? [])
+  const backgroundImage   = $derived(data?.background_image ?? null)
   const currentProject = $derived(projects[currentIndex] ?? null)
 
   // Capture du hash synchrone avant que tout effect puisse le modifier
@@ -79,6 +80,7 @@
 
 <section
   class="portfolio golden-grid slide"
+  style={backgroundImage ? `--background-image: url('${backgroundImage}')` : ''}
   bind:this={sectionEl}
   ontouchstart={nav.onTouchStart}
   ontouchend={nav.onTouchEnd}
@@ -114,7 +116,7 @@
       </div>
       <div class="portfolio-links">
         {#each currentProject.external_links as link}
-          <a href={link.url} target="_blank" rel="noopener noreferrer" class="button">{link.label}</a>
+          <a href={link.url} target="_blank" rel="noopener noreferrer" class="button earth-icon">{link.label}</a>
         {/each}
       </div>
     </div>
@@ -143,7 +145,11 @@
 
 <style>
   .portfolio {
-    background: #000;
+    background-color: #000;
+    background-image: var(--background-image, none);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 
   /* Custom vertical lines */
@@ -254,6 +260,10 @@
     transition: transform 0.6s var(--ease-standard), opacity 0.6s var(--ease-standard);
   }
 
+  .portfolio-nav-item:hover button {
+    transform: scale(1);
+  }
+
   .portfolio-nav-item.active button {
     transform: scale(1.5) translateX(-20%);
     opacity: 1;