Portfolio

This portfolio is a collaboration: art direction by Alizée Jaquet, full development by me. It serves as a technical showcase and commercial contact point for freelance work.

The visual direction was defined by Alizée Jaquet before any code was written: monochrome palette, distinctive typefaces (Marble, Glitro), CCTV/analysis aesthetic. These decisions shape every visual component. The project card filter is the clearest example: at rest, thumbnails display as photographic negatives (grayscale + invert + contrast). On hover, the filter lifts and the image reveals its original colors.

The cursor is a four-corner bracket target that visually snaps to interactive elements. It reads their bounding boxes and positions its corners to fit them, with a smooth spring follow on approach and a fast recall on exit. Each animation serves a purpose: scramble text signals readable titles, scroll reveal structures information hierarchy, page transitions prevent raw content flashes. Project cards follow the cursor with spring parallax.

Target cursor: four corner brackets that detect and fit .cursor-target zones via getBoundingClientRect(). Throttled every 3 frames, dt x 5 interpolation on approach, speed-20 recall on exit. WebGL dithering: real-time GLSL dithering using stacked Perlin noise (FBM) quantized through a Bayer 8x8 matrix. Auto-pauses off-viewport and on hidden tab, capped at ~30fps. Carousel: infinite scroll, snap-to-center, 5-point velocity history, wheel accumulator with 300ms cooldown, random glitch every 4 seconds. Service wheel: custom physics engine with no external dependencies. Friction 0.988, bounce 0.65, spring recall. Shimmer sweep on active text via animated background-clip. Skill planets: canvas engine with particle/edge/obstacle collisions, velocity transfer on drag, radial gradient nebula layers. Contact form: 3 progressive steps, localStorage persistence with 500ms debounce, directional slide transitions, honeypot and Zod validation client + server.

Built-in content management dashboard: reorderable block editor for projects (text, heading, image, PDF), feature management with media gallery, contact inbox and todos. Auto-saves every 30 seconds.

Front-end: Next.js 16 (App Router, Server Components), React 19, TypeScript strict, Tailwind CSS 4, Framer Motion, shadcn/ui Back-end and infra: Supabase (PostgreSQL with RLS, Auth, Storage), Resend, Vercel Tooling: react-hook-form, Zod, i18next, sharp, native WebGL2 (custom GLSL)