Conception et développement web

Bibas & Marco - Plateforme de marque personnelle

Plateforme de marque personnelle à plusieurs créateurs, articulée autour de cinq sections interconnectées : page d'accueil, page dédiée au podcast (Tou Podcast), profils individuels des créateurs (le maquillage et le travail vétérinaire de Bibas, la musique de Marco sous le nom de Mr Dilo) et page complète consacrée aux partenariats. Elle intègre plusieurs plateformes sociales (YouTube, Spotify, Instagram, TikTok) avec des contenus embarqués.

Développée avec React Router, elle repose sur un design system éditorial soigné, une palette crème chaleureuse, une typographie serif sur mesure et des animations Framer Motion raffinées. Les mises en page responsives mobile-first préservent la cohérence de la marque sur l'ensemble des sections.

Date de réalisation : mai 2026
Voir le site en ligne
Détails du projet

Vue d'ensemble

Secteur

Création de contenu digital / Divertissement / Marque personnelle

Périmètre

Site de marque personnelle multipage complet, avec une page d'accueil, une section dédiée au podcast, deux profils de créateurs et une page partenariats, incluant des intégrations de réseaux sociaux, des formulaires de contact et un design responsive sur tous les appareils

Durée

2 à 3 semaines, du design à la mise en œuvre

La problématique

Le défi

Bibas et Marco avaient besoin d'une présence digitale unifiée pour rassembler leurs différents contenus — podcast, musique, maquillage et soin des animaux — au sein d'une même plateforme professionnelle. Leur audience était dispersée sur plusieurs réseaux sociaux, sans point d'entrée central pour les demandes de partenariat ni présentation d'ensemble de la marque. Il leur fallait une solution capable de mettre en valeur l'identité propre de chaque créateur tout en préservant une image de couple cohérente.

Notre approche

La solution

Nous avons développé une application React multipage soignée, dans une approche éditoriale, avec une palette chaleureuse et accueillante et une typographie raffinée. Nous avons créé des sections dédiées à chaque univers de contenu, tout en préservant la cohérence visuelle grâce à un design system partagé. Nous avons intégré des liens directs vers toutes les plateformes sociales, embarqué un lecteur de podcast Spotify et créé une page partenariats détaillant les possibilités de collaboration. L'architecture responsive mobile-first garantit une excellente expérience sur tous les appareils, tandis que les animations Framer Motion apportent une finition soignée sans nuire aux performances.

Ce qui est inclus

Fonctionnalités clés

Design responsive
Architecture React multipage
Animations de défilement fluides
Design system éditorial
Intégration des réseaux sociaux
Bibliothèque d'icônes SVG sur mesure
Lecteur Spotify intégré
Contenu en portugais
Performance

Résultats

92-95/100
Score de performance
Performance Lighthouse, avec un chargement des ressources optimisé
100%
Adaptation mobile
Design mobile-first avec des points de rupture responsives complets
~120-150KB
Poids du bundle
Build de production compressé en gzip, avec découpage du code
100%
Qualité du code
Mode strict et couverture ESLint complète
Technologie

Technologies utilisées

React 19
TypeScript 6
Vite 8
Tailwind CSS 3.4
Framer Motion 12
React Router DOM 7
Lucide React 1.7
Se lancer

Prêt à lancer votre projet ?

Voyons ensemble comment créer un site remarquable, adapté aux besoins de votre entreprise.

Bibas & Marco - Plateforme de marque personnelle | Portfolio | low-key solutions