franck
ec005b1622
- Accueil façon profil GitHub (bio, homelab, projets épinglés, parcours) avec fond dégradé et panneaux liquid glass - /cv : consultable en ligne (thème sombre), imprimable en PDF propre (thème clair, 1 page) ; numéro de téléphone non scrapable - Pages d'erreur 404 / 500 / global-error animées (GSAP) - Métadonnées : Open Graph, Twitter, JSON-LD Person, sitemap, robots (allowlist Google + bots d'aperçu, reste bloqué) - Images OG et favicon en PNG statiques - Contenu du CV : Saint-Paul, langues, expériences détaillées - Export statique (output: export) + DEPLOY.md - Retrait de l'indicateur de dev Next.js et des fichiers du starter Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T3hzMzvei419MwkKFZkvMX
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import gsap from "gsap";
|
|
|
|
export default function NotFound() {
|
|
const root = useRef<HTMLElement>(null);
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
if (reduce) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
const digits = gsap.utils.toArray<HTMLElement>("[data-digit]");
|
|
gsap.set("[data-fade]", { autoAlpha: 0, y: 14 });
|
|
|
|
gsap
|
|
.timeline({ defaults: { ease: "power3.out" } })
|
|
.from(digits, {
|
|
yPercent: -130,
|
|
rotate: -14,
|
|
autoAlpha: 0,
|
|
duration: 0.7,
|
|
ease: "back.out(1.6)",
|
|
stagger: 0.12,
|
|
})
|
|
.to("[data-fade]", { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.09 }, "-=0.15")
|
|
.add(() => {
|
|
gsap.to(digits, {
|
|
y: (i: number) => (i % 2 ? 7 : -7),
|
|
duration: 2.4,
|
|
ease: "sine.inOut",
|
|
repeat: -1,
|
|
yoyo: true,
|
|
stagger: { each: 0.15, from: "center" },
|
|
});
|
|
});
|
|
}, root);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<main
|
|
ref={root}
|
|
className="flex min-h-screen flex-col items-center justify-center gap-8 px-6 text-center"
|
|
>
|
|
<div className="flex leading-none font-bold text-fg [font-size:clamp(6rem,26vw,13rem)]">
|
|
<span data-digit>4</span>
|
|
<span data-digit className="text-accent">
|
|
0
|
|
</span>
|
|
<span data-digit>4</span>
|
|
</div>
|
|
|
|
<p data-fade className="max-w-full font-mono text-sm break-words text-muted">
|
|
fatal: le chemin «
|
|
<span className="text-fg">{pathname}</span>
|
|
» n'existe pas dans ce dépôt
|
|
</p>
|
|
|
|
<div data-fade className="flex flex-wrap justify-center gap-3">
|
|
<Link
|
|
href="/"
|
|
className="rounded-md border border-line bg-surface px-4 py-2 text-sm font-semibold hover:border-muted"
|
|
>
|
|
← Retour à l'accueil
|
|
</Link>
|
|
<Link
|
|
href="/#projets"
|
|
className="rounded-md border border-line px-4 py-2 text-sm font-semibold text-accent hover:border-muted"
|
|
>
|
|
Voir les projets
|
|
</Link>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|