Morgan CamilleriRéalisations
Ce site, du concept au serveur
Ce portfolio est lui-même une réalisation : une expérience pensée pour raconter un parcours tout en démontrant concrètement mes compétences en produit, UX, direction artistique, développement, SEO et infrastructure.
Repères vérifiés
- Expérience originale conçue et développée sur mesure
- Architecture bilingue avec SEO technique intégré
- Infrastructure conteneurisée avec préproduction et production isolées
- Contrôles automatisés du code jusqu'à l'image Docker
Une preuve qui se visite
Un portfolio peut facilement se limiter à déclarer des compétences. Ici, le site doit les rendre perceptibles : la clarté du parcours démontre l'UX, l'identité visuelle montre le regard créatif et la qualité d'exécution révèle la maîtrise technique.
Chaque choix remplit donc deux fonctions : aider le visiteur à comprendre mon parcours et montrer, par l'expérience elle-même, comment je conçois un produit numérique.
Transformer un parcours en récit
La page d'accueil ne résume pas un CV. Elle part de la personne que je suis aujourd'hui, remonte aux premiers écrans qui m'ont donné envie de créer, puis rejoint des produits et des résultats concrets.
L'Écran vivant relie ces époques dans un mini-film continu. Les pages Réalisations, Produits, Lab et Profil donnent ensuite plusieurs niveaux de lecture, sans mélanger la démonstration professionnelle, la présentation des produits et les expérimentations.
UX et accessibilité
La narration doit rester compréhensible sur mobile comme sur grand écran, au clavier, sans animation et avec une préférence de mouvement réduit. Les effets visuels enrichissent le parcours, mais ne portent jamais seuls une information essentielle.
La hiérarchie, les contrastes, les zones d'action et les textes courts sont travaillés ensemble. Une version statique du récit reste disponible lorsque JavaScript ou les animations ne le sont pas.
Une direction artistique au service du sens
Le portrait, la lumière, la typographie et les mouvements composent une identité sobre et personnelle. L'écran central change de forme pour faire le lien entre télévision, ordinateur, iPhone, applications et travail actuel.
L'esthétique ne vient pas habiller le contenu après coup : elle organise l'attention, donne un rythme au récit et rend la progression mémorable sans gêner la lecture.
Une base technique pensée comme un produit
Le site repose sur Next.js, React et TypeScript. Les contenus, routes localisées et statuts de publication sont structurés et typés afin de faire évoluer l'ensemble sans dupliquer la logique ni exposer un contenu qui ne doit pas l'être.
Les composants privilégient le rendu serveur et l'amélioration progressive. Les interactions les plus ambitieuses restent isolées, testables et accompagnées d'une solution de repli accessible.
SEO et performance dès la conception
Chaque route française et anglaise dispose de métadonnées, d'une URL canonique et d'alternatives hreflang cohérentes. Les données structurées, le sitemap, les règles d'indexation et les redirections font partie de l'architecture, pas d'une couche ajoutée au moment de publier.
Le choix de polices système, d'animations CSS ou SVG légères, d'images optimisées et d'un nombre limité de dépendances aide à préserver un chargement rapide malgré une expérience visuelle riche.
Du dépôt au serveur
L'application est construite dans une image Docker multi-étapes, exécutée sans privilèges et contrôlée par un healthcheck. Caddy assure le HTTPS, la compression, les en-têtes de sécurité et le routage vers des environnements de préproduction et de production isolés.
La même image validée en préproduction peut être promue sans reconstruction. Un verrou côté serveur maintient le site complet derrière la page d'attente tant que sa publication n'a pas été explicitement autorisée.
Qualité et évolution
Le formatage, le lint, les types, les tests, le build applicatif et la construction de l'image Docker sont vérifiés automatiquement. Ces contrôles protègent autant l'expérience visible que le SEO, les routes, les contenus et le mode de publication.
Le site reste un produit vivant : le récit, les composants et l'infrastructure peuvent évoluer par étapes, avec une validation en préproduction avant toute décision de publication.