From bc91580cb224d2e8f3075fc9477b0ea4e7e2287e Mon Sep 17 00:00:00 2001
From: Matheo Guilbert <Matheo.Guilbert@ixapack.com>
Date: Thu, 16 Apr 2026 08:30:15 +0200
Subject: [PATCH] improve responsive design

---
 app/[locale]/page.tsx                         |  2 +-
 components/layout/Footer.tsx                  |  2 +-
 components/layout/Header.tsx                  | 57 +++++++++++++------
 .../{TimelineSection.tsx => AboutSection.tsx} |  4 +-
 components/sections/FeatureSection.tsx        |  2 +-
 components/sections/WorksSection.tsx          |  2 +-
 6 files changed, 46 insertions(+), 23 deletions(-)
 rename components/sections/{TimelineSection.tsx => AboutSection.tsx} (96%)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index ed08fd8..f2b649a 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,7 +1,7 @@
 import HeroSection from "@/components/sections/HeroSection";
 import WorksSection from "@/components/sections/WorksSection";
 import FeatureSection from "@/components/sections/FeatureSection";
-import TimelineSection from "@/components/sections/TimelineSection";
+import TimelineSection from "@/components/sections/AboutSection";
 
 export default function Home() {
 	return (
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index 45773b6..9f714d9 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ export default function Footer() {
             {/* Logo */}
             <img src="/icons/logo.svg" alt="logo mg dev mb-4" />
 
-            <div className="flex flex-row justify-center items-start gap-16">
+            <div className="flex flex-col lg:flex-row justify-center items-start gap-16">
                 <div className="flex flex-col items-start justify-start gap-4">
                     <h3 className="font-serif text-3xl">Mathéo Guilbert EI</h3>
                     <p className="font-sans text-base">Développeur Full Stack & Architecte Web</p>
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index d05b010..dc5576c 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -1,19 +1,42 @@
+'use client';
+
+import React, { MouseEvent } from 'react';
+
 export default function Header() {
-  return (
-	<div className="bg-brand-beige min-h-fit fixed left-2.75 right-2.75 z-50 rounded-b-[20px]">
-		<header className="bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px]">
-			<div className="font-serif text-2xl font-light">M. Guilbert</div>
-			<nav>
-				<ul className="flex gap-8 font-sans text-base font-light">
-					<li>Accueil</li>
-					<li>Projets</li>
-					<li>À propos</li>
-					<li>Blog</li>
-				</ul>
-			</nav>
-			<div className="font-sans text-base font-light">France</div>
-		</header>
-	</div>
-    
-  );
+
+	const links = [
+		{"text": "Accueil"		, "target": "/"},
+		{"text": "Travaux"		, "target": "/#works"},
+		{"text": "À propos"		, "target": "/#about"},
+		{"text": "Blog"			, "target": "/blog"},
+	];
+
+	const handleAnchorClick = (e: MouseEvent<HTMLLIElement>, target: string) => {
+		if (target.startsWith("/#")) { // only anchor links
+			e.preventDefault();
+			const id = target.slice(2);
+			const element = document.getElementById(id);
+			if (element) {
+				element.scrollIntoView({ behavior: "smooth" });
+			}
+		}
+	};
+
+	return (
+		<div className="bg-brand-beige h-20 fixed left-2.75 right-2.75 z-50 rounded-b-[20px]">
+			<header className="h-20 bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px]">
+				<div className="hidden md:block font-serif text-2xl font-light">M. Guilbert</div>
+				<img className="block md:hidden w-auto h-15" src="/icons/logo.svg" alt="logo mg dev" />
+				<nav className="hidden sm:block">
+					<ul className="flex gap-8 font-sans text-base font-light">
+						{links.map((link, index) => (
+							<li key={index} onClick={(e) => handleAnchorClick(e, link.target)}><a href={link.target}>{link.text}</a></li>
+						))}
+					</ul>
+				</nav>
+				<div className="hidden sm:block font-sans text-base font-light">France</div>
+			</header>
+		</div>
+
+	);
 }
\ No newline at end of file
diff --git a/components/sections/TimelineSection.tsx b/components/sections/AboutSection.tsx
similarity index 96%
rename from components/sections/TimelineSection.tsx
rename to components/sections/AboutSection.tsx
index 998d5a1..730b966 100644
--- a/components/sections/TimelineSection.tsx
+++ b/components/sections/AboutSection.tsx
@@ -24,9 +24,9 @@ export default function TimelineSection() {
     const progressWidth = "95%";
 
     return (
-        <section className="bg-[#f5f5f3] py-20 md:py-32">
+        <section id="about" className="bg-[#f5f5f3] py-20 md:py-32">
             <div className="mx-auto w-full px-6 md:w-[90vw]">
-                <h2 className="mb-16 text-center font-serif text-4xl leading-none text-brand-brown md:mb-24 md:text-6xl">
+                <h2 className="mb-16 text-center font-serif text-[clamp(80px,10vw,128px)] leading-none text-brand-brown md:mb-24 md:text-6xl">
                     A propos de moi
                 </h2>
 
diff --git a/components/sections/FeatureSection.tsx b/components/sections/FeatureSection.tsx
index 6c75261..67666d3 100644
--- a/components/sections/FeatureSection.tsx
+++ b/components/sections/FeatureSection.tsx
@@ -2,7 +2,7 @@ import { FeatureColumn } from '@/components/ui/FeatureColumn';
 
 export default function FeatureSection() {
     return (
-        <section className="w-full flex flex-wrap justify-around items-center gap-16 mt-30 lg:mt-40 mb-40">
+        <section className="w-full flex flex-wrap justify-around items-center gap-16 mt-30 lg:mt-40 mb-20">
             <FeatureColumn 
                 imagePath={"/icons/brain.svg"} 
                 title={"Plus qu'un simple exécutant"} 
diff --git a/components/sections/WorksSection.tsx b/components/sections/WorksSection.tsx
index 66a4a58..086f6fd 100644
--- a/components/sections/WorksSection.tsx
+++ b/components/sections/WorksSection.tsx
@@ -2,7 +2,7 @@ import { ProjectCard } from "../ui/ProjectCard";
 
 export default function WorksSection() {
     return (
-        <section className="w-full flex flex-col items-start justify-start">
+        <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>
 
             <ProjectCard