Rebranding ab64.fr : du cyberpunk Arwes à l'éditorial tech

Mon portfolio tournait depuis un an sous Arwes, un framework UI cyberpunk inspiré de Halo / Tron. C'était fun, mais ça ne correspondait plus à ce que je vends aujourd'hui : des produits web éditoriaux, sobres et durables. Voici comment j'ai refait le site de zéro en un sprint, avec une direction artistique plus proche de Linear, Vercel et Rauno Freiberg.

Le problème de l'ancien site

L'esthétique Arwes envoyait un signal contradictoire : je dis "je fais du SaaS B2B sérieux" mais le site dit "je fais des interfaces de film de SF". Bordures angulaires épaisses, bips sonores, animations marquées - sympa, pas crédible pour un freelance facturé en jours-homme.

Nouvelle direction artistique

Palette dominante sombre #0A0A0B avec un accent cyan React#58C4DC (dark) et #087EA4 (light). Typographie General Sans pour le display et le texte, JetBrains Mono pour les labels, tags et métadonnées. Grain SVG discret uniquement sur le hero, mask radial pour les dot patterns.

• Hero éditorial avec kicker mono + h1 large (clamp 42-96px)
• Grille projets en bento (1 gros + 2 petits)
• Section "Ils m'ont fait confiance" en marquee horizontal (pause au hover)
• Modal témoignages accessible (focus trap + restore)
• Timeline expérience en grid 12 colonnes, année sticky

Stack technique

Next.js 15 App Router en Server Components par défaut, TypeScript strict, Tailwind v4 avec tokens exposés via @theme inline, pas de lib UI lourde. Trilingue FR / EU (basque) / EN via dictionnaires JSON et routing /[locale]/.... Polices self-hosted via next/font/local pour éviter une requête réseau bloquante.

SEO et accessibilité

Le rebranding visuel n'a pas fait perdre de terrain : toutes les URLs FR historiques (/projets, /experience,/contact, /mentions-legales) ont été conservées. JSON-LD enrichi avec @graph (Person + ProfessionalService + WebSite), canonical et hreflang partout, sitemap dynamique. Côté a11y : focus trap sur modal, focus restore, respect de prefers-reduced-motion, landmarks ARIA, contrastes AAA en dark mode.

Ce que je garde pour la prochaine itération

• Pages détail projet avec étude de cas complète
• OG images dynamiques par page (Next.js opengraph-image.tsx)
• Favicons modernes (PNG, apple-icon, manifest)
• Mesures Core Web Vitals sur PageSpeed Insights après déploiement

Au final : site plus crédible, plus rapide, meilleure SEO locale (ProfessionalService + geo coordinates Anglet), codebase propre. Et surtout, quelque chose que je peux montrer à un prospect SaaS sans devoir m'excuser pour les bordures angulaires.