🎨 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

.component {
  padding: 20px;
  
  @include respond-to(md) {
    padding: 10px;
  }
  
  @include respond-above(xl) {
    padding: 40px;
  }
}

Composants réutilisables

.card {
  @include card(32px, $border-radius-large, medium);
}

.button {
  @include button-primary();
}

Système de couleurs

.element {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

Grilles responsive

.grid {
  @include grid-responsive(300px, 24px);
}

🎨 Thèmes

Le système de thèmes utilise les variables CSS pour permettre le basculement dynamique :

// 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

Modularité : Chaque composant a ses styles séparés
Réutilisabilité : Mixins pour éviter la duplication
Maintenabilité : Variables centralisées
Performance : Compilation optimisée avec Sass
Responsive : Système de breakpoints cohérent
Accessibilité : Mixins dédiés pour l'a11y
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.

npm run dev    # Compilation en mode développement
npm run build  # Compilation pour la production

3.5 KiB Raw Blame History