Add ref section

Signed-off-by: Adrien Kara <adrien@iglou.eu>

data/data.stf

@@ -125,4 +125,8 @@ En coopérative
 <p>Le choix d'exercer en coopérative, s'articule autour de deux points, des principes/valeurs personnelles, et des avantages pour moi et mes client·e·s.</p><p><b>Principes/Valeurs</b>, une coopérative regroupe un grand nombre de personnes partageant des idéaux et mettant à profit leurs ressources pour s'entraider, croyant à un mode de travail meilleur et commun. Dans le respect detout·e·s le dialogue et le partage.</p><p><b>Avantages</b>, une coopérative offre aussi un grand nombre d'avantages. <br><b>Pour moi</b>, il y a la possibilité d'exercer mon métier en autonome, d'avoir un support en cas deproblèmes, une aide pour les formalitées et une protection en cas de faillite.<br><b>Pour mes client·e·s</b>, c'est l'assurance d'une grande entreprise derriére un independant et la possibilité d'avoir le support d'un autre membre de la coopérative en cas de pépin.</p><p><a style="text-align:center;height:100px;display:block;" href="http://www.coopaname.coop/" target="_blank" rel="noreferrer"><img loading="lazy" src="/media/coopaname_logo.png" alt="Logo cooperative coopaname"></a></p>
 // Mes outils
 Mes outils
-<p>Les internets regorgent d'outils plus formidables les un que les autres, du petit qui fait gagner du temps, a l'indispensable utilisé au quotidien. Voici une petite liste des outils que j'utilise.</p><ul><li><a href="https://fr.wikipedia.org/wiki/RTFM_(expression)#Environnement_Posix" target="_blank" rel="noreferrer">RTFM</a> (La meilleur source d'information)</li><li><a href="https://www.openbsd.org/" target="_blank" rel="noreferrer">OpenBSD</a> (Meilleurs OS serveur)</li><li><a href="https://www.archlinux.org/" target="_blank" rel="noreferrer">ArchLinux</a> (Meilleur OS Desktop)</li><li><a href="https://www.vim.org/" target="_blank" rel="noreferrer">Vim</a> (Un meilleur editeur que emacs)</li><li><a href="https://www.openssh.com/" target="_blank" rel="noreferrer">OpenSSH</a> (&lt;3)</li><li><a href="https://www.tinymce.com/" target="_blank" rel="noreferrer">Editeur HTML en WYSIWYG</a> (Licence LGPL)</li><li><a href="https://cryptpad.fr/index.html" target="_blank" rel="noreferrer">Outils collaboratifs libre/léger</a></li></ul>
+<p>Les internets regorgent d'outils plus formidables les un que les autres, du petit qui fait gagner du temps, a l'indispensable utilisé au quotidien. Voici une petite liste des outils que j'utilise.</p><ul><li><a href="https://fr.wikipedia.org/wiki/RTFM_(expression)#Environnement_Posix" target="_blank" rel="noreferrer">RTFM</a> (La meilleur source d'information)</li><li><a href="https://www.openbsd.org/" target="_blank" rel="noreferrer">OpenBSD</a> (Meilleurs OS serveur)</li><li><a href="https://www.archlinux.org/" target="_blank" rel="noreferrer">ArchLinux</a> (Meilleur OS Desktop)</li><li><a href="https://www.vim.org/" target="_blank" rel="noreferrer">Vim</a> (Un meilleur editeur que emacs)</li><li><a href="https://www.openssh.com/" target="_blank" rel="noreferrer">OpenSSH</a> (&lt;3)</li><li><a href="https://www.tinymce.com/" target="_blank" rel="noreferrer">Editeur HTML en WYSIWYG</a> (Licence LGPL)</li><li><a href="https://cryptpad.fr/index.html" target="_blank" rel="noreferrer">Outils collaboratifs libre/léger</a></li></ul>
+
+// Ref
+Références
+Quelques un de mes clients finaux

public/DiscoveryOne.html

@@ -18,7 +18,12 @@
                             <use xlink:href="#svg_screwdriver"></use>
                         </svg></div><p class="benefit_item__title prez_pad__title">Outils de déploiement</p><p class="benefit_item__text prez_pad__text">Pour aider vos équipes techniques ou prestataires d’hébergement, je prends le temps de réaliser des outils de déploiement simplifié. Makefile, Script, Fichier SystemD et Readme.</p></li><li class="benefit_item prez_pad"><div class="benefit_item__icon prez_pad__icon"><svg class="svg_icon">
                             <use xlink:href="#svg_server"></use>
-                        </svg></div><p class="benefit_item__title prez_pad__title">Une infrastructure dédiée</p><p class="benefit_item__text prez_pad__text">Dans le cas où vous ne disposiez pas d’équipes techniques ou ne désiriez pas vous charger de l’hébergement. Je mets à disposition une infrastructure dédiée a votre solution.</p></li></ol></article><article id=a_faq class=article><h2 class="faq_title glob_title">Questions fréquentes</h2><p class="faq_desc glob_desc">Dans le cas où vous ne trouviez pas la réponse à votre question. N’hésitez pas a <a href=#a_contact class=link>me contacter</a></p><div class=faq_questions><details class=question open><summary class="link question_title">Faut-il s’y connaitre en développement pour faire appel à vos services ?</summary><p class=question_response>Absolument pas, je suis disponible pour vos questions et m’adapte à votre niveau pour vous accompagner, quel que soit le projet. Vous avez votre domaine d’expertise et le mien à votre disposition.</p></details><details class=question><summary class="link question_title">Comment puis-je avoir l’état d’avancement de ma prestation ?</summary><p class=question_response>À chaque début de mission, je réalise un compte client sur mon outil de suivi en ligne. En vous connectant à celui-ci, il vous sera possible de consulter l’état d’avancement et les dernières modifications réalisées sur votre projet.</p></details><details class=question><summary class="link question_title">Y a-t-il un service après vente ?</summary><p class=question_response>Pendant 6 mois après la clôture d’une mission, j’assure gratuitement les corrections de toutes anomalies, incidents ou défaillances potentiels, non liés à une erreur de manipulation. Je me tiens aussi à disposition pour toutes questions, ou besoin d’aide dans l’utilisation de votre outil. Il est pour moi essentiel d’assurer votre satisfaction.</p></details><details class=question><summary class="link question_title">Comment vous faire part d’un problème sur ma solution ?</summary><p class=question_response>Dans le cas ou vous rencontriez un problème, qu’il soit du à une erreur de manipulation ou d’un éventuel bug apparut à l’usage. Il est à tout moment possible de m’en faire part, via l’un des canaux suivants : E-mail, Téléphone, SMS ou via un ticket d’issue via l’outil de suivi en ligne.</p></details><details class=question><summary class="link question_title">Quels sont les différents modes de paiements ?</summary><p class=question_response>Vous pouvez effectuer le paiement de ma prestation par Virement bancaire, ou Carte via le service PayPal. Sur demande, vous pouvez bénéficier d’un échelonnement.<br>Il est aussi possible de régler en Ethereum</p></details></div></article><article id=a_contact class=article><h2 class="contact_title glob_title">Me contacter</h2><p class="contact_desc glob_desc">Favorisez le contact par e-mail qui est mon moyen de communication de prédilection.</p><div class=box><div class=contact_info><div class=contact_info__item><h3 class=contact_info__item_title><svg class="svg_icon">
+                        </svg></div><p class="benefit_item__title prez_pad__title">Une infrastructure dédiée</p><p class="benefit_item__text prez_pad__text">Dans le cas où vous ne disposiez pas d’équipes techniques ou ne désiriez pas vous charger de l’hébergement. Je mets à disposition une infrastructure dédiée a votre solution.</p></li></ol></article><article id=a_faq class=article><h2 class="faq_title glob_title">Questions fréquentes</h2><p class="faq_desc glob_desc">Dans le cas où vous ne trouviez pas la réponse à votre question. N’hésitez pas a <a href=#a_contact class=link>me contacter</a></p><div class=faq_questions><details class=question open><summary class="link question_title">Faut-il s’y connaitre en développement pour faire appel à vos services ?</summary><p class=question_response>Absolument pas, je suis disponible pour vos questions et m’adapte à votre niveau pour vous accompagner, quel que soit le projet. Vous avez votre domaine d’expertise et le mien à votre disposition.</p></details><details class=question><summary class="link question_title">Comment puis-je avoir l’état d’avancement de ma prestation ?</summary><p class=question_response>À chaque début de mission, je réalise un compte client sur mon outil de suivi en ligne. En vous connectant à celui-ci, il vous sera possible de consulter l’état d’avancement et les dernières modifications réalisées sur votre projet.</p></details><details class=question><summary class="link question_title">Y a-t-il un service après vente ?</summary><p class=question_response>Pendant 6 mois après la clôture d’une mission, j’assure gratuitement les corrections de toutes anomalies, incidents ou défaillances potentiels, non liés à une erreur de manipulation. Je me tiens aussi à disposition pour toutes questions, ou besoin d’aide dans l’utilisation de votre outil. Il est pour moi essentiel d’assurer votre satisfaction.</p></details><details class=question><summary class="link question_title">Comment vous faire part d’un problème sur ma solution ?</summary><p class=question_response>Dans le cas ou vous rencontriez un problème, qu’il soit du à une erreur de manipulation ou d’un éventuel bug apparut à l’usage. Il est à tout moment possible de m’en faire part, via l’un des canaux suivants : E-mail, Téléphone, SMS ou via un ticket d’issue via l’outil de suivi en ligne.</p></details><details class=question><summary class="link question_title">Quels sont les différents modes de paiements ?</summary><p class=question_response>Vous pouvez effectuer le paiement de ma prestation par Virement bancaire, ou Carte via le service PayPal. Sur demande, vous pouvez bénéficier d’un échelonnement.<br>Il est aussi possible de régler en Ethereum</p></details></div></article><article id=a_ref class=article><h2 class="ref_title glob_title">Références</h2><p class="ref_desc glob_desc">Quelques un de mes clients finaux</p><div class=ref_list><img src=/media/clients/esa.png alt="European Space Agency" class=ref_list__item>
+<img src=/media/clients/imagine.png alt="Institut Imagine" class=ref_list__item>
+<img src=/media/clients/neo_ps.png alt="Neo Property Solutions" class=ref_list__item>
+<img src=/media/clients/sncf.png alt="La SNCF" class=ref_list__item>
+<img src=/media/clients/carlab.png alt="Carlab france" class=ref_list__item>
+<img src=/media/clients/mpf.png alt="Maisons Paysannes de France" class=ref_list__item></div></article><article id=a_contact class=article><h2 class="contact_title glob_title">Me contacter</h2><p class="contact_desc glob_desc">Favorisez le contact par e-mail qui est mon moyen de communication de prédilection.</p><div class=box><div class=contact_info><div class=contact_info__item><h3 class=contact_info__item_title><svg class="svg_icon">
                                 <use xlink:href="#svg_paperplane"></use>
                             </svg><span>E-mail</span></h3><address class=contact_info__item_content><a class=link href="mailto:contact@iglou.eu?subject=%5BContact%5D%20Depuis%20Iglou.eu&body=Bonjour%20Adrien%20d%27Iglou.eu%2C%0D%0A%7BVotre%20message%7D%0D%0A%0D%0ACordialement%2C">contact@iglou.eu</a></address></div><div class=contact_info__item><h3 class=contact_info__item_title><svg class="svg_icon">
                                 <use xlink:href="#svg_phone"></use>

src/DiscoveryOne.html

@@ -146,6 +146,19 @@
             </ol>
         </article>
 
+        <article id="a_ref" class="article">
+            <h2 class="ref_title glob_title">{{index . 131}}</h2>
+            <p class="ref_desc glob_desc">{{index . 132}}</p>
+            <div class="ref_list">
+                <img loading="lazy" src="/media/clients/esa.png" alt="European Space Agency" class="ref_list__item">
+                <img loading="lazy" src="/media/clients/imagine.png" alt="Institut Imagine" class="ref_list__item">
+                <img loading="lazy" src="/media/clients/neo_ps.png" alt="Neo Property Solutions" class="ref_list__item">
+                <img loading="lazy" src="/media/clients/sncf.png" alt="La SNCF" class="ref_list__item">
+                <img loading="lazy" src="/media/clients/carlab.png" alt="Carlab france" class="ref_list__item">
+                <img loading="lazy" src="/media/clients/mpf.png" alt="Maisons Paysannes de France" class="ref_list__item">
+            </div>
+        </article>
+
         <article id="a_faq" class="article">
             <h2 class="faq_title glob_title">{{index . 64}}</h2>
             <p class="faq_desc glob_desc">{{index . 65}}</p>

src/css/Monolith.css

@@ -935,6 +935,23 @@ body {
     color: var(--c-blue);
 }
 
+/* ## Ref */
+#a_ref {
+    min-height: auto;
+}
+
+.ref_list {
+    gap: 1em;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.ref_list__item {
+    width: auto;
+    margin: auto;
+    height: 2em;
+}
+
 /* ## Contact/Map */
 #a_contact {
     margin: 6em auto auto auto;
@@ -1137,6 +1154,11 @@ body {
         grid-template-columns: 2fr 4fr;
     }
 
+    /* ## Ref */
+    .ref_list {
+        grid-template-columns: repeat(6, 1fr);
+    }
+
     .benefits_reps {
         object-position: center;
     }