feat: Initialize backend with Express and MySQL, and restructure frontend with new routing and language support.

2025-12-15 17:03:03 +01:00
parent 56897a0c2d
commit 6c11cf5213
54 changed files with 2000 additions and 174 deletions
--- a/frontend/src/styles/README.md
+++ b/frontend/src/styles/README.md
@@ -0,0 +1,137 @@
+# 🎨 Structure SCSS du Portfolio
+
+Ce projet utilise une architecture SCSS moderne et organisée pour maintenir un code CSS propre et facilement maintenable.
+
+## 📁 Structure des fichiers
+
+```
+src/styles/
+├── _variables.scss      # Variables globales (couleurs, espacements, breakpoints)
+├── _mixins.scss         # Mixins réutilisables
+├── _global.scss         # Styles globaux et reset CSS
+├── index.scss           # Point d'entrée principal
+├── main.scss            # Import des composants
+└── components/          # Styles spécifiques aux composants
+    ├── _header.scss
+    ├── _hero.scss
+    ├── _about.scss
+    ├── _skills.scss
+    ├── _projects.scss
+    ├── _education.scss
+    └── _contact.scss
+```
+
+## 🎯 Architecture
+
+### Variables (`_variables.scss`)
+- **Couleurs** : Système de couleurs pour les thèmes clair/sombre
+- **Espacements** : Variables responsive pour padding/margin
+- **Breakpoints** : Points de rupture pour le responsive design
+- **Typography** : Tailles de police fluides
+- **Z-index** : Système organisé pour la gestion des couches
+
+### Mixins (`_mixins.scss`)
+- **Responsive** : `@include respond-to(md)`, `@include respond-above(lg)`
+- **Composants** : `@include card()`, `@include button-primary()`
+- **Animations** : `@include transition()`, `@include fade-in-animation()`
+- **Layout** : `@include flex-center()`, `@include grid-responsive()`
+- **Accessibilité** : `@include focus-style()`, `@include visually-hidden()`
+
+### Styles globaux (`_global.scss`)
+- Reset CSS moderne
+- Styles de base pour les éléments HTML
+- Classes utilitaires
+- Animations keyframes
+- Gestion des thèmes (clair/sombre)
+
+## 🛠️ Utilisation
+
+### Responsive Design
+```scss
+.component {
+  padding: 20px;
+  
+  @include respond-to(md) {
+    padding: 10px;
+  }
+  
+  @include respond-above(xl) {
+    padding: 40px;
+  }
+}
+```
+
+### Composants réutilisables
+```scss
+.card {
+  @include card(32px, $border-radius-large, medium);
+}
+
+.button {
+  @include button-primary();
+}
+```
+
+### Système de couleurs
+```scss
+.element {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+```
+
+### Grilles responsive
+```scss
+.grid {
+  @include grid-responsive(300px, 24px);
+}
+```
+
+## 🎨 Thèmes
+
+Le système de thèmes utilise les variables CSS pour permettre le basculement dynamique :
+
+```scss
+// Variables définies dans _variables.scss
+$colors: (
+  light: (
+    bg-primary: #ffffff,
+    text-primary: #1e293b,
+    // ...
+  ),
+  dark: (
+    bg-primary: #0f172a,
+    text-primary: #f1f5f9,
+    // ...
+  )
+);
+```
+
+## 🚀 Avantages de cette architecture
+
+1. **Modularité** : Chaque composant a ses styles séparés
+2. **Réutilisabilité** : Mixins pour éviter la duplication
+3. **Maintenabilité** : Variables centralisées
+4. **Performance** : Compilation optimisée avec Sass
+5. **Responsive** : Système de breakpoints cohérent
+6. **Accessibilité** : Mixins dédiés pour l'a11y
+7. **Thèmes** : Support natif clair/sombre
+
+## 📝 Bonnes pratiques
+
+- Utiliser les variables pour toutes les valeurs récurrentes
+- Préférer les mixins aux classes utilitaires
+- Organiser les styles par composant
+- Utiliser les imports avec `@use` plutôt que `@import`
+- Suivre la convention de nommage BEM
+- Documenter les mixins complexes
+
+## 🔧 Compilation
+
+Les fichiers SCSS sont automatiquement compilés par Vite lors du développement et de la construction.
+
+```bash
+npm run dev    # Compilation en mode développement
+npm run build  # Compilation pour la production
+```