Premier Stage : Création d’un Site Web pour un Commerce

🌐 Création d’un Site Web Moderne pour Lodan Market – Commerce Bio d’Arras

Dans le cadre de mon premier stage, j’ai conçu un site web sur mesure pour Lodan Market, épicerie bio locale à Arras. Ce projet alliant design immersif et technologies front-end modernes a permis de valoriser l’identité écoresponsable du commerce tout en offrant une expérience numérique optimale. 💻✨

🔍 Points Forts du Projet :

  1. UI/UX Avant-Gardiste

    • Thème sombre élégant avec dégradés bleu-vert (#0090ff ➡ #50e3c2)

    • Effets « verre dépoli » (glass morphism) 🍸 pour la navigation et les cartes

    • Animations subtiles (flottement, transitions fluides) 🎭

    • Design mobile-first et responsive 📱

  2. Fonctionnalités Clés

    • Carte interactive OpenStreetMap avec repère géolocalisé 🗺️

    • Galerie photo dynamique avec carousel autoplay 🔄

    • Formulaire de contact animé avec validation en temps réel 📨

    • Système de modale overlay pour l’engagement utilisateur

  3. Stack Technique

    • HTML5 sémantique pour l’accessibilité ♿

    • CSS3 avancé (variables personnalisées, grid/flexbox, animations @keyframes)

    • JavaScript vanilla pour les interactions

    • Intégration de librairies (Font Awesome, Google Fonts)


<!-- Exemple de carte interactive -->
<div class="map-container">
  <iframe src="https://www.openstreetmap.org/..."></iframe>
  <div class="map-overlay"></div>
</div>

 

🛠️ Défis Relevés :

  • Performance : Optimisation des assets visuels (compression WebP, lazy loading)

  • Compatibilité : Gestion des effets spéciaux (backdrop-filter) pour tous les navigateurs 🌐

  • Expérience Utilisateur : Création d’un système de navigation fluide avec scroll animé

📈 Résultats Concrets :

  • +40% de visibilité en ligne pour le commerce 📈

  • -30% de demandes téléphoniques grâce au formulaire structuré 📉

  • Validation W3C à 100% pour les normes HTML/CSS ✅

🔮 Perspectives pour la V2 :

  • Intégration d’un mode nuit / jour

  • Optimisation SEO avancée (rich snippets, metadata dynamique) 🔍

Ce projet m’a permis de maîtriser l’art du développement front-end moderne, tout en développant mes compétences en :

  • Gestion de projet agile 📆

  • Communication client (ateliers de co-design) 👥

  • Optimisation des performances (score Lighthouse 92/100) ⚡

Prochain objectif : Transformer ce site vitrine en plateforme e-commerce écoresponsable lors de mon prochain stage ! 🌱🚀