Capitaine Portfolio

**Fiche Produit : Capitaine Portfolio**

**Description Générale**
Capitaine Portfolio est une plateforme web interactive conçue comme une chasse au trésor numérique pour présenter un portfolio professionnel. Construite avec HTML, Tailwind CSS et JavaScript, elle offre une expérience immersive avec un thème maritime, des animations fluides et un effet de révélation au survol. Les sections (Accueil, Services, Portfolio, Contact, Footer) sont initialement masquées et se dévoilent de manière dynamique, captivant l’utilisateur à travers un design inspiré de l’aventure et de l’exploration.

**Fonctionnalités Principales**
– Effet de révélation des sections au survol ou automatique après 2 secondes (opacity, translate, scale).
– Grille responsive pour les services (3 colonnes sur écrans moyens) et portfolio (2 à 3 colonnes).
– Animations personnalisées (reveal, treasure-glow, float) pour une expérience visuelle riche.
– Navigation fluide avec défilement doux (smooth scroll) pour les liens d’ancrage.
– Support automatique du mode sombre basé sur les préférences système.
– Palette de couleurs thématique (or, cuivre, bleu océan) avec gradients dynamiques.
– Effets de survol sur les cartes avec lévitation et transitions de bordures.
– Formulaire de contact avec design glassmorphism et bordures dorées.
– Menu de navigation adaptatif, affiché sur écrans moyens et grands.

**Bénéfices**
– Expérience utilisateur unique grâce à une métaphore de chasse au trésor engageante.
– Design visuellement captivant avec animations subtiles et palette de couleurs cohérente.
– Adaptabilité multi-appareils grâce à une conception responsive et fluide.
– Facilité de personnalisation avec Tailwind CSS et une structure HTML modulaire.
– Accessibilité améliorée avec support du mode sombre et navigation intuitive.
– Mise en valeur professionnelle des compétences et projets dans un format original.

**Cas d’Usage**
– Portfolio personnel pour développeurs, designers ou créatifs cherchant une présentation distinctive.
– Site vitrine pour freelances ou agences souhaitant une identité visuelle mémorable.
– Support pour des campagnes marketing ou des projets artistiques à thème narratif.
– Outil pédagogique pour illustrer les techniques de design web interactif et animations CSS.

**Prérequis Techniques**
– Navigateur web moderne (Chrome, Firefox, Safari, Edge).
– Connexion internet pour charger Tailwind CSS via CDN.
– Aucun serveur requis (site statique).
Pour une installation locale de Tailwind CSS (optionnel) :
« `bash
npm install tailwindcss
npx tailwindcss init
« `
Compiler les styles selon la documentation officielle de Tailwind CSS.