first commit

src/pages/projets.astro

@@ -0,0 +1,69 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Reveal from '../components/islands/Reveal';
+import Crate from '../components/islands/Crate';
+import { loadContent } from '../lib/content';
+
+const projects = await loadContent('projects');
+const featured = projects.items.filter((p) => p.featured);
+const others = projects.items.filter((p) => !p.featured);
+---
+
+<BaseLayout title="Projets" description="Sélection de mes projets — le crate">
+  <section class="pt-16 pb-8 relative">
+    <div class="container mx-auto px-4">
+      <Reveal client:load>
+        <div class="flex flex-wrap items-end justify-between gap-4 mb-2">
+          <div>
+            <p
+              class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-magenta)] mb-2 flex items-center gap-2"
+            >
+              <span class="led led-cyan"></span>
+              // crate v1.0 · digging
+            </p>
+            <h1 class="stencil text-5xl md:text-7xl uppercase leading-none">
+              Mes <span class="text-[color:var(--color-cyan)] glow-text-cyan">projets</span>
+            </h1>
+          </div>
+          <div class="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
+            {featured.length + others.length} skeuds · {featured.length} featured
+          </div>
+        </div>
+      </Reveal>
+      <p class="text-[color:var(--color-text-muted)] max-w-xl font-mono text-sm mt-4">
+        <span class="text-[color:var(--color-cyan)]">&gt;</span> une sélection de réalisations —
+        live, archivées, privées. Scroll pour feuilleter le bac.
+      </p>
+    </div>
+  </section>
+
+  {
+    featured.length > 0 && (
+      <section class="relative">
+        <div class="container mx-auto px-4 py-6">
+          <Reveal client:visible>
+            <h2 class="stencil text-xl uppercase tracking-wider text-[color:var(--color-acid)] glow-text-acid">
+              ★ Featured
+            </h2>
+          </Reveal>
+        </div>
+        <Crate projects={featured} client:load />
+      </section>
+    )
+  }
+
+  {
+    others.length > 0 && (
+      <section class="relative">
+        <div class="container mx-auto px-4 py-6">
+          <Reveal client:visible>
+            <h2 class="stencil text-xl uppercase tracking-wider text-[color:var(--color-text-muted)]">
+              Autres skeuds
+            </h2>
+          </Reveal>
+        </div>
+        <Crate projects={others} client:load />
+      </section>
+    )
+  }
+</BaseLayout>