Barc* - Création d'un site web complexe sur Framer
#Web Dév.
Personnel
Client
Projet Fictif
2024
1 mois.
Dans le cadre de ma certification Framer auprès de Flux Academy, j’ai réalisé un site web avancé pour une entreprise fictive, Barc*, proposant un abonnement à un appareil capable de traduire les aboiements de chiens. L’objectif était d’explorer un maximum de fonctionnalités complexes et configurables, permettant une personnalisation facile pour les futurs utilisateurs.
Le site intègre plusieurs sections et effets dynamiques, notamment :
✅ Hero section : vidéo de fond activable, texte illustré et Call-To-Action ouvrant un overlay d’inscription.
✅ Présentation du produit : superposition d’éléments avec une modélisation 3D interactive.
✅ Fonctionnalités : animations avancées et effet de défilement dynamique.
✅ Grille Bento : effets de scroll et animations visuelles.
✅ Spécifications : changement de couleur du fond au scroll.
✅ Témoignages & Tarification : affichage dynamique des prix (mensuel/annuel).
✅ FAQ & Blog : animations d’apparition et CMS avancé pour gérer articles, annonces et catégories.
✅ Navigation complexe : transformation au scroll, barre de recherche, traduction (landing page en espagnol) et barre d’annonces.
✅ Pages additionnelles : 404, conditions d’utilisation et politique de confidentialité.
Ce projet m’a permis d’exploiter toute la puissance de Framer, y compris les Code Overrides pour des effets et fonctionnalités avancés. L’objectif : offrir un site fluide, interactif et personnalisable, facilitant la gestion par le client.
🔗 Curieux de voir le résultat ? Retrouvez le site en cliquant sur le bouton ci-dessous ! 👇
Une capture d'écran représentant la section Hero de la page d'accueil.
Une capture d'écran représentant la section Hero de la page d'accueil après avoir activé le bouton "Company" de la barre de navigation.
Une capture d'écran représentant la section Hero de la page d'accueil après avoir activé le bouton "Blog" la barre de navigation.
Un aperçu de la section "specs"
Un aperçu général de la grille bento.
Un aperçu du pied-de-page
Un aperçu de l'overlay pour s'inscrire à la newsletter.
Un aperçu de la section "pricing"
Un aperçu de la page "Dogs" du Blog.
Un aperçu de l'illustration "sticky" accompagnant les différents articles du blog de la page "All".
