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
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import gsap from "gsap";
|
|
|
|
export default function Intro() {
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
const overlay = "[data-intro-overlay]";
|
|
const reveal = gsap.utils.toArray<HTMLElement>("[data-reveal]");
|
|
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
// No reveal targets (e.g. error / not-found pages) or reduced motion: skip the intro.
|
|
if (reduce || reveal.length === 0) {
|
|
gsap.set(overlay, { display: "none" });
|
|
return;
|
|
}
|
|
|
|
gsap.set(reveal, { autoAlpha: 0, y: 12 });
|
|
|
|
const tl = gsap.timeline({
|
|
defaults: { ease: "power3.out" },
|
|
onComplete: () => gsap.set(reveal, { clearProps: "all" }),
|
|
});
|
|
|
|
tl.to("[data-intro-mark]", { autoAlpha: 1, scale: 1, duration: 0.45, ease: "power2.out" }, 0)
|
|
.fromTo(
|
|
"[data-intro-bar]",
|
|
{ scaleX: 0 },
|
|
{ scaleX: 1, duration: 0.85, ease: "power2.inOut" },
|
|
0.1,
|
|
)
|
|
.to(overlay, { yPercent: -100, duration: 0.5, ease: "power3.inOut" }, ">-0.1")
|
|
.to(reveal, { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.07 }, "<0.2")
|
|
.set(overlay, { display: "none" });
|
|
|
|
return () => {
|
|
tl.kill();
|
|
gsap.set(reveal, { clearProps: "all" });
|
|
};
|
|
}, []);
|
|
|
|
if (pathname !== "/") return null;
|
|
|
|
return (
|
|
<div
|
|
data-intro-overlay
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-canvas"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
data-intro-bar
|
|
className="absolute inset-x-0 top-0 h-[3px] origin-left bg-accent"
|
|
style={{ transform: "scaleX(0)" }}
|
|
/>
|
|
<div
|
|
data-intro-mark
|
|
className="grid size-12 place-items-center rounded-xl bg-surface text-lg font-bold"
|
|
style={{ opacity: 0, transform: "scale(0.94)" }}
|
|
>
|
|
F
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|