Merge branch 'dev' for releasing v0.2.6

README.md

@@ -0,0 +1,15 @@
+# Jovian Static Website
+
+Jovian portfolio and resume
+
+## Test locally
+
+### Before committing
+
+Start a standalone PHP server on port 8080.
+
+Run `undeployed/scripts/serve-home.sh`
+
+### Deploy on local apache
+
+Run `undeployed/scripts/deploy-local-httpd.sh`

contact.php

@@ -1,42 +0,0 @@
-<?php
-$title = "Contact";
-include("header.php");
-?>
-
-<!-- Content -->
-<main role="main" class="container">
-
-    <div class="focus-center">
-        <h1>Contact</h1>
-        <img src="https://img.icons8.com/color/96/000000/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="https://img.icons8.com/color/48/000000/linkedin.png" alt="V">
-    	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 -->
-<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>

cv.php

@@ -1,362 +0,0 @@
-<?php
-$title = "CV";
-include("header.php");
-?>
-
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            CV
-        </h1>
-        <img src="https://img.icons8.com/color/96/000000/parse-from-clipboard.png" alt="cv flat icon">
-        <h2>
-            Curriculum Vitae
-        </h2>
-        <div class="row">
-            <div class="col-lg-12 col-xl-6 lead"><strong>Étudiant</strong> alternant ingénieur généraliste à l'École Centrale</div>
-            <div class="col-lg-12 col-xl-6 lead"><strong>Apprenti</strong> dans l'équipe STB Integration à Viaccess-Orca</div>
-            <div class="col-lg-12 col-xl-6">
-                <img src="images/logoCN.png" class="mx-auto" alt="Logo Centrale Nantes">
-            </div>
-            <div class="col-lg-12 col-xl-6">
-                <img src="images/logoVO.png" class="mx-auto" style="height:100%" alt="Logo Viaccess Orca">
-            </div>
-        </div>
-    </div>
-    <h3>
-        <img src="https://img.icons8.com/color/50/000000/student-male.png" alt="v ">
-        Formation
-    </h3>
-    <div class="row">
-
-        <!-- Centrale -->
-        <div class="col-3">
-            2017 - aujourd'hui
-        </div>
-        <div class="col-9">
-            <b>École Centrale</b> – <span class="city">Nantes</span>
-            <br/>
-            Formation ingénieur généraliste par Alternance
-            <br/>
-            Apprentissage effectué chez Viaccess-Orca
-        </div>
-
-        <!-- Chateaubriand -->
-        <div class="col-3">
-            2015 - 2017
-        </div>
-        <div class="col-9">
-            <b>Lycée Chateaubriand</b> : <span class="middle-info">Classe Préparatoire Grandes Écoles</span> – <span
-                class="city">Rennes</span>
-            <br/>
-            Filière MPSI (Maths Physique Sciences de l'Ingénieur) – MP* (Maths Physique)
-            <br/>
-            option informatique
-        </div>
-
-        <!-- Réaumur -->
-        <div class="col-3">
-            juin 2015
-        </div>
-        <div class="col-9">
-            <b>Lycée Réaumur</b> – <span class="city">Laval</span>
-            <br/>
-            Baccalauréat Scientifique spécialité Sciences de l'Ingénieur
-            <br/>
-            mention Très Bien
-        </div>
-    </div>
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/compass.png" alt="v ">
-        Expériences
-    </h3>
-    <div class="row">
-        <div class="col-lg-12 col-xl-6">
-            <h4>Monde de l'entreprise</h4>
-
-            <!-- Viaccess -->
-            <div class="row">
-                <div class="col-3">
-                    déc. 2017 - aujourd'hui
-                </div>
-                <div class="col-9">
-                    <b>Viaccess Orca</b> – <span class="city">Cesson Sévigné</span>
-                    <br/>
-                    Apprentissage par alternance effectué avec l'École Centrale de Nantes
-                    <br/>
-                    Développement informatique dans l'équipe Intégration décodeur
-                    <br/>
-                    Application web de suivi de processus (Backend/Frontend)
-                </div>
-            </div>
-
-            <!-- LTI -->
-            <div class="row">
-                <div class="col-3">
-                    étés 2016-17
-                </div>
-                <div class="col-9">
-                    <b>LTI</b> : <span class="middle-info">La Technique Industrielle</span> – <span class="city">Bain de Bretagne</span>
-                    <br/>
-                    job d'été en intérimaire
-                    <br/>
-                    assistant métallier
-                </div>
-            </div>
-
-            <!-- ARA-Technology -->
-            <div class="row">
-                <div class="col-3">
-                    avril 2014
-                </div>
-                <div class="col-9">
-                    <b>ARA-Technology</b> – <span class="city">Laval</span>
-                    <br/>
-                    stage d'observation
-                    <br/>
-                    start-up spécialisée en
-                    réalité augmentée sur supports
-                    mobiles (développement sur Unity)
-                </div>
-            </div>
-
-            <!-- Le Cube -->
-            <div class="row">
-                <div class="col-3">
-                    mai 2012
-                </div>
-                <div class="col-9">
-                    <b>Le Cube</b> – <span class="city">St Denis de Gastines</span>
-                    <br/>
-                    stage d'observation
-                    <br/>
-                    studio d'enregistrement de musique
-                </div>
-            </div>
-
-            <!-- AutoCast Industry -->
-            <div class="row">
-                <div class="col-3">
-                    juin 2011
-                </div>
-                <div class="col-9">
-                    <b>AutoCast Industry</b> – <span class="city">Laval</span>
-                    <br/>
-                    stage d'observation
-                    <br/>
-                    fonderie de pièces automobiles
-                </div>
-            </div>
-        </div>
-
-        <div class="col-lg-12 col-xl-6">
-
-            <h4>Projets scolaires</h4>
-
-            <!-- TIPE -->
-            <div class="row">
-                <div class="col-3">
-                    2016-2017
-                </div>
-                <div class="col-9">
-                    <b>TIPE</b> : <span class="middle-info">Travaux d'Initiative Personnelle Encadrés</span>
-                    <br/>
-                    Projet de concours
-                    <br/>
-                    développement d'intelligences
-                    artificielles sur un jeu de stratégie
-                    <br/>
-                    20/20 au concours Centrale
-                </div>
-            </div>
-
-            <!-- PPE -->
-            <div class="row">
-                <div class="col-3">
-                    avril 2014
-                </div>
-                <div class="col-9">
-                    <b>PPE</b> : <span class="middle-info">Projet Pluridisciplinaire Encadré</span>
-                    <br/>
-                    projet de baccalauréat
-                    <br/>
-                    automatisation d'un distributeur autonome de
-                    nourriture pour chats
-                </div>
-            </div>
-
-            <!-- Club-Programmation informatique -->
-            <div class="row">
-                <div class="col-3">
-                    2013-2015
-                </div>
-                <div class="col-9">
-                    <b>Club-Programmation informatique</b>
-                    <br/>
-                    fondation et animation 4h/semaine
-                    <br/>
-                    travail en projets
-                    <br/>
-                    partage de connaissances
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/development-skill.png" alt="v ">
-        Compétences
-    </h3>
-
-    <div class="row">
-        <div class="col-lg-12 col-xl-4">
-            <h4>Langues</h4><!-- Langues -->
-
-            <div class="row">
-                <!-- Français -->
-                <b class="col-3">
-                    Français
-                </b>
-                <div class="col-9">
-                    Langue maternelle
-                </div>
-
-                <!-- Anglais -->
-                <b class="col-3">
-                    Anglais
-                </b>
-                <div class="col-9">
-                    Fluide
-                </div>
-
-                <!-- Allemand -->
-                <b class="col-3">
-                    Allemand
-                </b>
-                <div class="col-9">
-                    Bonnes bases
-                </div>
-
-                <br/>
-            </div>
-        </div>
-
-        <div class="col-lg-12 col-xl-8">
-
-            <h4>Informatique</h4><!-- Informatique -->
-
-            <div class="row">
-                <!-- C++ -->
-                <b class="col-3">
-                    C++
-                </b>
-                <div class="col-4">
-                    Très bonne maîtrise
-                </div>
-                <em class="col-5">
-                    7 ans d'expérience
-                </em>
-
-                <!-- Python -->
-                <b class="col-3">
-                    Python
-                </b>
-                <div class="col-4">
-                    Bonne maîtrise
-                </div>
-                <em class="col-5">
-                    4 ans d'expérience
-                </em>
-
-                <!-- Java -->
-                <b class="col-3">
-                    Java
-                </b>
-                <div class="col-4">
-                    Bonne maîtrise
-                </div>
-                <em class="col-5">
-                    1 an d'expérience
-                </em>
-
-                <!-- GNU/Linux -->
-                <b class="col-3">
-                    GNU/Linux
-                </b>
-                <div class="col-4">
-                    Niveau intermédiaire
-                </div>
-                <em class="col-5">
-                    1 an d'expérience
-                </em>
-            </div>
-
-            <div class="row">
-                <b class="col-3">
-                    Web
-                </b>
-                <div class="col-4">
-                    Novice
-                </div>
-                <em class="col-5">
-                    1 an d'expérience
-                </em>
-            </div>
-        </div>
-    </div>
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/treble-clef.png" alt="v ">
-        Intérêts
-    </h3>
-
-    <div class="row">
-        <div class="col-md-12 col-lg-6 col-xl-4">
-
-            <h4>Sport</h4>
-            Pratique du Badmindton
-            <br/>
-            Déplacements en vélo quotidiens
-        </div>
-
-        <div class="col-md-12 col-lg-6 col-xl-4">
-
-            <h4>Voyages</h4>
-            Touristiques : <em>Maroc, Angleterre, Italie, Espagne</em>
-            <br/>
-            Hébergé chez l'habitant : <em>Pays de Galles</em>
-            <br/>
-            Échanges et jumelage : <em>Allemagne</em>
-        </div>
-
-        <div class="col-md-12 col-lg-6 col-xl-4">
-
-            <h4>Musique</h4>
-            7 ans de clarinette dont 3 de clarinette basse
-            <br/>
-            4 ans membre de l'Harmonie d'Andouillé
-            <br/>
-            débutant en guitare
-        </div>
-    </div>
-
-</main>
-
-<!-- Footer -->
-<footer class="footer bg-dark mt-5">
-    <div class="container">
-        <span class="text-muted">Images sources : ICON8</span>
-        <a href="https://icons8.com/icon/23319/student-male">Student Male icon by Icons8</a>
-        <a href="https://icons8.com/icon/104082/cv">CV icon by Icons8</a>
-        <a href="https://icons8.com/icon/12810/treble-clef">Treble Clef 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>

index.php

@@ -1,41 +0,0 @@
-<?php
-$title = "Accueil";
-include("header.php");
-?>
-
-<!-- Content -->
-<main role="main" class="container">
-
-    <div class="focus-center">
-        <h1>Jovian Hersemeule</h1>
-        <img src="https://img.icons8.com/color/96/000000/city.png" alt="Icone principale">
-        <h2>Bienvenue sur mon site internet. :-)</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="images/home_picture_v1.jpg" alt="Photo d'accueil"
-         usemap="#homemap">
-
-    <!-- Map image parts to site naviagtion -->
-    <map class="d-none d-sm-block" name="homemap">
-        <area shape="rect" coords="120,12,412,306" alt="CV" href="cv.php">
-        <area shape="rect" coords="494,592,944,880" alt="Projets" href="projets.php">
-        <area shape="rect" coords="0,564,194,708" alt="Contact" href="contact.php">
-    </map>
-
-</main>
-
-<!-- Footer -->
-<footer class="footer bg-dark mt-5">
-    <div class="container">
-        <span class="text-muted">Version v2.05 - mise en ligne le 4 aout 2019</span>
-    </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>

projets.php

@@ -1,211 +0,0 @@
-<?php
-$title = "Projets";
-include("header.php");
-?>
-
-<!-- Main -->
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            Projets
-        </h1>
-        <img src="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
-        <h2>
-            Tous mes projets de programmation
-        </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="https://img.icons8.com/color/48/000000/term.png" alt="[Présentation]">
-        Présentation
-    </h3>
-    <p>
-        Chaque encart présente le résumé d'un projet. Si vous cliquez sur <code>Voir la 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>
-
-    <!-- Présentation : En cours -->
-    <h3>
-        <img src="https://img.icons8.com/color/50/000000/rocket.png" alt="v ">
-        En cours
-    </h3>
-    <p>
-        Retrouvez ici les projets sur lesquels je passe mon temps actuellement.
-    </p>
-    <p>
-        Je travaille dessus, donc leur avancement évolue. N'hésitez donc pas à consulter régulièrement les pages qui
-        leur sont dédiées, j'essaierai de les mettre à jour dès que j'ai du nouveau ...
-    </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="[En cours]">
-                    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>
-    </div>
-
-    <!-- présentation projets présentables -->
-    <h3>
-        <img src="https://img.icons8.com/color/50/000000/space-shuttle.png" alt="v ">
-        Présentables
-    </h3>
-    <p>
-        Voici ici les projets qui sont <em>présentables</em>. j'entends par présentable tout projet suffisamment avancé
-        pour susciter de l'intérêt.
-    </p>
-    <p>
-        Tous ces projets sont sujets à amélioration. Et peut-être prendrai-je le temps un jour de les améliorer, mais le
-        temps est une denrée rare ...
-    </p>
-    <p>
-        Ainsi, vous, cher visiteur, avez peut-être plus de temps que moi. Si un projet vous intéresse, n'hésitez pas à
-        vous l'approprier !
-    </p>
-    <p>
-        Toi, cher programmeur, tu peux récupérer le code depuis GitHub et me proposer des améliorations.
-    </p>
-    <p>
-        Toi, cher utilisateur, si tu as testé quelques exécutables, n'hésite pas à me contacter pour proposer
-        améliorations ou changements.
-    </p>
-    <p>
-        Un projet vit, et c'est en partie grâce à vous !
-    </p>
-
-    <!-- Projets présentables -->
-    <div class="card-columns">
-        <div class="card">
-            <img class="card-img-top" src="images/project_icon_ASCII.png"
-                 alt="[ASCII Space Destroyer]">
-            <div class="card-body">
-                <h4 class="card-title">
-                    <img src="https://img.icons8.com/color/35/000000/space-shuttle.png" alt="[Présentable]">
-                    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]">
-            <div class="card-body">
-                <h4 class="card-title">
-                    <img src="https://img.icons8.com/color/35/000000/space-shuttle.png" alt="[Présentable]">
-                    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>
-    </div>
-
-    <!-- Présentation projets à venir -->
-    <h3>
-        <img src="https://img.icons8.com/color/50/000000/blueprint.png" alt="v ">
-        À venir
-    </h3>
-    <p>
-        Selon moi, un projet est un mouvement. Il y a une construction en cours, une dynamique qui façonne, de
-        l'imagination qui devient création.
-    </p>
-    <p>
-        Mais avant de devenir un projet, il y a une idée.
-    </p>
-    <p>
-        Cette section <em>À venir</em> regroupe donc l'ensemble de mes idées qui n'attendent qu'une chose : suffisamment
-        d'investissement pour être réalisées ...
-    </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]">
-            <div class="card-body">
-                <h4 class="card-title">
-                    <img src="https://img.icons8.com/color/35/000000/blueprint.png" alt="[À venir]">
-                    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>
-    </div>
-
-    <!-- Présentation projets terminés -->
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/uranus-planet.png" alt="v ">
-        Terminés
-    </h3>
-    <p>
-        J'estime que cette section sera vide pour un bon moment. En effet, un projet n'est pas un produit. C'est un
-        mouvement. Tout ce que je fais est améliorable ...
-    </p>
-    <p>
-        Pensez au feu. Ce n'est pas de la matière : c'est un phénomène. Une flamme est belle quand elle est au
-        mouvement, avec sa chaleur, sa vie et sa fulgurance ...
-    </p>
-    <p>
-        Voilà, c'est tout pour la réflexion philosophique ...
-    </p>
-</main>
-
-<!-- Footer -->
-<footer class="footer 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>
-        <a href="https://icons8.com/icon/15175/rocket">Rocket icon by Icons8</a>
-        <a href="https://icons8.com/icon/21447/space-shuttle">Space Shuttle icon by Icons8</a>
-        <a href="https://icons8.com/icon/23885/blueprint">Blueprint icon by Icons8</a>
-        <a href="https://icons8.com/icon/62040/uranus-planet">Uranus Planet 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>

projets/pro_ascii_space.php

@@ -1,501 +0,0 @@
-<?php
-$title = "ASCII";
-include("../header.php");
-?>
-
-<!-- Main -->
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            ASCII Space Destroyer
-        </h1>
-        <img class="rounded" src="../images/projets_ascii_ship_torpEL.png" alt="code flat icon">
-        <h2>
-            Jeu vidéo réalisé en C++
-        </h2>
-        <p class="lead">
-            Derrière ce nom un peu bourrin se cache un shooter à la <em>Space Invader</em> où les joueurs peuvent
-            concevoir
-            leur propre vaisseau avant de partir à l'aventure.
-        </p>
-    </div>
-
-    <!-- Content -->
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/term.png" alt="V">
-        Introduction
-    </h3>
-    <p>
-        Entre mes deux années de prépa, j'ai eu envie de reprendre le C++.
-    </p>
-    <p>
-        J'aime bien le thème de l'espace, ainsi que la possibilité pour le joueur de créer son propre vaisseau.
-    </p>
-    <p>
-        C'est ainsi qu'a débuté le projet ASCII Space Destroyer.
-    </p>
-
-    <h3>
-        Le jeu
-    </h3>
-    <h4>
-        Principe
-    </h4>
-    <div class="row">
-        <div class="col-lg-12 col-xl-4">
-            <p>
-                <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le
-                pionnier
-                du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils
-                ne
-                franchissent le bord droit de l'écran.
-            </p>
-            <p>
-                La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères
-                standards
-                qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em>
-                pour
-                votre
-                vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts
-                subis.
-                Si
-                votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
-            </p>
-        </div>
-        <div class="col-lg-12 col-xl-8">
-            <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_game1.png" alt="cv flat icon"/>
-        </div>
-    </div>
-    <h4>
-        Progression
-    </h4>
-    <div class="row">
-        <div class="col-lg-12 col-xl-9">
-            <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_menu.png" alt="cv flat icon"/>
-        </div>
-        <div class="col-lg-12 col-xl-3">
-            <p>
-                Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une
-                courte
-                description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour
-                chaque
-                planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux.
-                Soit la
-                limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il
-                débloque une
-                arme ou le bouclier de combat.
-            </p>
-        </div>
-    </div>
-    <h4>
-        Faire son propre vaisseau
-    </h4>
-    <p>
-        L'avantage de ce genre de graphisme, c'est que n'importe quel joueur peut créer son propre vaisseau : il suffit
-        pour cela d'un éditeur de texte.
-    </p>
-    <p>
-        Lors du chargement du vaisseau, le programme va automatiquement reconnaître les combinaisons de caractères
-        utilisées pour placer le cockpit et les divers équipements disponibles.
-    </p>
-    <p>
-        Voici une courte description de l'arsenal à disposition.
-    </p>
-
-    <div class="row">
-        <div class="col-xl-4 col-lg-6 col-md-12">
-            <h5>
-                Le Gun <code>[-</code>
-            </h5>
-            <p>
-                Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque
-                part
-                dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en
-                forme de
-                <code>+</code>.
-            </p>
-            <p>
-                À l'impact, le Gun fait des dégâts localisés autour du point de contact.
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-            <h5>
-                Le Cutter <code>[|</code>
-            </h5>
-            <p>
-                Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le
-                projectile
-                en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne
-                verticale
-                prennent 50 points de dommages (maxi : 100).
-            </p>
-            <p>
-                Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau
-                ennemi en
-                deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de
-                structure ...
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-
-            <h5>
-                Le Disper <code>[<</code>
-            </h5>
-            <p>
-                Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de
-                tir.
-            </p>
-            <p>
-                Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite.
-                Il faut
-                savoir que le tir de Disper fait davantage de dégâts au contact.
-            </p>
-            <p>
-                Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un
-                paris risqué
-                qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-
-            <h5>
-                Le Protoseeker <code>[O</code>
-            </h5>
-            <p>
-                Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
-            </p>
-            <p>
-                Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu.
-                Elle
-                compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours
-                orienté
-                vers le vaisseau ennemi le plus proche.
-            </p>
-            <p>
-                Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
-                projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-
-            <h5>
-                Missile Launcher <code>[></code>
-            </h5>
-            <p>
-                Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
-            </p>
-            <p>
-                Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un
-                autoguidage
-                fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
-                directement le cockpit de l'ennemi le plus proche.
-            </p>
-            <p>
-                Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe
-                directement au
-                coeur de sa cible.
-            </p>
-            <p>
-                Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend
-                très
-                difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans
-                l'algorithme
-                de guidage qui vous permettra d'échapper à l'impact.
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-
-            <h5>
-                Brexit launcher <code>[{</code>
-            </h5>
-            <p>
-                Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le
-                <strong>Brexit</strong>
-                est une arme basée sur la division.
-            </p>
-            <p>
-                De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs
-                en
-                diagonale.
-            </p>
-            <p>
-                Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des
-                dégâts en
-                évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-            <h5>
-                Hecto combustion <code>[~</code>
-            </h5>
-            <p>
-                L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout
-                vient du
-                fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
-            </p>
-            <p>
-                Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
-                maîtriser.
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-6 col-md-12">
-
-            <h5>
-                Sniper rifle <code>[=</code>
-            </h5>
-            <p>
-                Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
-            </p>
-            <p>
-                Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
-            </p>
-        </div>
-
-        <div class="col-xl-4 col-lg-12 col-md-12">
-
-            <h5>
-                Le bouclier de combat <code>()</code>
-            </h5>
-            <p>
-                Le bouclier n'est pas une arme, mais un dispositif de défense.
-            </p>
-            <p>
-                Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce
-                champ de
-                force absorbe les dégâts sans endommager la structure.
-            </p>
-            <p>
-                À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau
-                n'est
-                plus protégé.
-            </p>
-            <p>
-                Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
-                régénérer.
-            </p>
-            <p>
-                Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut
-                encaisser
-                avant de disparaître, ainsi que la vitesse de rechargement.
-            </p>
-        </div>
-    </div>
-
-    <h5>
-        Tableau récapitulatif
-    </h5>
-    <p>
-        Voici le résumé de tous les équipements fonctionnels disponibles pour construire votre vaisseau.
-    </p>
-    <div class="table-responsive">
-        <table class="table">
-            <thead>
-            <tr>
-                <th>Nom</th>
-                <th>Symbole</th>
-                <th>Projectile</th>
-                <th>Catégorie</th>
-                <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>Cockpit</td>
-                <td><code>m</code></td>
-                <td></td>
-                <td>Structure</td>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>Bloc</td>
-                <td title="N'importe quel caractère ASCII">ASCII</td>
-                <td></td>
-                <td>Structure</td>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>Gun</td>
-                <td><code>[-</code></td>
-                <td><code>+</code></td>
-                <td>Arme</td>
-                <td>20</td>
-            </tr>
-            <tr>
-                <td>Cutter</td>
-                <td><code>[|</code></td>
-                <td><code>|</code></td>
-                <td>Arme</td>
-                <td>22</td>
-            </tr>
-            <tr>
-                <td>Disper</td>
-                <td><code>[<</code></td>
-                <td><code>*</code></td>
-                <td>Arme</td>
-                <td>24</td>
-            </tr>
-            <tr>
-                <td>Protoseeker</td>
-                <td><code>[O</code></td>
-                <td><code>O</code></td>
-                <td>Arme</td>
-                <td>22</td>
-            </tr>
-            <tr>
-                <td>Missile launcher</td>
-                <td><code>[></code></td>
-                <td><code>-></code></td>
-                <td>Arme</td>
-                <td>70</td>
-            </tr>
-            <tr>
-                <td>Brexit launcher</td>
-                <td><code>[{</code></td>
-                <td><code>X</code></td>
-                <td>Arme</td>
-                <td>27</td>
-            </tr>
-            <tr>
-                <td>Hecto combustion</td>
-                <td><code>[~</code></td>
-                <td><code>H</code></td>
-                <td>Arme</td>
-                <td>56</td>
-            </tr>
-            <tr>
-                <td>Sniper rifle</td>
-                <td><code>[=</code></td>
-                <td><code>=</code></td>
-                <td>Arme</td>
-                <td>50</td>
-            </tr>
-            <tr>
-                <td>Bouclier</td>
-                <td><code>()</code></td>
-                <td></td>
-                <td>Défense</td>
-                <td>30</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <h3>
-        Technologies
-    </h3>
-    <p>
-        Ce jeu a été codé en <strong>C++</strong> avec l'IDE <strong>Code::Blocks</strong>. Je me suis aidé pour cela de
-        la biblothèque SDL.
-    </p>
-
-    <div class="row">
-        <div class="col-lg-12 col-xl-6">
-            <h4>
-                SDL 1.2
-            </h4>
-            <p>
-                SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette
-                bibliothèque
-                permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
-            </p>
-            <p>
-                Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre,
-                et le
-                module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
-            </p>
-            <p>
-                La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de
-                code pour
-                arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
-            </p>
-            <p>
-                Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
-            </p>
-        </div>
-        <div class="col-lg-12 col-xl-6">
-
-            <h4>
-                SDL GFX
-            </h4>
-            <p>
-                SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa
-                fonction qui
-                permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de
-                caractères
-                ASCII ...
-            </p>
-            <p>
-                Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne
-                faisait pas
-                grand choses, je ne plaisantais pas.
-            </p>
-
-        </div>
-    </div>
-
-    <h3>
-        Téléchargements
-    </h3>
-    <div class="alert alert-info">
-        <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="[Working]">
-        <p>
-            Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
-            future version.
-        </p>
-        <p>
-            Vous pourrez télécharger les différents exécutables du jeu, que vous ayez un ordinateur sous Linux ou sous
-            Windows.
-        </p>
-        <p>
-            Repassez plus tard ...
-        </p>
-    </div>
-
-    <!-- Pagination -->
-    <ul class="pagination pagination-lg justify-content-center">
-        <li class="page-item">
-            <a class="page-link arrow" title="Page précédente" href="pro_static_site.php">&laquo</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
-        </li>
-        <li class="page-item active">
-            <div class="page-link" title="ASCII Space destroyer">2</div>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link arrow" title="Page suivante" href="pro_pulsar.php">&raquo</a>
-        </li>
-    </ul>
-</main>
-
-<!-- Footer -->
-<footer class="footer 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>

projets/pro_pulsar.php

@@ -1,74 +0,0 @@
-<?php
-$title = "Pulsar";
-include("../header.php");
-?>
-
-<!-- Main -->
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            Pulsar
-        </h1>
-        <img src="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
-        <h2>
-            Concept de jeu vidéo
-        </h2>
-        <p class="lead">
-            Pulsar est un grand projet qui est dans mon tiroir depuis 3 ans. Il est ambitieux mais reste réalisable. C'est un jeu vidéo dynamique et multijoueur, qui allie à la fois combat et récolte de ressources dans un monde spatial.
-        </p>
-    </div>
-
-	<!-- Travaux -->
-	<div class="alert alert-info">
-		<img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="[Working]">
-		<p>
-			Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
-			future version.
-		</p>
-		<p>
-			Repassez plus tard ...
-		</p>
-	</div>
-
-	<!-- Pagination -->
-	<ul class="pagination pagination-lg justify-content-center">
-		<li class="page-item">
-			<a class="page-link arrow" title="Page précédente" href="pro_ascii_space.php">&laquo</a>
-		</li>
-		<li class="page-item">
-			<a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
-		</li>
-		<li class="page-item">
-			<a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
-		</li>
-		<li class="page-item active">
-			<div class="page-link" title="Pulsar">3</div>
-		</li>
-		<li class="page-item">
-			<a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
-		</li>
-		<li class="page-item">
-			<a class="page-link arrow" title="Page suivante" href="pro_quoridor.php">&raquo</a>
-		</li>
-	</ul>
-</main>
-
-<!-- Footer -->
-<!-- todo : remove fixed-bottom as soon as content was filled -->
-<footer class="footer bg-dark mt-5 fixed-bottom">
-	<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>

projets/pro_quoridor.php

@@ -1,75 +0,0 @@
-<?php
-$title = "Quoridor";
-include("../header.php");
-?>
-
-<!-- Main -->
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            Quoridor
-        </h1>
-        <img src="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
-        <h2>
-            TIPE 2017
-        </h2>
-        <p class="lead">
-            Développement d'intelligences artificielles pour le jeu de stratégie quoridor.
-            Ce projet est un travail de groupe réalisé sur l'ensemble de ma seconde année de prépa.
-        </p>
-    </div>
-
-	<!-- Travaux -->
-	<div class="alert alert-info">
-		<img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="[Working]">
-		<p>
-			Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
-			future version.
-		</p>
-		<p>
-			Repassez plus tard ...
-		</p>
-	</div>
-
-	<!-- Pagination -->
-	<ul class="pagination pagination-lg justify-content-center">
-		<li class="page-item">
-			<a class="page-link arrow" title="Page précédente" href="pro_pulsar.php">&laquo</a>
-		</li>
-		<li class="page-item">
-			<a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
-		</li>
-		<li class="page-item">
-			<a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
-		</li>
-		<li class="page-item">
-			<a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
-		</li>
-		<li class="page-item active">
-			<div class="page-link" title="Quoridor">4</div>
-		</li>
-		<li class="page-item">
-			<a class="page-link arrow" title="Page suivante" href="../projets.php">&raquo</a>
-		</li>
-	</ul>
-</main>
-
-<!-- Footer -->
-<!-- todo : remove fixed-bottom as soon as content was filled -->
-<footer class="footer bg-dark mt-5 fixed-bottom">
-	<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>

projets/pro_static_site.php

@@ -1,262 +0,0 @@
-<?php
-$title = "Site";
-include("../header.php");
-?>
-
-<!-- Main -->
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            Mon site internet
-        </h1>
-        <img src="https://img.icons8.com/color/96/000000/html-5.png" alt="html-5 flat icon">
-        <h2>
-            Le site sur lequel vous surfez actuellement ...
-        </h2>
-        <p class="lead">
-            Et soyez heureux, ce site est garanti sans cookie !
-        </p>
-    </div>
-
-    <!-- Content -->
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/term.png" alt="V">
-        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="https://img.icons8.com/color/48/000000/bootstrap.png" alt="V">
-        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="https://img.icons8.com/color/48/000000/raspberry-pi.png" alt="V">
-        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="https://img.icons8.com/color/48/000000/dns.png" alt="V">
-        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="https://img.icons8.com/officel/48/000000/icons8-new-logo.png" alt="V">
-        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. Les plus observateurs auront
-        de plus remarqué une liste de liens en bas de certaines pages (comme celle-ci), et les plus techniques et
-        curieux d'entres vous auront peut-être remarqué que ces icônes ne sont pas hébergées sur mon serveur.
-    </p>
-    <p>
-        En fait j'utilise un site web appelé
-        <a href="https://icons8.com/">Icons8</a>
-        qui regorge d'icônes en tous genres. C'est très pratique.
-    </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>
-
-    <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>
-
-    <!-- Pagination -->
-    <ul class="pagination pagination-lg justify-content-center">
-        <li class="page-item">
-            <a class="page-link arrow" title="Page précédente" href="../projets.php">&laquo</a>
-        </li>
-        <li class="page-item active">
-            <div class="page-link" title="Site web de Jovian">1</div>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link arrow" title="Page suivante" href="pro_ascii_space.php">&raquo</a>
-        </li>
-    </ul>
-</main>
-
-<!-- Footer -->
-<footer class="footer 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>
-        <a href="https://icons8.com/icon/20909/html-5">Html 5 icon by Icons8</a>
-        <a href="https://icons8.com/icon/31748/term">Term icon by Icons8</a>
-        <a href="https://icons8.com/icon/84710/bootstrap">Bootstrap icon by Icons8</a>
-        <a href="https://icons8.com/icon/13443/raspberry-pi">Raspberry Pi icon by Icons8</a>
-        <a href="https://icons8.com/icon/63267/dns">DNS icon by Icons8</a>
-        <a href="https://icons8.com/icon/20825/icons8">Icons8 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>

undeployed/ci/jenkinsfile

@@ -0,0 +1,24 @@
+#!/usr/bin/env groovy
+
+pipeline {
+    agent { label 'prod' }
+    stages {
+        stage('Check env') {
+            steps {
+                echo "Displaying Jenkins environment variables ..."
+                echo "BRANCH_NAME : ${env.BRANCH_NAME}"
+                echo "JOVIAN_WEB_DEPLOY_PATH : ${env.JOVIAN_WEB_DEPLOY_PATH}"
+                echo "JOVIAN_WEB_PREPROD_PATH : ${env.JOVIAN_WEB_PREPROD_PATH}"
+                echo "Done."
+            }
+        }
+        stage('Deploy') {
+            when { branch 'master' }
+            steps {
+                sh "undeployed/scripts/deploy/up-date.sh"
+                sh "undeployed/scripts/deploy/up-version.sh"
+                sh "rsync --delete --recursive --verbose web/ ${env.JOVIAN_WEB_DEPLOY_PATH}"
+            }
+        }
+    }
+}

undeployed/scripts/deploy-local-httpd.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+# Deploy on local Apache2 Httpd instance
+
+gitRoot=`git rev-parse --show-toplevel`
+from="$gitRoot/web/"
+dest="/var/www/html/"
+
+echo "A copy will be peformed from ..."
+echo $from
+echo " ... to ... "
+echo $dest
+
+bash "$gitRoot/undeployed/scripts/deploy/up-date.sh"
+bash "$gitRoot/undeployed/scripts/deploy/up-version.sh"
+
+rsync --delete --recursive --verbose $from $dest
+
+git checkout -- "$gitRoot/web/include/generated/date.txt"
+git checkout -- "$gitRoot/web/include/generated/version.txt"

undeployed/scripts/deploy/README.md

@@ -0,0 +1,5 @@
+# Deploy
+
+_folder_
+
+Contains scripts to be run at deployment time

undeployed/scripts/deploy/up-date.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+gitRoot=`git rev-parse --show-toplevel`
+
+date "+%F" > "$gitRoot/web/include/generated/date.txt"
+

undeployed/scripts/deploy/up-version.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+gitRoot=`git rev-parse --show-toplevel`
+
+git describe > "$gitRoot/web/include/generated/version.txt"
+

undeployed/scripts/serve-home.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+# Host pages on LAN
+
+php -S 0.0.0.0:8080 -t '../../web'

web/include/footer.php

@@ -0,0 +1,16 @@
+<footer class="footer bg-dark mt-5">
+    <div class="container">
+        <span class="text-muted">
+            Version
+            <?php include ("generated/version.txt"); ?>
+            -
+            Mise en ligne le
+            <?php include("generated/date.txt"); ?>
+            -
+            <a href="/public/credit.php">
+            Credits
+            </a>
+        </span>
+    </div>
+</footer>
+

web/include/generated/README.md

@@ -0,0 +1,3 @@
+# Generated
+
+Every file there are placeholders which are replaced with **scripts** at deployment time.

web/include/generated/date.txt

@@ -0,0 +1 @@
+yyyy-MM-dd

web/include/generated/version.txt

@@ -0,0 +1 @@
+dev

web/include/head.php

@@ -0,0 +1,16 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Page description -->
+    <meta name="description" content="The official website of Jovian Hersemeule.">
+    <meta name="author" content="Jovian Hersemeule">
+    <meta property="og:image" content="/include/images/home_picture_v1.jpg">
+
+    <!-- Style sheet -->
+    <link href="/include/css/bootstrap.css" rel="stylesheet">
+    <link href="/include/css/custom/main.css" rel="stylesheet">
+    <link href="/include/css/custom/pagination.css" rel="stylesheet">
+
+    <title><?php echo $title; ?> - Jovian Hersemeule</title>
+</head>

header.php

@@ -1,26 +1,6 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Page description -->
-    <meta name="description" content="The official website of Jovian Hersemeule.">
-    <meta name="author" content="Jovian Hersemeule">
-    <meta property="og:image" content="images/home_picture_v1.jpg">
-
-    <!-- Style sheet -->
-    <link href="/css/bootstrap.css" rel="stylesheet">
-    <link href="/css/custom/main.css" rel="stylesheet">
-    <link href="/css/custom/pagination.css" rel="stylesheet">
-
-    <title><?php echo $title; ?> - Jovian Hersemeule</title>
-</head>
-<body>
-
 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
-    <a class="navbar-brand" href="/index.php">Jovian Hersemeule</a>
+    <a class="navbar-brand" href="/public/index.php">Jovian Hersemeule</a>
     <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav"
          aria-controls="joviaNav"
          aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png"
@@ -28,49 +8,49 @@
     <div class="collapse navbar-collapse" id="joviaNav">
         <ul class="navbar-nav mr-auto">
             <li class="nav-item <?php if ($title == "Accueil") echo "active"; ?>">
-                <a class="nav-link" href="/index.php">
+                <a class="nav-link" href="/public/index.php">
                     <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
                     Accueil
                 </a>
             </li>
             <li class="nav-item <?php if ($title == "CV") echo "active"; ?>">
-                <a class="nav-link" href="/cv.php">
+                <a class="nav-link" href="/public/cv.php">
                     <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
                     CV
                 </a>
             </li>
             <li class="nav-item dropdown
             <?php if (substr($_SERVER["SCRIPT_NAME"], 1, 7) == "projets") echo "active"; ?>">
-                <a class="nav-link dropdown-toggle" href="/projets.php" id="dropdown01" data-toggle="dropdown"
+                <a class="nav-link dropdown-toggle" href="/public/projets.php" id="dropdown01" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                     <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
                     Projets
                 </a>
                 <div class="dropdown-menu" aria-labelledby="dropdown01">
-                    <a class="dropdown-item <?php if ($title == "Projets") echo "active"; ?>" href="/projets.php">
+                    <a class="dropdown-item <?php if ($title == "Projets") echo "active"; ?>" href="/public/projets.php">
                         Liste des projets
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item <?php if ($title == "Site") echo "active"; ?>"
-                       href="/projets/pro_static_site.php">
+                       href="/public/projets/pro_static_site.php">
                         Jovian Website
                     </a>
                     <a class="dropdown-item <?php if ($title == "ASCII") echo "active"; ?>"
-                       href="/projets/pro_ascii_space.php">
+                       href="/public/projets/pro_ascii_space.php">
                         ASCII Space Destroyer
                     </a>
                     <a class="dropdown-item <?php if ($title == "Pulsar") echo "active"; ?>"
-                       href="/projets/pro_pulsar.php">
+                       href="/public/projets/pro_pulsar.php">
                         Pulsar
                     </a>
                     <a class="dropdown-item <?php if ($title == "Quoridor") echo "active"; ?>"
-                       href="/projets/pro_quoridor.php">
+                       href="/public/projets/pro_quoridor.php">
                         Quoridor
                     </a>
                 </div>
             </li>
             <li class="nav-item <?php if ($title == "Contact") echo "active"; ?>">
-                <a class="nav-link" href="/contact.php">
+                <a class="nav-link" href="/public/contact.php">
                     <img src="https://img.icons8.com/color/48/000000/secured-letter.png" alt="|">
                     Contact
                 </a>

web/public/contact.php

@@ -0,0 +1,46 @@
+<!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="https://img.icons8.com/color/96/000000/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="https://img.icons8.com/color/48/000000/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>

web/public/credit.php

@@ -0,0 +1,64 @@
+<!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="https://img.icons8.com/officel/96/000000/icons8-new-logo.png" alt="logo icons8">
+            <p class="lead">Cette page rassemble les ressources externes utilisees sur ce site.</p>
+        </div>
+
+        <!-- List -->
+        <h3>Icons8</h3>
+        <ul>
+            <li><a href="https://img.icons8.com/color/48/000000/menu-2.png">https://img.icons8.com/color/48/000000/menu-2.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/city.png">https://img.icons8.com/color/48/000000/city.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/parse-from-clipboard.png">https://img.icons8.com/color/48/000000/parse-from-clipboard.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/code.png">https://img.icons8.com/color/48/000000/code.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/secured-letter.png">https://img.icons8.com/color/48/000000/secured-letter.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/term.png">https://img.icons8.com/color/48/000000/term.png</a></li>
+            <li><a href="https://img.icons8.com/color/50/000000/rocket.png">https://img.icons8.com/color/50/000000/rocket.png</a></li>
+            <li><a href="https://img.icons8.com/color/50/000000/space-shuttle.png">https://img.icons8.com/color/50/000000/space-shuttle.png</a></li>
+            <li><a href="https://img.icons8.com/color/50/000000/blueprint.png">https://img.icons8.com/color/50/000000/blueprint.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/uranus-planet.png">https://img.icons8.com/color/48/000000/uranus-planet.png</a></li>
+            <li><a href="https://img.icons8.com/color/50/000000/student-male.png">https://img.icons8.com/color/50/000000/student-male.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/compass.png">https://img.icons8.com/color/48/000000/compass.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/development-skill.png">https://img.icons8.com/color/48/000000/development-skill.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/treble-clef.png">https://img.icons8.com/color/48/000000/treble-clef.png</a></li>
+            <li><a href="https://img.icons8.com/color/96/000000/filled-message.png">https://img.icons8.com/color/96/000000/filled-message.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/linkedin.png">https://img.icons8.com/color/48/000000/linkedin.png</a></li>
+            <li><a href="https://img.icons8.com/color/96/000000/html-5.png">https://img.icons8.com/color/96/000000/html-5.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/bootstrap.png">https://img.icons8.com/color/48/000000/bootstrap.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/raspberry-pi.png">https://img.icons8.com/color/48/000000/raspberry-pi.png</a></li>
+            <li><a href="https://img.icons8.com/color/48/000000/dns.png">https://img.icons8.com/color/48/000000/dns.png</a></li>
+            <li><a href="https://img.icons8.com/officel/48/000000/icons8-new-logo.png">https://img.icons8.com/officel/48/000000/icons8-new-logo.png</a></li>
+        </ul>
+
+    </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>

web/public/cv.php

@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<?php
+    $title = "CV";
+    include("../include/head.php");
+?>
+
+<body>
+    <!-- Navbar -->
+    <?php
+        include("../include/navbar.php")
+    ?>
+
+    <!-- Content -->
+    <main role="main" class="container">
+        <div class="focus-center">
+            <h1>
+                CV
+            </h1>
+            <img src="https://img.icons8.com/color/96/000000/parse-from-clipboard.png" alt="cv flat icon">
+            <h2>
+                Curriculum Vitae
+            </h2>
+            <div class="row">
+                <div class="col-lg-12 col-xl-6 lead"><strong>Étudiant</strong> alternant ingénieur généraliste à l'École Centrale</div>
+                <div class="col-lg-12 col-xl-6 lead"><strong>Apprenti</strong> dans l'équipe STB Integration à Viaccess-Orca</div>
+                <div class="col-lg-12 col-xl-6">
+                    <img src="../include/images/logoCN.png" class="mx-auto" alt="Logo Centrale Nantes">
+                </div>
+                <div class="col-lg-12 col-xl-6">
+                    <img src="../include/images/logoVO.png" class="mx-auto" style="height:100%" alt="Logo Viaccess Orca">
+                </div>
+            </div>
+        </div>
+        <h3>
+            <img src="https://img.icons8.com/color/50/000000/student-male.png" alt="v ">
+            Formation
+        </h3>
+        <div class="row">
+
+            <!-- Centrale -->
+            <div class="col-3">
+                2017 - aujourd'hui
+            </div>
+            <div class="col-9">
+                <b>École Centrale</b> – <span class="city">Nantes</span>
+                <br/>
+                Formation ingénieur généraliste par Alternance
+                <br/>
+                Apprentissage effectué chez Viaccess-Orca
+            </div>
+
+            <!-- Chateaubriand -->
+            <div class="col-3">
+                2015 - 2017
+            </div>
+            <div class="col-9">
+                <b>Lycée Chateaubriand</b> : <span class="middle-info">Classe Préparatoire Grandes Écoles</span> – <span
+                    class="city">Rennes</span>
+                <br/>
+                Filière MPSI (Maths Physique Sciences de l'Ingénieur) – MP* (Maths Physique)
+                <br/>
+                option informatique
+            </div>
+
+            <!-- Réaumur -->
+            <div class="col-3">
+                juin 2015
+            </div>
+            <div class="col-9">
+                <b>Lycée Réaumur</b> – <span class="city">Laval</span>
+                <br/>
+                Baccalauréat Scientifique spécialité Sciences de l'Ingénieur
+                <br/>
+                mention Très Bien
+            </div>
+        </div>
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/compass.png" alt="v ">
+            Expériences
+        </h3>
+        <div class="row">
+            <div class="col-lg-12 col-xl-6">
+                <h4>Monde de l'entreprise</h4>
+
+                <!-- Viaccess -->
+                <div class="row">
+                    <div class="col-3">
+                        déc. 2017 - aujourd'hui
+                    </div>
+                    <div class="col-9">
+                        <b>Viaccess Orca</b> – <span class="city">Cesson Sévigné</span>
+                        <br/>
+                        Apprentissage par alternance effectué avec l'École Centrale de Nantes
+                        <br/>
+                        Développement informatique dans l'équipe Intégration décodeur
+                        <br/>
+                        Application web de suivi de processus (Backend/Frontend)
+                    </div>
+                </div>
+
+                <!-- LTI -->
+                <div class="row">
+                    <div class="col-3">
+                        étés 2016-17
+                    </div>
+                    <div class="col-9">
+                        <b>LTI</b> : <span class="middle-info">La Technique Industrielle</span> – <span class="city">Bain de Bretagne</span>
+                        <br/>
+                        job d'été en intérimaire
+                        <br/>
+                        assistant métallier
+                    </div>
+                </div>
+
+                <!-- ARA-Technology -->
+                <div class="row">
+                    <div class="col-3">
+                        avril 2014
+                    </div>
+                    <div class="col-9">
+                        <b>ARA-Technology</b> – <span class="city">Laval</span>
+                        <br/>
+                        stage d'observation
+                        <br/>
+                        start-up spécialisée en
+                        réalité augmentée sur supports
+                        mobiles (développement sur Unity)
+                    </div>
+                </div>
+
+                <!-- Le Cube -->
+                <div class="row">
+                    <div class="col-3">
+                        mai 2012
+                    </div>
+                    <div class="col-9">
+                        <b>Le Cube</b> – <span class="city">St Denis de Gastines</span>
+                        <br/>
+                        stage d'observation
+                        <br/>
+                        studio d'enregistrement de musique
+                    </div>
+                </div>
+
+                <!-- AutoCast Industry -->
+                <div class="row">
+                    <div class="col-3">
+                        juin 2011
+                    </div>
+                    <div class="col-9">
+                        <b>AutoCast Industry</b> – <span class="city">Laval</span>
+                        <br/>
+                        stage d'observation
+                        <br/>
+                        fonderie de pièces automobiles
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-12 col-xl-6">
+
+                <h4>Projets scolaires</h4>
+
+                <!-- TIPE -->
+                <div class="row">
+                    <div class="col-3">
+                        2016-2017
+                    </div>
+                    <div class="col-9">
+                        <b>TIPE</b> : <span class="middle-info">Travaux d'Initiative Personnelle Encadrés</span>
+                        <br/>
+                        Projet de concours
+                        <br/>
+                        développement d'intelligences
+                        artificielles sur un jeu de stratégie
+                        <br/>
+                        20/20 au concours Centrale
+                    </div>
+                </div>
+
+                <!-- PPE -->
+                <div class="row">
+                    <div class="col-3">
+                        avril 2014
+                    </div>
+                    <div class="col-9">
+                        <b>PPE</b> : <span class="middle-info">Projet Pluridisciplinaire Encadré</span>
+                        <br/>
+                        projet de baccalauréat
+                        <br/>
+                        automatisation d'un distributeur autonome de
+                        nourriture pour chats
+                    </div>
+                </div>
+
+                <!-- Club-Programmation informatique -->
+                <div class="row">
+                    <div class="col-3">
+                        2013-2015
+                    </div>
+                    <div class="col-9">
+                        <b>Club-Programmation informatique</b>
+                        <br/>
+                        fondation et animation 4h/semaine
+                        <br/>
+                        travail en projets
+                        <br/>
+                        partage de connaissances
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/development-skill.png" alt="v ">
+            Compétences
+        </h3>
+
+        <div class="row">
+            <div class="col-lg-12 col-xl-4">
+                <h4>Langues</h4><!-- Langues -->
+
+                <div class="row">
+                    <!-- Français -->
+                    <b class="col-3">
+                        Français
+                    </b>
+                    <div class="col-9">
+                        Langue maternelle
+                    </div>
+
+                    <!-- Anglais -->
+                    <b class="col-3">
+                        Anglais
+                    </b>
+                    <div class="col-9">
+                        Fluide
+                    </div>
+
+                    <!-- Allemand -->
+                    <b class="col-3">
+                        Allemand
+                    </b>
+                    <div class="col-9">
+                        Bonnes bases
+                    </div>
+
+                    <br/>
+                </div>
+            </div>
+
+            <div class="col-lg-12 col-xl-8">
+
+                <h4>Informatique</h4><!-- Informatique -->
+
+                <div class="row">
+                    <!-- C++ -->
+                    <b class="col-3">
+                        C++
+                    </b>
+                    <div class="col-4">
+                        Très bonne maîtrise
+                    </div>
+                    <em class="col-5">
+                        7 ans d'expérience
+                    </em>
+
+                    <!-- Python -->
+                    <b class="col-3">
+                        Python
+                    </b>
+                    <div class="col-4">
+                        Bonne maîtrise
+                    </div>
+                    <em class="col-5">
+                        4 ans d'expérience
+                    </em>
+
+                    <!-- Java -->
+                    <b class="col-3">
+                        Java
+                    </b>
+                    <div class="col-4">
+                        Bonne maîtrise
+                    </div>
+                    <em class="col-5">
+                        1 an d'expérience
+                    </em>
+
+                    <!-- GNU/Linux -->
+                    <b class="col-3">
+                        GNU/Linux
+                    </b>
+                    <div class="col-4">
+                        Niveau intermédiaire
+                    </div>
+                    <em class="col-5">
+                        1 an d'expérience
+                    </em>
+                </div>
+
+                <div class="row">
+                    <b class="col-3">
+                        Web
+                    </b>
+                    <div class="col-4">
+                        Novice
+                    </div>
+                    <em class="col-5">
+                        1 an d'expérience
+                    </em>
+                </div>
+            </div>
+        </div>
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/treble-clef.png" alt="v ">
+            Intérêts
+        </h3>
+
+        <div class="row">
+            <div class="col-md-12 col-lg-6 col-xl-4">
+
+                <h4>Sport</h4>
+                Pratique du Badmindton
+                <br/>
+                Déplacements en vélo quotidiens
+            </div>
+
+            <div class="col-md-12 col-lg-6 col-xl-4">
+
+                <h4>Voyages</h4>
+                Touristiques : <em>Maroc, Angleterre, Italie, Espagne</em>
+                <br/>
+                Hébergé chez l'habitant : <em>Pays de Galles</em>
+                <br/>
+                Échanges et jumelage : <em>Allemagne</em>
+            </div>
+
+            <div class="col-md-12 col-lg-6 col-xl-4">
+
+                <h4>Musique</h4>
+                7 ans de clarinette dont 3 de clarinette basse
+                <br/>
+                4 ans membre de l'Harmonie d'Andouillé
+                <br/>
+                débutant en guitare
+            </div>
+        </div>
+
+    </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>

web/public/index.php

@@ -0,0 +1,48 @@
+<!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="https://img.icons8.com/color/96/000000/city.png" alt="Icone principale">
+            <h2>Bienvenue sur mon site internet. :-)</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/home_picture_v1.jpg" alt="Photo d'accueil"
+             usemap="#homemap">
+
+        <!-- Map image parts to site naviagtion -->
+        <map class="d-none d-sm-block" name="homemap">
+            <area shape="rect" coords="120,12,412,306" alt="CV" href="cv.php">
+            <area shape="rect" coords="494,592,944,880" alt="Projets" href="projets.php">
+            <area shape="rect" coords="0,564,194,708" alt="Contact" href="contact.php">
+        </map>
+
+    </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>

web/public/projets.php

@@ -0,0 +1,211 @@
+<!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="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
+            <h2>
+                Tous mes projets de programmation
+            </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="https://img.icons8.com/color/48/000000/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>Voir la 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>
+
+        <!-- Présentation : En cours -->
+        <h3>
+            <img src="https://img.icons8.com/color/50/000000/rocket.png" alt="rocket flat icon">
+            En cours
+        </h3>
+        <p>
+            Retrouvez ici les projets sur lesquels je passe mon temps actuellement.
+        </p>
+        <p>
+            Je travaille dessus, donc leur avancement évolue. N'hésitez donc pas à consulter régulièrement les pages qui
+            leur sont dédiées, j'essaierai de les mettre à jour dès que j'ai du nouveau ...
+        </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>
+        </div>
+
+        <!-- présentation projets présentables -->
+        <h3>
+            <img src="https://img.icons8.com/color/50/000000/space-shuttle.png" alt="space shuttle flat icon">
+            Présentables
+        </h3>
+        <p>
+            Voici ici les projets qui sont <em>présentables</em>. j'entends par présentable tout projet suffisamment avancé
+            pour susciter de l'intérêt.
+        </p>
+        <p>
+            Tous ces projets sont sujets à amélioration. Et peut-être prendrai-je le temps un jour de les améliorer, mais le
+            temps est une denrée rare ...
+        </p>
+        <p>
+            Ainsi, vous, cher visiteur, avez peut-être plus de temps que moi. Si un projet vous intéresse, n'hésitez pas à
+            vous l'approprier !
+        </p>
+        <p>
+            Toi, cher programmeur, tu peux récupérer le code depuis GitHub et me proposer des améliorations.
+        </p>
+        <p>
+            Toi, cher utilisateur, si tu as testé quelques exécutables, n'hésite pas à me contacter pour proposer
+            améliorations ou changements.
+        </p>
+        <p>
+            Un projet vit, et c'est en partie grâce à vous !
+        </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>
+        </div>
+
+        <!-- Présentation projets à venir -->
+        <h3>
+            <img src="https://img.icons8.com/color/50/000000/blueprint.png" alt="blueprint flat icon">
+            À venir
+        </h3>
+        <p>
+            Selon moi, un projet est un mouvement. Il y a une construction en cours, une dynamique qui façonne, de
+            l'imagination qui devient création.
+        </p>
+        <p>
+            Mais avant de devenir un projet, il y a une idée.
+        </p>
+        <p>
+            Cette section <em>À venir</em> regroupe donc l'ensemble de mes idées qui n'attendent qu'une chose : suffisamment
+            d'investissement pour être réalisées ...
+        </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>
+        </div>
+
+        <!-- Présentation projets terminés -->
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/uranus-planet.png" alt="planet flat icon">
+            Terminés
+        </h3>
+        <p>
+            J'estime que cette section sera vide pour un bon moment. En effet, un projet n'est pas un produit. C'est un
+            mouvement. Tout ce que je fais est améliorable ...
+        </p>
+        <p>
+            Pensez au feu. Ce n'est pas de la matière : c'est un phénomène. Une flamme est belle quand elle est au
+            mouvement, avec sa chaleur, sa vie et sa fulgurance ...
+        </p>
+        <p>
+            Voilà, c'est tout pour la réflexion philosophique ...
+        </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>

web/public/projets/pro_ascii_space.php

@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<?php
+    $title = "ASCII";
+    include("../../include/head.php");
+?>
+
+<body>
+    <!-- Navbar -->
+    <?php
+        include("../../include/navbar.php")
+    ?>
+
+    <!-- Main -->
+    <main role="main" class="container">
+        <div class="focus-center">
+            <h1>
+                ASCII Space Destroyer
+            </h1>
+            <img class="rounded" src="/include/images/projets_ascii_ship_torpEL.png" alt="torpEL ascii ship">
+            <h2>
+                Jeu vidéo réalisé en C++
+            </h2>
+            <p class="lead">
+                Derrière ce nom un peu bourrin se cache un shooter à la <em>Space Invader</em> où les joueurs peuvent
+                concevoir
+                leur propre vaisseau avant de partir à l'aventure.
+            </p>
+        </div>
+
+        <!-- Content -->
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/term.png" alt="term flat icon">
+            Introduction
+        </h3>
+        <p>
+            Entre mes deux années de prépa, j'ai eu envie de reprendre le C++.
+        </p>
+        <p>
+            J'aime bien le thème de l'espace, ainsi que la possibilité pour le joueur de créer son propre vaisseau.
+        </p>
+        <p>
+            C'est ainsi qu'a débuté le projet ASCII Space Destroyer.
+        </p>
+
+        <h3>
+            Le jeu
+        </h3>
+        <h4>
+            Principe
+        </h4>
+        <div class="row">
+            <div class="col-lg-12 col-xl-4">
+                <p>
+                    <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le
+                    pionnier
+                    du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils
+                    ne
+                    franchissent le bord droit de l'écran.
+                </p>
+                <p>
+                    La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères
+                    standards
+                    qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em>
+                    pour
+                    votre
+                    vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts
+                    subis.
+                    Si
+                    votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
+                </p>
+            </div>
+            <div class="col-lg-12 col-xl-8">
+                <img class="rounded img-fluid mx-auto d-block" src="/include/images/projets_ascii_game1.png" alt="game screenshot"/>
+            </div>
+        </div>
+        <h4>
+            Progression
+        </h4>
+        <div class="row">
+            <div class="col-lg-12 col-xl-9">
+                <img class="rounded img-fluid mx-auto d-block" src="/include/images/projets_ascii_menu.png" alt="menu screenshot"/>
+            </div>
+            <div class="col-lg-12 col-xl-3">
+                <p>
+                    Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une
+                    courte
+                    description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour
+                    chaque
+                    planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux.
+                    Soit la
+                    limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il
+                    débloque une
+                    arme ou le bouclier de combat.
+                </p>
+            </div>
+        </div>
+        <h4>
+            Faire son propre vaisseau
+        </h4>
+        <p>
+            L'avantage de ce genre de graphisme, c'est que n'importe quel joueur peut créer son propre vaisseau : il suffit
+            pour cela d'un éditeur de texte.
+        </p>
+        <p>
+            Lors du chargement du vaisseau, le programme va automatiquement reconnaître les combinaisons de caractères
+            utilisées pour placer le cockpit et les divers équipements disponibles.
+        </p>
+        <p>
+            Voici une courte description de l'arsenal à disposition.
+        </p>
+
+        <div class="row">
+            <div class="col-xl-4 col-lg-6 col-md-12">
+                <h5>
+                    Le Gun <code>[-</code>
+                </h5>
+                <p>
+                    Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque
+                    part
+                    dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en
+                    forme de
+                    <code>+</code>.
+                </p>
+                <p>
+                    À l'impact, le Gun fait des dégâts localisés autour du point de contact.
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+                <h5>
+                    Le Cutter <code>[|</code>
+                </h5>
+                <p>
+                    Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le
+                    projectile
+                    en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne
+                    verticale
+                    prennent 50 points de dommages (maxi : 100).
+                </p>
+                <p>
+                    Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau
+                    ennemi en
+                    deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de
+                    structure ...
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+
+                <h5>
+                    Le Disper <code>[<</code>
+                </h5>
+                <p>
+                    Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de
+                    tir.
+                </p>
+                <p>
+                    Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite.
+                    Il faut
+                    savoir que le tir de Disper fait davantage de dégâts au contact.
+                </p>
+                <p>
+                    Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un
+                    paris risqué
+                    qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+
+                <h5>
+                    Le Protoseeker <code>[O</code>
+                </h5>
+                <p>
+                    Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
+                </p>
+                <p>
+                    Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu.
+                    Elle
+                    compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours
+                    orienté
+                    vers le vaisseau ennemi le plus proche.
+                </p>
+                <p>
+                    Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
+                    projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+
+                <h5>
+                    Missile Launcher <code>[></code>
+                </h5>
+                <p>
+                    Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
+                </p>
+                <p>
+                    Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un
+                    autoguidage
+                    fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
+                    directement le cockpit de l'ennemi le plus proche.
+                </p>
+                <p>
+                    Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe
+                    directement au
+                    coeur de sa cible.
+                </p>
+                <p>
+                    Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend
+                    très
+                    difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans
+                    l'algorithme
+                    de guidage qui vous permettra d'échapper à l'impact.
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+
+                <h5>
+                    Brexit launcher <code>[{</code>
+                </h5>
+                <p>
+                    Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le
+                    <strong>Brexit</strong>
+                    est une arme basée sur la division.
+                </p>
+                <p>
+                    De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs
+                    en
+                    diagonale.
+                </p>
+                <p>
+                    Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des
+                    dégâts en
+                    évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+                <h5>
+                    Hecto combustion <code>[~</code>
+                </h5>
+                <p>
+                    L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout
+                    vient du
+                    fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
+                </p>
+                <p>
+                    Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
+                    maîtriser.
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-6 col-md-12">
+
+                <h5>
+                    Sniper rifle <code>[=</code>
+                </h5>
+                <p>
+                    Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
+                </p>
+                <p>
+                    Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
+                </p>
+            </div>
+
+            <div class="col-xl-4 col-lg-12 col-md-12">
+
+                <h5>
+                    Le bouclier de combat <code>()</code>
+                </h5>
+                <p>
+                    Le bouclier n'est pas une arme, mais un dispositif de défense.
+                </p>
+                <p>
+                    Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce
+                    champ de
+                    force absorbe les dégâts sans endommager la structure.
+                </p>
+                <p>
+                    À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau
+                    n'est
+                    plus protégé.
+                </p>
+                <p>
+                    Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
+                    régénérer.
+                </p>
+                <p>
+                    Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut
+                    encaisser
+                    avant de disparaître, ainsi que la vitesse de rechargement.
+                </p>
+            </div>
+        </div>
+
+        <h5>
+            Tableau récapitulatif
+        </h5>
+        <p>
+            Voici le résumé de tous les équipements fonctionnels disponibles pour construire votre vaisseau.
+        </p>
+        <div class="table-responsive">
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>Nom</th>
+                    <th>Symbole</th>
+                    <th>Projectile</th>
+                    <th>Catégorie</th>
+                    <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Cockpit</td>
+                    <td><code>m</code></td>
+                    <td></td>
+                    <td>Structure</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Bloc</td>
+                    <td title="N'importe quel caractère ASCII">ASCII</td>
+                    <td></td>
+                    <td>Structure</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Gun</td>
+                    <td><code>[-</code></td>
+                    <td><code>+</code></td>
+                    <td>Arme</td>
+                    <td>20</td>
+                </tr>
+                <tr>
+                    <td>Cutter</td>
+                    <td><code>[|</code></td>
+                    <td><code>|</code></td>
+                    <td>Arme</td>
+                    <td>22</td>
+                </tr>
+                <tr>
+                    <td>Disper</td>
+                    <td><code>[<</code></td>
+                    <td><code>*</code></td>
+                    <td>Arme</td>
+                    <td>24</td>
+                </tr>
+                <tr>
+                    <td>Protoseeker</td>
+                    <td><code>[O</code></td>
+                    <td><code>O</code></td>
+                    <td>Arme</td>
+                    <td>22</td>
+                </tr>
+                <tr>
+                    <td>Missile launcher</td>
+                    <td><code>[></code></td>
+                    <td><code>-></code></td>
+                    <td>Arme</td>
+                    <td>70</td>
+                </tr>
+                <tr>
+                    <td>Brexit launcher</td>
+                    <td><code>[{</code></td>
+                    <td><code>X</code></td>
+                    <td>Arme</td>
+                    <td>27</td>
+                </tr>
+                <tr>
+                    <td>Hecto combustion</td>
+                    <td><code>[~</code></td>
+                    <td><code>H</code></td>
+                    <td>Arme</td>
+                    <td>56</td>
+                </tr>
+                <tr>
+                    <td>Sniper rifle</td>
+                    <td><code>[=</code></td>
+                    <td><code>=</code></td>
+                    <td>Arme</td>
+                    <td>50</td>
+                </tr>
+                <tr>
+                    <td>Bouclier</td>
+                    <td><code>()</code></td>
+                    <td></td>
+                    <td>Défense</td>
+                    <td>30</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>
+            Technologies
+        </h3>
+        <p>
+            Ce jeu a été codé en <strong>C++</strong> avec l'IDE <strong>Code::Blocks</strong>. Je me suis aidé pour cela de
+            la biblothèque SDL.
+        </p>
+
+        <div class="row">
+            <div class="col-lg-12 col-xl-6">
+                <h4>
+                    SDL 1.2
+                </h4>
+                <p>
+                    SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette
+                    bibliothèque
+                    permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
+                </p>
+                <p>
+                    Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre,
+                    et le
+                    module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
+                </p>
+                <p>
+                    La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de
+                    code pour
+                    arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
+                </p>
+                <p>
+                    Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
+                </p>
+            </div>
+            <div class="col-lg-12 col-xl-6">
+
+                <h4>
+                    SDL GFX
+                </h4>
+                <p>
+                    SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa
+                    fonction qui
+                    permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de
+                    caractères
+                    ASCII ...
+                </p>
+                <p>
+                    Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne
+                    faisait pas
+                    grand choses, je ne plaisantais pas.
+                </p>
+
+            </div>
+        </div>
+
+        <h3>
+            Téléchargements
+        </h3>
+        <div class="alert alert-info">
+            <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="worker flat icon">
+            <p>
+                Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
+                future version.
+            </p>
+            <p>
+                Vous pourrez télécharger les différents exécutables du jeu, que vous ayez un ordinateur sous Linux ou sous
+                Windows.
+            </p>
+            <p>
+                Repassez plus tard ...
+            </p>
+        </div>
+
+        <!-- Pagination -->
+        <ul class="pagination pagination-lg justify-content-center">
+            <li class="page-item">
+                <a class="page-link arrow" title="Page précédente" href="pro_static_site.php">&laquo</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
+            </li>
+            <li class="page-item active">
+                <div class="page-link" title="ASCII Space destroyer">2</div>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link arrow" title="Page suivante" href="pro_pulsar.php">&raquo</a>
+            </li>
+        </ul>
+    </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>

web/public/projets/pro_pulsar.php

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<?php
+    $title = "Pulsar";
+    include("../../include/head.php");
+?>
+
+<body>
+    <!-- Navbar -->
+    <?php
+        include("../../include/navbar.php")
+    ?>
+
+    <!-- Main -->
+    <main role="main" class="container">
+        <div class="focus-center">
+            <h1>
+                Pulsar
+            </h1>
+            <img src="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
+            <h2>
+                Concept de jeu vidéo
+            </h2>
+            <p class="lead">
+                Pulsar est un grand projet qui est dans mon tiroir depuis 3 ans. Il est ambitieux mais reste réalisable. C'est un jeu vidéo dynamique et multijoueur, qui allie à la fois combat et récolte de ressources dans un monde spatial.
+            </p>
+        </div>
+
+            <!-- Travaux -->
+            <div class="alert alert-info">
+                    <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="worker flat icon">
+                    <p>
+                            Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
+                            future version.
+                    </p>
+                    <p>
+                            Repassez plus tard ...
+                    </p>
+            </div>
+
+            <!-- Pagination -->
+            <ul class="pagination pagination-lg justify-content-center">
+                    <li class="page-item">
+                            <a class="page-link arrow" title="Page précédente" href="pro_ascii_space.php">&laquo</a>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
+                    </li>
+                    <li class="page-item active">
+                            <div class="page-link" title="Pulsar">3</div>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link arrow" title="Page suivante" href="pro_quoridor.php">&raquo</a>
+                    </li>
+            </ul>
+    </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>

web/public/projets/pro_quoridor.php

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<?php
+    $title = "Quoridor";
+    include("../../include/head.php");
+?>
+
+<body>
+    <!-- Navbar -->
+    <?php
+        include("../../include/navbar.php")
+    ?>
+
+    <!-- Main -->
+    <main role="main" class="container">
+        <div class="focus-center">
+            <h1>
+                Quoridor
+            </h1>
+            <img src="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
+            <h2>
+                TIPE 2017
+            </h2>
+            <p class="lead">
+                Développement d'intelligences artificielles pour le jeu de stratégie quoridor.
+                Ce projet est un travail de groupe réalisé sur l'ensemble de ma seconde année de prépa.
+            </p>
+        </div>
+
+            <!-- Travaux -->
+            <div class="alert alert-info">
+                    <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="worker flat icon">
+                    <p>
+                            Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
+                            future version.
+                    </p>
+                    <p>
+                            Repassez plus tard ...
+                    </p>
+            </div>
+
+            <!-- Pagination -->
+            <ul class="pagination pagination-lg justify-content-center">
+                    <li class="page-item">
+                            <a class="page-link arrow" title="Page précédente" href="pro_pulsar.php">&laquo</a>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
+                    </li>
+                    <li class="page-item active">
+                            <div class="page-link" title="Quoridor">4</div>
+                    </li>
+                    <li class="page-item">
+                            <a class="page-link arrow" title="Page suivante" href="../projets.php">&raquo</a>
+                    </li>
+            </ul>
+    </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>

web/public/projets/pro_static_site.php

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<?php
+    $title = "Site";
+    include("../../include/head.php");
+?>
+
+<body>
+    <!-- Navbar -->
+    <?php
+        include("../../include/navbar.php")
+    ?>
+
+    <!-- Main -->
+    <main role="main" class="container">
+        <div class="focus-center">
+            <h1>
+                Mon site internet
+            </h1>
+            <img src="https://img.icons8.com/color/96/000000/html-5.png" alt="html-5 flat icon">
+            <h2>
+                Le site sur lequel vous surfez actuellement ...
+            </h2>
+            <p class="lead">
+                Et soyez heureux, ce site est garanti sans cookie !
+            </p>
+        </div>
+
+        <!-- Content -->
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/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="https://img.icons8.com/color/48/000000/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="https://img.icons8.com/color/48/000000/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="https://img.icons8.com/color/48/000000/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="https://img.icons8.com/officel/48/000000/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>
+
+        <!-- Pagination -->
+        <ul class="pagination pagination-lg justify-content-center">
+            <li class="page-item">
+                <a class="page-link arrow" title="Page précédente" href="../projets.php">&laquo</a>
+            </li>
+            <li class="page-item active">
+                <div class="page-link" title="Site web de Jovian">1</div>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link arrow" title="Page suivante" href="pro_ascii_space.php">&raquo</a>
+            </li>
+        </ul>
+    </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>