Développement Web
Portail Web Interactif pour Créateur de Contenu
Publié le 10/02/2026
Accompagnement du créateur de contenu Cas_Torno dans la professionnalisation de sa présence en ligne. Le projet s'est déroulé en deux phases pour remplacer une solution générique par une plateforme propriétaire, performante et évolutive.
Phase 1 : Le Besoin Initial (V1)
Le client avait initialement besoin d'une solution performante pour centraliser ses réseaux (Twitch, TikTok, YouTube). J'ai conçu une interface ultra-légère basée sur du Glassmorphism (effets de flou et transparence CSS) s'intégrant parfaitement sur ses arrière-plans dynamiques en Pixel Art.
Phase 2 : L'Évolution vers un Dashboard Interactif (V2)
Face à l'évolution de son audience, l'objectif était de passer d'une simple page de liens à un véritable hub multimédia immersif.
J'ai entièrement repensé l'UI/UX avec une disposition en grille modulaire (Bento UI) et une esthétique "Retro Gaming" poussée. Cette nouvelle version offre une expérience sensorielle complète avec des effets sonores 8-bit au survol des éléments et des animations dynamiques en arrière-plan (particules).
Défis & Solutions Techniques :
L'enjeu critique était d'intégrer des flux de données en direct et des médias lourds sans sacrifier le temps de chargement instantané. Le choix d'une architecture "No-Framework" a été décisif.
Architecture "Vanilla" : Développement complet en HTML5, CSS3 et JavaScript natif pour un contrôle absolu des performances.
Intégration Dynamique (API) : Développement de scripts JavaScript pour interroger des API externes en temps réel : affichage du statut Live Twitch, du nombre de viewers, et récupération automatique de la dernière vidéo YouTube via flux RSS.
Micro-Interactions (Web Audio & Canvas) : Implémentation de l'API Web Audio pour générer procéduralement des sons 8-bit au clic et au survol, sans charger de fichiers audio externes. Création d'un système de particules en bulles via l'API HTML5 Canvas pour animer le fond de manière ultra-fluide.
Développement CSS Avancé : Utilisation de CSS Grid pour la structure Bento et de CSS Custom Properties (Variables) pour faciliter la maintenance des couleurs et du thème.
Accessibilité & Bonnes Pratiques : Balisage sémantique avec attributs ARIA (aria-label) pour garantir l'accessibilité aux lecteurs d'écran.
DevOps & SEO : Hébergement Hostinger optimisé avec CDN et protocole HTTP/3. Optimisation systématique des balises Open Graph pour des aperçus parfaits lors des partages sur Discord et Twitter.
Phase 1 : Le Besoin Initial (V1)
Le client avait initialement besoin d'une solution performante pour centraliser ses réseaux (Twitch, TikTok, YouTube). J'ai conçu une interface ultra-légère basée sur du Glassmorphism (effets de flou et transparence CSS) s'intégrant parfaitement sur ses arrière-plans dynamiques en Pixel Art.
Phase 2 : L'Évolution vers un Dashboard Interactif (V2)
Face à l'évolution de son audience, l'objectif était de passer d'une simple page de liens à un véritable hub multimédia immersif.
J'ai entièrement repensé l'UI/UX avec une disposition en grille modulaire (Bento UI) et une esthétique "Retro Gaming" poussée. Cette nouvelle version offre une expérience sensorielle complète avec des effets sonores 8-bit au survol des éléments et des animations dynamiques en arrière-plan (particules).
Défis & Solutions Techniques :
L'enjeu critique était d'intégrer des flux de données en direct et des médias lourds sans sacrifier le temps de chargement instantané. Le choix d'une architecture "No-Framework" a été décisif.
Architecture "Vanilla" : Développement complet en HTML5, CSS3 et JavaScript natif pour un contrôle absolu des performances.
Intégration Dynamique (API) : Développement de scripts JavaScript pour interroger des API externes en temps réel : affichage du statut Live Twitch, du nombre de viewers, et récupération automatique de la dernière vidéo YouTube via flux RSS.
Micro-Interactions (Web Audio & Canvas) : Implémentation de l'API Web Audio pour générer procéduralement des sons 8-bit au clic et au survol, sans charger de fichiers audio externes. Création d'un système de particules en bulles via l'API HTML5 Canvas pour animer le fond de manière ultra-fluide.
Développement CSS Avancé : Utilisation de CSS Grid pour la structure Bento et de CSS Custom Properties (Variables) pour faciliter la maintenance des couleurs et du thème.
Accessibilité & Bonnes Pratiques : Balisage sémantique avec attributs ARIA (aria-label) pour garantir l'accessibilité aux lecteurs d'écran.
DevOps & SEO : Hébergement Hostinger optimisé avec CDN et protocole HTTP/3. Optimisation systématique des balises Open Graph pour des aperçus parfaits lors des partages sur Discord et Twitter.
Galerie du projet
