add vps page

public/games.html

@@ -26,7 +26,7 @@
     </main>
     <footer class="blur">
         <p>&copy; 2025 The land of the penguin</p>
-        <p>Contact us at: florian@thepenguinontheweb.tech</p>
+        <p>Contact us at: <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
     </footer>
 </body>
 </html>

public/index.html

@@ -31,7 +31,7 @@
     </main>
     <footer class="blur">
         <p>&copy; 2025 The land of the penguin</p>
-        <p>Contact us at: florian@thepenguinontheweb.tech</p>
+        <p>Contact us at: <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
     </footer>
 </body>
 </html>

public/styles/common.css

@@ -6,7 +6,9 @@ html, body {
   display: flex;
   flex-direction: column; /* Affichage en colonne */
   align-items: center;
-
+  justify-content: space-between; /* Centre le contenu verticalement et horizontalement */
+  
+  min-height: 100vh; /* S'assure que le body prend au minimum toute la hauteur de la vue */
   a {
     text-decoration: none; /* Enlève le soulignement des liens */
     color: inherit; /* Hérite de la couleur du parent */
@@ -102,7 +104,7 @@ main {
   align-items: center;
   justify-content: center;
 
-  height: 100%;
+  height: auto;
 }
 
 .card-container {
@@ -111,7 +113,7 @@ main {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 100%;
+  height: auto;
 
   gap: 20px; /* Espace entre les cartes */
 }
@@ -142,6 +144,8 @@ main {
   transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out;
 
   cursor: pointer;
+
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }
 
 .card:hover {
@@ -162,4 +166,55 @@ main {
   width: 200px;
 
   border-radius: 10px;
-}
+}
+
+.presentation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  height: auto;
+  width: 1000px;
+  cursor: default;
+
+  gap: 30px; /* Espace entre les éléments de la carte */
+
+  h1 {
+    color: white;
+  }
+}
+
+.info.card {
+  width: 500px;
+  height: auto;
+
+  h2 {
+    font-size: 20px;
+    color: rgb(255, 255, 255);
+    text-align: center;
+  }
+  p {
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .card-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* 2 colonnes de largeur égale */
+    gap: 20px;
+    width: 100%;
+
+    .card {
+      h3 {
+        font-size: 18px;
+        color: rgb(255, 255, 255);
+        text-align: center;
+      }
+      background-color: #FFFFFF00;
+      width: calc(100% - 40px); /* Les cartes prennent toute la largeur de la colonne */
+      height: 200px; /* Hauteur automatique pour s'adapter au contenu */
+    }
+  }
+}
+

public/vps.html

@@ -16,11 +16,73 @@
         </a>
     </header>
     <main>
-
+        <div class="presentation">
+            <h1>thepenguinontheweb.tech VPS Configuration</h1>
+            <div class="card info blur">
+                <h2>Vps Overview</h2>
+                <ul>
+                    <li><strong>Provider:</strong> Hostinger</li>
+                    <li><strong>OS:</strong> Debian 12</li>
+                    <li><strong>RAM:</strong> 4 GB</li>
+                    <li><strong>CPU:</strong> 2 vCPU</li>
+                    <li><strong>Location:</strong> Paris, FR</li>
+                </ul>
+            </div>
+            <div class="card info blur">
+                <h2>C'est mon serveur personnel pour mon cours de labo réseau applicatif et sécurité.</h2>
+                <p>Voici quelques sites de ma création:</p>
+                <ul>
+                    <li><a href="https://games.penggames.systems" target="_blank">Tetris</a></li>
+                    <li><a href="/index.html" target="_blank">Home</a></li>
+                </ul>
+                <p>Pour plus d'information, vous pouvez toujours me contactez ici : <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
+            </div>
+            <div class="card info blur">
+                <h2>Mes services : </h2>
+                <div class="card-container">
+                    <div class="card">
+                        <h3>SSH</h3>
+                        <p>Accès sécurisé à distance via SSH.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Web Server</h3>
+                        <p>Hébergement de sites web avec Nginx.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Prometheus + Grafana</h3>
+                        <p>Surveillance et visualisation des performances du serveur.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Ufw Firewall</h3>
+                        <p>Protection du serveur avec un pare-feu configuré.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Fail2Ban</h3>
+                        <p>Protection contre les attaques par force brute.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Postfix</h3>
+                        <p>Serveur de messagerie pour l'envoi d'emails.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Postfix Admin</h3>
+                        <p>Interface web pour la gestion des comptes de messagerie.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Roundcube</h3>
+                        <p>Client de messagerie web pour accéder aux emails.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Minecraft</h3>
+                        <p>Serveur de jeu Minecraft pour jouer avec des amis.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
     </main>
     <footer class="blur">
         <p>&copy; 2025 The land of the penguin</p>
-        <p>Contact us at: florian@thepenguinontheweb.tech</p>
+        <p>Contact us at: <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
     </footer>
 </body>
 </html>