redesign(homepage): elegant editorial redesign with scroll animations

- HeroSection: full-viewport split layout with staggered entrance animations,
  editorial typography, tech stack tags, animated scroll indicator
- WorksSection: refined header with section label, scroll-reveal on entry
- ProjectCard: per-card IntersectionObserver reveal, numbered projects,
  enhanced hover states (scale + brightness), improved CTA
- FeatureSection: card grid with border/glass treatment and staggered reveals
- AboutSection: animated timeline progress line, scroll-triggered card entrances
- FeatureColumn: icon container with hover treatment
- globals.css: fadeUp/lineGrow/arrowBounce keyframes, .reveal utility,
  prefers-reduced-motion support, brand-accent color token
- lib/useReveal.ts: IntersectionObserver hook for scroll reveals

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/[locale]/globals.css

@@ -3,11 +3,60 @@
 @theme {
   --color-brand-brown: #2C1E16;
   --color-brand-beige: #F5F4F0;
+  --color-brand-accent: #8B7355;
 
   --font-sans: var(--font-inter);
   --font-serif: var(--font-playfair);
 }
 
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(28px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes lineGrow {
+  from { width: 0%; }
+  to   { width: 95%; }
+}
+
+@keyframes arrowBounce {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(6px); }
+}
+
+@keyframes underlineSlide {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .animate-arrow-bounce {
+    animation: none !important;
+  }
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;

app/[locale]/page.tsx

@@ -16,11 +16,13 @@ export default async function Home({ params }: props) {
 	const projects = getAllProjects().filter((item) => item.ready);
 
 	return (
-		<main className=" bg-brand-beige text-brand-black flex flex-col items-center justify-center">
+		<main className="bg-brand-beige text-brand-brown flex flex-col">
 			<HeroSection />
+			<div className="px-8 md:px-14 lg:px-20">
 				<WorksSection projects={projects} locale={locale} />
 				<FeatureSection />
 				<TimelineSection />
+			</div>
 		</main>
 	);
 }

components/sections/AboutSection.tsx

@@ -1,100 +1,158 @@
-export default function TimelineSection() {
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+
 const steps = [
     {
-            title: "Les Débuts",
+        title: 'Les Débuts',
-            text: "J'ai commencé par le web en 2019 suite à un stage, je n'ai plus jamais arrêté. Aujourd'hui je veux en faire mon métier",
+        text: "J'ai commencé par le web en 2019 suite à un stage, je n'ai plus jamais arrêté. Aujourd'hui je veux en faire mon métier.",
-            position: "top" as const,
+        year: '2019',
-            left: "16%",
+        position: 'top' as const,
+        left: '16%',
     },
     {
-            title: "L'Évolution",
+        title: 'L\'Évolution',
-            text: "Après un bac STI2D avec mention Très bien j'ai entamé un BUT Informatique Parcours Développement IA",
+        text: "Après un bac STI2D avec mention Très bien j'ai entamé un BUT Informatique Parcours Développement IA.",
-            position: "bottom" as const,
+        year: '2022',
-            left: "50%",
+        position: 'bottom' as const,
+        left: '50%',
     },
     {
-            title: "Aujourd'hui",
+        title: 'Aujourd\'hui',
-            text: "Je suis entrepreneur, co-fondateur d'une startup et développeur freelance, je vis de ma passion",
+        text: "Je suis entrepreneur, co-fondateur d'une startup et développeur freelance, je vis de ma passion.",
-            position: "top" as const,
+        year: '2026',
-            left: "84%",
+        position: 'top' as const,
+        left: '84%',
     },
 ];
 
-    const lineTop = "58%";
+const lineTop = '58%';
-    const progressWidth = "95%";
+
+export default function TimelineSection() {
+    const sectionRef = useRef<HTMLElement>(null);
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+        const section = sectionRef.current;
+        if (!section) return;
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setVisible(true);
+                    section.querySelectorAll('.reveal').forEach((el) => el.classList.add('visible'));
+                    observer.unobserve(section);
+                }
+            },
+            { threshold: 0.12 }
+        );
+
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, []);
 
     return (
-        <section id="about" className="bg-[#f5f5f3] py-20 md:py-32">
+        <section id="about" ref={sectionRef} className="w-full py-24 md:py-36 bg-brand-brown/3 rounded-2xl px-6 md:px-12 lg:px-20">
-            <div className="mx-auto w-full px-6 md:w-[90vw]">
+            {/* Label */}
-                <h2 className="mb-16 text-center font-serif text-[clamp(80px,10vw,128px)] leading-none text-brand-brown md:mb-24 md:text-6xl">
+            <div className="reveal flex items-center gap-3 mb-6">
-                    A propos de moi
+                <span className="w-8 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">Parcours</span>
+            </div>
+
+            <h2 className="reveal font-serif text-[clamp(48px,7vw,100px)] leading-none text-brand-brown mb-16 md:mb-24">
+                À propos
             </h2>
 
-                <div className="relative mx-auto w-full md:h-[420px]">
             {/* Mobile layout */}
-                    <div className="flex flex-col gap-6 md:hidden">
+            <div className="flex flex-col gap-5 md:hidden">
-                        {steps.map((step, index) => (
+                {steps.map((step, i) => (
                     <div
-                                key={index}
+                        key={i}
-                                className="rounded-md border border-gray-300 border-l-4 border-l-brand-brown bg-white p-5"
+                        className="reveal rounded-xl border border-brand-brown/12 border-l-4 border-l-brand-brown bg-white/60 p-6 backdrop-blur-sm"
+                        style={{ transitionDelay: `${i * 100}ms` }}
                     >
-                                <h3 className="mb-3 font-serif text-2xl text-brand-brown">
+                        <span className="font-sans text-[11px] uppercase tracking-widest text-brand-brown/40 mb-3 block">{step.year}</span>
-                                    {step.title}
+                        <h3 className="font-serif text-2xl text-brand-brown mb-3">{step.title}</h3>
-                                </h3>
+                        <p className="font-sans text-sm leading-relaxed text-brand-brown/65">{step.text}</p>
-                                <p className="leading-7 text-[#364153]">
-                                    {step.text}
-                                </p>
                     </div>
                 ))}
             </div>
 
             {/* Desktop timeline */}
-                    <div className="hidden md:block">
+            <div className="hidden md:block relative h-[440px]">
-                        {/* Base line */}
+                {/* Background track */}
                 <div
-                            className="absolute left-0 right-0 h-1.5 rounded-full bg-[#d9dde2]"
+                    className="absolute left-0 right-0 h-px bg-brand-brown/12 rounded-full"
                     style={{ top: lineTop }}
                 />
 
-                        {/* Brown progress */}
+                {/* Animated progress line */}
                 <div
-                            className="absolute left-0 h-1.5 rounded-full bg-brand-brown"
+                    className="absolute left-0 h-px bg-brand-brown/50 rounded-full"
-                            style={{ top: lineTop, width: progressWidth }}
+                    style={{
+                        top: lineTop,
+                        width: visible ? '95%' : '0%',
+                        transition: 'width 1400ms cubic-bezier(0.22, 1, 0.36, 1)',
+                        transitionDelay: '200ms',
+                    }}
                 />
 
-                        {steps.map((step, index) => (
+                {steps.map((step, i) => (
                     <div
-                                key={index}
+                        key={i}
                         className="absolute -translate-x-1/2"
                         style={{ left: step.left, top: lineTop }}
                     >
-                                {/* Point */}
+                        {/* Dot */}
-                                <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
+                        <div
-                                    <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-brown shadow-[0_0_0_2px_#3a2318]" />
+                            className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2"
+                            style={{ top: 0 }}
+                        >
+                            <div
+                                className="h-4 w-4 rounded-full border-2 border-brand-beige bg-brand-brown shadow-[0_0_0_3px_rgba(44,30,22,0.2)]"
+                                style={{
+                                    opacity: visible ? 1 : 0,
+                                    transform: visible ? 'scale(1)' : 'scale(0)',
+                                    transition: 'opacity 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+                                    transitionDelay: `${600 + i * 200}ms`,
+                                }}
+                            />
+                        </div>
+
+                        {/* Year label */}
+                        <div
+                            className="absolute left-1/2 -translate-x-1/2 font-sans text-[10px] uppercase tracking-widest text-brand-brown/35"
+                            style={{
+                                [step.position === 'top' ? 'top' : 'bottom']: '18px',
+                                opacity: visible ? 1 : 0,
+                                transition: 'opacity 400ms ease',
+                                transitionDelay: `${800 + i * 200}ms`,
+                            }}
+                        >
+                            {step.year}
                         </div>
 
                         {/* Card */}
                         <div
                             className={[
-                                        "absolute left-1/2 w-[280px] -translate-x-1/2 rounded-md border border-gray-300 border-l-4 border-l-brand-brown bg-white p-5 text-center shadow-sm",
+                                'absolute left-1/2 w-[260px] -translate-x-1/2 rounded-xl border border-brand-brown/12 border-l-4 border-l-brand-brown bg-white/80 p-5 text-left shadow-sm backdrop-blur-sm',
-                                        step.position === "top"
+                                step.position === 'top' ? 'bottom-10' : 'top-10',
-                                            ? "bottom-10"
+                            ].join(' ')}
-                                            : "top-10",
+                            style={{
-                                    ].join(" ")}
+                                opacity: visible ? 1 : 0,
+                                transform: visible
+                                    ? 'translateY(0)'
+                                    : step.position === 'top' ? 'translateY(10px)' : 'translateY(-10px)',
+                                transition: 'opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1)',
+                                transitionDelay: `${700 + i * 180}ms`,
+                            }}
                         >
-                                    <h3 className="mb-3 font-serif text-3xl text-brand-brown">
+                            <h3 className="font-serif text-xl text-brand-brown mb-2">{step.title}</h3>
-                                        {step.title}
+                            <p className="font-sans text-sm leading-relaxed text-brand-brown/65">{step.text}</p>
-                                    </h3>
-
-                                    <p className="leading-7 text-[#364153]">
-                                        {step.text}
-                                    </p>
                         </div>
                     </div>
                 ))}
             </div>
-                </div>
-            </div>
         </section>
     );
 }

components/sections/FeatureSection.tsx

@@ -1,23 +1,81 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
 import { FeatureColumn } from '@/components/ui/FeatureColumn';
 
+const features = [
+    {
+        imagePath: '/icons/brain.svg',
+        title: 'Plus qu\'un simple exécutant',
+        text: 'Grâce à mon background en conception numérique et mobile, je ne me contente pas de coder. J\'apporte un regard critique et constructif sur l\'ensemble de votre projet.',
+    },
+    {
+        imagePath: '/icons/building.svg',
+        title: 'Des fondations en béton',
+        text: 'Ma spécialité : l\'architecture. Je construis des solutions pérennes, évolutives et capables d\'absorber la croissance de votre produit dans le temps.',
+    },
+    {
+        imagePath: '/icons/people.svg',
+        title: 'L\'utilisateur au centre',
+        text: 'Le code parfait n\'est rien si le produit ne répond pas à un besoin. Je place l\'expérience utilisateur et la fonctionnalité au cœur de mes développements.',
+    },
+];
+
 export default function FeatureSection() {
+    const sectionRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        const section = sectionRef.current;
+        if (!section) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.querySelectorAll('.reveal').forEach((el) => {
+                            el.classList.add('visible');
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.15 }
+        );
+
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, []);
+
     return (
-        <section className="w-full flex flex-wrap justify-around items-center gap-16 mt-30 lg:mt-40 mb-20">
+        <section ref={sectionRef} className="w-full py-24 md:py-36">
-            <FeatureColumn 
+            {/* Section label */}
-                imagePath={"/icons/brain.svg"} 
+            <div className="reveal flex items-center gap-3 mb-12 md:mb-16">
-                title={"Plus qu'un simple exécutant"} 
+                <span className="w-8 h-px bg-brand-brown/40" />
-                text={"Grâce à mon background en conception numérique et mobile, je ne me contente pas de coder. J'apporte un regard critique et constructif sur l'ensemble de votre projet."} 
+                <span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">Approche</span>
-            />
+            </div>
-            <FeatureColumn 
+
-                imagePath={"/icons/building.svg"} 
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-6 lg:gap-16">
-                title={"Des fondations en béton"} 
+                {features.map((feature, i) => (
-                text={"Ma spécialité : l'architecture. Je construis des solutions pérennes, évolutives et capables d'absorber la croissance de votre produit dans le temps."} 
+                    <div
-            />
+                        key={i}
-            <FeatureColumn 
+                        className="reveal group flex flex-col items-center p-8 rounded-2xl border border-brand-brown/8 bg-white/40 hover:bg-white/70 hover:border-brand-brown/15 transition-all duration-300 cursor-default"
-                imagePath={"/icons/people.svg"} 
+                        style={{ transitionDelay: `${i * 120}ms` }}
-                title={"L'utilisateur au centre"} 
+                    >
-                text={"Le code parfait n'est rien si le produit ne répond pas à un besoin. Je place l'expérience utilisateur et la fonctionnalité au cœur de mes développements."} 
+                        {/* Icon container */}
-            />
+                        <div className="w-20 h-20 rounded-2xl bg-brand-brown/5 flex items-center justify-center mb-6 group-hover:bg-brand-brown/8 transition-colors duration-300">
+                            <img className="w-10 h-10" src={feature.imagePath} alt="" aria-hidden="true" />
+                        </div>
+
+                        <div className="font-serif text-brand-brown text-center leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
+                            {feature.title}
+                        </div>
+
+                        <div className="font-sans text-sm text-center text-brand-brown/60 leading-relaxed">
+                            {feature.text}
+                        </div>
+                    </div>
+                ))}
+            </div>
         </section>
     );
 }

components/sections/HeroSection.tsx

@@ -1,27 +1,152 @@
-import { FiChevronsDown } from "react-icons/fi";
+'use client';
+
+import { useEffect, useRef } from 'react';
 
 export default function HeroSection() {
+    const sectionRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        const section = sectionRef.current;
+        if (!section) return;
+
+        const items = section.querySelectorAll<HTMLElement>('.hero-reveal');
+        items.forEach((el, i) => {
+            setTimeout(() => {
+                el.style.opacity = '1';
+                el.style.transform = 'translateY(0)';
+            }, 120 + i * 110);
+        });
+    }, []);
+
     return (
-		<section className="w-full h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col items-center justify-center relative">
+        <section
-            {/* Title + image container */}
+            ref={sectionRef}
-            <div className="flex flex-col w-9/10 gap-2.5
+            className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
-                md:flex-row md:justify-between md:items-center md:w-2/3
+        >
-            ">
+            {/* Main content */}
-                {/* Rotating texts */}
+            <div className="flex flex-col lg:flex-row flex-1 px-8 md:px-14 lg:px-20 pt-16 pb-12 gap-10 lg:gap-0">
-                <div className="flex flex-col">
+
-                    <p className="text-[clamp(15px,2vw,24px)] font-sans">Ensemble nous allons...</p>
+                {/* Left — editorial text */}
-                    <h1 className="text-[clamp(30px,4vw,64px)] font-serif">Construire une solution qui répond à votre problème.</h1>
+                <div className="flex flex-col justify-center lg:w-[55%] lg:pr-12 gap-8 lg:gap-10">
+
+                    {/* Label */}
+                    <div
+                        className="hero-reveal"
+                        style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
+                    >
+                        <span className="inline-flex items-center gap-2 font-sans text-xs uppercase tracking-[0.2em] text-brand-beige/50">
+                            <span className="w-6 h-px bg-brand-beige/30" />
+                            Développeur Full Stack &amp; Architecte Web
+                        </span>
                     </div>
 
-                {/* Image */}
+                    {/* Headline */}
-                <img className="rounded-[10px] w-full object-cover h-[clamp(200px,30vh,500px)]  md:h-[clamp(250px,35vh,600px)] lg:h-[clamp(300px,45vh,700px)]" src="/images/pofile.png" alt="Image of me" />
+                    <div
+                        className="hero-reveal"
+                        style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
+                    >
+                        <h1 className="font-serif leading-[0.95] text-[clamp(36px,5.5vw,88px)] text-brand-beige">
+                            Ensemble,<br />
+                            <em className="not-italic text-brand-beige/70">construisons</em><br />
+                            ce qui dure.
+                        </h1>
                     </div>
 
-            {/* Call to scroll */}
+                    {/* Description */}
-            <div className="flex flex-row justify-center items-center gap-2.5 absolute bottom-6">
+                    <div
-                <FiChevronsDown />
+                        className="hero-reveal"
-                <p className="text-base font-sans">Voir mes travaux</p>
+                        style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
-                <FiChevronsDown />
+                    >
+                        <p className="font-sans text-base font-light text-brand-beige/60 max-w-md leading-relaxed">
+                            Je conçois des architectures robustes, scalables et pérennes —
+                            des fondations qui supportent la croissance de votre produit dans le temps.
+                        </p>
+                    </div>
+
+                    {/* CTA */}
+                    <div
+                        className="hero-reveal"
+                        style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
+                    >
+                        <a
+                            href="/#works"
+                            className="group inline-flex items-center gap-2 font-sans text-sm text-brand-beige/80 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                document.getElementById('works')?.scrollIntoView({ behavior: 'smooth' });
+                            }}
+                        >
+                            <span className="relative">
+                                Voir mes travaux
+                                <span className="absolute bottom-0 left-0 w-full h-px bg-brand-beige/40 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
+                            </span>
+                            <svg className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                {/* Right — portrait */}
+                <div
+                    className="hero-reveal relative flex items-center justify-center lg:w-[45%]"
+                    style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1)' }}
+                >
+                    {/* Decorative accent ring */}
+                    <div className="absolute inset-4 rounded-[14px] border border-brand-beige/8 pointer-events-none" />
+
+                    <div className="relative w-full h-full min-h-[320px] lg:min-h-0 rounded-[10px] overflow-hidden">
+                        <img
+                            src="/images/pofile.png"
+                            alt="Mathéo Guilbert, développeur Full Stack"
+                            className="w-full h-full object-cover object-top"
+                            style={{ filter: 'sepia(8%) brightness(0.95) contrast(1.02)' }}
+                        />
+                        {/* Subtle vignette */}
+                        <div className="absolute inset-0 bg-gradient-to-t from-brand-brown/30 via-transparent to-transparent pointer-events-none" />
+                    </div>
+                </div>
+            </div>
+
+            {/* Bottom bar — scroll indicator */}
+            <div className="flex justify-between items-end px-8 md:px-14 lg:px-20 pb-8">
+                {/* Tech tags */}
+                <div
+                    className="hero-reveal flex gap-3 flex-wrap"
+                    style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
+                >
+                    {['FastAPI', 'React', 'PostgreSQL', 'Docker'].map((tag) => (
+                        <span
+                            key={tag}
+                            className="font-sans text-[11px] uppercase tracking-widest text-brand-beige/35 border border-brand-beige/15 rounded-full px-3 py-1"
+                        >
+                            {tag}
+                        </span>
+                    ))}
+                </div>
+
+                {/* Scroll arrow */}
+                <div
+                    className="hero-reveal flex flex-col items-center gap-1.5 text-brand-beige/40"
+                    style={{
+                        opacity: 0,
+                        transform: 'translateY(28px)',
+                        transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)',
+                        animationDelay: '1s'
+                    }}
+                >
+                    <span className="font-sans text-[10px] uppercase tracking-[0.15em]">Défiler</span>
+                    <svg
+                        className="w-4 h-4"
+                        style={{ animation: 'arrowBounce 1.8s ease-in-out infinite' }}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </div>
             </div>
         </section>
     );

components/sections/WorksSection.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
 import { Project } from "@/lib/projects/types";
 import { ProjectCard } from "../ui/ProjectCard";
 
@@ -7,18 +10,53 @@ type props = {
 };
 
 export default function WorksSection({ projects, locale }: props) {
-    return (
+    const sectionRef = useRef<HTMLElement>(null);
-        <section id="works" className="w-full flex flex-col items-start justify-start">
-            <h2 className="text-[clamp(80px,10vw,128px)] font-serif text-brand-brown mt-6 mb-4">Travaux</h2>
 
+    useEffect(() => {
+        const section = sectionRef.current;
+        if (!section) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.querySelectorAll('.reveal').forEach((el, i) => {
+                            setTimeout(() => el.classList.add('visible'), i * 120);
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.08 }
+        );
+
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <section id="works" ref={sectionRef} className="w-full flex flex-col items-start justify-start pt-20 md:pt-28">
+            {/* Section label */}
+            <div className="reveal flex items-center gap-3 mb-4">
+                <span className="w-8 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">Sélection de projets</span>
+            </div>
+
+            <h2 className="reveal font-serif text-[clamp(56px,8vw,112px)] text-brand-brown leading-none mb-12 md:mb-16">
+                Travaux
+            </h2>
+
+            <div className="w-full">
                 {projects.map((project, index) => (
                     <ProjectCard
                         key={project.slug}
                         project={project}
                         locale={locale}
                         isTheLast={index === projects.length - 1}
+                        index={index}
                     />
                 ))}
+            </div>
         </section>
     );
 }

components/ui/FeatureColumn.tsx

@@ -1,15 +1,33 @@
 type props = {
     imagePath: string;
-    title       : String;
+    title: string;
-    text        : String;
+    text: string;
+    delay?: number;
 };
 
-export const FeatureColumn = ({ imagePath, title, text }: props) => {
+export const FeatureColumn = ({ imagePath, title, text, delay = 0 }: props) => {
     return (
-        <div className="flex flex-col items-center justify-start max-w-100 h-auto gap-7">
+        <div
-            <img className="w-33.75 h-33.75" src={imagePath} alt={`icon illustrating the text ${title}`} />
+            className="reveal flex flex-col items-center justify-start max-w-[320px] gap-6"
-            <div className="font-serif text-brand-brown text-center leading-[1.05] text-balance text-[clamp(2rem,5vw,30px)]">{title}</div>
+            style={{ transitionDelay: `${delay}ms` }}
-            <div className="font-sans text-base text-center">{text}</div>
+        >
+            {/* Icon container */}
+            <div className="w-20 h-20 rounded-2xl bg-brand-brown/6 flex items-center justify-center group-hover:bg-brand-brown/10 transition-colors duration-300">
+                <img
+                    className="w-10 h-10"
+                    src={imagePath}
+                    alt=""
+                    aria-hidden="true"
+                />
+            </div>
+
+            <div className="font-serif text-brand-brown text-center leading-[1.1] text-[clamp(1.5rem,2.5vw,1.75rem)]">
+                {title}
+            </div>
+
+            <div className="font-sans text-sm text-center text-brand-brown/65 leading-relaxed">
+                {text}
+            </div>
         </div>
     );
 };

components/ui/ProjectCard.tsx

@@ -1,61 +1,106 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
 import Link from "next/link";
-import { GoArrowRight } from "react-icons/go";
 import { Project } from "@/lib/projects/types";
 
 type props = {
     project: Project;
     locale: string;
     isTheLast?: boolean;
+    index?: number;
 };
 
-export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
+export const ProjectCard = ({ project, locale, isTheLast = false, index = 0 }: props) => {
+    const num = String(index + 1).padStart(2, '0');
+    const cardRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const el = cardRef.current;
+        if (!el) return;
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.classList.add('visible');
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.12 }
+        );
+
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
 
     return (
-        <div className="w-full pb-8">
+        <div ref={cardRef} className="w-full pb-10 reveal">
-            <div className="w-full h-px bg-brand-brown/20 mb-8" />
+            {/* Divider line */}
+            <div className="w-full h-px bg-brand-brown/15 mb-10" />
 
-            <Link href={`/${locale}/works/${project.slug}`} className="group block pointer-cursor">
+            <Link href={`/${locale}/works/${project.slug}`} className="group block cursor-pointer">
-                <div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
+                <div className="flex flex-col gap-6 lg:flex-row lg:justify-between lg:items-start lg:gap-16 relative">
 
-                    {/* Date label */}
+                    {/* Project number */}
-                    <div className="text-5xl font-serif text-brand-brown/40 mt-6 font-semibold lg:absolute lg:top-1 lg:right-1">
+                    <div className="absolute top-0 right-0 font-sans text-xs tracking-[0.2em] text-brand-brown/25 uppercase">
-                        {project.dateLabel}
+                        {num}
                     </div>
 
-                    {/* Left image */}
+                    {/* Left — image */}
-                    <div className="w-full rounded-[10px] lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
+                    <div className="w-full rounded-[10px] lg:w-3/5 h-[340px] md:h-[420px] overflow-hidden bg-brand-brown/5">
                         <img
                             src={project.cover}
                             alt={project.title}
-                            className="w-full h-full object-cover transition duration-500 group-hover:scale-[1.02]"
+                            className="w-full h-full object-cover transition-all duration-700 ease-out group-hover:scale-[1.04] group-hover:brightness-105"
                         />
                     </div>
 
-                    {/* Right content */}
+                    {/* Right — content */}
-                    <div className="flex flex-col items-start justify-center w-full gap-7.5">
+                    <div className="flex flex-col items-start justify-center w-full gap-6 lg:pt-4 lg:pr-6">
-                        <div className="flex flex-col items-start justify-center w-full">
+                        {/* Category */}
-                            <div className="p-1.5 bg-brand-brown rounded-px text-brand-beige font-sans">{project.category}</div>
+                        <div className="flex items-center gap-3">
-                            <div className="text-5xl text-brand-brown font-serif uppercase">{project.title}</div>
+                            <span className="w-4 h-px bg-brand-brown/40" />
-                            <div className="text-2xl font-serif font-light">
+                            <span className="font-sans text-[11px] uppercase tracking-[0.18em] text-brand-brown/50">
-                                <p>
+                                {project.category}
-                                    (
+                            </span>
-                                    {project.roles.map((role, index) => role + (index < project.roles.length - 1 ? ", " : ""))}
+                        </div>
-                                    )
+
+                        {/* Title */}
+                        <div>
+                            <h3 className="text-[clamp(28px,3.5vw,52px)] text-brand-brown font-serif leading-tight uppercase">
+                                {project.title}
+                            </h3>
+                            <p className="font-serif font-light text-brand-brown/50 text-lg mt-1">
+                                ({project.roles.join(', ')})
+                            </p>
+                            <p className="font-sans text-xs tracking-widest text-brand-brown/30 mt-1">
+                                {project.dateLabel}
                             </p>
                         </div>
-                        </div>
 
-                        <div className="text-base font-normal font-sans">{project.description}</div>
+                        {/* Description */}
+                        <p className="font-sans text-sm leading-relaxed text-brand-brown/70 max-w-sm">
+                            {project.description}
+                        </p>
 
-                        <div className="border-b text-base flex flex-row justify-center items-center gap-0.5 transition group-hover:gap-1.5">
+                        {/* CTA */}
-                            <p>READ</p>
+                        <div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 group-hover:border-brand-brown transition-colors duration-200">
-                            <GoArrowRight />
+                            <span>Lire le cas</span>
+                            <svg
+                                className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform duration-200"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                aria-hidden="true"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            </svg>
                         </div>
                     </div>
                 </div>
             </Link>
 
-            {isTheLast && <div className="w-full h-px mt-8 bg-brand-brown/20" />}
+            {isTheLast && <div className="w-full h-px mt-10 bg-brand-brown/15" />}
         </div>
     );
 };

lib/useReveal.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export function useReveal(threshold = 0.15) {
+    const ref = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node) => {
+                        node.classList.add('visible');
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold }
+        );
+
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [threshold]);
+
+    return ref;
+}