Architecture du projet et points d'extension

Simplefolio repose sur une structure modulaire où chaque fonctionnalité est isolée dans des fichiers dédiés. Les composants principaux sont :

• Point d'entrée : app/main.js - Ordonnanceur des modules
• Configuration visuelle : app/config/animation.js - Paramètres des effets de révélation
• Feuille de style : assets/main.scss - Fondations stylistiques

Adaptation sans modification de code

Ajustement des animations de défilement

Le fichier app/config/animation.js centralise tous les effets de révélation au scroll. Il contient deux objets principaux :

• baseSettings : Propriétés par défaut (durée, distance, courbe d'accélération)
• animatedItems : Mapping des éléments et leurs comportements spécifiques

Pour modifier le timing des cartes de projet, éditez l'entrée correspondante :p>

{
  selector: ".card-description",
  properties: {
    duration: 800,
    direction: window.matchMedia("(min-width: 769px)").matches ? "right" : "top",
    delay: 300
  }
}

Personnalisation thématique

Les variables Sass dans assets/styles/_config/_colors.scss contrôlent la palette. Modifiez les valeurss de ces tokens pour changer l'apparence globale :

$primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$spacing-unit: 1.5rem;

Développement de fonctionnalités avancées

Ajout d'effets interactifs personnalisés

Le système d'animation d'inclinaison existant (app/modules/tiltEffect.js) peut servir de modèle. Créez un nouveau module :

1. Établissez app/modules/votreEffet.js
2. Exportez une fonction d'initialisation
3. Importez-la dans app/main.js et appelez-la au chargement

Extension des sections de page

Pour insérer un nouveau bloc de contenu :

1. Ajoutez une balise <section id="votre-section"> dans public/index.html
2. Créez assets/styles/sections/_votreSection.scss
3. Ajoutez la configuration d'animation dans app/config/animation.js

Optimisations pratiques

• Ressources visuelles : Remplacez les images de démonstration dans public/images/ par vos propres captures et photographies
• Breakpoints responsive : Utilisez les mixins dans assets/styles/_tools/_breakpoints.scss pour des media queries cohérentes
• Performance : Réduisez la durée des animations dans baseSettings pour améliorer le temps de première interaction

Mise en route

git clone https://github.com/exemple/simplefolio.git
cd simplefolio
npm install
npm run dev

Le serveur de développement démarre sur http://localhost:3000. Les modifications dans assets/styles/ et app/ déclenchent un rechargement automatique.