Next.js 14
App Router, Server Components par défaut, métadonnées et canoniques typées. Les pages de contenu ne chargent aucun JavaScript client inutile.
Colophon
Comment ce site est construit
Pas de template, pas de page builder — voici l'envers du décor.
En bref
Quelques chiffres.
Ce portfolio est codé à la main, du premier pixel au déploiement. Rien n'est sorti d'un builder.
0Routes généréesApp Router
0Thèmes commutablesdata-theme
0Page builder100 % à la main
0%TypeScript strictfront + back
01Stack
Le bon outil, par couche.
Une stack moderne et resserrée, choisie pour la vitesse de rendu et le confort de maintenance.
TypeScript
Mode strict de bout en bout. Le contenu vit dans un seul fichier source de vérité, typé avec `as const` pour éviter les fautes de frappe silencieuses.
Tailwind CSS
Design system maison : tokens en CSS variables (un seul accent), échelle typographique fluide en clamp, utilitaires de cartes et de halos.
Framer Motion
Reveals au scroll, compteurs animés et transitions de page. Tout passe par des primitives partagées qui respectent prefers-reduced-motion.
Lenis
Défilement inertiel feutré, synchronisé avec les animations. Désactivé proprement quand l'utilisateur préfère un mouvement réduit.
Geist
Geist Sans pour les titres massifs et le corps, Geist Mono pour les labels et les chiffres. Chargées en local via next/font, zéro requête tierce.
02Direction artistique
Sombre, sobre, un seul accent.
L'univers visuel s'inspire de l'endurance — la télémétrie, le chrono, la nuit — sans jamais tomber dans le pastiche.
01
Thème sombre
Un fond profond comme base, pour faire ressortir le contenu et reposer les yeux. Le sombre n'est pas une mode, c'est le décor.
02
Accent unique tokenisé
Une seule couleur d'accent, pilotée par une variable CSS. Aucun hex en dur dans les composants : on change de thème en une ligne.
03
Typographie Geist
Des titres massifs en échelle fluide (clamp) et un corps lisible. Le mono ponctue les labels comme un afficheur de stand.
04
Motion au scroll
Des reveals discrets qui guident la lecture, jamais des effets pour les effets. La sobriété d'abord, l'animation ensuite.
03Features signature
Les détails qui font la différence.
Quelques pièces sur-mesure qui rendent ce site vivant — et qui sont, accessoirement, des démonstrations techniques.
Palette de commandes ⌘K
Une palette à la Raycast pour naviguer, changer de thème ou sauter vers un projet au clavier. Ouvrable partout avec ⌘K (ou Ctrl+K).
Fond shader WebGL
Un fond animé écrit en GLSL maison, rendu sur canvas. Il réagit au thème actif et se met en veille hors écran pour ne rien gaspiller.
« Live timing » des projets
Une lecture des réalisations en mode télémétrie d'endurance : meilleur « tour », secteurs et écarts. La métaphore motorsport, jamais le déguisement.
Terminal interactif
Un vrai terminal jouable à l'adresse /terminal : commandes pour parcourir le portfolio, lister les projets et me contacter, sans quitter le clavier.
4 thèmes commutables
Night, Qualifying, Endurance et Terminal. Chacun ne change qu'un jeu de variables CSS — la mise en page et le contraste restent identiques.
Curseur contextuel & easter egg
Un curseur sur-mesure qui réagit aux éléments interactifs, et un code Konami caché qui débloque un mode « boost ». Pour celles et ceux qui cherchent.
04Performance & accessibilité
Rapide, et pour tout le monde.
Un site premium qui rame ou qui exclut, ce n'est pas premium. La performance et l'accessibilité sont la base, pas l'option.
- Images en WebP servies via next/image (tailles responsives, lazy-load natif).
- prefers-reduced-motion respecté : reveals, smooth scroll et compteurs basculent en rendu statique.
- États de focus toujours visibles, navigation complète au clavier, contrastes vérifiés.
- Server Components par défaut : le JavaScript client n'est chargé que là où l'interactivité l'exige.
- Données structurées JSON-LD (Person / Organisation) pour le référencement et les moteurs IA.
- sitemap.xml et robots.txt générés automatiquement, canoniques sur chaque page.
05Déploiement
En production sur Vercel.
Chaque commit déclenche un build et une preview. La branche principale part directement en production.
Build, preview, production.
Hébergement et CDN sur Vercel, en parfaite affinité avec Next.js : déploiements atomiques, previews par branche, rollback instantané. Le code reste versionné sur GitHub.
VercelGitHubCI/CD
Code source disponible sur demande. SIRET et numéro de TVA intracommunautaire de Krealabs : [à compléter].