WFB Corp
Site vitrine dark — animations & MVC PHP natif
Exercice de formation centré sur les animations avancées (Slider Revolution, parallax, CSS spotlight cards) et l'architecture MVC PHP codée de zéro.
Contexte
Exercice de formation — UIMM
Année
2023
Niveau
BAC+2 Développeur Web
Type
Projet individuel
Stack
PHP natif / MySQL / Docker
Focus
Animations CSS & JS avancées
Un exo rendu plus complexe que prévu
WFB Corp est un exercice de formation UIMM : créer un site vitrine d'agence web avec gestion de contenu dynamique. Simple en apparence, l'exercice est devenu un vrai terrain d'exploration.
Le défi technique principal : intégrer Slider Revolution 5 — un plugin jQuery de carrousel professionnel avec parallax, particules et animations en couches. Sa configuration XML est dense et son rendu est spectaculaire.
En parallèle, j'ai codé une architecture MVC complète en PHP natif : routing par query string, controllers, models PDO, vues PHP — sans aucun framework.
Le bonus : des cartes avec effet spotlight CSS — un gradient radial qui suit la position de la souris en temps réel via custom properties CSS.
$ git clone github.com/body08120/wfb-corp_exo_uimm
$ docker compose up -d
⏳ Démarrage MySQL + PHP-Apache...
✅ Site disponible sur localhost:8000
# Routing
index.php?action=articles
index.php?action=realisations
index.php?admin=administration
Ce que le projet couvre
Slider Revolution + Parallax
Hero fullscreen avec Slider Revolution 5 : transitions, effets Ken Burns, parallax souris et particules animées en arrière-plan.
Cards CSS spotlight effect
Effet spotlight de lumière suivant la souris en temps réel via CSS custom properties (--mouse-x / --mouse-y) et radial-gradient.
Filtres dynamiques JS
Onglets de filtrage par catégorie (articles et réalisations) avec affichage/masquage de sections sans rechargement.
Architecture MVC PHP natif
Pattern Model-View-Controller entièrement codé à la main : routing via index.php, controllers, models PDO et vues PHP.
Relations BDD & PDO
Articles liés à des catégories et images (table séparée), projets liés à des catégories. Requêtes JOIN préparées avec PDO.
Stack Docker
Environnement reproductible Docker Compose (PHP-Apache + MySQL 8). SQL de seed automatiquement injecté au démarrage.
Technologies utilisées
PHP 8.2
Backend
MySQL 8.0
Base de données
Apache 2.4
Serveur
Tailwind CSS CDN
Frontend
Slider Revolution 5
Animations
Font Awesome 6
Icônes
jQuery
Frontend
Docker
DevOps
Architecture MVC
index.php
└── routing par query string
src/controller/
├── homeController.php
├── adminController.php
└── formController.php
src/model/
└── Connect.php (PDO singleton)
view/
accueil · articles · realisations
└── includes/ (navbar · footer)
L'effet spotlight CSS — comment ça marche
L'effet de lumière qui suit la souris sur les cartes utilise uniquement du CSS natif et quelques lignes de JS.
cards.css
.card::before {
background: radial-gradient(
800px circle at
var(--mouse-x) var(--mouse-y),
rgba(255,255,255,0.06),
transparent 40%
);
}
cards.js
cardsElement.onmousemove = e => {
card.style.setProperty(
"--mouse-x", `${x}px`
);
}
L'événement mousemove calcule la position X/Y de la souris relative à chaque carte
Ces valeurs sont injectées en CSS custom properties (--mouse-x, --mouse-y) sur l'élément
Le pseudo-élément ::before applique un radial-gradient centré sur ces coordonnées
Résultat : une lumière qui suit la souris sur chaque carte, sans canvas ni WebGL
L'interface en images
Thème dark — rose & grenat
Ce que ce projet m'a appris
Un exo simple qui est devenu une belle exploration technique.
✅ Points forts
- •Maîtrise de Slider Revolution (parallax, particules, transitions)
- •Effet spotlight CSS pur — custom properties en temps réel
- •Architecture MVC PHP from scratch sans framework
- •Requêtes PDO préparées avec INNER JOIN multiples
- •Filtres JS par catégorie sans rechargement
- •Stack Docker reproductible avec seed SQL automatique
⚠️ Améliorations identifiées
- •Slider Revolution nécessite jQuery — dépendance lourde
- •Ajouter authentification et espace admin CRUD
- •Responsive mobile à compléter (carrousel surtout)
- •Séparation logique métier / vues à renforcer
- •Passer les images en WebP pour les performances
- •Migrer vers un framework (Laravel, Symfony) pour évoluer