Projet familial — 2026

AEH Connect

Conception d'un site vitrine sur mesure (Bento Grid) pour un technicien spécialisé en fibre optique à Montpellier.

2025 Site Vitrine
HTML5 CSS3 Vanilla JS
AEH Connect — aperçu du site

Qu'est-ce qu'AEH Connect ?

AEH Connect est une entreprise spécialisée dans l'installation, le raccordement et le dépannage de la fibre optique pour les professionnels et particuliers, située dans la région de Montpellier.

Le prestataire souhaitait disposer d'une vitrine en ligne afin de présenter ses différentes prestations — allant de l'Audit au diagnostic par Réflectomètre (OTDR) — tout en rassurant sur son expertise. L'objectif de la création de ce site est de faciliter grandement la prise de contact d'urgence, en offrant un accès direct aux coordonnées avec une clarté optimale. J'ai eu la charge de concevoir la maquette et d'en assurer la retranscription web de A à Z.

Ce que le site propose

Design "Bento Grid"

Découpe des compétences (Installation, Maintenance et Zone d'intervention) sous la forme de cartes séparées, ce qui fluidifie la lecture pour l'utilisateur pressé.

Thème "Fibre" et Glassmorphism

Interface sombre résolument technologique. Les effets de reflets sur les cartes et les dégradés cyan/bleu néon rappellent les lasers et la fibre optique (L'Excellence Connectée).

Temps de chargement (Zéro perte)

Site conçu sur mesure sans le moindre framework CSS lourd, il assure à la page de se charger quasi instantanément et de garantir la meilleure note SEO.

Mobile-First & Appels Rapides

Un utilisateur victime d'une coupure en magasin a besoin d'interagir vite. Des boutons surdimensionnés au bas de l'écran lancent les appels immédiatement via téléphone.

Mon rôle sur le projet

Design et Expérience Utilisateur (UI/UX) : Conception de la charte graphique et de la structure architecturale (One-Pager fluide) garantissant de rassurer les clients particuliers ou entreprises.

Intégration HTML/CSS Modulaire : Développement de tout le responsive à base de CSS Grid (notamment grid-template-columns auto-adaptatifs) et utilisation de CSS natif avancé (Variables :root, clamp() pour la typographie).

Scripting Vanilla JS & Animations : Implémentation d'une navigation fixe floutée au défilement et intégration d'un "Intersection Observer" permettant de faire apparaître doucement les éléments (Micro-interactions de scroll).

Technologies utilisées

J'ai pour volonté sur ce genre de vitrine de contourner toute utilisation de builders au bénéfice d'un code totalement maitrisé, performant et 100% accessible.

HTML5 Sémantique CSS3 Vanilla CSS Grids & Flexbox Vanilla JS (Intersection)
Retour au Portfolio