update projets

src/components/ProjetsGrid.jsx

@@ -1,10 +1,9 @@
-import { PROJETS } from '../data/projets.js'
 import { getSkillCategory } from '../data/skills.js'
 
-export function ProjetsGrid() {
+export function ProjetsGrid({ projects }) {
   return (
     <ul className="projets-grid">
-      {PROJETS.map((projet) => (
+      {projects.map((projet) => (
         <li key={projet.id} className="projets-grid__cell">
           <article className="projet-card" aria-labelledby={`projet-title-${projet.id}`}>
             <div className="projet-card__media">

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))

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;

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"
         >
-          <ProjetsGrid />
+          <ProjetsGrid projects={PROJETS_MAIN} />
+        </section>
+        <section
+          className="content-stack__panel content-stack__panel--padded content-stack__panel--docker-ecosystem"
+          aria-label="Ecosystem Docker"
+        >
+          <h2 className="projets-section__title">Ecosystem Docker</h2>
+          <ProjetsGrid projects={PROJETS_ECOSYSTEM_DOCKER} />
         </section>
       </div>
     </div>