From 1711f8f7236e4b786cf36cf57c52a70576847ba7 Mon Sep 17 00:00:00 2001 From: skycel Date: Fri, 23 Jan 2026 10:59:13 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feature:=20Pages=20projets=20compl?= =?UTF-8?q?=C3=A8tes=20+=20Optimisation=20images=20(Stories=203.4-3.6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Story 3.4 - Page projet individuelle: - Breadcrumb, header avec badges technologies - Boutons "Voir en ligne" / "GitHub" - Sections: Contexte, Solution, Travail d'équipe - Galerie screenshots, sidebar durée - Navigation retour + CTA contact Story 3.5 - Projets secondaires: - Section "Autres projets" sur /projets - Template project-card-compact.php - Format liste avec lien externe direct Story 3.6 - Optimisation images: - Fonction projectImage() avec WebP + fallback JPG - Dimensions explicites (400x225, 800x450, 1200x675) - Lazy loading configurable Co-Authored-By: Claude Opus 4.5 --- includes/functions.php | 49 +++++++++ pages/project-single.php | 168 ++++++++++++++++++++++++++--- pages/projects.php | 18 +++- templates/project-card-compact.php | 57 ++++++++++ templates/project-card.php | 17 ++- 5 files changed, 287 insertions(+), 22 deletions(-) create mode 100644 templates/project-card-compact.php diff --git a/includes/functions.php b/includes/functions.php index 708a174..ae9b913 100644 --- a/includes/functions.php +++ b/includes/functions.php @@ -92,3 +92,52 @@ function getAllTechnologies(): array sort($technologies); return $technologies; } + +/** + * Génère le HTML pour une image projet optimisée + * Utilise pour WebP avec fallback JPG + * + * @param string $filename Nom du fichier image (ex: project-thumb.webp) + * @param string $alt Texte alternatif + * @param int $width Largeur en pixels + * @param int $height Hauteur en pixels + * @param bool $lazy Activer le lazy loading (défaut: true) + * @param string $class Classes CSS additionnelles + * @return string HTML de l'image + */ +function projectImage(string $filename, string $alt, int $width, int $height, bool $lazy = true, string $class = ''): string +{ + $alt = htmlspecialchars($alt, ENT_QUOTES, 'UTF-8'); + $class = htmlspecialchars($class, ENT_QUOTES, 'UTF-8'); + $lazyAttr = $lazy ? 'loading="lazy"' : ''; + + // Détermine les chemins WebP et fallback + $basePath = '/assets/img/projects/'; + $webpFile = $filename; + + // Si le fichier n'est pas .webp, on essaie de trouver la version .webp + if (!str_ends_with($filename, '.webp')) { + $webpFile = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $filename); + } + + // Fallback: remplace .webp par .jpg + $fallbackFile = str_replace('.webp', '.jpg', $webpFile); + + // Image par défaut si fichier manquant + $defaultImage = $basePath . 'default-project.svg'; + + return << + + {$alt} + +HTML; +} diff --git a/pages/project-single.php b/pages/project-single.php index 72d0845..cdf2029 100644 --- a/pages/project-single.php +++ b/pages/project-single.php @@ -1,9 +1,17 @@
-
+
-
-

-

- -

+ + + + +
+

+ +

+ + +
+ + + +
+ + +
+ + + Voir le projet en ligne + + + + + + + + + + + + Voir sur GitHub + + + + + Projet non disponible en ligne + +
+
+ + + +
+ +
+ + + +
+ +
+ + +
+

Contexte

+

+ +

+
+ + + + +
+

Solution Technique

+

+ +

+
+ + + + +
+

Travail d'Équipe

+

+ +

+
+ + + + +
+

Captures d'écran

+
+ +
+ +
+ +
+
+ +
+ + +
-

- Page en construction - Story 3.4 -

+ +
-
+
diff --git a/pages/projects.php b/pages/projects.php index dc30794..5caa272 100644 --- a/pages/projects.php +++ b/pages/projects.php @@ -8,6 +8,7 @@ $pageDescription = 'Découvrez mes réalisations web : sites vitrines, e-commerc $currentPage = 'projets'; $featuredProjects = getProjectsByCategory('vedette'); +$secondaryProjects = getProjectsByCategory('secondaire'); include_template('header', compact('pageTitle', 'pageDescription')); include_template('navbar', compact('currentPage')); @@ -39,7 +40,22 @@ include_template('navbar', compact('currentPage')); - + + +
+
+
+ +

Autres projets

+ +
+ + $project]); ?> + +
+
+
+ diff --git a/templates/project-card-compact.php b/templates/project-card-compact.php new file mode 100644 index 0000000..d13ed79 --- /dev/null +++ b/templates/project-card-compact.php @@ -0,0 +1,57 @@ + 100 + ? substr($context, 0, 100) . '...' + : $context; +?> + +
+
+ +
+ + + + + + + + +

+ +

+ + + +

+ +

+ +
+ + +
+ + + + + $maxTechs): ?> + + + +
+
+
diff --git a/templates/project-card.php b/templates/project-card.php index fa8600f..69e20b0 100644 --- a/templates/project-card.php +++ b/templates/project-card.php @@ -15,15 +15,14 @@ $maxTechs = 4;
- Aperçu du projet <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?> +