Retour
  • Astro
  • Tailwind CSS
  • Docker
  • UI / UX
  • Projet personnelle

Mon Portfolio — Cécile Hentsch

Un portfolio conçu comme une expérience immersive, alliant une esthétique douce et structurée à une performance technique optimale sous Astro.

Objectif

Concevoir une expérience de navigation mémorable tout en prouvant qu'esthétique "Aurora" et performance technique sont compatibles. L'objectif était de maîtriser l'écosystème Astro pour offrir un site ultra-rapide, accessible et parfaitement optimisé.

Année de création
2026
Rôle
Designer et développeuse

Choix Technologique

Pour ce projet, j'ai choisi de sortir de ma zone de confort en utilisant Astro, que je n'avais jamais utilisé avant ce projet. Cette technologie m'a permis de concilier un design riche avec une performance brute. Apprendre cet outil en autonomie m'a permis de livrer une interface fluide, optimisée pour le SEO et l'expérience utilisateur.

Conception & UX Design

Au-delà du code, j'ai mené une réflexion globale sur l'expérience utilisateur. Du benchmark des tendances "Bento" à la création d'une charte graphique unique, chaque élément a été pensé pour allier esthétique moderne et clarté de l'information.

Historique du projet

  1. J-1 et J-2

    Phase de Veille

    Analyse des nouveaux standards UI de 2026. Choix du style Bento Grid pour sa capacité à fragmenter l'information et de l'esthétique Aurora pour la douceur visuelle.

  2. J-3

    Moodboard & Palette

    Remplacement des codes "tech" classiques (bleu/noir) par un rose pastel (#FFD1DC) et des teintes ivoires pour créer une atmosphère plus humaine et différenciante auprès des recruteurs.

  3. J-3

    Maquettage

    Dessin des composants sous Figma en priorité pour smartphone, en s'assurant que les cartes Bento s'empilent logiquement sans perdre l'effet de flou (Glassmorphism).

  4. J-4

    Setup Docker & Isolation

    Configuration d'un Dockerfile et d'un docker-compose.yml pour garantir que mon environnement de travail soit identique, peu importe la machine. Mise en place du Hot Module Replacement (HMR) pour un feedback visuel immédiat.

  5. J-4

    Initialisation Astro

    Choix d'Astro pour son architecture en "Islands". L'idée : n'expédier du JavaScript au visiteur que pour les éléments interactifs (comme le bouton de contact ou les animations de cartes), laissant le reste en HTML pur pour un SEO maximal.

  6. J-4

    Automatisation via Makefile

    Création de commandes simplifiées (make dev, make build) pour professionnaliser le flux de travail et gagner en productivité.

  7. J-4

    Système de Design avec Tailwind

    Création de classes utilitaires personnalisées pour l'effet Aurora. Utilisation de backdrop-blur pour simuler le verre givré des cartes.

  8. J-4 et J-5

    Composant React & Animations

    Intégration de Framer Motion pour gérer les entrées en scène. Développement de l'animation Staggered Reveal qui fait apparaître les informations au rythme du scroll de l'utilisateur.

  9. J-5

    Optimisation Asset

    Compression des images au format WebP et chargement différé (Lazy Loading) pour garantir que la page "Détails" soit aussi rapide que la page d'accueil.

  10. J-5

    Audit Lighthouse

    Analyse des performances pour atteindre le 100/100. Correction des contrastes de couleurs pour garantir l'accessibilité (normes WCAG).

  11. J-5

    Responsive Debugging

    Test de la grille Bento sur différents navigateurs (Chrome, Safari, Firefox) pour s'assurer que les arrondis et les flous de verre s'affichent correctement partout.

  12. J-6 (en cours)

    CI/CD & Hosting

    Déploiement automatisé sur une infrastructure de type Edge (Vercel/Netlify) pour que le portfolio soit accessible en moins de 500ms partout dans le monde.

Galerie

Aperçu visuel de l'interface et des fonctionnalités du projet.

  • Le Moodboard

    Le Moodboard

    La phase créative où l'idée prend forme. C’est ici que j'ai posé les bases de l'interface pour assurer une unité visuelle sur toutes les pages.

  • Design System

    Design System

    Définition des tokens (couleurs, espacements, ombres) et des états de composants pour une intégration fluide, accessible et structurée.

  • Design Final

    Design Final

    Le rendu visuel avant le passage au code. Cette étape me permet de valider chaque détail graphique et d'assurer une fidélité parfaite lors de l'intégration.

Bilan

Ce que ce projet m'a apporté

Ce projet a été le terrain d'expérimentation idéal pour concilier design et ingénierie. J'y ai appris à structurer un projet complexe en autonomie, de la gestion des assets au déploiement CI/CD. C'est la démonstration de ma capacité à livrer un produit fini, soigné et techniquement solide.