Recherche instantanée
Autocomplétion avec résultats groupés, AbortController, navigation clavier, fermeture échappement et surlignage sécurisé.
Projet établissement scolaire
Site Web du Lycée Paul Lapie
Réalisation et analyse d'un site dynamique complet pour le lycée Paul Lapie : CMS PHP sur mesure, base MySQL, administration intégrée, renderers de contenus, optimisation WebP, SEO, sécurité CSP et interactions JavaScript soignées.
Expérience front-end
Des interactions utiles, légères et pensées pour améliorer la navigation du site.
Carrousels responsives
Sliders pour les formations, actualités ou témoignages avec boutons, dots et recalcul au redimensionnement.
Smart header & mobile
Header qui se rétracte au scroll, menu mobile avec verrouillage de l'overflow et bouton de retour en haut.
Animations maîtrisées
IntersectionObserver, requestAnimationFrame, effet parallax léger et toasts temporaires pour les retours utilisateur.
Architecture CMS sur mesure
Un socle PHP modulaire pensé pour faire vivre le site sans modifier le code à chaque contenu.
PHP modulaire, MySQL et contenus administrables
Le site repose sur une architecture PHP organisée autour de vues, d'includes communs, de renderers spécialisés et d'une base MySQL. Les contenus de l'accueil, des articles, des salons, de la galerie et des formations peuvent être alimentés dynamiquement tout en gardant un rendu maîtrisé.
Includes partagés
Header, footer, SEO, navigation, scripts versionnés et composants communs centralisés.
Base MySQL
Articles, images de galerie, événements, sections personnalisées et formations dynamiques.
Renderers Editor.js
Transformation de blocs JSON en HTML sémantique et sécurisé pour les articles et salons.
Administration
Edition in situ des zones de contenu, images et sections via une interface intégrée.
Sécurité & Performance
Un site institutionnel pensé pour être robuste, rapide et propre côté navigateur.
Sécurité appliquée au rendu dynamique
Le projet combine CSP avec nonce, sanitisation systématique, validation des vidéos YouTube, iframes nocookie et rendus contrôlés pour limiter les risques XSS tout en conservant une administration flexible.
Scripts et styles autorisés uniquement via un nonce généré côté serveur.
Balises autorisées, liens filtrés, alt text et ID YouTube vérifiés par expression régulière.
Conversion PNG/JPEG/PDF en WebP, redimensionnement et suppression des originaux inutiles.
Métadonnées, Open Graph, JSON-LD, structure sémantique et scripts versionnés pour le cache.
Chaîne de publication
Du contenu administré jusqu'au rendu public, chaque étape reste cadrée.
Saisie en administration
Les administrateurs modifient les sections, articles, images ou événements depuis l'interface du site.
Stockage structuré
Les données sont conservées en base MySQL ou en JSON Editor.js selon la nature du contenu.
Rendu sécurisé
Les renderers convertissent les blocs en titres, paragraphes, listes, citations, cartes, bannières et médias accessibles.
Optimisation côté serveur
Les images téléversées sont traitées, converties, renommées et servies dans un format plus léger.
Publication front-end
Les pages affichent actualités, formations, salons, galerie et CTA avec une expérience responsive et animée avec sobriété.
Stack Technique
Technologies et choix techniques utilisés pour le site du lycée.
PHP
Assemblage serveur, includes, renderers, sessions et logique de pages dynamiques.
MySQL
Base de données pour les articles, événements, images, sections et formations.
JavaScript
Recherche live, sliders, smart header, menu mobile, toasts et animations au scroll.
Editor.js
Blocs de contenu transformés en HTML contrôlé par des renderers PHP dédiés.
GD & Imagick
Conversion WebP, traitement des PDF, redimensionnement et optimisation des images.
CSP & Sécurité
Nonce, filtrage HTML, validation des entrées, YouTube nocookie et iframes contrôlées.
Points clés du projet
Ce que ce site démontre sur une réalisation web complète en contexte réel.
Projet de stage complet
Réalisation d'un site institutionnel concret avec contenus riches, administration, SEO et contraintes de performance.
Base maintenable
Architecture modulaire et renderers indépendants pour faire évoluer les pages sans dupliquer la logique.
Performance mobile
Images allégées, scripts différés, lazy loading, animations observées et cache busting automatique.
