add current website

src/routes/index.rs

@@ -8,12 +8,10 @@ pub async fn page() -> impl Responder {
 
 #[derive(Template)]
 #[template(path = "../templates/index.html")]
-struct IndexTemplate<'a> {
+struct IndexTemplate {}
-    name: &'a str,
-}
 
 pub fn get_index() -> std::string::String {
-    let index = IndexTemplate { name: "world" };
+    let index = IndexTemplate {};
 
     index.render().unwrap()
 }

static/css/fonts/Read Me.txt

@@ -0,0 +1,14 @@
+
+
+
+Ces fontes sont distribuées gratuitement sous Licence publique Creative Commons Attribution 4.0 International :
+https://creativecommons.org/licenses/by/4.0/legalcode.fr
+
+
+
+These fonts are freely available under Creative Commons Attribution 4.0 International Public License:
+https://creativecommons.org/licenses/by/4.0/legalcode
+
+
+
+Luciole © Laurent Bourcellier & Jonathan Perez

static/css/style.css

@@ -0,0 +1,248 @@
+/* Title font */
+@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@200&display=swap");
+
+/* Normal font */
+@font-face {
+    font-family: "Luciole";
+    font-style: normal;
+    font-weight: normal;
+    src: url(/css/fonts/Luciole-Regular.ttf);
+}
+
+/* Italic font */
+@font-face {
+    font-family: "Luciole";
+    font-style: italic;
+    font-weight: normal;
+    src: url(/css/fonts/Luciole-Regular-Italic.ttf);
+}
+
+/* Bold fond */
+@font-face {
+    font-family: "Luciole";
+    font-style: normal;
+    font-weight: bold;
+    src: url(/css/fonts/Luciole-Bold.ttf);
+}
+
+/* Bold italic font */
+@font-face {
+    font-family: "Luciole";
+    font-style: italic;
+    font-weight: bold;
+    src: url(/css/fonts/Luciole-Bold-Italic.ttf);
+}
+
+/* Page bottom */
+footer {
+    position: absolute;
+    bottom: 0;
+    margin: -8px;
+    width: 100%;
+    height: 2.5rem;
+}
+
+/* Regular tags */
+html {
+    position: relative;
+    min-height: 100vh;
+    height: 100%;
+    scroll-behavior: smooth;
+}
+
+body {
+    position: relative;
+    padding-bottom: 3em;
+    min-height: 90%;
+    background-color: rgb(24, 24, 24);
+}
+
+p,
+h1,
+h2,
+h3,
+li,
+a {
+    font-family: "Luciole", sans-serif;
+}
+
+::selection {
+    color: rgb(255, 255, 255);
+    background: rgba(124, 75, 173, 0.486);
+}
+
+/* Frames */
+h1.subtitle {
+    text-decoration: none;
+    color: rgb(28, 118, 236);
+}
+
+h1#title {
+    text-align: center;
+    color: rgb(28, 236, 174);
+}
+
+h2.subtitle,
+h2.subtitle a {
+    color: rgb(28, 118, 236) !important;
+}
+
+h3.subsubtitle,
+#content h3.subsubtitle a {
+    text-align: left;
+    color: rgb(149, 87, 201);
+}
+
+#content h3.subsubtitle a:hover {
+    color: rgb(0, 181, 236);
+    transition: color 0.1s;
+}
+
+div#content {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2%;
+    padding: 0.9% 0.9% 0.9% 0.9%;
+    width: 42%;
+    border-radius: 6px;
+    border: 1px solid rgb(170, 170, 170);
+    text-align: center;
+}
+
+@media only screen and (max-width: 850px) {
+    /* Mobile display */
+    div#content {
+        width: 90%;
+    }
+}
+
+#content a,
+#content a:visited,
+#content ul {
+    text-decoration: none;
+    color: rgb(201, 201, 201);
+    text-align: center;
+}
+
+#content p {
+    text-decoration: none;
+    color: rgb(201, 201, 201);
+    text-align: center;
+    padding: 0.7em;
+}
+
+#content a:hover {
+    color: rgb(0, 181, 236);
+    transition: color 0.1s;
+}
+
+/* https://stackoverflow.com/a/40244401/15436737 */
+
+#content a {
+    position: relative;
+    text-decoration: none;
+    display: inline-block;
+}
+
+#content a:after {
+    display: block;
+    content: "";
+    border-bottom: solid 3px;
+    transform: scaleX(0);
+    transition: transform 250ms ease-in-out;
+    transform-origin: 100% 50%;
+}
+
+#content a:hover:after {
+    transform: scaleX(1);
+    transform-origin: 0 50%;
+}
+
+/* ------------------------------------------- */
+
+div.subcontent {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5%;
+    padding: 1.2% 1.2% 1.2% 1.2%;
+    width: 78%;
+    border-radius: 6px;
+    border: 1px solid rgb(170, 170, 170);
+    text-align: center;
+}
+
+#listecontent li {
+    margin-bottom: 0.5em;
+}
+
+/* Index */
+.index {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.divIndex {
+    width: 50%;
+    height: 50%;
+    float: left;
+}
+
+button.buttonIndex {
+    width: 100%;
+    height: 100%;
+    border: none;
+    opacity: 0.6;
+    transition: all 0.1s;
+    cursor: pointer;
+}
+
+span.buttonIndex {
+    font-family: "Overpass", sans-serif;
+    font-size: 500%;
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+.buttonIndex:hover,
+span.buttonIndex:after {
+    opacity: 1;
+    padding-right: 2%;
+}
+
+#buttonIndexTL {
+    background-color: rgb(0, 255, 255);
+}
+
+#buttonIndexTR {
+    background-color: rgb(21, 255, 0);
+}
+
+#buttonIndexBL {
+    background-color: rgb(187, 255, 0);
+}
+
+#buttonIndexBR {
+    background-color: rgb(208, 88, 255);
+}
+
+/* Back links going to the index */
+footer.backToIndexPage {
+    text-align: center;
+}
+
+footer.backToIndexPage a {
+    color: rgb(114, 180, 76);
+    text-decoration: none;
+}
+
+footer.backToIndexPage a:hover {
+    color: rgb(152, 187, 132);
+}
+
+/* Hide content */
+.hide {
+    display: none;
+}

static/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="icons/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/icons/safari-pinned-tab.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="192.000000pt" height="192.000000pt" viewBox="0 0 192.000000 192.000000" preserveAspectRatio="xMidYMid meet">
+    <metadata>Created by potrace 1.14, written by Peter Selinger 2001-2017</metadata>
+    <g transform="translate(0.000000,192.000000) scale(0.100000,-0.100000)"fill="#000000" stroke="none">
+        <path d="M396 1898 c11 -38 42 -94 58 -107 8 -7 25 -11 38 -9 30 4 36 48 12100 -16 37 -19 38 -66 38 -47 0 -49 -1 -42 -22z"/>
+        <path d="M847 1862 c-27 -29 -22 -98 8 -127 46 -47 81 -23 71 49 -7 42 -38 96-55 96 -4 0 -15 -8 -24 -18z"/>
+        <path d="M1295 1860 c-26 -29 -17 -126 15 -152 25 -21 29 -21 50 -8 18 12 18144 -1 166 -16 20 -43 17 -64 -6z"/>
+        <path d="M0 1799 c0 -66 3 -78 23 -97 27 -26 50 -28 67 -7 21 26 3 80 -45 132l-44 48 -1 -76z"/>
+        <path d="M1665 1809 c-31 -59 -1 -130 43 -103 21 14 37 73 28 108 -9 38 -5036 -71 -5z"/>
+        <path d="M384 1500 c-12 -5 -29 -19 -38 -32 -50 -71 36 -197 109 -158 64 3458 157 -10 188 -30 14 -32 14 -61 2z"/>
+        <path d="M1424 1490 c-60 -24 -81 -105 -44 -165 38 -61 140 -87 195 -51 11374 -22 268 -151 216z"/>
+        <path d="M914 1056 c-13 -21 -14 -28 -2 -49 73 -133 96 -155 142 -137 71 2657 120 -26 180 -51 37 -92 39 -114 6z"/>
+        <path d="M1516 824 c-25 -25 -19 -54 34 -163 68 -139 67 -167 -9 -205 -72 -37-244 -77 -357 -83 -114 -6 -253 7 -369 37 -211 53 -305 112 -329 205 -9 36-20 54 -39 65 -24 13 -28 13 -54 -6 -75 -56 -17 -198 115 -283 62 -40 260-104 383 -125 112 -19 269 -24 390 -13 l87 9 46 -70 c62 -91 87 -114 121 -11060 7 58 51 -4 143 -28 41 -37 63 -30 71 5 6 37 21 70 34 77 27 145 92 155 1453 20 4 56 0 80 -7 51 -95 234 -128 264 -26 25 -61 27 -82 5z"/>
+    </g>
+</svg>

static/icons/site.webmanifest

@@ -0,0 +1,15 @@
+{
+  "name": "Site Anri K.",
+  "short_name": "Site Anri K.",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#2a2424",
+  "background_color": "#2a2424",
+  "start_url": "https://www.mylloon.fr/",
+  "display": "standalone"
+}

templates/index.html

@@ -1 +1,78 @@
-Hello, {{ name }}!
+<!DOCTYPE html>
+<html class="index" lang="fr">
+  <head dir="rtl">
+    <title>Page principale - Anri</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=0.01" />
+    <link rel="stylesheet" href="css/style-min.css" />
+    <meta name="author" content="Mylloon" />
+    <meta name="description" content="Page principale" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="icons/site.webmanifest" />
+    <link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" href="icons/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-config" content="icons/browserconfig.xml" />
+    <meta name="theme-color" content="#2a2424" />
+    <meta content="Anri - Mylloon" property="og:title" />
+    <meta content="Page principale" property="og:description" />
+    <meta content="icons/apple-touch-icon.png" property="og:image" />
+    <meta content="#43B581" data-react-helmet="true" name="theme-color" />
+    <link rel="me" href="https://piaille.fr/@mylloon" />
+  </head>
+  <body class="index">
+    <div class="divIndex">
+      <button
+        class="buttonIndex"
+        id="buttonIndexTL"
+        onclick="window.location.href='https://liv.mylloon.fr/#index.md';"
+      >
+        <span class="buttonIndex">Cours</span>
+      </button>
+    </div>
+    <div class="divIndex">
+      <button
+        class="buttonIndex"
+        id="buttonIndexTR"
+        onclick="window.location.href='https://anri.prose.sh/';"
+      >
+        <span class="buttonIndex">Blog</span>
+      </button>
+    </div>
+    <div class="divIndex">
+      <button
+        class="buttonIndex"
+        id="buttonIndexBL"
+        onclick="window.location.href='networks.html';"
+      >
+        <span class="buttonIndex">Réseaux</span>
+      </button>
+    </div>
+    <div class="divIndex">
+      <button
+        class="buttonIndex"
+        id="buttonIndexBR"
+        onclick="window.location.href='portfolio.html';"
+      >
+        <span class="buttonIndex">Projets</span>
+      </button>
+    </div>
+  </body>
+</html>

templates/networks.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html class="index" lang="fr">
+  <head dir="rtl">
+    <title>Mes réseaux - Anri</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style-min.css" />
+    <meta name="author" content="Mylloon" />
+    <meta name="description" content="Réseaux d'Anri Kennel" />
+    <base target="_blank" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="icons/site.webmanifest" />
+    <link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" href="icons/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-config" content="icons/browserconfig.xml" />
+    <meta name="theme-color" content="#2a2424" />
+    <meta content="Réseaux" property="og:title" />
+    <meta content="Réseaux d'Anri Kennel" property="og:description" />
+    <meta content="icons/apple-touch-icon.png" property="og:image" />
+    <meta content="#43B581" data-react-helmet="true" name="theme-color" />
+  </head>
+  <body>
+    <div id="content">
+      <h1 class="subtitle">Contacts et <em>réseaux sociaux</em></h1>
+      <p>
+        <a
+          rel="me"
+          href="mailto:kennel.anri@tutanota.com"
+          title="kennel dot anri at tutanota dot com"
+          >Email</a
+        >
+      </p>
+      <p>
+        <a rel="me" href="https://twitter.com/Mylloon">Twitter</a>&nbsp;/
+        <a
+          rel="me"
+          title="Alternative à Twitter"
+          href="https://piaille.fr/@mylloon"
+          >Mastodon</a
+        >
+      </p>
+      <p>
+        <a rel="me" href="https://discord.com/users/158260864623968257/"
+          >Compte</a
+        >&nbsp;et
+        <a rel="me" href="https://discord.gg/Z5ePxH4">Serveur</a>&nbsp;Discord
+      </p>
+      <p><a rel="me" href="https://www.reddit.com/user/mylloon">Reddit</a></p>
+      <p>
+        <a rel="me" href="https://www.instagram.com/myshawi/">Instagram</a
+        >&nbsp;/
+        <a
+          rel="me"
+          title="Alternative à Instagram"
+          href="https://pixelfed.social/@mylloon"
+          >Pixelfed</a
+        >
+      </p>
+      <p>
+        <a rel="me" href="https://github.com/Mylloon">Github</a>&nbsp;/
+        <a rel="me" href="https://gitlab.com/Mylloon">Gitlab</a>&nbsp;/
+        <a rel="me" href="https://codeberg.org/Mylloon">Codeberg</a>&nbsp;/
+        <a rel="me" href="https://git.mylloon.fr/Anri">Mon Git</a>
+      </p>
+      <p>
+        <a
+          rel="me"
+          title="Anime tracker"
+          href="https://kitsu.io/users/Mylloon/library?status=completed"
+          >Kitsu</a
+        >
+      </p>
+      <p><a rel="me" href="https://steamcommunity.com/id/mylloon/">Steam</a></p>
+      <p>
+        <a rel="me" href="https://www.youtube.com/c/Mylloon">Youtube</a>&nbsp;/
+        <a rel="me" href="https://www.twitch.tv/mylloon">Twitch</a>
+      </p>
+      <p>
+        <a
+          rel="me"
+          href="https://keyoxide.org/27024A99057E58B8087A5022A82D63DFF8D1317F"
+          >Keyoxide</a
+        >
+      </p>
+    </div>
+    <footer class="backToIndexPage">
+      <a href="/" target="_self">Retour à la page principale</a>
+    </footer>
+  </body>
+</html>

templates/portfolio.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html class="index" lang="fr">
+  <head dir="rtl">
+    <title>Mon portfolio - Anri</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style-min.css" />
+    <meta name="author" content="Mylloon" />
+    <meta name="description" content="Portfolio d'Anri Kennel" />
+    <base target="_blank" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="icons/site.webmanifest" />
+    <link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" href="icons/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-config" content="icons/browserconfig.xml" />
+    <meta name="theme-color" content="#2a2424" />
+    <meta content="Portfolio" property="og:title" />
+    <meta content="Portfolio d'Anri Kennel" property="og:description" />
+    <meta content="icons/apple-touch-icon.png" property="og:image" />
+    <meta content="#43B581" data-react-helmet="true" name="theme-color" />
+  </head>
+
+  <body>
+    <h1 id="title">Projets qui me tiennent à coeur</h1>
+    <div id="content">
+      <h2 class="subtitle">Bots</h2>
+      <div class="subcontent">
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/ConfrerieDuKassoulait/KassouBot"
+            >KassouBot</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            ✨ Basé sur une
+            <a href="https://git.mylloon.fr/Anri/ravaBot">ancienne version</a>,
+            permet de faire plusieurs choses comme maintenir des reminders, des
+            todos, écouter de la musique, etc.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/feurBot">feurBot</a>
+        </h3>
+        <div class="subcontent">
+          <p>
+            Réponds à certains tweets (exemple : si un tweet fini par
+            <em>quoi</em>, le bot répondra <em>feur</em>).
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/ConfrerieDuKassoulait/Bot-Tom"
+            >Bot-Tom</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            Utilise SQLite pour avoir des commandes personnalisables sur Twitch.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/ConfrerieDuKassoulait/Botanique"
+            >Botanique</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            ✨
+            <a href="https://git.mylloon.fr/ConfrerieDuKassoulait/KassouBot"
+              >Pas ma première expérience</a
+            >&nbsp;en matière de bot Discord. Actuellement en actif
+            développement. Complètement libre et écrit en Typescript.
+          </p>
+        </div>
+        <br />
+      </div>
+      <h2 class="subtitle">
+        <a href="https://git.mylloon.fr/Paris8/">Projet de l'université</a>
+      </h2>
+      <div class="subcontent">
+        <p>
+          ✨ Parce que j'ai fait plusieurs projets dont je suis fier mais qui ne
+          mérite pas une place entière sur cette page comme mon
+          <a href="https://git.mylloon.fr/Paris8/penduEnC">premier pendu</a
+          >&nbsp;ou une jolie
+          <a href="https://git.mylloon.fr/Paris8/GesMag"
+            >interface manager/caisser</a
+          >, vous pouvez simplement aller voir la liste des projets en vrac qui
+          sont disponibles sur mon
+          <a href="https://git.mylloon.fr/Paris8/">git</a>.
+        </p>
+      </div>
+      <h2 class="subtitle">Projets perso</h2>
+      <div class="subcontent">
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/Constnium">Constnium</a>
+        </h3>
+        <div class="subcontent">
+          <p>
+            Calculez votre propre constante sur la base de votre prénom en
+            multipliant de vraies constantes mathématiques entre elles. Une
+            <a href="https://constnium.mylloon.fr/">démo est disponible ici</a>.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/cal8tor">cal8tor</a>
+        </h3>
+        <div class="subcontent">
+          <p>
+            Lecteur de l'emploi du temps pour la licence d'informatique de Paris
+            8, avec possibilité d'exporter le calendrier en ICS.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/prose_dl">prose_dl</a>
+        </h3>
+        <div class="subcontent">
+          <p>
+            Permets de télécharger tous les posts d'un utilisateur depuis
+            <a href="https://prose.sh/">prose.sh</a>. J'ai
+            <a href="https://anri.prose.sh/prose_dl">écrit ici</a>&nbsp;sur son
+            développement.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/downloadcodium"
+            >downloadCodium</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            Petit script qui permet de télécharger et garder à-jour facilement
+            la version .AppImage VSCodium.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/confOS">confOS</a>
+        </h3>
+        <div class="subcontent">
+          <p>
+            Scripts et fichiers de configuration pour me simplifier la vie quand
+            je réinstalle mes systèmes d'exploitation.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/mobilismScrap">mobilismScrap</a>
+        </h3>
+        <div class="subcontent">
+          <p>Deux versions, une en python et une en Kotlin :</p>
+          <ul id="listecontent">
+            <li>
+              Celle en Python permet juste de lancer, en ligne de commande, une
+              recherche qui va récupérer sur le forum Mobilism des versions
+              crackées d'applications mobiles.
+            </li>
+            <li>
+              ✨ Celle en Kotlin est une application android qui fait
+              basiquement la même chose mais avec une interface plus sympa.
+            </li>
+          </ul>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/CleanTemporaryFiles"
+            >cleanTemporaryFiles</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            Petit script Windows qui lance quelques commandes pour supprimer les
+            fichiers temporaires.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/microphonePopcat"
+            >microphonePopcat</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            Petit programme en python qui permet d'ouvrir la bouche d'un chat
+            quand on parle.
+          </p>
+        </div>
+        <h3 class="subsubtitle">
+          <a href="https://git.mylloon.fr/Anri/RenameFilesForPlex"
+            >renameFilesForPlex</a
+          >
+        </h3>
+        <div class="subcontent">
+          <p>
+            Petit programme pour renommer des fichiers vidéo (séries) pour
+            qu'ils soient lisibles directement par Plex.
+          </p>
+        </div>
+      </div>
+    </div>
+    <footer class="backToIndexPage">
+      <a href="/" target="_self">Retour à la page principale</a>
+    </footer>
+  </body>
+</html>