improve responsive design

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 (

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>

components/layout/Header.tsx

@@ -1,17 +1,40 @@
+'use client';
+
+import React, { MouseEvent } from 'react';
+
 export default function Header() {
+
+	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 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>
+		<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">
-					<li>Accueil</li>
-					<li>Projets</li>
-					<li>À propos</li>
-					<li>Blog</li>
+						{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="font-sans text-base font-light">France</div>
+				<div className="hidden sm:block font-sans text-base font-light">France</div>
 			</header>
 		</div>
 

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>
 

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"} 

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