mguilbert/matheoguilbert.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign(project-page): editorial redesign of /works/[slug]

Browse Source 
- ProjectHero: full-viewport dark hero with blurred cover image overlay,
  animated entrance (back link → date → title → description), scroll indicator
- ProjectMeta: reveal-animated metadata strip with top/bottom dividers,
  refined label/value typography using brand color tokens
- ProjectTechnologies: outline pill tags with per-tag staggered reveal,
  hover border/color transition
- ProjectsColumns: cleaner 2-col prose grid with wider gap
- ProjectPreviewGrid: rounded-xl with subtle border, responsive 1→2 col
- ProjectVisitButton: pill-shaped dark CTA replacing bordered rectangle
- OtherProjects: image-first card layout with scroll reveal, hover scale +
  brightness on covers, sliding arrow, refined "Voir aussi" header
- page.tsx: passes cover prop to ProjectHero, 900px max-width content
  column, semantic MDX prose styles via article selector chains

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mathéo GUILBERT
2026-04-17 08:48:28 +02:00
parent 87efea3cc1
commit 26256f0379
8 changed files with 357 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/works/[slug]/page.tsx
+32 -31
View File
@@ -36,45 +36,46 @@ export default async function ProjectPage({ params }: props) {
slug: item.slug, slug: item.slug,
title: item.title, title: item.title,
description: item.description, description: item.description,
cover: item.cover cover: item.cover,
})); }));
return ( return (
<main className="bg-[#f5f3ef]"> <main className="bg-brand-beige">
<div className="mx-auto max-w-full flex flex-col items-center"> <ProjectHero
<ProjectHero locale={locale}
locale={locale} title={project.title}
title={project.title} description={project.description}
description={project.description} dateLabel={project.dateLabel}
cover={project.cover}
/>
<div className="mx-auto max-w-[900px] px-8 md:px-14 lg:px-6">
<ProjectMeta
dateLabel={project.dateLabel} dateLabel={project.dateLabel}
category={project.category}
roles={project.roles}
client={project.client}
/> />
<div className="lg:max-w-[70vw]"> <ProjectTechnologies technologies={project.technologies} />
<ProjectMeta
dateLabel={project.dateLabel}
category={project.category}
roles={project.roles}
client={project.client}
/>
<ProjectTechnologies technologies={project.technologies} /> <section className="pb-16">
<article
<section className="pb-16"> className="
<article className=" flex flex-col gap-16
flex flex-col gap-20 [&_h2]:font-serif [&_h2]:text-[clamp(52px,6vw,80px)] [&_h2]:text-brand-brown [&_h2]:leading-none [&_h2]:mb-8 [&_h2]:mt-4
[&>div>h2]:text-[clamp(80px,10vw,128px)] [&>div>h2]:font-serif [&>div>h2]:text-brand-brown [&_p]:font-sans [&_p]:text-sm [&_p]:text-brand-brown/70 [&_p]:leading-[1.8]
"> "
<MDXRemote >
source={project.content} <MDXRemote
components={mdxComponents} source={project.content}
options={{ blockJS: false, blockDangerousJS: true }} components={mdxComponents}
/> options={{ blockJS: false, blockDangerousJS: true }}
</article> />
</section> </article>
</section>
<OtherProjects locale={locale} projects={otherProjects} />
</div>
<OtherProjects locale={locale} projects={otherProjects} />
</div> </div>
</main> </main>
); );
components/mdx/ProjectPreviewGrid.tsx
+25 -23
View File
@@ -1,31 +1,33 @@
type PreviewItem = { type PreviewItem = {
title: string; title: string;
image: string; image: string;
}; };
type props = { type props = {
items?: PreviewItem[]; items?: PreviewItem[];
}; };
export function ProjectPreviewGrid({ items = [] }: props) { export function ProjectPreviewGrid({ items = [] }: props) {
return ( return (
<div className="grid gap-6 2xl:grid-cols-2 2xl:space-x-6"> <div className={`grid gap-4 ${items.length > 1 ? 'lg:grid-cols-2' : ''}`}>
{items.map((item) => ( {items.map((item) => (
<div <div
key={item.title} key={item.title}
className="rounded-[10px] overflow-hidden bg-brand-brown text-white min-h-65 flex items-center justify-center" className="rounded-xl overflow-hidden bg-brand-brown/5 border border-brand-brown/8"
> >
{item.image ? ( {item.image ? (
<img <img
src={item.image} src={item.image}
alt={item.title} alt={item.title}
className="h-full w-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
<span className="text-2xl">{item.title}</span> <div className="min-h-[220px] flex items-center justify-center text-brand-brown/30 font-sans text-sm">
)} {item.title}
</div> </div>
))} )}
</div> </div>
); ))}
</div>
);
} }
components/mdx/ProjectVisitButton.tsx
+23 -18
View File
@@ -1,24 +1,29 @@
import { GoLinkExternal } from "react-icons/go";
type VisitButtonProps = { type VisitButtonProps = {
href: string; href: string;
}; };
export function ProjectVisitButton({ href }: VisitButtonProps) { export function ProjectVisitButton({ href }: VisitButtonProps) {
if (!href) return null;
if (href === "" || href === null) { return; } return (
<div className="flex justify-center py-6">
return ( <a
<div className="flex justify-center"> href={href}
<a target="_blank"
href={href} rel="noreferrer"
target="_blank" className="group inline-flex items-center gap-3 bg-brand-brown text-brand-beige font-sans text-sm uppercase tracking-[0.18em] px-8 py-4 rounded-full hover:bg-brand-brown/85 transition-colors duration-200 cursor-pointer"
rel="noreferrer" >
className="rounded-[10px] border border-brand-brown px-6 py-4 text-brand-brown text-base flex flex-row justify-center items-center gap-2" Visiter le projet
> <svg
Visiter le site className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-200"
<GoLinkExternal className="text-xl" /> fill="none"
</a> stroke="currentColor"
</div> viewBox="0 0 24 24"
); aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
);
} }
components/mdx/ProjectsColumns.tsx
+6 -6
View File
@@ -1,11 +1,11 @@
type props = { type props = {
children: React.ReactNode; children: React.ReactNode;
}; };
export function ProjectsColumns({ children }: props) { export function ProjectsColumns({ children }: props) {
return ( return (
<div className="grid gap-6 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6"> <div className="grid gap-8 lg:grid-cols-2 lg:gap-14">
{children} {children}
</div> </div>
); );
} }
components/sections/OtherProjects.tsx
+70 -9
View File
@@ -1,4 +1,7 @@
import Link from "next/link"; 'use client';
import { useRef, useEffect } from 'react';
import Link from 'next/link';
type props = { type props = {
locale: string; locale: string;
@@ -11,24 +14,82 @@ type props = {
}; };
export function OtherProjects({ locale, projects }: props) { export function OtherProjects({ locale, projects }: props) {
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, i) => {
setTimeout(() => node.classList.add('visible'), i * 120);
});
observer.unobserve(el);
}
},
{ threshold: 0.1 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
if (!projects.length) return null; if (!projects.length) return null;
return ( return (
<section className="pb-20 pt-8"> <section ref={ref} className="pt-6 pb-20">
<h2 className="mb-10 text-center text-[clamp(80px,10vw,128px)] font-serif text-brand-brown"> {/* Divider */}
Autres projets <div className="w-full h-px bg-brand-brown/10 mb-14" />
{/* Label */}
<div className="flex items-center gap-3 mb-6">
<span className="w-6 h-px bg-brand-brown/40" />
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
Autres projets
</span>
</div>
<h2 className="reveal font-serif text-[clamp(48px,6vw,80px)] leading-none text-brand-brown mb-12">
Voir aussi
</h2> </h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
{projects.map((project) => ( {projects.map((project, i) => (
<Link <Link
key={project.slug} key={project.slug}
href={`/${locale}/works/${project.slug}`} href={`/${locale}/works/${project.slug}`}
className="group block" className="reveal group block cursor-pointer"
style={{ transitionDelay: `${i * 100}ms` }}
> >
<div className="mb-3 text-3xl font-sans">{project.title}</div> {/* Image */}
<p className="mb-3 text-sm text-neutral-500">{project.description}</p> <div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
<img className="flex min-h-[220px] items-center justify-center rounded-[22px] bg-white text-4xl shadow-sm transition group-hover:-translate-y-1" src={project.cover} alt="cover image" /> <img
src={project.cover}
alt={project.title}
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
/>
</div>
{/* Text */}
<div className="flex items-start justify-between gap-4">
<div>
<h3 className="font-serif text-2xl text-brand-brown uppercase mb-1.5">
{project.title}
</h3>
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed">
{project.description}
</p>
</div>
<svg
className="w-5 h-5 text-brand-brown/30 flex-shrink-0 mt-1 group-hover:translate-x-1 group-hover:text-brand-brown/60 transition-all 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>
</Link> </Link>
))} ))}
</div> </div>
components/sections/ProjectHero.tsx
+112 -23
View File
@@ -1,36 +1,125 @@
import Link from "next/link"; 'use client';
import { GoArrowLeft } from "react-icons/go"; import { useEffect, useRef } from 'react';
import Link from 'next/link';
type props = { type props = {
title: string; title: string;
description: string; description: string;
dateLabel: string; dateLabel: string;
locale: string; locale: string;
cover?: string;
}; };
export function ProjectHero({ title, description, dateLabel, locale }: props) { export function ProjectHero({ title, description, dateLabel, locale, cover }: props) {
const ref = useRef<HTMLElement>(null);
useEffect(() => {
const section = ref.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)';
}, 80 + i * 100);
});
}, []);
return ( return (
<div className="md:pt-22 w-full"> <section
<section className="rounded-[10px] bg-brand-brown flex flex-col items-center justify-center text-brand-beige px-6 py-4"> ref={ref}
<Link className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
href={`/${locale}#works`} >
className="w-full mb-10 inline-flex items-center justify-start gap-2 text-sm text-brand-beige" {/* Background cover image */}
> {cover && (
<GoArrowLeft /> Retour aux projets <div className="absolute inset-0 pointer-events-none">
</Link> <img
src={cover}
<div className="mx-auto flex min-h-90 max-w-4xl flex-col items-center justify-center text-center"> alt=""
<h1 className="text-[clamp(30px,4vw,64px)] font-serif">{title}</h1> aria-hidden="true"
<p className="mt-4 font-sans text-base text-brand-beige/80">{description}</p> className="w-full h-full object-cover opacity-[0.08]"
style={{ filter: 'grayscale(100%)' }}
<div className="mt-8 flex items-center gap-4 text-sm text-brand-beige/70"> />
<span className="h-px w-16 bg-white/30" /> <div className="absolute inset-0 bg-gradient-to-b from-brand-brown/60 via-brand-brown/40 to-brand-brown/90" />
<span>{dateLabel}</span>
<span className="h-px w-16 bg-white/30" />
</div>
</div> </div>
</section> )}
</div>
{/* Back link */}
<div className="relative z-10 px-8 md:px-14 lg:px-20 pt-10">
<div
className="hero-reveal"
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1)' }}
>
<Link
href={`/${locale}#works`}
className="group inline-flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-beige/50 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
>
<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="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
Retour aux projets
</Link>
</div>
</div>
{/* Main content — vertically centred */}
<div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 py-16 text-center">
{/* Category pill */}
<div
className="hero-reveal mb-6"
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1)' }}
>
<span className="inline-flex items-center gap-2 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
<span className="w-5 h-px bg-brand-beige/30" />
{dateLabel}
<span className="w-5 h-px bg-brand-beige/30" />
</span>
</div>
{/* Title */}
<div
className="hero-reveal"
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
>
<h1 className="font-serif text-[clamp(40px,6vw,96px)] leading-[0.92] text-brand-beige max-w-4xl uppercase">
{title}
</h1>
</div>
{/* Description */}
<div
className="hero-reveal mt-8"
style={{ opacity: 0, transform: 'translateY(24px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
>
<p className="font-sans text-base font-light text-brand-beige/55 max-w-xl leading-relaxed">
{description}
</p>
</div>
</div>
{/* Scroll indicator */}
<div className="relative z-10 flex justify-center pb-8 text-brand-beige/30">
<div className="flex flex-col items-center gap-1.5">
<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>
); );
} }
components/sections/ProjectMeta.tsx
+49 -21
View File
@@ -1,3 +1,7 @@
'use client';
import { useRef, useEffect } from 'react';
type props = { type props = {
dateLabel: string; dateLabel: string;
category: string; category: string;
@@ -5,34 +9,58 @@ type props = {
client: string; client: string;
}; };
function Item({ function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
label,
children,
}: {
label: string;
children: React.ReactNode;
}) {
return ( return (
<div className="space-y-2"> <div className="flex flex-col gap-2">
<p className="text-sm text-neutral-500">{label}</p> <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
<div className="text-base text-neutral-900">{children}</div> {label}
</span>
<div className="font-sans text-sm text-brand-brown/80 leading-relaxed">
{children}
</div>
</div> </div>
); );
} }
export function ProjectMeta({ dateLabel, category, roles, client }: props) { export function ProjectMeta({ dateLabel, category, roles, client }: props) {
const ref = useRef<HTMLElement>(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
el.classList.add('visible');
observer.unobserve(el);
}
},
{ threshold: 0.2 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return ( return (
<section className="grid gap-8 py-10 md:grid-cols-4"> <section ref={ref} className="reveal py-12 md:py-16">
<Item label="Année">{dateLabel}</Item> {/* Top divider */}
<Item label="Catégorie">{category}</Item> <div className="w-full h-px bg-brand-brown/10 mb-10" />
<Item label="Rôles">
<div className="flex flex-col gap-1"> <div className="grid grid-cols-2 gap-8 md:grid-cols-4 md:gap-12">
{roles.map((role) => ( <MetaItem label="Année">{dateLabel}</MetaItem>
<span key={role}>{role}</span> <MetaItem label="Catégorie">{category}</MetaItem>
))} <MetaItem label="Rôles">
</div> <div className="flex flex-col gap-1">
</Item> {roles.map((role) => (
<Item label="Client">{client}</Item> <span key={role}>{role}</span>
))}
</div>
</MetaItem>
<MetaItem label="Client">{client}</MetaItem>
</div>
{/* Bottom divider */}
<div className="w-full h-px bg-brand-brown/10 mt-10" />
</section> </section>
); );
} }
components/sections/ProjectTechnologies.tsx
+34 -5
View File
@@ -1,17 +1,46 @@
'use client';
import { useRef, useEffect } from 'react';
type props = { type props = {
technologies: string[]; technologies: string[];
}; };
export function ProjectTechnologies({ technologies }: props) { export function ProjectTechnologies({ technologies }: props) {
return ( const ref = useRef<HTMLElement>(null);
<section className="pb-16">
<p className="mb-4 text-sm text-neutral-500">Technologies</p>
<div className="flex flex-wrap gap-3"> useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
el.querySelectorAll('.reveal').forEach((node, i) => {
setTimeout(() => node.classList.add('visible'), i * 60);
});
observer.unobserve(el);
}
},
{ threshold: 0.2 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
return (
<section ref={ref} className="pb-14">
<div className="flex items-center gap-3 mb-6">
<span className="w-6 h-px bg-brand-brown/40" />
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
Technologies
</span>
</div>
<div className="flex flex-wrap gap-2.5">
{technologies.map((tech) => ( {technologies.map((tech) => (
<span <span
key={tech} key={tech}
className="rounded-full bg-brand-brown px-4 py-2 text-sm text-white" className="reveal font-sans text-xs uppercase tracking-[0.12em] text-brand-brown/70 border border-brand-brown/20 rounded-full px-4 py-1.5 hover:border-brand-brown/50 hover:text-brand-brown transition-colors duration-200 cursor-default"
> >
{tech} {tech}
</span> </span>