Init: projet by Cursor
This commit is contained in:
Michael
180
README.md
Normal file
180
README.md
Normal file
@@ -0,0 +1,180 @@
|
||||
# Initial D Arcade Stage - Site de Classement
|
||||
|
||||
Un site web moderne et responsive reproduisant l'interface du site officiel Initial D Arcade Stage, créé avec React et TypeScript.
|
||||
|
||||
## 🏁 Fonctionnalités
|
||||
|
||||
- **Page d'accueil** : Présentation du jeu avec design inspiré de l'univers Initial D
|
||||
- **Page de classement** : Tableau des meilleurs temps avec filtres et onglets
|
||||
- **Design responsive** : Interface adaptée à tous les écrans
|
||||
- **Animations fluides** : Utilisation de Framer Motion pour les transitions
|
||||
- **Thème sombre** : Interface moderne avec couleurs d'Initial D
|
||||
- **Navigation intuitive** : Menu de navigation avec indicateurs visuels
|
||||
|
||||
## 🚗 Technologies Utilisées
|
||||
|
||||
- **React 18** : Framework JavaScript pour l'interface utilisateur
|
||||
- **TypeScript** : Typage statique pour une meilleure maintenabilité
|
||||
- **Material-UI (MUI)** : Composants UI modernes et personnalisables
|
||||
- **Framer Motion** : Animations et transitions fluides
|
||||
- **React Router** : Navigation entre les pages
|
||||
- **Emotion** : Styling CSS-in-JS
|
||||
|
||||
## 🎨 Design
|
||||
|
||||
Le site reprend l'esthétique du site officiel Initial D avec :
|
||||
- Couleurs principales : Orange (#ff6b35) et noir (#0a0a0a)
|
||||
- Police Orbitron pour les titres
|
||||
- Effets de lueur et animations
|
||||
- Interface sombre et moderne
|
||||
- Icônes Material Design
|
||||
|
||||
## 📱 Pages
|
||||
|
||||
### Page d'Accueil
|
||||
- Hero section avec titre animé
|
||||
- Section des caractéristiques du jeu
|
||||
- Call-to-action vers le classement
|
||||
- Design responsive avec animations
|
||||
|
||||
### Page de Classement
|
||||
- Tableau des meilleurs temps
|
||||
- Filtres par circuit
|
||||
- Onglets pour différents types de classement
|
||||
- Statistiques en temps réel
|
||||
- Avatars et badges pour les joueurs
|
||||
|
||||
## 🚀 Installation et Démarrage
|
||||
|
||||
1. **Cloner le projet**
|
||||
```bash
|
||||
git clone [url-du-repo]
|
||||
cd initiald-ranking
|
||||
```
|
||||
|
||||
2. **Installer les dépendances**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Démarrer le serveur de développement**
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
4. **Ouvrir dans le navigateur**
|
||||
```
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
## 📦 Scripts Disponibles
|
||||
|
||||
- `npm start` : Démarre le serveur de développement
|
||||
- `npm run build` : Construit l'application pour la production
|
||||
- `npm test` : Lance les tests
|
||||
- `npm run eject` : Éjecte la configuration (irréversible)
|
||||
|
||||
## 🏗️ Structure du Projet
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Composants réutilisables
|
||||
│ └── Header.tsx # En-tête avec navigation
|
||||
├── pages/ # Pages de l'application
|
||||
│ ├── Home.tsx # Page d'accueil
|
||||
│ └── Ranking.tsx # Page de classement
|
||||
├── types/ # Définitions TypeScript
|
||||
│ └── index.ts # Interfaces et types
|
||||
├── assets/ # Ressources statiques
|
||||
├── App.tsx # Composant principal
|
||||
├── index.tsx # Point d'entrée
|
||||
└── index.css # Styles globaux
|
||||
```
|
||||
|
||||
## 🎯 Fonctionnalités Principales
|
||||
|
||||
### Navigation
|
||||
- Menu de navigation responsive
|
||||
- Indicateurs visuels pour la page active
|
||||
- Logo animé avec icône de voiture
|
||||
|
||||
### Classement
|
||||
- Données simulées de joueurs Initial D
|
||||
- Filtrage par circuit
|
||||
- Onglets pour différents vues
|
||||
- Statistiques en temps réel
|
||||
|
||||
### Design
|
||||
- Thème sombre cohérent
|
||||
- Animations fluides
|
||||
- Effets de survol
|
||||
- Typographie optimisée
|
||||
|
||||
## 🎨 Personnalisation
|
||||
|
||||
### Couleurs
|
||||
Les couleurs principales peuvent être modifiées dans :
|
||||
- `src/App.tsx` : Thème Material-UI
|
||||
- `src/App.css` : Variables CSS personnalisées
|
||||
|
||||
### Données
|
||||
Les données de classement sont simulées dans :
|
||||
- `src/pages/Ranking.tsx` : Tableau `rankingData`
|
||||
|
||||
### Styles
|
||||
Les styles peuvent être personnalisés dans :
|
||||
- `src/App.css` : Styles globaux
|
||||
- `src/index.css` : Reset CSS et styles de base
|
||||
|
||||
## 📱 Responsive Design
|
||||
|
||||
Le site est entièrement responsive avec :
|
||||
- Breakpoints Material-UI
|
||||
- Grille CSS adaptative
|
||||
- Typographie responsive
|
||||
- Navigation mobile optimisée
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Variables d'Environnement
|
||||
Créer un fichier `.env` pour les variables d'environnement :
|
||||
```
|
||||
REACT_APP_API_URL=your-api-url
|
||||
REACT_APP_VERSION=1.0.0
|
||||
```
|
||||
|
||||
### Build de Production
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 🚀 Déploiement
|
||||
|
||||
Le projet peut être déployé sur :
|
||||
- **Netlify** : Drag & drop du dossier `build`
|
||||
- **Vercel** : Connexion GitHub automatique
|
||||
- **GitHub Pages** : Utilisation de `gh-pages`
|
||||
- **Firebase Hosting** : Configuration Firebase
|
||||
|
||||
## 📄 Licence
|
||||
|
||||
Ce projet est créé à des fins éducatives et de démonstration. Initial D est une propriété de SEGA.
|
||||
|
||||
## 🤝 Contribution
|
||||
|
||||
Les contributions sont les bienvenues ! N'hésitez pas à :
|
||||
1. Fork le projet
|
||||
2. Créer une branche feature
|
||||
3. Commiter vos changements
|
||||
4. Pousser vers la branche
|
||||
5. Ouvrir une Pull Request
|
||||
|
||||
## 📞 Support
|
||||
|
||||
Pour toute question ou problème :
|
||||
- Ouvrir une issue sur GitHub
|
||||
- Contacter l'équipe de développement
|
||||
|
||||
---
|
||||
|
||||
**Initial D Arcade Stage** - Reproduit avec ❤️ en React
|
||||
Reference in New Issue
Block a user