Projet démonstratif
Conspectus Technologie
Démonstration de refonte pour une entreprise de sécurité électronique : un site vitrine statique, sombre et technique, dont le premier écran montre un bâtiment sécurisé en 3D, et une page claire par solution.
- Statut
- Projet démonstratif
- Secteur
- Sécurité électronique — vidéosurveillance, alarme, contrôle d'accès
- Année
- 2026
- En ligne
- conspectus-demo.vercel.app
Projet démonstratif. Concept démonstratif indépendant — non affilié à l'entreprise. Maquette de présentation conçue par Roman Gomes, sans commande ni partenariat : L'entreprise Conspectus Technologie n'est pas présentée ici comme une référence client. Son site actuel n'a été ni modifié ni utilisé.
Fig. A — Bureau, 1440 × 900Fig. B — Mobile, 390 × 844
01Point de départ
Le problème
La sécurité électronique est un métier technique, difficile à rendre lisible : vidéosurveillance, détection d'intrusion, contrôle d'accès, interphonie, incendie… Pour un visiteur, tout se ressemble, et l'offre se perd vite dans les listes d'équipements.
02Cap
L’objectif
Rendre l'offre compréhensible en un écran, donner une page claire à chaque solution et à chaque public, professionnels comme particuliers, et garder un site très rapide malgré la 3D.
03Ce que j’ai construit
La solution
Un « bâtiment sécurisé » en 3D procédurale : la même géométrie sert l'illustration SVG rendue côté serveur et la scène three.js, chargée seulement après une première interaction.
Des replis prévus : pas de WebGL en cas de mouvement réduit, d'économie de données, d'appareil modeste ou de rendu logiciel — l'illustration SVG reste affichée.
Onze pages solutions, des pages par public, une méthode en sept étapes, la maintenance, les zones d'intervention et une FAQ.
Des pages 100 % statiques, des animations en CSS et IntersectionObserver, des icônes et illustrations SVG dessinées pour le projet : aucune autre dépendance d'exécution que three.js.
Des données structurées (LocalBusiness, Service, fil d'Ariane, FAQ) et une source unique pour les informations de l'entreprise, chacune avec un statut « validée » ou « à valider ».
Des polices préchargées avec un repli calibré, pour éviter tout décalage de mise en page.
04Fiche technique
Technologies
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- three.js
- SVG
- JSON-LD
05Ce qui est livré
Le résultat
- Une démonstration en ligne, non indexée, avec un formulaire sans envoi et aucun cookie.
- Un site vitrine complet : accueil, onze solutions, pages par public, méthode, maintenance, zones, FAQ, contact et pages légales.
- Une scène 3D et une illustration SVG qui partagent la même géométrie, avec surveillance de la fluidité et retour automatique à l'illustration si besoin.
- Un garde-fou de production : le build échoue tant qu'une donnée critique n'est pas validée.
- Une documentation de validation et de mise en production livrée avec le code.
Aucun chiffre d’audience ou de ventes ici : une démonstration n’en produit pas. Ce qui compte se vérifie en ouvrant le site.
Voir la démonstration en ligne (nouvel onglet)
Votre projet
Votre projet mérite le même soin.
Décrivez votre activité et votre objectif en quelques lignes. Je reviens vers vous avec une première lecture de votre projet et une proposition claire.