100 lines
4.4 KiB
TypeScript
100 lines
4.4 KiB
TypeScript
export default function TimelineSection() {
|
|
const steps = [
|
|
{
|
|
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",
|
|
position: "top" as const,
|
|
left: "16%",
|
|
},
|
|
{
|
|
title: "L'Évolution",
|
|
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,
|
|
left: "50%",
|
|
},
|
|
{
|
|
title: "Aujourd'hui",
|
|
text: "Je suis entrepreneur, co-fondateur d'une startup et développeur freelance, je vis de ma passion",
|
|
position: "top" as const,
|
|
left: "84%",
|
|
},
|
|
];
|
|
|
|
const lineTop = "58%";
|
|
const progressWidth = "95%";
|
|
|
|
return (
|
|
<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-[clamp(80px,10vw,128px)] leading-none text-brand-brown md:mb-24 md:text-6xl">
|
|
A propos de moi
|
|
</h2>
|
|
|
|
<div className="relative mx-auto w-full md:h-[420px]">
|
|
{/* Mobile layout */}
|
|
<div className="flex flex-col gap-6 md:hidden">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className="rounded-md border border-gray-300 border-l-4 border-l-brand-brown bg-white p-5"
|
|
>
|
|
<h3 className="mb-3 font-serif text-2xl text-brand-brown">
|
|
{step.title}
|
|
</h3>
|
|
<p className="leading-7 text-[#364153]">
|
|
{step.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Desktop timeline */}
|
|
<div className="hidden md:block">
|
|
{/* Base line */}
|
|
<div
|
|
className="absolute left-0 right-0 h-1.5 rounded-full bg-[#d9dde2]"
|
|
style={{ top: lineTop }}
|
|
/>
|
|
|
|
{/* Brown progress */}
|
|
<div
|
|
className="absolute left-0 h-1.5 rounded-full bg-brand-brown"
|
|
style={{ top: lineTop, width: progressWidth }}
|
|
/>
|
|
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className="absolute -translate-x-1/2"
|
|
style={{ left: step.left, top: lineTop }}
|
|
>
|
|
{/* Point */}
|
|
<div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
|
|
<div className="h-5 w-5 rounded-full border-2 border-white bg-brand-brown shadow-[0_0_0_2px_#3a2318]" />
|
|
</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",
|
|
step.position === "top"
|
|
? "bottom-10"
|
|
: "top-10",
|
|
].join(" ")}
|
|
>
|
|
<h3 className="mb-3 font-serif text-3xl text-brand-brown">
|
|
{step.title}
|
|
</h3>
|
|
|
|
<p className="leading-7 text-[#364153]">
|
|
{step.text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |