Portfolio Personnel

La Démarche

Pour un développeur et designer web, le portfolio personnel est le projet le plus exigeant : c'est la vitrine directe de son niveau technique, de son sens esthétique et de son exigence ergonomique.

Plutôt que d'utiliser un CMS préconfiguré ou un template tout fait, j'ai fait le choix délibéré de tout coder à la main en Vanilla (HTML5, CSS3 pur, JavaScript moderne). Cette approche garantit une maîtrise absolue du rendu, un code ultra-léger exempt de dette technique, et une vitesse d'affichage instantanée.

Inspiré des interfaces minimalistes contemporaines, le design met en valeur mes compétences à la croisée de l'UX/UI Design et du Développement Front-End.

Interface épurée et structurée en mode sombre avec typographie DM Sans

Conception Visuelle & Expérience Utilisateur

L'interface a été conçue pour offrir une lisibilité optimale et une sensation d'immersion continue grâce à des partis pris graphiques forts :

Déclinaison soignée en mode clair avec adaptation automatique des contrastes

Un système de design complet et cohérent

Double thème dynamique (Dark / Light)
Détection automatique des préférences du système utilisateur (prefers-color-scheme) avec mémorisation dans le localStorage et bascule instantanée sans scintillement. Les logos des entreprises (BNP Paribas, Société Générale) s'adaptent automatiquement au contraste.
Bandeaux de flou directionnel immersif
Superposition de calques en haut et bas d'écran exploitant backdrop-filter: blur() pour adoucir la lecture du contenu au fil du défilement.
Grille de cartes responsives
Présentation des réalisations sous forme de cartes aérées dotées d'effets de zoom subtils au survol (hover) et de tags catégorisant la stack.

Micro-Interactions & Développement Sur-Mesure

L'expérience utilisateur repose sur une multitude de détails interactifs conçus pour rendre la navigation fluide et agréable :

Les fonctionnalités phares :

Menu flottant en « gélules » (Side Menu Pill)
Dès que l'utilisateur dépasse 50px de défilement, la barre de navigation principale s'estompe au profit d'un menu latéral discret et élégant. Il intègre un fil d'Ariane contextuel (ex. PORT, 20B, DVIZ) et des infobulles informatives.
Copie d'email en un clic
Bouton de contact avec survol révélant l'adresse email et copie immédiate via l'API navigator.clipboard, confirmée par une animation d'icône.
Animations au scroll & Ripples
Défilement fluide animé (courbe d'accélération easeInOutCubic) et effet d'ondulation (Ripple Material Design) généré dynamiquement sur chaque clic.

// Gestion intelligente du thème et persistance
function applyTheme(theme) {
  document.body.classList.toggle('dark', theme === 'dark');
  if (toggle) toggle.checked = theme === 'dark';
  if (toggleSide) toggleSide.checked = theme === 'dark';

  // Adaptation dynamique des logos partenaires
  const sgLogo = document.querySelector('.logo-sg-img');
  if (sgLogo) {
    sgLogo.src = theme === 'dark'
      ? 'images/logo-societe-generale-dark.webp'
      : 'images/logo-societe-generale.webp';
  }
}

// Détection de la préférence système
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
applyTheme(saved || (prefersDark.matches ? 'dark' : 'light'));
                

Extrait JS : système de thème universel, réactif et persistant

Performance, Éco-conception & SEO

L'absence de frameworks tiers permet au portfolio d'afficher un niveau de performance irréprochable :

Poids plume & Vitesse maximale : Aucune librairie externe lourde. Seul le code nécessaire est exécuté, permettant un premier rendu (FCP) quasi instantané.
SEO & Sémantique HTML5 : Structure exemplaire balisée par des balises header, nav, section, footer, complétée par un fichier sitemap.xml et robots.txt.
Accessibilité & Ergonomie : Contrastes rigoureusement validés, gestion du focus, navigation au clavier et menu burger mobile avec fermeture par touche Échap.

Adaptabilité responsive mobile soignée avec burger menu ergonomique

Bilan & Chiffres Clés

Ce portfolio est le reflet fidèle de mon approche professionnelle : une alliance étroite entre rigueur technique, sens du design et souci permanent de l'expérience utilisateur.

Il constitue le socle évolutif sur lequel je présente l'ensemble de mes réalisations académiques et professionnelles.

100%

Vanilla (0 Framework)

100

Score SEO / Qualité

2

Modes Sombre & Clair

0ms

Latence de Rendu

Visiter le portfolio

Vous naviguez actuellement sur ce portfolio. N'hésitez pas à tester le basculement de thème, à explorer les différentes pages projets ou à me contacter directement.

← Retour aux projets Retour à l'accueil

Mon Rôle

Cadre

Stack Technique

Performance