Bladeren bron

:truck: Move all PHP files into the new structure

DricomDragon 1 jaar geleden
bovenliggende
commit
0c5d7278fd

+ 0 - 46
src/contact.php

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<?php
-    $title = "Contact";
-    include("include/head.php");
-?>
-
-<body>
-    <!-- Navbar -->
-    <?php
-        include("include/navbar.php")
-    ?>
-
-    <!-- Content -->
-    <main role="main" class="container">
-
-        <div class="focus-center">
-            <h1>Contact</h1>
-            <img src="/include/icon/icons8-96-filled-message.png" alt="home flat icon">
-            <h2>Retrouvez ici différents moyens pour me contacter</h2>
-            <p class="lead">Pour l'instant par Linkedin, bientôt avec une adresse mail personnalisée.</p>
-        </div>
-
-        <h3>
-            <img src="/include/icon/icons8-48-linkedin.png" alt="linkedin logo flat icon">
-            Linkedin
-        </h3>
-        <p>Lien vers <a href="http://www.linkedin.com/in/jovian-hersemeule-232855150">mon profil Linkedin</a>.
-        <p>Vous retrouverez sur Linkedin le détail de mon parcours scolaire et de mes expériences professionnelles.</p>
-        <p>N'hésitez pas également à l'utiliser pour m'envoyer un message.</p>
-
-    </main>
-
-    <!-- Footer -->
-    <?php
-        include("include/footer.php")
-    ?>
-
-    <!-- Scripts -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-            crossorigin="anonymous"></script>
-    <script src="/include/js/bootstrap.js"></script>
-</body>
-</html>

+ 14 - 0
src/contact/content.src.html

@@ -0,0 +1,14 @@
+<div class="focus-center">
+    <h1>Contact</h1>
+    <img src="/include/icon/icons8-96-filled-message.png" alt="home flat icon">
+    <h2>Retrouvez ici différents moyens pour me contacter</h2>
+    <p class="lead">Pour l'instant par Linkedin, bientôt avec une adresse mail personnalisée.</p>
+</div>
+
+<h3>
+    <img src="/include/icon/icons8-48-linkedin.png" alt="linkedin logo flat icon">
+    Linkedin
+</h3>
+<p>Lien vers <a href="http://www.linkedin.com/in/jovian-hersemeule-232855150">mon profil Linkedin</a>.
+<p>Vous retrouverez sur Linkedin le détail de mon parcours scolaire et de mes expériences professionnelles.</p>
+<p>N'hésitez pas également à l'utiliser pour m'envoyer un message.</p>

+ 0 - 155
src/credit.php

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<?php
-    $title = "Credit";
-    include("include/head.php");
-?>
-
-<body>
-    <!-- Navbar -->
-    <?php
-        include("include/navbar.php")
-    ?>
-
-    <!-- Content -->
-    <main role="main" class="container">
-
-        <!-- Leader -->
-        <div class="focus-center">
-            <h1>Credit</h1>
-            <img src="/include/icon/iconmonstr-72-copyright-2.png" alt="logo icons8">
-            <p class="lead">Cette page rassemble les ressources externes utilisées sur ce site.</p>
-        </div>
-
-        <!-- List -->
-        <h3>
-            <img src="/include/icon/icons8-48-icons8-new-logo.png" alt="logo icons8">
-            Icons8
-        </h3>
-        <p>
-            <a href="https://icons8.com">Icons8.com</a> : Galerie d'icônes gratuites.
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-menu-2.png" alt="menu-2.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/menu-2.png">menu-2.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-city.png" alt="city.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/city.png">city.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-parse-from-clipboard.png" alt="parse-from-clipboard.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/parse-from-clipboard.png">parse-from-clipboard.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-code.png" alt="code.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/code.png">code.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-secured-letter.png" alt="secured-letter.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/secured-letter.png">secured-letter.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-term.png" alt="term.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/term.png">term.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-50-rocket.png" alt="rocket.png" width="48px">
-        <a href="https://img.icons8.com/color/50/000000/rocket.png">rocket.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-50-space-shuttle.png" alt="space-shuttle.png" width="48px">
-        <a href="https://img.icons8.com/color/50/000000/space-shuttle.png">space-shuttle.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-50-blueprint.png" alt="blueprint.png" width="48px">
-        <a href="https://img.icons8.com/color/50/000000/blueprint.png">blueprint.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-uranus-planet.png" alt="uranus-planet.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/uranus-planet.png">uranus-planet.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-50-student-male.png" alt="student-male.png" width="48px">
-        <a href="https://img.icons8.com/color/50/000000/student-male.png">student-male.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-compass.png" alt="compass.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/compass.png">compass.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-development-skill.png" alt="development-skill.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/development-skill.png">development-skill.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-treble-clef.png" alt="treble-clef.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/treble-clef.png">treble-clef.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-96-filled-message.png" alt="filled-message.png" width="48px">
-        <a href="https://img.icons8.com/color/96/000000/filled-message.png">filled-message.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-linkedin.png" alt="linkedin.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/linkedin.png">linkedin.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-96-html-5.png" alt="html-5.png" width="48px">
-        <a href="https://img.icons8.com/color/96/000000/html-5.png">html-5.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-bootstrap.png" alt="bootstrap.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/bootstrap.png">bootstrap.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-raspberry-pi.png" alt="raspberry-pi.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/raspberry-pi.png">raspberry-pi.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-dns.png" alt="dns.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/dns.png">dns.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-icons8-new-logo.png" alt="icons8-new-logo.png" width="48px">
-        <a href="https://img.icons8.com/officel/48/000000/icons8-new-logo.png">icons8-new-logo.png</a>
-        </p>
-        <p>
-        <img src="/include/icon/icons8-48-git.png" alt="git.png" width="48px">
-        <a href="https://img.icons8.com/color/48/000000/git.png">git.png</a>
-        </p>
-
-        <h3>
-            <img src="/include/icon/iconmonstr-72-logo-5.png" alt="logo iconmonstr" width="48px">
-            iconmonstr
-        </h3>
-        <p>
-            <a href="https://iconmonstr.com/">iconmonstr.com</a> : Galerie d'icônes avec license permissive.
-        </p>
-        <p>
-        <img src="/include/icon/iconmonstr-72-copyright-2.png" alt="copyright-2.png" width="48px">
-        <a href="https://iconmonstr.com/copyright-2-png/">copyright.png</a>
-        </p>
-
-        <h3>unDraw</h3>
-        <p>
-        <a href="https://undraw.co">unDraw.co</a> : Galerie d'illustrations libres.
-        </p>
-
-        <h4>Interview</h4>
-        <img src="include/images/undraw_interview.png" alt="Illustration entretien" height=200>
-
-    </main>
-
-    <!-- Footer -->
-    <?php
-        include("include/footer.php");
-    ?>
-
-    <!-- Scripts -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-            crossorigin="anonymous"></script>
-    <script src="include/js/bootstrap.js"></script>
-</body>
-</html>

+ 123 - 0
src/credit/content.src.html

@@ -0,0 +1,123 @@
+<!-- Leader -->
+<div class="focus-center">
+    <h1>Credit</h1>
+    <img src="/include/icon/iconmonstr-72-copyright-2.png" alt="logo icons8">
+    <p class="lead">Cette page rassemble les ressources externes utilisées sur ce site.</p>
+</div>
+
+<!-- List -->
+<h3>
+    <img src="/include/icon/icons8-48-icons8-new-logo.png" alt="logo icons8">
+    Icons8
+</h3>
+<p>
+    <a href="https://icons8.com">Icons8.com</a> : Galerie d'icônes gratuites.
+</p>
+<p>
+<img src="/include/icon/icons8-48-menu-2.png" alt="menu-2.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/menu-2.png">menu-2.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-city.png" alt="city.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/city.png">city.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-parse-from-clipboard.png" alt="parse-from-clipboard.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/parse-from-clipboard.png">parse-from-clipboard.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-code.png" alt="code.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/code.png">code.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-secured-letter.png" alt="secured-letter.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/secured-letter.png">secured-letter.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-term.png" alt="term.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/term.png">term.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-50-rocket.png" alt="rocket.png" width="48px">
+<a href="https://img.icons8.com/color/50/000000/rocket.png">rocket.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-50-space-shuttle.png" alt="space-shuttle.png" width="48px">
+<a href="https://img.icons8.com/color/50/000000/space-shuttle.png">space-shuttle.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-50-blueprint.png" alt="blueprint.png" width="48px">
+<a href="https://img.icons8.com/color/50/000000/blueprint.png">blueprint.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-uranus-planet.png" alt="uranus-planet.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/uranus-planet.png">uranus-planet.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-50-student-male.png" alt="student-male.png" width="48px">
+<a href="https://img.icons8.com/color/50/000000/student-male.png">student-male.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-compass.png" alt="compass.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/compass.png">compass.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-development-skill.png" alt="development-skill.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/development-skill.png">development-skill.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-treble-clef.png" alt="treble-clef.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/treble-clef.png">treble-clef.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-96-filled-message.png" alt="filled-message.png" width="48px">
+<a href="https://img.icons8.com/color/96/000000/filled-message.png">filled-message.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-linkedin.png" alt="linkedin.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/linkedin.png">linkedin.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-96-html-5.png" alt="html-5.png" width="48px">
+<a href="https://img.icons8.com/color/96/000000/html-5.png">html-5.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-bootstrap.png" alt="bootstrap.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/bootstrap.png">bootstrap.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-raspberry-pi.png" alt="raspberry-pi.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/raspberry-pi.png">raspberry-pi.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-dns.png" alt="dns.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/dns.png">dns.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-icons8-new-logo.png" alt="icons8-new-logo.png" width="48px">
+<a href="https://img.icons8.com/officel/48/000000/icons8-new-logo.png">icons8-new-logo.png</a>
+</p>
+<p>
+<img src="/include/icon/icons8-48-git.png" alt="git.png" width="48px">
+<a href="https://img.icons8.com/color/48/000000/git.png">git.png</a>
+</p>
+
+<h3>
+    <img src="/include/icon/iconmonstr-72-logo-5.png" alt="logo iconmonstr" width="48px">
+    iconmonstr
+</h3>
+<p>
+    <a href="https://iconmonstr.com/">iconmonstr.com</a> : Galerie d'icônes avec license permissive.
+</p>
+<p>
+<img src="/include/icon/iconmonstr-72-copyright-2.png" alt="copyright-2.png" width="48px">
+<a href="https://iconmonstr.com/copyright-2-png/">copyright.png</a>
+</p>
+
+<h3>unDraw</h3>
+<p>
+<a href="https://undraw.co">unDraw.co</a> : Galerie d'illustrations libres.
+</p>
+
+<h4>Interview</h4>
+<img src="include/images/undraw_interview.png" alt="Illustration entretien" height=200>

src/cv.php → src/cv/content.src.html


+ 0 - 34
src/error404.php

@@ -1,34 +0,0 @@
-<?php
-$title = "404";
-include("header.php");
-?>
-
-<!-- Content -->
-<main role="main" class="container">
-
-    <div class="focus-center">
-        <h1>404</h1>
-        <img src="/include/icon/icons8-96-matrix-desktop.png" alt="home flat icon">
-        <h2>Page non trouvée</h2>
-        <p class="lead">La page à laquelle votre navigateur souhaite accéder n'existe pas. Il est possible que j'ai fait
-            une erreur lors du développement de mon site. N'hésitez pas à revenir plus tard ...</p>
-    </div>
-</main>
-
-<!-- Footer -->
-<footer class="footer fixed-bottom bg-dark mt-5">
-    <div class="container">
-        <span class="text-muted">Images sources : ICON8</span>
-        <a href="https://icons8.com/icon/104082/cv">CV icon by Icons8</a>
-        <a href="https://icons8.com/icon/104084/city">City icon by Icons8</a>
-        <a href="https://icons8.com/icon/19293/code">Code icon by Icons8</a>
-    </div>
-</footer>
-
-<!-- Scripts -->
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="js/bootstrap.js"></script>
-</body>
-</html>

+ 11 - 0
src/error404/content.src.html

@@ -0,0 +1,11 @@
+<!-- Content -->
+<main role="main" class="container">
+
+    <div class="focus-center">
+        <h1>404</h1>
+        <img src="/include/icon/icons8-96-matrix-desktop.png" alt="home flat icon">
+        <h2>Page non trouvée</h2>
+        <p class="lead">La page à laquelle votre navigateur souhaite accéder n'existe pas. Il est possible que j'ai fait
+            une erreur lors du développement de mon site. N'hésitez pas à revenir plus tard ...</p>
+    </div>
+</main>

+ 0 - 40
src/index.php

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<?php
-    $title = "Accueil";
-    include("include/head.php");
-?>
-
-<body>
-    <!-- Navbar -->
-    <?php
-        include("include/navbar.php")
-    ?>
-
-    <!-- Content -->
-    <main role="main" class="container">
-
-        <div class="focus-center">
-            <h1>Jovian Hersemeule</h1>
-            <img src="/include/icon/icons8-96-city.png" alt="Icone principale">
-            <h2>Bienvenue sur mon site !</h2>
-            <p class="lead">Vous trouverez ici les principales informations me concernant : qui je suis, mon parcours, mon
-                expérience professionnelle et mes projets de programmation.<br>Bonne visite !</p>
-        </div>
-        <img class="rounded img-fluid mx-auto d-block" src="include/images/avatar-cartoon600.png" alt="Avatar Jovian cartoon">
-
-    </main>
-
-    <!-- Footer -->
-    <?php
-        include("include/footer.php")
-    ?>
-
-    <!-- Scripts -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-            crossorigin="anonymous"></script>
-    <script src="include/js/bootstrap.js"></script>
-</body>
-</html>

+ 12 - 0
src/index.src.html

@@ -0,0 +1,12 @@
+<main role="main" class="container">
+
+<div class="focus-center">
+    <h1>Jovian Hersemeule</h1>
+    <img src="/include/icon/icons8-96-city.png" alt="Icone principale">
+    <h2>Bienvenue sur mon site !</h2>
+    <p class="lead">Vous trouverez ici les principales informations me concernant : qui je suis, mon parcours, mon
+        expérience professionnelle et mes projets de programmation.<br>Bonne visite !</p>
+</div>
+<img class="rounded img-fluid mx-auto d-block" src="include/images/avatar-cartoon600.png" alt="Avatar Jovian cartoon">
+
+</main>

+ 0 - 165
src/projets.php

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<?php
-    $title = "Projets";
-    include("include/head.php");
-?>
-
-<body>
-    <!-- Navbar -->
-    <?php
-        include("include/navbar.php")
-    ?>
-
-    <!-- Main -->
-    <main role="main" class="container">
-        <div class="focus-center">
-            <h1>
-                Projets
-            </h1>
-            <img src="/include/icon/icons8-96-code.png" alt="code flat icon">
-            <h2>
-                Mon folio de développeur
-            </h2>
-            <p class="lead">
-                Voici l'ensemble des projets de programmation auxquels j'ai participé. Certains ont été faits en équipe,
-                d'autres seuls, certains sont encore en développement.
-            </p>
-        </div>
-
-        <h3>
-            <img src="/include/icon/icons8-48-term.png" alt="term flat icon">
-            Présentation
-        </h3>
-        <p>
-            Chaque encart présente le résumé d'un projet. Si vous cliquez sur <code>Page du projet</code>, vous
-            arrivez directement sur sa page descriptive complète.
-        </p>
-        <p>
-            N'hésitez pas à revenir consulter cette page plus tard, et revenir régulièrement. J'ai beaucoup de projets déjà
-            réalisés qui ne sont pas encore affichés ici, et j'en lancerai bientôt de nouveaux.
-        </p>
-
-        <h3>
-            <img src="/include/icon/icons8-48-git.png" alt="git flat icon">
-            Code source
-        </h3>
-        <p>
-        Mon folio est incomplet pour le moment, de nombreux projets ne figurent pas encore sur cette page.
-        </p>
-        <p>
-        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>
-
-        <!-- Catégorie : En cours -->
-        <?php
-            $category_img_src = "/include/icon/icons8-50-rocket.png";
-            $category_img_alt = "Rocket flat icon";
-        ?>
-        <h3>
-            <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>
-
-        <div class="card-columns">
-            <?php
-                $pro_title = "Jovian Website";
-                $pro_text = "Mon site Internet : celui sur lequel vous naviguez actuellement.";
-                $pro_img_src = "/include/icon/icons8-400-city.png";
-                $pro_img_alt = "Jovian site icon";
-                $pro_page = "projets/pro_static_site.php";
-                include("include/project-card.php");
-            ?>
-        </div>
-
-        <!-- Catégorie : Présentables -->
-        <?php
-            $category_img_src = "/include/icon/icons8-50-space-shuttle.png";
-            $category_img_alt = "Space shuttle flat icon";
-        ?>
-        <h3>
-            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
-            Présentables
-        </h3>
-        <p>
-            Voici ici les projets qui sont <em>présentables</em>. C'est à dire qu'ils ne sont pas terminés, mais sont suffisamment matures
-            pour fonctionner et susciter de l'intérêt.
-        </p>
-
-        <div class="card-columns">
-            <?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 = "include/images/quoridor_400x400.png";
-                $pro_img_alt = "Quoridor image";
-                $pro_page = "projets/pro_quoridor.php";
-                include("include/project-card.php");
-            ?>
-        </div>
-
-        <!-- Catégorie : projets à venir -->
-        <?php
-            $category_img_src = "/include/icon/icons8-50-blueprint.png";
-            $category_img_alt = "Blueprint flat icon";
-        ?>
-        <h3>
-            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
-            À venir
-        </h3>
-        <p>
-            Mes idées de futurs projets.
-        </p>
-
-        <div class="card-columns">
-            <?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 = "/include/icon/icons8-400-code.png";
-                $pro_img_alt = "Pulsar image";
-                $pro_page = "projets/pro_pulsar.php";
-                include("include/project-card.php");
-            ?>
-        </div>
-
-        <!-- Catégorie : Projets terminés -->
-        <?php
-            $category_img_src = "/include/icon/icons8-48-uranus-planet.png";
-            $category_img_alt = "Planet flat icon";
-        ?>
-        <h3>
-            <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
-            Terminés
-        </h3>
-        <p>
-            Projets dont la phase de développement est terminée.
-        </p>
-        <p>
-            <em>Section vide pour le moment, revenez plus tard ...</em>
-        </p>
-    </main>
-
-    <!-- Footer -->
-    <?php
-        include("include/footer.php")
-    ?>
-
-    <!-- Scripts -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-            crossorigin="anonymous"></script>
-    <script src="include/js/bootstrap.js"></script>
-
-</body>
-</html>

+ 134 - 0
src/projets/content.src.html

@@ -0,0 +1,134 @@
+<div class="focus-center">
+    <h1>
+        Projets
+    </h1>
+    <img src="/include/icon/icons8-96-code.png" alt="code flat icon">
+    <h2>
+        Mon folio de développeur
+    </h2>
+    <p class="lead">
+        Voici l'ensemble des projets de programmation auxquels j'ai participé. Certains ont été faits en équipe,
+        d'autres seuls, certains sont encore en développement.
+    </p>
+</div>
+
+<h3>
+    <img src="/include/icon/icons8-48-term.png" alt="term flat icon">
+    Présentation
+</h3>
+<p>
+    Chaque encart présente le résumé d'un projet. Si vous cliquez sur <code>Page du projet</code>, vous
+    arrivez directement sur sa page descriptive complète.
+</p>
+<p>
+    N'hésitez pas à revenir consulter cette page plus tard, et revenir régulièrement. J'ai beaucoup de projets déjà
+    réalisés qui ne sont pas encore affichés ici, et j'en lancerai bientôt de nouveaux.
+</p>
+
+<h3>
+    <img src="/include/icon/icons8-48-git.png" alt="git flat icon">
+    Code source
+</h3>
+<p>
+Mon folio est incomplet pour le moment, de nombreux projets ne figurent pas encore sur cette page.
+</p>
+<p>
+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>
+
+<!-- Catégorie : En cours -->
+<?php
+    $category_img_src = "/include/icon/icons8-50-rocket.png";
+    $category_img_alt = "Rocket flat icon";
+?>
+<h3>
+    <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>
+
+<div class="card-columns">
+    <?php
+        $pro_title = "Jovian Website";
+        $pro_text = "Mon site Internet : celui sur lequel vous naviguez actuellement.";
+        $pro_img_src = "/include/icon/icons8-400-city.png";
+        $pro_img_alt = "Jovian site icon";
+        $pro_page = "projets/pro_static_site.php";
+        include("include/project-card.php");
+    ?>
+</div>
+
+<!-- Catégorie : Présentables -->
+<?php
+    $category_img_src = "/include/icon/icons8-50-space-shuttle.png";
+    $category_img_alt = "Space shuttle flat icon";
+?>
+<h3>
+    <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
+    Présentables
+</h3>
+<p>
+    Voici ici les projets qui sont <em>présentables</em>. C'est à dire qu'ils ne sont pas terminés, mais sont suffisamment matures
+    pour fonctionner et susciter de l'intérêt.
+</p>
+
+<div class="card-columns">
+    <?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 = "include/images/quoridor_400x400.png";
+        $pro_img_alt = "Quoridor image";
+        $pro_page = "projets/pro_quoridor.php";
+        include("include/project-card.php");
+    ?>
+</div>
+
+<!-- Catégorie : projets à venir -->
+<?php
+    $category_img_src = "/include/icon/icons8-50-blueprint.png";
+    $category_img_alt = "Blueprint flat icon";
+?>
+<h3>
+    <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
+    À venir
+</h3>
+<p>
+    Mes idées de futurs projets.
+</p>
+
+<div class="card-columns">
+    <?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 = "/include/icon/icons8-400-code.png";
+        $pro_img_alt = "Pulsar image";
+        $pro_page = "projets/pro_pulsar.php";
+        include("include/project-card.php");
+    ?>
+</div>
+
+<!-- Catégorie : Projets terminés -->
+<?php
+    $category_img_src = "/include/icon/icons8-48-uranus-planet.png";
+    $category_img_alt = "Planet flat icon";
+?>
+<h3>
+    <img src="<?php echo $category_img_src; ?>" alt="<?php echo $category_img_alt; ?>">
+    Terminés
+</h3>
+<p>
+    Projets dont la phase de développement est terminée.
+</p>
+<p>
+    <em>Section vide pour le moment, revenez plus tard ...</em>
+</p>

+ 203 - 239
src/projets/static_site/content.src.html

@@ -1,246 +1,210 @@
-<!DOCTYPE html>
-<html lang="fr">
+<div class="focus-center">
+    <h1>
+        Mon site internet
+    </h1>
+    <img src="/include/icon/icons8-96-html-5.png" alt="html-5 flat icon">
+    <h2>
+        Le site sur lequel vous surfez actuellement.
+    </h2>
+    <p class="lead">
+        Article rédigé en décembre 2018 racontant la genèse et les coulisses de ce site web.
+    </p>
+</div>
 
-<?php
-    $title = "Site";
-    include("../include/head.php");
-?>
+<!-- Host disclaimer -->
+<div class="alert alert-info">
+    <strong>Article ancien :</strong> Cet article remonte à la création du site web. Certaines informations sont obsolètes. En effet, mon site web n'est plus hébergé sur mon Raspberry Pi, dont les aléas peuvent provoquer des coupures de service, mais sur un hébergement web dédié chez OVH.
+</div>
 
-<body>
-    <!-- Navbar -->
-    <?php
-        include("../include/navbar.php")
-    ?>
+<!-- Content -->
+<h3>
+    <img src="/include/icon/icons8-48-term.png" alt="term flat icon">
+    Introduction
+</h3>
+<p>
+    J'ai longtemps codé en C++ afin de faire des jeux-vidéo. Mais après avoir gagné un Raspberry Pi lors d'un
+    hackaton, je trouvais intéressant d'apprendre et d'appliquer quelques technologies du web afin de les appliquer
+    à un projet concret.
+</p>
+<p>
+    Afin de m'entraîner un peu au développement et au déploiement d'un site web, j'ai donc décidé de réaliser mon
+    propre site Internet.
+</p>
+<p>
+    De plus, c'est toujours utile d'avoir un site Internet de présentation afin de se faire connaître par des
+    employeurs, collègues et connaissances. Et c'est quand même plus crédible pour un développeur informatique de le
+    réaliser lui-même ...
+</p>
+<p>
+    J'ai essayé de rendre cet <strong>article concis et accessible à tous publics</strong>. Peu importe vos
+    connaissances en informatique, vous avez sans doute la capacité de le comprendre. N'hésitez donc pas à
+    continuer votre lecture ...
+</p>
+<p>
+    C'est parti, voici un petit récapitulatif de ce qui se cache derrière ce que vous avez actuellement sur votre
+    écran.
+</p>
 
-    <!-- Main -->
-    <main role="main" class="container">
-        <div class="focus-center">
-            <h1>
-                Mon site internet
-            </h1>
-            <img src="/include/icon/icons8-96-html-5.png" alt="html-5 flat icon">
-            <h2>
-                Le site sur lequel vous surfez actuellement.
-            </h2>
-            <p class="lead">
-                Article rédigé en décembre 2018 racontant la genèse et les coulisses de ce site web.
-            </p>
-        </div>
+<h3>
+    <img src="/include/icon/icons8-48-bootstrap.png" alt="bootstrap logo flat icon">
+    Bootstrap : une affaire de style
+</h3>
+<p>
+    Ce site a été codé en HTML. Pour voir le code source, il vous suffit d'utiliser la combinaison de touches <code>Ctrl</code>+<code>u</code>
+    sous le navigateur Firefox. Et oui, il ne m'a fallu qu'un simple éditeur de texte pour arriver à ce résultat. Un
+    éditeur de texte un peu tuné, certes. J'ai d'abord utilisé
+    <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>, puis
+    <a href="https://www.sublimetext.com/">SublimeText</a>, plus léger, puis
+    <a href="https://www.vim.org/">Vim</a>, encore plus léger.
+</p>
+<p>
+    Afin de mettre un peu de style à l'information brute (celle contenue dans le HTML), j'ai utilisé un template CSS
+    qui s'appelle Bootstrap. Cette technologie a été développée par Twitter, et est parfois aussi appelé en
+    conséquence Twitter Bootstrap. N'hésitez pas à faire un tour sur le
+    <a href="https://getbootstrap.com/">site officiel de Bootstrap</a>
+    pour savoir de quoi il retourne.
+</p>
+<p>
+    Pour les néophytes, vous devez savoir que CSS est un langage qui permet de définir des feuilles de style. Cela
+    permet de mettre en forme tout ce que vous trouvez sur cette page : la barre de navigation horizontale verte, la
+    police, la mise en page, les barres vertes sous les titres ...
+</p>
+<p>
+    Afin de me faciliter la tâche, j'ai utilisé un template CSS. C'est un ensemble de feuilles de style déjà écrites
+    qui me permet de ne pas tout refaire de zéro. La barre de navigation, par exemple, existait déjà sous cette
+    forme. Je n'ai fait que modifier des détails, comme la couleur et les titres des liens.
+</p>
+<p>
+    Il faut savoir que Bootstrap est un framework très connu, et donc utilisé dans de nombreux sites web. On peut
+    citer BlaBlaCar, par exemple, le fameux site de covoiturage. À cause de cette mode, et malgré la
+    personnalisation assurée par les développeurs, les sites se ressemblent (forme des boutons, des onglets). On
+    peut donc critiquer le fait que je l'utilise : développer son propre site, c'est devoir se démarquer et montrer
+    son originalité. Mais c'est peut-être aussi se tenir au courant des technologies actuelles et de les mettre en
+    pratique ...
+</p>
+<p>
+    Si vous voulez voir à quoi ressemble le template que j'ai utilisé comme base de mon travail, il est disponible
+    sur le site officiel de Bootstrap :
+    <a href="https://getbootstrap.com/docs/4.2/examples/starter-template/">Starter Template by Bootstrap</a>.
+</p>
 
-        <!-- Host disclaimer -->
-        <div class="alert alert-info">
-            <strong>Article ancien :</strong> Cet article remonte à la création du site web. Certaines informations sont obsolètes. En effet, mon site web n'est plus hébergé sur mon Raspberry Pi, dont les aléas peuvent provoquer des coupures de service, mais sur un hébergement web dédié chez OVH.
-        </div>
+<h3>
+    <img src="/include/icon/icons8-48-raspberry-pi.png" alt="raspberry pi logo flat icon">
+    Raspberry Pi : un petit ordinateur
+</h3>
+<p>
+    C'est bien de coder son site. Mais pour qu'il soit visible par tous les utilsateurs d'Internet, il faut un
+    serveur web ...
+</p>
+<p>
+    Basiquement, un serveur web est un ordinateur tout à fait classique, connecté à Internet, qui distribue les
+    pages Internet aux clients qui les demandent. Le client, c'est vous. Et la page Internet, c'est l'ensemble du
+    code source qui décrit cette page, comme je l'ai expliqué dans la section précédente. Le préfixe
+    <code>http</code> dans l'URL définit le protocole qu'utilise votre navigateur (par exemple Firefox, Edge ou
+    Safari) pour discuter avec mon ordinateur.
+</p>
+<p>
+    Alors oui, je dis "mon ordinateur", car le serveur qui vient de vous donner cette page web est en fait un micro
+    ordinateur branché à ma box Internet dans ma cuisine. C'est un Raspberry Pi 3, que j'ai gagné lors d'un concours
+    de programmation fin 2017.
+</p>
+<p>
+    Pour ceux qui se demandent à quoi peut ressembler une telle machine, je vous laisse visiter
+    <a href="https://www.raspberrypi.org/products/raspberry-pi-3-model-b/"> le site du vendeur officiel</a>.
+    En fait, c'est tout simplement une unité centrale, comme celle que vous pouvez avoir dans votre bureau, mais en
+    plus petit. Beaucoup plus petit. Mais tout autant fonctionnel (il marche bien mon site, non ?).
+</p>
+<p>
+    Après, il a fallu configurer l'appareil. Le système d'exploitation est Debian, une distribution de Linux. Pour
+    les néophites, un système d'exploitation est le programme principal qui vous permet d'utiliser votre ordinateur
+    personnel. Debian est à Linux ce que Windows 10 est à Microsoft Windows (en gros).
+</p>
+<p>
+    Enfin, il suffit d'installer un serveur HTTP (le programme qui répondra à votre navigateur). Ici j'ai utilisé
+    <a href="https://httpd.apache.org/">Apache 2</a>, un programme libre très fonctionnel.
+</p>
 
-        <!-- Content -->
-        <h3>
-            <img src="/include/icon/icons8-48-term.png" alt="term flat icon">
-            Introduction
-        </h3>
-        <p>
-            J'ai longtemps codé en C++ afin de faire des jeux-vidéo. Mais après avoir gagné un Raspberry Pi lors d'un
-            hackaton, je trouvais intéressant d'apprendre et d'appliquer quelques technologies du web afin de les appliquer
-            à un projet concret.
-        </p>
-        <p>
-            Afin de m'entraîner un peu au développement et au déploiement d'un site web, j'ai donc décidé de réaliser mon
-            propre site Internet.
-        </p>
-        <p>
-            De plus, c'est toujours utile d'avoir un site Internet de présentation afin de se faire connaître par des
-            employeurs, collègues et connaissances. Et c'est quand même plus crédible pour un développeur informatique de le
-            réaliser lui-même ...
-        </p>
-        <p>
-            J'ai essayé de rendre cet <strong>article concis et accessible à tous publics</strong>. Peu importe vos
-            connaissances en informatique, vous avez sans doute la capacité de le comprendre. N'hésitez donc pas à
-            continuer votre lecture ...
-        </p>
-        <p>
-            C'est parti, voici un petit récapitulatif de ce qui se cache derrière ce que vous avez actuellement sur votre
-            écran.
-        </p>
+<h3>
+    <img src="/include/icon/icons8-48-dns.png" alt="dns flat icon">
+    OVH : mon nom de domaine
+</h3>
+<p>
+    Alors, récapitulons.
+</p>
+<p>
+    J'ai un code source réalisé (entre autres) avec Bootstrap.
+</p>
+<p>
+    J'ai un serveur capable de répondre aux clients pour distribuer les pages web.
+</p>
+<p>
+    Mais l'histoire n'est pas finie. Je pense que vous le savez, Internet est un réseau mondial. Il est donc très
+    vaste. Il y aurait plus de 200 millions de serveurs comme celui que je viens de vous présenter qui y sont
+    connectés. (Selon
+    <a href="https://fr.wikipedia.org/wiki/Internet_dans_le_monde#Nombre_de_serveurs">Wikipedia</a>).
+</p>
+<p>
+    Mais alors, comment votre navigateur fait-il pour retrouver mon site dans cette immense toile ?
+</p>
+<p>
+    Alors je ne vais pas vous faire un cours sur le protocole <em>TCP/IP</em>, là n'est pas le propos. Dites vous
+    simplement qu'avec une adresse IP (comme <code>109.9.177.75</code> par exemple) votre navigateur web est capable
+    de retrouver mon serveur. Voyez ça comme une adresse postale pour une maison.
+</p>
+<p>
+    Alors toutes les box, y compris celle qui est chez vous (si vous en avez une), possèdent une adresse IP. Mais
+    imaginez, taper <code>http://109.9.177.75/cv.html</code> à la place de
+    <code>http://jovian-hersemeule.eu/cv.html</code> dans votre barre d'adresse serait beaucoup moins attrayant.
+</p>
+<p>
+    J'ai donc, pour votre confort, acheté le nom de domaine <code>jovian-hersemeule.eu</code> (pour quelques euros)
+    sur
+    <a href="https://www.ovh.co.uk/domains/">le site OVH</a>.
+    En plus de raisons esthétiques, un nom de domaine est utilisé pour des raisons pratiques. En effet, l'adresse IP
+    de mon serveur peut être ammenée à changer (si la box est redémarrée, ou si je déménage par exemple). Je peux
+    configurer à ma guise l'adresse IP cible de mon nom de domaine. Ce genre de détails techniques est donc rendu
+    transparent pour l'utilisateur. Pas besoin de connaître par coeur toutes les adresses IP de vos sites préférés
+    ...
+</p>
 
-        <h3>
-            <img src="/include/icon/icons8-48-bootstrap.png" alt="bootstrap logo flat icon">
-            Bootstrap : une affaire de style
-        </h3>
-        <p>
-            Ce site a été codé en HTML. Pour voir le code source, il vous suffit d'utiliser la combinaison de touches <code>Ctrl</code>+<code>u</code>
-            sous le navigateur Firefox. Et oui, il ne m'a fallu qu'un simple éditeur de texte pour arriver à ce résultat. Un
-            éditeur de texte un peu tuné, certes. J'ai d'abord utilisé
-            <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>, puis
-            <a href="https://www.sublimetext.com/">SublimeText</a>, plus léger, puis
-            <a href="https://www.vim.org/">Vim</a>, encore plus léger.
-        </p>
-        <p>
-            Afin de mettre un peu de style à l'information brute (celle contenue dans le HTML), j'ai utilisé un template CSS
-            qui s'appelle Bootstrap. Cette technologie a été développée par Twitter, et est parfois aussi appelé en
-            conséquence Twitter Bootstrap. N'hésitez pas à faire un tour sur le
-            <a href="https://getbootstrap.com/">site officiel de Bootstrap</a>
-            pour savoir de quoi il retourne.
-        </p>
-        <p>
-            Pour les néophytes, vous devez savoir que CSS est un langage qui permet de définir des feuilles de style. Cela
-            permet de mettre en forme tout ce que vous trouvez sur cette page : la barre de navigation horizontale verte, la
-            police, la mise en page, les barres vertes sous les titres ...
-        </p>
-        <p>
-            Afin de me faciliter la tâche, j'ai utilisé un template CSS. C'est un ensemble de feuilles de style déjà écrites
-            qui me permet de ne pas tout refaire de zéro. La barre de navigation, par exemple, existait déjà sous cette
-            forme. Je n'ai fait que modifier des détails, comme la couleur et les titres des liens.
-        </p>
-        <p>
-            Il faut savoir que Bootstrap est un framework très connu, et donc utilisé dans de nombreux sites web. On peut
-            citer BlaBlaCar, par exemple, le fameux site de covoiturage. À cause de cette mode, et malgré la
-            personnalisation assurée par les développeurs, les sites se ressemblent (forme des boutons, des onglets). On
-            peut donc critiquer le fait que je l'utilise : développer son propre site, c'est devoir se démarquer et montrer
-            son originalité. Mais c'est peut-être aussi se tenir au courant des technologies actuelles et de les mettre en
-            pratique ...
-        </p>
-        <p>
-            Si vous voulez voir à quoi ressemble le template que j'ai utilisé comme base de mon travail, il est disponible
-            sur le site officiel de Bootstrap :
-            <a href="https://getbootstrap.com/docs/4.2/examples/starter-template/">Starter Template by Bootstrap</a>.
-        </p>
+<h3>
+    <img src="/include/icon/icons8-48-icons8-new-logo.png" alt="Icons8 logo flat icon">
+    ICONS8 : des icônes colorées
+</h3>
+<p>
+    Vous avez sans doute déjà remarqué que j'utilise de nombreuses icônes sur mon site. J'ai en effet recours à
+    <a href="https://icons8.com/">Icons8</a>
+    qui regorge d'icônes en tous genres, ce qui est très pratique pour illustrer un site web.
+</p>
+<p>
+    J'utilise pour l'instant ce service gratuitement. Cela limite son utilisation à de petites résolutions et ne
+    permet pas d'avoir des images vectorielles. Peut-être aurai-je recours à la solution premium plus tard, afin
+    d'améliorer le contenu proposé sur ce site et pour soutenir les développeurs d'Icons8.
+</p>
+<p>
+    Voici la <a href="/public/credit.php">liste des icônes utilisées sur ce site</a>.
+</p>
 
-        <h3>
-            <img src="/include/icon/icons8-48-raspberry-pi.png" alt="raspberry pi logo flat icon">
-            Raspberry Pi : un petit ordinateur
-        </h3>
-        <p>
-            C'est bien de coder son site. Mais pour qu'il soit visible par tous les utilsateurs d'Internet, il faut un
-            serveur web ...
-        </p>
-        <p>
-            Basiquement, un serveur web est un ordinateur tout à fait classique, connecté à Internet, qui distribue les
-            pages Internet aux clients qui les demandent. Le client, c'est vous. Et la page Internet, c'est l'ensemble du
-            code source qui décrit cette page, comme je l'ai expliqué dans la section précédente. Le préfixe
-            <code>http</code> dans l'URL définit le protocole qu'utilise votre navigateur (par exemple Firefox, Edge ou
-            Safari) pour discuter avec mon ordinateur.
-        </p>
-        <p>
-            Alors oui, je dis "mon ordinateur", car le serveur qui vient de vous donner cette page web est en fait un micro
-            ordinateur branché à ma box Internet dans ma cuisine. C'est un Raspberry Pi 3, que j'ai gagné lors d'un concours
-            de programmation fin 2017.
-        </p>
-        <p>
-            Pour ceux qui se demandent à quoi peut ressembler une telle machine, je vous laisse visiter
-            <a href="https://www.raspberrypi.org/products/raspberry-pi-3-model-b/"> le site du vendeur officiel</a>.
-            En fait, c'est tout simplement une unité centrale, comme celle que vous pouvez avoir dans votre bureau, mais en
-            plus petit. Beaucoup plus petit. Mais tout autant fonctionnel (il marche bien mon site, non ?).
-        </p>
-        <p>
-            Après, il a fallu configurer l'appareil. Le système d'exploitation est Debian, une distribution de Linux. Pour
-            les néophites, un système d'exploitation est le programme principal qui vous permet d'utiliser votre ordinateur
-            personnel. Debian est à Linux ce que Windows 10 est à Microsoft Windows (en gros).
-        </p>
-        <p>
-            Enfin, il suffit d'installer un serveur HTTP (le programme qui répondra à votre navigateur). Ici j'ai utilisé
-            <a href="https://httpd.apache.org/">Apache 2</a>, un programme libre très fonctionnel.
-        </p>
-
-        <h3>
-            <img src="/include/icon/icons8-48-dns.png" alt="dns flat icon">
-            OVH : mon nom de domaine
-        </h3>
-        <p>
-            Alors, récapitulons.
-        </p>
-        <p>
-            J'ai un code source réalisé (entre autres) avec Bootstrap.
-        </p>
-        <p>
-            J'ai un serveur capable de répondre aux clients pour distribuer les pages web.
-        </p>
-        <p>
-            Mais l'histoire n'est pas finie. Je pense que vous le savez, Internet est un réseau mondial. Il est donc très
-            vaste. Il y aurait plus de 200 millions de serveurs comme celui que je viens de vous présenter qui y sont
-            connectés. (Selon
-            <a href="https://fr.wikipedia.org/wiki/Internet_dans_le_monde#Nombre_de_serveurs">Wikipedia</a>).
-        </p>
-        <p>
-            Mais alors, comment votre navigateur fait-il pour retrouver mon site dans cette immense toile ?
-        </p>
-        <p>
-            Alors je ne vais pas vous faire un cours sur le protocole <em>TCP/IP</em>, là n'est pas le propos. Dites vous
-            simplement qu'avec une adresse IP (comme <code>109.9.177.75</code> par exemple) votre navigateur web est capable
-            de retrouver mon serveur. Voyez ça comme une adresse postale pour une maison.
-        </p>
-        <p>
-            Alors toutes les box, y compris celle qui est chez vous (si vous en avez une), possèdent une adresse IP. Mais
-            imaginez, taper <code>http://109.9.177.75/cv.html</code> à la place de
-            <code>http://jovian-hersemeule.eu/cv.html</code> dans votre barre d'adresse serait beaucoup moins attrayant.
-        </p>
-        <p>
-            J'ai donc, pour votre confort, acheté le nom de domaine <code>jovian-hersemeule.eu</code> (pour quelques euros)
-            sur
-            <a href="https://www.ovh.co.uk/domains/">le site OVH</a>.
-            En plus de raisons esthétiques, un nom de domaine est utilisé pour des raisons pratiques. En effet, l'adresse IP
-            de mon serveur peut être ammenée à changer (si la box est redémarrée, ou si je déménage par exemple). Je peux
-            configurer à ma guise l'adresse IP cible de mon nom de domaine. Ce genre de détails techniques est donc rendu
-            transparent pour l'utilisateur. Pas besoin de connaître par coeur toutes les adresses IP de vos sites préférés
-            ...
-        </p>
-
-        <h3>
-            <img src="/include/icon/icons8-48-icons8-new-logo.png" alt="Icons8 logo flat icon">
-            ICONS8 : des icônes colorées
-        </h3>
-        <p>
-            Vous avez sans doute déjà remarqué que j'utilise de nombreuses icônes sur mon site. J'ai en effet recours à
-            <a href="https://icons8.com/">Icons8</a>
-            qui regorge d'icônes en tous genres, ce qui est très pratique pour illustrer un site web.
-        </p>
-        <p>
-            J'utilise pour l'instant ce service gratuitement. Cela limite son utilisation à de petites résolutions et ne
-            permet pas d'avoir des images vectorielles. Peut-être aurai-je recours à la solution premium plus tard, afin
-            d'améliorer le contenu proposé sur ce site et pour soutenir les développeurs d'Icons8.
-        </p>
-        <p>
-            Voici la <a href="/public/credit.php">liste des icônes utilisées sur ce site</a>.
-        </p>
-
-        <h3>
-            Conclusion
-        </h3>
-        <p>
-            Voilà, la petite description de ce site Internet touche à sa fin. J'espère que cela a éclairci ce qui se cache
-            derrière les lignes que vous êtes en train de lire. Peut-être cela vous a même aidé dans votre compréhension du
-            web ...
-        </p>
-        <p>
-            Si vous aussi, vous êtes tentés par le développement de votre site, et que vous vous y connaissez très peu dans
-            le domaine, je vous mets en référence ce tutoriel OpenClassrooms : <a
-                href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">Apprenez
-            à créer votre site web avec HTML5 et CSS3</a>. Je l'ai moi-même consulté pour réapprendre les bases.
-            <a href="https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap">Un cours sur Bootstrap</a> y
-            est aussi disponible.
-        </p>
-        <p>
-            Merci d'avoir lu cet article jusqu'au bout, et n'hésitez pas à jeter un oeil sur les autres projets ou autres
-            pages du site.
-        </p>
-        <p>
-            Bonne visite !
-        </p>
-
-        <!-- Back button -->
-        <?php
-            include("../include/back-to-projects.php")
-        ?>
-    </main>
-
-    <!-- Footer -->
-    <?php
-        include("../include/footer.php")
-    ?>
-
-    <!-- Scripts -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-            crossorigin="anonymous"></script>
-    <script src="/include/js/bootstrap.js"></script>
-
-</body>
-</html>
+<h3>
+    Conclusion
+</h3>
+<p>
+    Voilà, la petite description de ce site Internet touche à sa fin. J'espère que cela a éclairci ce qui se cache
+    derrière les lignes que vous êtes en train de lire. Peut-être cela vous a même aidé dans votre compréhension du
+    web ...
+</p>
+<p>
+    Si vous aussi, vous êtes tentés par le développement de votre site, et que vous vous y connaissez très peu dans
+    le domaine, je vous mets en référence ce tutoriel OpenClassrooms : <a
+        href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">Apprenez
+    à créer votre site web avec HTML5 et CSS3</a>. Je l'ai moi-même consulté pour réapprendre les bases.
+    <a href="https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap">Un cours sur Bootstrap</a> y
+    est aussi disponible.
+</p>
+<p>
+    Merci d'avoir lu cet article jusqu'au bout, et n'hésitez pas à jeter un oeil sur les autres projets ou autres
+    pages du site.
+</p>
+<p>
+    Bonne visite !
+</p>

src/include/back-to-projects.php → src/templates/back-project-button.html


src/include/project-card.php → src/templates/project-card.html