improve responsive design

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