Merge branch 'imp/project-card'

web/include/project-card.php

@@ -0,0 +1,16 @@
+<!-- Project card component -->
+<div class="card">
+    <img class="card-img-top" src="<?php echo $pro_img_src; ?>" alt="<?php echo $pro_image_alt; ?>">
+    <div class="card-body">
+        <h4 class="card-title">
+            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
+            <?php echo $pro_title; ?>
+        </h4>
+        <p class="card-text">
+        <?php echo $pro_text; ?>
+        </p>
+        <a href="<?php echo $pro_page; ?>" class="btn btn-success">
+            Voir la page du projet
+        </a>
+    </div>
+</div>

web/projets.php

@@ -52,37 +52,37 @@
         Vous pouvez retrouver l'intégralité de mes projets et leur code source <a href="https://gogs.jovian-hersemeule.eu/DricomDragon">sur mon instance de <em>Gogs</em></a>, un clone de <em>GitHub</em>.
         </p>
 
-        <!-- Présentation : En cours -->
+        <!-- Catégorie : En cours -->
+        <?php
+            $category_img_src = "https://img.icons8.com/color/50/000000/rocket.png";
+            $category_img_alt = "Rocket flat icon";
+        ?>
         <h3>
-            <img src="https://img.icons8.com/color/50/000000/rocket.png" alt="rocket flat icon">
+            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
             En cours
         </h3>
         <p>
             Retrouvez ici les projets sur lesquels je passe mon temps actuellement.
         </p>
 
-        <!-- Projets en cours -->
         <div class="card-columns">
-            <div class="card">
-                <img class="card-img-top" src="https://img.icons8.com/color/400/000000/city.png" alt="Jovian site icon">
-                <div class="card-body">
-                    <h4 class="card-title">
-                        <img src="https://img.icons8.com/color/35/000000/rocket.png" alt="rocket flat icon">
-                        Jovian Website
-                    </h4>
-                    <p class="card-text">
-                        Mon site Internet : celui sur lequel vous naviguez actuellement.
-                    </p>
-                    <a href="projets/pro_static_site.php" class="btn btn-success">
-                        Voir la page du projet
-                    </a>
-                </div>
-            </div>
+            <?php
+                $pro_title = "Jovian Website";
+                $pro_text = "Mon site Internet : celui sur lequel vous naviguez actuellement.";
+                $pro_img_src = "https://img.icons8.com/color/400/000000/city.png";
+                $pro_img_alt = "Jovian site icon";
+                $pro_page = "projets/pro_static_site.php";
+                include("include/project-card.php");
+            ?>
         </div>
 
-        <!-- présentation projets présentables -->
+        <!-- Catégorie : Présentables -->
+        <?php
+            $category_img_src = "https://img.icons8.com/color/50/000000/space-shuttle.png";
+            $category_img_alt = "Space shuttle flat icon";
+        ?>
         <h3>
-            <img src="https://img.icons8.com/color/50/000000/space-shuttle.png" alt="space shuttle flat icon">
+            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
             Présentables
         </h3>
         <p>
@@ -90,78 +90,56 @@
             pour fonctionner et susciter de l'intérêt.
         </p>
 
-        <!-- Projets présentables -->
         <div class="card-columns">
-            <div class="card">
-                <img class="card-img-top" src="include/images/project_icon_ASCII.png"
-                     alt="ASCII Space Destroyer image">
-                <div class="card-body">
-                    <h4 class="card-title">
-                        <img src="https://img.icons8.com/color/35/000000/space-shuttle.png" alt="space shuttle flat icon">
-                        ASCII Space Destroyer
-                    </h4>
-                    <p class="card-text">
-                        Un jeu de vaisseau spatial dessiné avec des caractères ASCII, où le joueur peut créer son propre
-                        vaisseau.
-                    </p>
-                    <a href="projets/pro_ascii_space.php" class="btn btn-success">
-                        Voir la page du projet
-                    </a>
-                </div>
-            </div>
-            <div class="card">
-                <img class="card-img-top" src="https://img.icons8.com/color/400/000000/code.png" alt="quoridor image">
-                <div class="card-body">
-                    <h4 class="card-title">
-                        <img src="https://img.icons8.com/color/35/000000/space-shuttle.png" alt="space shuttle flat icon">
-                        Quoridor
-                    </h4>
-                    <p class="card-text">
-                        Un jeu de plateau retranscrit sur ordinateur, où le joueur peut affronter un ami ou une intelligence
-                        articielle.
-                    </p>
-                    <div title="Développement en cours .. revenez plus tard !">
-                        <a href="projets/pro_quoridor.php" class="btn btn-success disabled">
-                            Voir la page du projet
-                        </a>
-                    </div>
-                </div>
-            </div>
+            <?php
+                $pro_title = "ASCII Space Destroyer";
+                $pro_text = "Un jeu de vaisseau spatial dessiné avec des caractères ASCII, où le joueur peut créer son propre vaisseau.";
+                $pro_img_src = "include/images/project_icon_ASCII.png";
+                $pro_img_alt = "ASCII Space Destroyer image";
+                $pro_page = "projets/pro_ascii_space.php";
+                include("include/project-card.php");
+            ?>
+            <?php
+                $pro_title = "Quoridor";
+                $pro_text = "Un jeu de plateau retranscrit sur ordinateur, où le joueur peut affronter un ami ou une intelligence articielle.";
+                $pro_img_src = "https://img.icons8.com/color/400/000000/code.png";
+                $pro_img_alt = "Quoridor image";
+                $pro_page = "projets/pro_quoridor.php";
+                include("include/project-card.php");
+            ?>
         </div>
 
-        <!-- Présentation projets à venir -->
+        <!-- Catégorie : projets à venir -->
+        <?php
+            $category_img_src = "https://img.icons8.com/color/50/000000/blueprint.png";
+            $category_img_alt = "Blueprint flat icon";
+        ?>
         <h3>
-            <img src="https://img.icons8.com/color/50/000000/blueprint.png" alt="blueprint flat icon">
+            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
             À venir
         </h3>
         <p>
             Mes idées de futurs projets.
         </p>
 
-        <!-- Projets à venir -->
         <div class="card-columns">
-            <div class="card">
-                <img class="card-img-top" src="https://img.icons8.com/color/400/000000/code.png" alt="pulsar image">
-                <div class="card-body">
-                    <h4 class="card-title">
-                        <img src="https://img.icons8.com/color/35/000000/blueprint.png" alt="blueprint flat icon">
-                        Pulsar
-                    </h4>
-                    <p class="card-text">
-                        Un jeu de vaisseaux spatiaux, où chaque équipe tente de prendre l'ascendant dans un système solaire.
-                    </p>
-                    <div title="Développement en cours .. revenez plus tard !">
-                        <a href="projets/pro_pulsar.php" class="btn btn-success disabled">
-                            Voir la page du projet
-                        </a>
-                    </div>
-                </div>
-            </div>
+            <?php
+                $pro_title = "Pulsar";
+                $pro_text = "Un jeu de vaisseaux spatiaux, où chaque équipe tente de prendre l'ascendant dans un système solaire.";
+                $pro_img_src = "https://img.icons8.com/color/400/000000/code.png";
+                $pro_img_alt = "Pulsar image";
+                $pro_page = "projets/pro_pulsar.php";
+                include("include/project-card.php");
+            ?>
         </div>
 
-        <!-- Présentation projets terminés -->
+        <!-- Catégorie : Projets terminés -->
+        <?php
+            $category_img_src = "https://img.icons8.com/color/48/000000/uranus-planet.png";
+            $category_img_alt = "Planet flat icon";
+        ?>
         <h3>
-            <img src="https://img.icons8.com/color/48/000000/uranus-planet.png" alt="planet flat icon">
+            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
             Terminés
         </h3>
         <p>