
Catégorie
Formation
Technologie
Nuxt 3
EcoLum
Site vitrine conçu pour présenter EcoLum, un système intelligent de gestion d'éclairage LED développé en école d'ingénieurs.


Le contexte
EcoLum est un système embarqué de gestion intelligente de l'éclairage LED, conçu et développé dans le cadre d'un projet de fin d'études en école d'ingénieurs. Le dispositif repose sur un microcontrôleur PIC16F877A programmé en assembleur, avec deux modes de fonctionnement — automatique (capteurs LDR et PIR) et manuel (potentiomètre) — ainsi qu'une maquette physique réalisée par impression 3D et découpe laser.
À l'issue du développement technique, l'équipe souhaitait disposer d'une vitrine en ligne capable de restituer la richesse du projet : documenter le travail accompli, valoriser la maquette physique et rendre le système compréhensible pour un public varié, du jury académique aux visiteurs extérieurs.
Le défi
Traduire un projet technique dense — firmware, électronique, maquette physique — en une expérience web fluide et accessible. L'enjeu était de donner à voir la complexité du système sans noyer le visiteur, et de restituer à l'écran le soin apporté à l'objet réel.
Les choix technologiques
Le site est construit avec Vue 3 (Composition API) et Vue Router 4, bundlé via Vite. Une stack légère, sans surcouche, qui permettait d'aller vite sans sacrifier la maintenabilité.
Le CSS est entièrement sur-mesuae — aucun framework UI — ce qui a permis de construire une identité visuelle cohérente avec l'univers industriel du projet, en s'appuyant sur le duo typographique Outfit / JetBrains Mono (Google Fonts).
Le choix le plus structurant a été l'intégration de la maquette 3D :
- Maquette 3D interactive — la maquette physique du projet est intégrée au navigateur via TresJS (
@tresjs/core+@tresjs/cientos), le wrapper Vue de Three.js. Le visiteur peut interagir directement avec le modèle 3D de la salle de classe équipée du système EcoLum, sans quitter le site.
L'approche SEO
Le projet ne nécessitait pas une stratégie de référencement élaborée. Le travail a porté sur les fondations : balises <title> et <meta description> renseignées, Open Graph et Twitter Cards configurés, attribut canonical défini, robots: index, follow en place. Des bases solides qui suffisent au regard des objectifs réels du site.
Vous voulez un site pensé pour valoriser votre projet ? Demandez un devis gratuit.



