Added hardware part to my website

Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>

assets/css/main.css

@@ -50,10 +50,22 @@ a {
     color: inherit;
 }
 
+p {
+    line-height: 1.3em;
+}
+
 .bold {
     font-weight: 500;
 }
 
+.width-45 {
+    width: 45%;
+}
+
+.width-100 {
+    width: 100%;
+}
+
 .button-style {
     text-decoration: none;
     padding: 13px 32px;
@@ -120,12 +132,14 @@ footer {
     background-color: #0A0A0A;
 }
 
-footer > div > p {
+.justify {
-    line-height: 1.3em;
-    flex-basis: 40%;
     text-align: justify;
 }
 
+footer > div > p {
+    flex-basis: 40%;
+}
+
 #additional-links {
     flex-basis: 55%;
 }
@@ -155,8 +169,11 @@ footer > div > p {
     margin-top: 35px;
 }
 
-#skills-logos {
+.section-content {
     margin-top: 55px;
+}
+
+#skills-logos {
     margin-left: 5%;
     margin-right: 5%;
 }
@@ -247,4 +264,8 @@ footer > div > p {
         line-height: 1.1em;
         word-break: break-word;
     }
+
+    .width-45 {
+        width: 100%;
+    }
 }

index.html

@@ -63,7 +63,7 @@ PAGE CODED BY :
         <div id="skills" class="section">
             <h3 class="white bold">Compétences</h3>
             <h5 class="grey">Des technologies que j'utilise souvent</h5>
-            <div id="skills-logos" class="flex-sb">
+            <div id="skills-logos" class="flex-sb section-content">
                 <img alt="Logo Docker" title="Docker" src="/assets/images/docker-monochromatic.png"/>
                 <img alt="Logo Git" title="Git" src="/assets/images/git-logo-orange.png"/>
                 <img alt="Logo Tux" title="Linux" src="/assets/images/tux.svg"/>
@@ -74,14 +74,80 @@ PAGE CODED BY :
                 <img alt="Logo HTML5" title="HTML5" src="/assets/images/html5-logo.svg"/>
             </div>
         </div>
+        <div class="section">
+            <h3 class="white bold">Matériel</h3>
+            <h5 class="grey">Là où mes projets voient le jour et évoluent</h5>
+            <div class="flex-sb section-content">
+                <p class="white justify width-45">
+                    <img src="/assets/images/neofetch-belphegor.png" class="width-100" alt="neofetch affiché sur mon serveur"/>
+                    &nbsp;Mon serveur principal est actuellement une tour, issue de
+                    nombreuses mises à niveau au fil du temps. Tout d'abord constitué
+                    de pièces d'occasion obtenues au fil du temps, il est désormais
+                    composé d'une majorité de pièces neuves. Il héberge grand nombre
+                    de mes services et projets, en plus de servir pour d'autres
+                    tâches annexes, telles que servir à faire fonctionner des jeux
+                    vidéos à distance, ou encore exécuter différentes tâches pour
+                    mes pipelines CI/CD.<br/>
+                    &nbsp;En ce moment, il a pour processeur un
+                    <a href="https://www.amd.com/fr/products/cpu/amd-ryzen-5-3600" target="_blank">AMD Ryzen 5 3600</a>,
+                    ainsi que 32 Go de RAM, cadencés à 3200 MHz. Pour le stockage,
+                    ce serveur a pour média de démarrage un SSD NVMe (PCIe3x4)
+                    de 512 Go. Il est aussi doté d'une carte graphique NVIDIA GTX 970
+                    disposant de 4 Go de VRAM.<br/>
+                    &nbsp;À son arrivée dans cette configuration,
+                    elle me servait pour faire de l'encodage et du transcodage de
+                    fichiers multimédias à la volée, mais dernièrement elle me
+                    sert surtout pour faire fonctionner des applications qui ont
+                    de forts besoins en ressources graphiques, telles que des jeux
+                    vidéos, dans une machine virtuelle.<br/>
+                    &nbsp;Il dispose aussi d'un SSD 1 To de chez Crucial au format
+                    SATA pour héberger la machine virtuelle à qui est passée la
+                    carte graphique. Cette carte graphique n'est indisponible pour
+                    l'hôte que le temps que la machine virtuelle est allumée. En
+                    effet, à l'amorçage de cette VM, la carte graphique est automatiquement
+                    détachée, puis rattachée à son arrêt.<br/>
+                    &nbsp;Enfin, ce serveur dispose aussi d'un RAID de différents
+                    disques pour du stockage supplémentaire.
+                </p>
+                <p class="white justify width-45">
+                    <img src="/assets/images/neofetch-abigor.png" class="width-100" alt="neofetch affiché sur mon ordinateur portable"/>
+                    &nbsp;Actuellement, la machine qui me sert à donner vie aux différentes
+                    idées qui pourraient me venir en tête est un Lenovo ThinkPad T14s
+                    de première génération, dans sa variante AMD.<br/>
+                    &nbsp;En terme de spécifications, cet ordinateur portable est
+                    équipé d'un processeur <a href="https://www.amd.com/fr/products/apu/amd-ryzen-7-pro-4750u" target="_blank">AMD Ryzen 7 4750U</a>,
+                    étant développeur, il n'est pas rare que je doive compiler des
+                    projets de taille et de langage variés, et les 8 coeurs de ce
+                    processeur font très bien ce travail.<br/>
+                    &nbsp;Concernant la RAM, j'ai choisi de doter mon ordinateur de
+                    32 Go de RAM, au format DDR4, cadencés à 3200 MHz. Il m'arrive souvent
+                    de manipuler des machines virtuelles et cette quantité de RAM devrait
+                    pouvoir couvrir mes besoins pendant un moment.<br/>
+                    &nbsp;En terme d'écran, j'ai choisi une dalle 1080p basse consommation
+                    avec une surface matte, et une luminosité de 400 nits. Le T14s étant
+                    un 14 pouces, 1080p suffisent largement pour mon cas d'utilisation,
+                    et les 400 nits de luminosité me permettent d'utiliser cette
+                    machine en conditions de forte luminosité ambiante. Le clavier
+                    rétroéclairé me permet de travailler dans des conditions de
+                    basse luminosité. Un ordinateur parfait pour rester productif
+                    et mobile.<br/>
+                    &nbsp;Pour le stockage, il est équipé de 512 Go fournis par un
+                    SSD NVMe (PCIe3x4). Je suis très loin de les utiliser dans leur
+                    totalité mais cette taille me permet de manipuler et
+                    travailler localement sur des projets parfois lourds, et je
+                    ne souhaite pas que ma machine de travail soit l'élément limitant
+                    de mon flot de travail.
+                </p>
+            </div>
+        </div>
+        <!-- dotfiles -->
         <!-- featured projects-->
-        <!-- more information, footer -->
     </div>
     <footer>
         <h3 class="white bold">À propos</h3>
         <div class="flex-sb">
-            <p class="grey">
+            <p class="grey justify">
-            Véritable factotum du développement, j'aime mettre les mains dans le cambouis.<br/>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.<br/>Je suis aussi passionné de 👨‍💻, 📸, 🚄 et de 👨‍🔧.
+            &nbsp;Véritable factotum du développement, j'aime mettre les mains dans le cambouis.<br/>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.<br/>Je suis aussi passionné de 👨‍💻, 📸, 🚄 et de 👨‍🔧.
             </p>
             <div class="flex-sb" id="additional-links">
                 <a class="button-style" href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>Me contacter</a>