diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml
index b359c2a..64bf455 100644
--- a/site/blueprints/pages/project.yml
+++ b/site/blueprints/pages/project.yml
@@ -99,10 +99,6 @@ columns:
uploads:
template: image
help: Petite image carrée représentant le jeu
- galleryBackgroundColor:
- label: Couleur d'arrière-plan de la galerie animée
- type: color
- alpha: false
keywords:
label: Mots clés
type: structure
diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php
index 04e2213..22bb3c4 100644
--- a/site/templates/portfolio.json.php
+++ b/site/templates/portfolio.json.php
@@ -13,8 +13,7 @@ $specificData = [
'srcset' => $f->srcset('gallery'),
'webp' => $f->srcset('gallery-webp'),
])->values(),
- 'mockup' => $project->mockup()->toFile()?->url(),
- 'gallery_background_color' => $project->galleryBackgroundColor()->value(),
+ 'mockup' => $project->mockup()->toFile()?->url(),
'keywords' => $project->keywords()->toStructure()->map(fn($i) => [
'label' => $i->label()->value(),
'text' => $i->text()->value(),
diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte
index d3a5aa2..de6faa1 100644
--- a/src/components/ui/GalleryAnimation.svelte
+++ b/src/components/ui/GalleryAnimation.svelte
@@ -4,7 +4,7 @@
* @prop {Array<{src: string, srcset: string, webp: string}>} images
* @prop {number} secondsPerImage — durée par image (défaut: 8s)
*/
- let { images = [], secondsPerImage = 8, backgroundColor = null } = $props()
+ let { images = [], secondsPerImage = 8 } = $props()
const columns = $derived.by(() => {
const count = images.length
@@ -29,7 +29,7 @@
{#each columns as col}
@@ -59,67 +59,3 @@
{/each}
-
-
diff --git a/src/styles/gallery.css b/src/styles/gallery.css
new file mode 100644
index 0000000..cef463b
--- /dev/null
+++ b/src/styles/gallery.css
@@ -0,0 +1,65 @@
+/* Gallery animation */
+:root {
+ --gallery-gap: 8px;
+ --gallery-duration: 24s;
+}
+
+.gallery-animation {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+/* Vertical mode (Portfolio) */
+.gallery-animation--vertical {
+ display: flex;
+ flex-direction: row;
+ gap: var(--gallery-gap);
+}
+
+.gallery-animation--vertical .gallery-animation__column {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.gallery-animation--vertical .gallery-animation__track {
+ display: flex;
+ flex-direction: column;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+}
+
+.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track {
+ animation-name: galleryScrollDown;
+ animation-duration: var(--gallery-duration);
+}
+
+.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track {
+ animation-name: galleryScrollUp;
+ animation-duration: var(--gallery-duration);
+}
+
+.gallery-animation__image {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: contain;
+}
+
+@keyframes galleryScrollDown {
+ from { transform: translateY(0); }
+ to { transform: translateY(-50%); }
+}
+
+@keyframes galleryScrollUp {
+ from { transform: translateY(-50%); }
+ to { transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .gallery-animation__track {
+ animation: none;
+ }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index d437c36..c02597e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -6,3 +6,4 @@
@import './buttons.css';
@import './cursor.css';
@import './utils.css';
+@import './gallery.css';
diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
index 4cfaeba..7308abb 100644
--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@@ -94,7 +94,7 @@
{#if currentProject}
-
+