Framix
Landing page
Contexte
Création d’une landing page moderne et responsive visant à présenter un outil fictif de création de pages en no-code. Projet focalisé sur l’intégration pixel-perfect, la performance et l’accessibilité, en s’appuyant sur Astro (îlots React), TailwindCSS, animations légères (Framer Motion) et un design system cohérent. Architecture simple et maintenable, déploiement statique sur Vercel, sans backend applicatif.
Missions
L'intégration a débuté par la mise en place d'une architecture hybride sous Astro, permettant d'allier la légèreté du statique à l'interactivité des îlots React. J'ai défini un design system rigoureux (typographie, couleurs, radius) pour garantir une cohérence visuelle absolue sur l'ensemble des sections.
Le développement s'est concentré sur la création de composants UI réutilisables et performants. J'ai intégré des animations subtiles via Framer Motion pour fluidifier la navigation, tout en optimisant l'hydratation sélective des composants pour maintenir des temps de chargement records.
Enfin, j'ai assuré la robustesse du déploiement sur Vercel, en configurant les redirections, les pages d'erreur personnalisées et en validant l'accessibilité globale pour offrir une expérience inclusive et professionnelle.
Impact
La landing page finale est une vitrine technologique alliant rapidité et fluidité. Le respect strict des maquettes Figma, couplé à une architecture moderne (Astro), a permis d'obtenir un site extrêmement léger et responsive, offrant une expérience utilisateur sans friction.
Apprentissage
Ce projet a été une excellente opportunité pour maîtriser l'hydratation sélective et l'optimisation des performances web. J'ai renforcé ma capacité à créer des design systems maintenables et à intégrer des animations qui servent l'expérience utilisateur sans la surcharger.
Date
Août 2025
Technologies
Découvrir d'autres projets
Elecsud Energies
Conception et développement d'un site vitrine haut de gamme pour Elecsud Energies, artisan électricien à Marseille. Le site met en avant les services (dépannage, urgence, installation), la zone d'intervention et l'expertise de l'entreprise. L'accent a été mis sur le design, la fluidité des animations et l'optimisation pour la conversion (demandes de devis et appels urgents).
App Analyzer
API Next.js complète pour l’audit automatique de sites web (Puppeteer & Lighthouse) : analyse HTML, métriques de performance, scores SEO, accessibilité, extraction des titres, rapport JSON détaillé, gestion d’erreurs robuste et typage TypeScript strict.