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>
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,100 +1,158 @@
|
||||
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%",
|
||||
},
|
||||
];
|
||||
'use client';
|
||||
|
||||
const lineTop = "58%";
|
||||
const progressWidth = "95%";
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
|
||||
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.",
|
||||
year: '2019',
|
||||
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.",
|
||||
year: '2022',
|
||||
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.",
|
||||
year: '2026',
|
||||
position: 'top' as const,
|
||||
left: '84%',
|
||||
},
|
||||
];
|
||||
|
||||
const lineTop = '58%';
|
||||
|
||||
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">
|
||||
<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
|
||||
<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">
|
||||
{/* Label */}
|
||||
<div className="reveal flex items-center gap-3 mb-6">
|
||||
<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">
|
||||
{steps.map((step, index) => (
|
||||
<div className="flex flex-col gap-5 md:hidden">
|
||||
{steps.map((step, i) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-md border border-gray-300 border-l-4 border-l-brand-brown bg-white p-5"
|
||||
key={i}
|
||||
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">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="leading-7 text-[#364153]">
|
||||
{step.text}
|
||||
</p>
|
||||
<span className="font-sans text-[11px] uppercase tracking-widest text-brand-brown/40 mb-3 block">{step.year}</span>
|
||||
<h3 className="font-serif text-2xl text-brand-brown mb-3">{step.title}</h3>
|
||||
<p className="font-sans text-sm leading-relaxed text-brand-brown/65">{step.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop timeline */}
|
||||
<div className="hidden md:block">
|
||||
{/* Base line */}
|
||||
<div className="hidden md:block relative h-[440px]">
|
||||
{/* 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"
|
||||
style={{ top: lineTop, width: progressWidth }}
|
||||
className="absolute left-0 h-px bg-brand-brown/50 rounded-full"
|
||||
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 */}
|
||||
<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]" />
|
||||
{/* Dot */}
|
||||
<div
|
||||
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",
|
||||
step.position === "top"
|
||||
? "bottom-10"
|
||||
: "top-10",
|
||||
].join(" ")}
|
||||
'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' ? 'bottom-10' : 'top-10',
|
||||
].join(' ')}
|
||||
style={{
|
||||
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">
|
||||
{step.title}
|
||||
</h3>
|
||||
|
||||
<p className="leading-7 text-[#364153]">
|
||||
{step.text}
|
||||
</p>
|
||||
<h3 className="font-serif text-xl text-brand-brown mb-2">{step.title}</h3>
|
||||
<p className="font-sans text-sm leading-relaxed text-brand-brown/65">{step.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
<FeatureColumn
|
||||
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."}
|
||||
/>
|
||||
<FeatureColumn
|
||||
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."}
|
||||
/>
|
||||
<FeatureColumn
|
||||
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."}
|
||||
/>
|
||||
<section ref={sectionRef} className="w-full py-24 md:py-36">
|
||||
{/* Section label */}
|
||||
<div className="reveal flex items-center gap-3 mb-12 md:mb-16">
|
||||
<span className="w-8 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">Approche</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-6 lg:gap-16">
|
||||
{features.map((feature, i) => (
|
||||
<div
|
||||
key={i}
|
||||
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"
|
||||
style={{ transitionDelay: `${i * 120}ms` }}
|
||||
>
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
{/* Title + image container */}
|
||||
<div className="flex flex-col w-9/10 gap-2.5
|
||||
md:flex-row md:justify-between md:items-center md:w-2/3
|
||||
">
|
||||
{/* Rotating texts */}
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[clamp(15px,2vw,24px)] font-sans">Ensemble nous allons...</p>
|
||||
<h1 className="text-[clamp(30px,4vw,64px)] font-serif">Construire une solution qui répond à votre problème.</h1>
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
|
||||
>
|
||||
{/* Main content */}
|
||||
<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">
|
||||
|
||||
{/* Left — editorial text */}
|
||||
<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 & Architecte Web
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<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" />
|
||||
{/* Headline */}
|
||||
<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 */}
|
||||
<div className="flex flex-row justify-center items-center gap-2.5 absolute bottom-6">
|
||||
<FiChevronsDown />
|
||||
<p className="text-base font-sans">Voir mes travaux</p>
|
||||
<FiChevronsDown />
|
||||
{/* Description */}
|
||||
<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)' }}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -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 (
|
||||
<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>
|
||||
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, 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,33 @@
|
||||
type props = {
|
||||
imagePath : string;
|
||||
title : String;
|
||||
text : String;
|
||||
imagePath: string;
|
||||
title: 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">
|
||||
<img className="w-33.75 h-33.75" src={imagePath} alt={`icon illustrating the text ${title}`} />
|
||||
<div className="font-serif text-brand-brown text-center leading-[1.05] text-balance text-[clamp(2rem,5vw,30px)]">{title}</div>
|
||||
<div className="font-sans text-base text-center">{text}</div>
|
||||
<div
|
||||
className="reveal flex flex-col items-center justify-start max-w-[320px] gap-6"
|
||||
style={{ transitionDelay: `${delay}ms` }}
|
||||
>
|
||||
{/* 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>
|
||||
);
|
||||
};
|
||||
@@ -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 className="w-full h-px bg-brand-brown/20 mb-8" />
|
||||
<div ref={cardRef} className="w-full pb-10 reveal">
|
||||
{/* 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">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
|
||||
<Link href={`/${locale}/works/${project.slug}`} className="group block cursor-pointer">
|
||||
<div className="flex flex-col gap-6 lg:flex-row lg:justify-between lg:items-start lg:gap-16 relative">
|
||||
|
||||
{/* Date label */}
|
||||
<div className="text-5xl font-serif text-brand-brown/40 mt-6 font-semibold lg:absolute lg:top-1 lg:right-1">
|
||||
{project.dateLabel}
|
||||
{/* Project number */}
|
||||
<div className="absolute top-0 right-0 font-sans text-xs tracking-[0.2em] text-brand-brown/25 uppercase">
|
||||
{num}
|
||||
</div>
|
||||
|
||||
{/* Left image */}
|
||||
<div className="w-full rounded-[10px] lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
|
||||
{/* Left — image */}
|
||||
<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 */}
|
||||
<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">
|
||||
<div className="p-1.5 bg-brand-brown rounded-px text-brand-beige font-sans">{project.category}</div>
|
||||
<div className="text-5xl text-brand-brown font-serif uppercase">{project.title}</div>
|
||||
<div className="text-2xl font-serif font-light">
|
||||
<p>
|
||||
(
|
||||
{project.roles.map((role, index) => role + (index < project.roles.length - 1 ? ", " : ""))}
|
||||
)
|
||||
{/* Right — content */}
|
||||
<div className="flex flex-col items-start justify-center w-full gap-6 lg:pt-4 lg:pr-6">
|
||||
{/* Category */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-4 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[11px] uppercase tracking-[0.18em] text-brand-brown/50">
|
||||
{project.category}
|
||||
</span>
|
||||
</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">
|
||||
<p>READ</p>
|
||||
<GoArrowRight />
|
||||
{/* CTA */}
|
||||
<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">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user