Saile

Contexte

J'ai lancé Saile en 2023 pour présenter mon parcours, mes compétences et mes projets. Le site a évolué avec mon profil. D'un portfolio centré sur le développement, il est devenu un produit personnel que je conçois, développe, déploie et maintiens de bout en bout.

L'enjeu est de réunir contenu professionnel et personnel sans perdre la clarté attendue d'un portfolio. Un visiteur qui consulte mon CV doit trouver l'information immédiatement. Un visiteur qui veut explorer peut parcourir les études de cas, la musique, les films et les choix techniques du site.

Le produit aujourd'hui

Saile réunit plusieurs usages dans une seule application cohérente.

• Un portfolio disponible en français et en anglais, avec profil, études de cas et formulaire de contact.
• Un CV consultable en ligne et généré à la demande en PDF A4 une page, adapté à chaque langue.
• Une page musique alimentée par l'API Spotify : titre en cours d'écoute, artistes et titres les plus écoutés, trois playlists sélectionnées.
• Une bibliothèque de films et séries basée sur TMDB, avec filtres, tri, recherche, fiches détaillées et recommandations envoyées sur Discord.
• Une palette de commandes accessible via Cmd ou Ctrl + K, qui recherche pages, projets, commandes et le catalogue TMDB.
• QR codes, métadonnées sociales et données structurées pour faciliter le partage et la découverte du contenu.

Architecture et données

L'application repose sur Next.js 16 App Router, React 19 et TypeScript. Les pages utilisent le rendu serveur et la génération statique dès que possible. Les pages liées à Spotify et TMDB sont régénérées périodiquement. Les routes API isolent les appels externes et leurs secrets du navigateur.

• next-intl centralise les contenus français et anglais, les routes localisées et les métadonnées associées.
• Les projets sont décrits dans une source structurée partagée, utilisée par la grille, les pages de détail, la navigation, le sitemap et la recherche.
• Les index de recherche full-text sont générés à la compilation, puis chargés avec MiniSearch uniquement à la première ouverture de la palette.
• Les intégrations Spotify et TMDB prévoient des états de repli : une panne externe ne doit pas bloquer le reste du site.
• Serwist gère le manifeste PWA, le service worker et les stratégies de cache, avec un traitement spécifique pour les données qui ne doivent jamais être servies obsolètes.

Design et accessibilité

Le design reste personnel sans gêner le contenu. L'interface repose sur des composants réutilisables, une hiérarchie typographique stable et des couleurs définies par rôle plutôt que directement dans les composants.

• Trois thèmes disponibles : clair, sombre et contraste élevé.
• Les visiteurs peuvent choisir la police Atkinson Hyperlegible, agrandir le texte et désactiver les animations.
• Navigation au clavier, liens d'évitement, indicateurs de focus, dialogues natifs et libellés accessibles sont traités comme des fonctionnalités du produit.
• Images adaptatives, imports différés et chargement paresseux des services tiers limitent le coût initial de chaque page.

Qualité, visibilité et sécurité

La qualité du site est vérifiée comme celle d'une application en production. Chaque pull request lance le linting, les vérifications TypeScript, le build de production et Lighthouse CI en émulation mobile. La configuration exige un score d'accessibilité de 100 et un score minimum de 90 pour la performance, les bonnes pratiques et le SEO.

Chaque langue a ses propres métadonnées, liens hreflang et entrées de sitemap. Les pages principales publient aussi des données structurées WebSite, Person ou CreativeWork. Côté sécurité, le serveur applique une Content Security Policy, HSTS, des restrictions d'intégration et une politique de permissions. Les jetons API et les webhooks restent exclusivement côté serveur.

Déploiement et exploitation

La branche principale se déploie automatiquement via GitHub Actions. Le workflow se connecte au VPS, synchronise le dépôt, installe les dépendances avec npm ci, produit le build Next.js et redémarre l'application avec PM2. Nginx sert de point d'entrée et Uptime Kuma surveille la disponibilité du service.

Cette chaîne de livraison couvre tout le cycle de vie du produit : mise à jour du contenu, développement, tests, publication, supervision et maintenance des intégrations externes.

Résultat

Saile est à la fois mon site public et mon terrain d'expérimentation. Le faire évoluer depuis 2023 m'a appris à maintenir un produit dans la durée, à revenir sur des décisions devenues limitantes et à équilibrer richesse fonctionnelle, simplicité, performance et accessibilité.

Le projet évolue avec ma trajectoire professionnelle. Chaque nouvelle fonctionnalité doit s'intégrer au système existant, rester utilisable dans les deux langues et ne pas dégrader l'expérience des visiteurs venus chercher une seule information.