Sommaire
Ce portfolio est une collaboration : direction artistique par Alizée Jaquet, développement de A à Z par moi. Il sert de vitrine technique et de point de contact commercial pour des missions en freelance.
La DA a été définie par Alizée Jaquet avant toute ligne de code : palette monochrome, typographies de caractère (Marble, Glitro), esthétique CCTV/analyse. Ces décisions conditionnent tous les composants visuels. Le filtre sur les cartes de projets en est l'exemple le plus visible : au repos, les thumbnails s'affichent en négatif photographique (grayscale + invert + contrast). Au survol, le filtre disparaît et l'image retrouve ses couleurs.
Le curseur est une cible en quatre coins brackets qui s'agrippe visuellement aux éléments interactifs. Il détecte leurs bounding boxes et positionne ses coins en les épousant, avec un suivi spring doux à l'approche et un rappel rapide à la sortie. Chaque animation a un rôle précis : le scramble text signale que les titres sont lisibles, le scroll reveal structure la hiérarchie, la transition de page évite le flash de contenu brut. Les cartes projets suivent le curseur en parallaxe spring.
Curseur cible : quatre corners brackets qui détectent et épousent les zones .cursor-target via getBoundingClientRect(). Throttle sur 3 frames, interpolation dt x 5 en approche, rappel vitesse 20 à la sortie. Dithering WebGL : tramage temps réel en GLSL. Perlin noise stacked (FBM) quantifié par une matrice de Bayer 8x8. Pause automatique hors viewport et onglet masqué, rendu limité à ~30fps. Carrousel : défilement infini, snap-to-center, historique de vélocité sur 5 points, accumulateur molette avec cooldown 300ms, glitch aléatoire toutes les 4 secondes. Roue de services : physique maison sans dépendance externe. Friction 0.988, rebond 0.65, spring recall. Shimmer sweep sur le texte actif via background-clip text animé. Planètes de compétences : moteur canvas avec collisions particule/bord/obstacle, transfert de vélocité au drag, rendu nébula en dégradés radiaux empilés. Formulaire de contact : 3 étapes progressives, persistance localStorage debounce 500ms, transitions directionnelles, honeypot et validation Zod client + serveur.
Dashboard de gestion intégré : éditeur de projets par blocs réordonnables (texte, titre, image, PDF), gestion des features avec galerie média, boîte de réception des contacts et todos. Sauvegarde automatique toutes les 30 secondes.
Front-end : Next.js 16 (App Router, Server Components), React 19, TypeScript strict, Tailwind CSS 4, Framer Motion, shadcn/ui Back-end et infra : Supabase (PostgreSQL avec RLS, Auth, Storage), Resend, Vercel Outils : react-hook-form, Zod, i18next, sharp, WebGL2 natif (GLSL)