Un site web moderne pour le projet NowLight, développé avec Vue.js 3, Tailwind CSS et Vite.
- Node.js 18+
- npm ou yarn
# 1. Cloner le projet
git clone https://github.com/Kadzzzzz/nowlight-website.git
cd nowlight-website
# 2. Installer les dépendances
npm install
# 3. Démarrer le serveur de développement
npm run dev
Le site sera accessible sur http://localhost:5173
.
├── Dockerfile # Configuration Docker pour le déploiement
├── generate_project.py # Script de génération/setup du projet
├── index.html # Point d'entrée HTML principal
├── package.json # Dépendances et scripts npm
├── package-lock.json # Verrouillage des versions de dépendances
├── postcss.config.js # Configuration PostCSS pour Tailwind
├── public/ # Fichiers statiques publics
│ ├── favicon-modern-2.ico # Icône du site (version 2)
│ ├── favicon-modern.ico # Icône du site principale
│ ├── robots.txt # Instructions pour les robots d'indexation
│ └── sitemap.xml # Plan du site pour le SEO
├── README.md # Documentation du projet
├── src/ # Code source principal
│ ├── App.vue # Composant racine de l'application
│ ├── assets/ # Ressources statiques
│ │ └── images/ # Images du projet
│ │ ├── ambition-image.jpg # Image de la section ambition
│ │ ├── contact-campus*.jpg # Images du campus pour la section contact
│ │ ├── contact-image.* # Images de la section contact
│ │ ├── hero-background.* # Images de fond pour la section hero
│ │ ├── module-finalElectric-* # Images du module électronique final
│ │ ├── module-initialElectric-* # Images du module électronique initial
│ │ ├── module-initialMecanic-* # Images du module mécanique initial
│ │ └── module-optimizedMecanic-* # Images du module mécanique optimisé
│ ├── components/ # Composants Vue réutilisables
│ │ ├── common/ # Composants communs
│ │ │ ├── Footer.vue # Pied de page
│ │ │ ├── ModuleCard.vue # Carte d'affichage des modules
│ │ │ └── Navigation.vue # Barre de navigation
│ │ ├── modals/ # Composants modaux
│ │ │ └── ModuleModal.vue # Modal d'affichage des détails de module
│ │ └── sections/ # Sections de la page d'accueil
│ │ ├── AmbitionSection.vue # Section "Notre ambition"
│ │ ├── ConceptionSection.vue # Section "Conception" avec les modules
│ │ ├── ContactSection.vue # Section "Contact"
│ │ ├── EngagementsSection.vue # Section "Nos engagements"
│ │ └── HeroSection.vue # Section hero avec titre principal
│ ├── locales/ # Fichiers de traduction
│ │ ├── en.json # Traductions anglaises
│ │ └── fr.json # Traductions françaises
│ ├── main.js # Point d'entrée JavaScript principal
│ ├── stores/ # Stores Pinia pour la gestion d'état
│ │ └── language.js # Store pour la gestion des langues
│ ├── style.css # Styles CSS globaux et Tailwind imports
│ └── views/ # Vues/Pages principales
│ ├── Home.vue # Page d'accueil principale
│ └── LanguageSelection.vue # Page de sélection de langue
├── tailwind.config.js # Configuration Tailwind CSS
└── vite.config.js # Configuration du bundler Vite
- Vue.js 3 - Framework JavaScript réactif
- Vite - Build tool et serveur de développement
- Tailwind CSS - Framework CSS utilitaire
- Pinia - Gestion d'état pour Vue
- Vue Router - Routage côté client
- PostCSS - Traitement CSS
- Interface multilingue (FR/EN) avec sélection au démarrage
- Design responsive et moderne
- Navigation fluide avec scroll smooth
- Section Hero avec toggle mode éco/standard
- Section Ambition avec animations
- Section Conception avec modules cliquables et détaillés
- Section Engagements avec icônes animées
- Section Contact avec informations complètes
- Modales interactives pour afficher les détails des modules
- Support vidéos YouTube intégrées
- Galerie d'images avec navigation et zoom
- Footer complet avec liens sociaux (LinkedIn, GitHub)
- Animations et effets visuels modernes
- Palette de couleurs orange/noir moderne
- Effets de glassmorphism et backdrop-blur
- Animations CSS fluides
- Gradients et effets de lumière
- Design adaptatif selon les sections
- Micro-interactions sur hover
- Mobile First approach
- Breakpoints optimisés : mobile, tablet, desktop
- Navigation mobile avec menu hamburger
- Modales adaptées pour mobile
- Images et contenus adaptatifs
# Développement
npm run dev # Serveur de développement avec hot-reload
# Production
npm run build # Build optimisé pour production
npm run preview # Prévisualiser le build de production
# Docker
docker build -t nowlight-website .
docker run -p 80:80 nowlight-website
Les contenus des modules se trouvent dans les fichiers de traduction :
Pour le français : src/locales/fr.json
Pour l'anglais : src/locales/en.json
Structure dans le JSON :
{
"modules": {
"initialElectric": {
"title": "Électronique",
"description": "Description avec syntaxe markdown...",
"images": ["image1.jpg", "image2.png"]
}
}
}
Syntaxe supportée dans les descriptions :
- Titres :
## Mon Titre
ou### Sous-titre
- Gras :
**texte en gras**
- Listes :
• Point de liste
- Références d'images cliquables :
[Img:1, Txt:"Figure 1"]
- Liens :
***https://mon-lien.com***
- Saut de ligne :
\n\n
Placez vos images dans src/assets/images/
et référencez-les dans les fichiers JSON avec leur nom exact.
Éditez les fichiers :
src/components/sections/ContactSection.vue
src/components/common/Footer.vue
- Désactive les animations coûteuses
- Remplace les images par des placeholders
- Optimise les performances
- Navigation par images numérotées
- Références cliquables dans le texte
- Support vidéo YouTube intégré
- Zoom et navigation dans les galeries
- Commutation de langue en temps réel
- Persistance du choix de langue
- URLs et métadonnées adaptées
Projet d'étude - NowLight 2025