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

- 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:
2026-04-17 08:48:28 +02:00
parent 87efea3cc1
commit 26256f0379
8 changed files with 357 additions and 142 deletions
+7 -7
View File
@@ -1,11 +1,11 @@
type props = {
children: React.ReactNode;
children: React.ReactNode;
};
export function ProjectsColumns({ children }: props) {
return (
<div className="grid gap-6 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6">
{children}
</div>
);
}
return (
<div className="grid gap-8 lg:grid-cols-2 lg:gap-14">
{children}
</div>
);
}