articles

Author: webosa

docs/home-lab/index.md

@@ -1,3 +1,16 @@
+<style>
+  .card {
+    border: 1px solid #e1e1e1;
+    border-radius: 8px;
+    transition: 0.3s;
+    background-color: #fff;
+  }
+  .card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    transform: translateY(-5px);
+  }
+</style>
+
 # Home Lab
 
 *Placeholder for Server & VM documentation.*
@@ -6,3 +19,35 @@
 - **Servers**: (To be documented)
 - **Virtual Machines**: (To be documented)
 - **Containers**: (To be documented)
+
+
+<div class="grid cards" borderless style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
+
+  <div class="card">
+    <img src="https://via.placeholder.com/400x200?text=Security+CCTV" alt="CCTV" style="width:100%; border-radius: 8px;">
+    <div style="padding: 10px;">
+      <h3>📹 Security Setup</h3>
+      <p>A deep dive into our outdoor CCTV and 🏃 motion presence detection system.</p>
+      <p><a href="security/cctv/">Read Article →</a></p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="https://via.placeholder.com/400x200?text=Coffee+Machine" alt="Coffee" style="width:100%; border-radius: 8px;">
+    <div style="padding: 10px;">
+      <h3>☕ Smart Kitchen</h3>
+      <p>Automating the morning ☕ coffee machine and tracking the 🧼 washing machine cycles.</p>
+      <p><a href="kitchen/appliances/">Read Article →</a></p>
+    </div>
+  </div>
+
+  <div class="card">
+    <img src="https://via.placeholder.com/400x200?text=Connectivity" alt="Network" style="width:100%; border-radius: 8px;">
+    <div style="padding: 10px;">
+      <h3>📡 Infrastructure</h3>
+      <p>How our 🛰️ satellite dish keeps the house 🔊 speakers and smart devices online.</p>
+      <p><a href="network/starlink/">Read Article →</a></p>
+    </div>
+  </div>
+
+</div>