118 lines
3.9 KiB
Markdown
118 lines
3.9 KiB
Markdown
|
# Notes sur le Projet Sirius en Guadeloupe
|
||
|
|
|
||
|
|
## 📋 Vue d'ensemble
|
||
|
|
|
||
|
|
J'ai créé une application web one-page avec Svelte qui combine les 3 pages HTML que vous aviez et enrichit le contenu avec les informations du PDF. L'application est moderne, mobile-first, avec un design panafricain/caribéen.
|
||
|
|
|
||
|
|
## 🏗️ Structure du projet
|
||
|
|
|
||
|
|
```
|
||
|
|
/home/sucupira/dev/Gwada-Sirius/
|
||
|
|
├── src/
|
||
|
|
│ ├── App.svelte # Composant principal
|
||
|
|
│ ├── app.css # Styles globaux avec patterns africains
|
||
|
|
│ ├── main.js # Point d'entrée
|
||
|
|
│ ├── components/ # Composants Svelte
|
||
|
|
│ │ ├── Navigation.svelte # Menu responsive
|
||
|
|
│ │ ├── Hero.svelte # Section héro avec animation d'étoiles
|
||
|
|
│ │ ├── About.svelte # Introduction à Sirius
|
||
|
|
│ │ ├── Predictions.svelte # Calculateur interactif
|
||
|
|
│ │ ├── Science.svelte # Explication scientifique
|
||
|
|
│ │ ├── Culture.svelte # Héritage culturel
|
||
|
|
│ │ ├── Observatory.svelte # Guide d'observation
|
||
|
|
│ │ ├── Globe.svelte # Visualisation globe (Canvas 2D)
|
||
|
|
│ │ └── Footer.svelte # Pied de page
|
||
|
|
│ └── data/
|
||
|
|
│ └── predictions.js # Données des prédictions
|
||
|
|
├── package.json
|
||
|
|
├── vite.config.js
|
||
|
|
├── index.html
|
||
|
|
├── README.md
|
||
|
|
├── .gitignore
|
||
|
|
└── start.sh # Script de démarrage rapide
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🎨 Design et fonctionnalités
|
||
|
|
|
||
|
|
### Palette de couleurs panafricaine :
|
||
|
|
- **Or (#FFD700)** : Couleur principale, représente Sirius et le soleil
|
||
|
|
- **Rouge profond (#DC143C)** : Accent
|
||
|
|
- **Vert forêt (#228B22)** : Nature
|
||
|
|
- **Bleu nuit (#1a1a2e)** : Fond, ciel nocturne
|
||
|
|
|
||
|
|
### Patterns africains intégrés :
|
||
|
|
- **Kente** : Motif géométrique en diagonale
|
||
|
|
- **Bogolan** : Cercles et points
|
||
|
|
- **Adinkra** : Motifs symboliques
|
||
|
|
|
||
|
|
### Sections principales :
|
||
|
|
1. **Hero** : Animation d'étoiles interactive avec effet parallaxe
|
||
|
|
2. **About** : Introduction avec cartes d'information
|
||
|
|
3. **Predictions** : Calculateur interactif avec sélecteurs
|
||
|
|
4. **Science** : Tabs pour explorer la mécanique céleste
|
||
|
|
5. **Culture** : Timeline et cartes culturelles
|
||
|
|
6. **Observatory** : Guide pratique étape par étape
|
||
|
|
7. **Globe** : Visualisation 2D animée (plus léger que Three.js)
|
||
|
|
|
||
|
|
## 🚀 Pour démarrer
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd /home/sucupira/dev/Gwada-Sirius
|
||
|
|
./start.sh
|
||
|
|
```
|
||
|
|
|
||
|
|
Ou manuellement :
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📱 Responsive Design
|
||
|
|
|
||
|
|
- Mobile-first approach
|
||
|
|
- Menu hamburger pour mobile
|
||
|
|
- Grilles flexibles
|
||
|
|
- Tailles de police adaptatives avec clamp()
|
||
|
|
|
||
|
|
## ⚡ Performance
|
||
|
|
|
||
|
|
- Svelte compile en vanilla JS (pas de runtime)
|
||
|
|
- Canvas 2D au lieu de Three.js pour le globe
|
||
|
|
- Lazy loading des animations avec IntersectionObserver
|
||
|
|
- CSS optimisé avec variables custom properties
|
||
|
|
|
||
|
|
## 🔄 Améliorations possibles
|
||
|
|
|
||
|
|
1. **Ajouter un compte à rebours dynamique** jusqu'au 22 juillet
|
||
|
|
2. **Intégrer une API météo** pour les prévisions
|
||
|
|
3. **Ajouter des sons ambiants** africains/caribéens
|
||
|
|
4. **Mode sombre/clair** automatique selon l'heure
|
||
|
|
5. **PWA** pour installation mobile
|
||
|
|
6. **Partage social** avec meta tags optimisés
|
||
|
|
7. **Multilingue** (Français, Créole, Anglais)
|
||
|
|
8. **Animations GSAP** pour plus de fluidité
|
||
|
|
|
||
|
|
## 📦 Build pour production
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
# Les fichiers seront dans dist/
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🌐 Déploiement
|
||
|
|
|
||
|
|
Peut être déployé facilement sur :
|
||
|
|
- Netlify (drag & drop du dossier dist)
|
||
|
|
- Vercel
|
||
|
|
- GitHub Pages
|
||
|
|
- Surge.sh
|
||
|
|
|
||
|
|
## 💡 Points techniques importants
|
||
|
|
|
||
|
|
1. **Données astronomiques** : Toutes les prédictions sont stockées dans `src/data/predictions.js`
|
||
|
|
2. **Animations** : Utilisation de CSS animations et requestAnimationFrame
|
||
|
|
3. **État** : Gestion simple avec les stores Svelte (pas de store global pour l'instant)
|
||
|
|
4. **SEO** : Ajouter les meta tags appropriés dans index.html
|
||
|
|
|
||
|
|
Le projet est maintenant prêt et fonctionnel ! Vous pouvez le personnaliser selon vos besoins.
|