← BackDesign & Analytics

Dashboard — excerpt

0

Cookies set

0

Consent banner

0

Third-party analytics SDK

13 months

Retention

Portfolio

Built with Claude Code
The problem

A portfolio has to prove the craft, not just claim it — and most lean on a template, a third-party analytics tool that leaks visitor data, and a contact form that attracts spam.

The solution

Everything built by hand on Next.js: a scroll-scrubbed hero, interactive case studies, and behind them a first-party, GDPR-compliant audience measurement with no banner, plus a quote form with its own anti-spam. Built with Claude Code.

ResultThe site you're looking at: analytics, legal and SEO done in-house, zero third-party tracking dependency.

Next.js 16React 19Tailwind v4GSAPIn-house analyticsSupabaseVercel
Under the hood
01The centrepiece

An in-house audience measurement

No Google Analytics, no third-party tracker: a first-party collection script that follows page views, clicks, scroll depth and the quote-form funnel, batched to a Next.js endpoint that writes to Supabase over raw REST — zero SDK. A dashboard behind a double barrier (unguessable path + password) shows a click heatmap overlaid on the live page and the split of acquisition channels (direct, organic, social, referral, country).

02Compliance

GDPR by design, no banner

No cookie; the session id lives in sessionStorage and dies with the tab. The IP is never stored in clear — only a daily-rotating fingerprint. Retention capped at 13 months. Those choices tick the CNIL's consent-exemption criteria for audience measurement: legal notice and privacy policy written, a real opt-out, no banner to click.

03Anti-spam

A hardened quote form

A server-signed token proving the page was loaded and a minimum time has passed, an invisible honeypot field, a per-IP rate limit. The request goes out by email via Resend, falling back to a pre-filled email if delivery fails — a lead is never lost in silence.

04The hero

A video driven to the frame

A 193-image sequence plus an ambient loop, drawn on a canvas, pinned and scrubbed on scroll via GSAP — self-hosted, no third-party player. SEO and GEO covered alongside: metadata, JSON-LD, sitemap, robots, llms.txt and an Open Graph image generated on the fly. The site is also fully bilingual FR / EN, served by browser language.