diff --git a/src/data/projets.js b/src/data/projets.js
index 1caa33f..5e3167e 100644
--- a/src/data/projets.js
+++ b/src/data/projets.js
@@ -221,3 +221,21 @@ export const PROJETS = [
linkLabel: 'Jellyfin — site officiel',
},
]
+
+/** Projets Docker auto-hébergés : section « Ecosystem Docker » sur la page Projets. */
+export const ECOSYSTEM_DOCKER_IDS = [
+ 'jellyfin',
+ 'authelia',
+ 'seafile',
+ 'gitea',
+ 'immich',
+ 'wiki-documentation',
+]
+
+const projetById = Object.fromEntries(PROJETS.map((p) => [p.id, p]))
+
+export const PROJETS_ECOSYSTEM_DOCKER = ECOSYSTEM_DOCKER_IDS.map((id) => projetById[id]).filter(
+ Boolean,
+)
+
+export const PROJETS_MAIN = PROJETS.filter((p) => !ECOSYSTEM_DOCKER_IDS.includes(p.id))
diff --git a/src/index.css b/src/index.css
index 44714af..09f1543 100644
--- a/src/index.css
+++ b/src/index.css
@@ -809,6 +809,26 @@ code {
min-height: 0;
}
+.page--projets .content-stack__panel--docker-ecosystem {
+ background: color-mix(in srgb, #dbeafe 62%, var(--bg));
+ border-color: color-mix(in srgb, #93c5fd 38%, var(--border));
+}
+
+@media (prefers-color-scheme: dark) {
+ .page--projets .content-stack__panel--docker-ecosystem {
+ background: color-mix(in srgb, #1c3352 52%, var(--code-bg));
+ border-color: color-mix(in srgb, #3b82f6 28%, var(--border));
+ }
+}
+
+.projets-section__title {
+ margin: 0 0 1rem;
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: var(--text-h);
+ letter-spacing: -0.02em;
+}
+
.projets-grid {
list-style: none;
margin: 0;
diff --git a/src/pages/Projets.jsx b/src/pages/Projets.jsx
index 56d4bd8..c5d970a 100644
--- a/src/pages/Projets.jsx
+++ b/src/pages/Projets.jsx
@@ -1,4 +1,5 @@
import { ProjetsGrid } from '../components/ProjetsGrid.jsx'
+import { PROJETS_ECOSYSTEM_DOCKER, PROJETS_MAIN } from '../data/projets.js'
export function Projets() {
return (
@@ -8,7 +9,14 @@ export function Projets() {
className="content-stack__panel content-stack__panel--padded"
aria-label="Liste des projets"
>
-
+
+
+
+