Update 'index.html'

Looks a lot like just a custom heimdall instance. Honestly having trouble figuring out why I started doing this

- Needs more character and maybe more animation? If I added a startup animation I would definitely want a way to disable it and that would require a bit of JS. Not sure if that is outside the scope
- Needs to be way easier to add new apps without bloating, maybe I should look into CSS variables?

index.html

@@ -31,13 +31,16 @@
         }
 
         .wrapper {
-            background-color: #223142;
+            background-image: url('https://images.unsplash.com/photo-1689703400849-4befa701d0e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1934&q=80');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
             position: relative;
             width: 100%;
             min-height: 100vh;
             padding: 20px;
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
             align-content: center;
             justify-content: center;
             gap: 24px;
@@ -45,34 +48,40 @@
 
         .card {
             padding: 0.5rem;
-            aspect-ratio: 1 / 1;
+            aspect-ratio: 4 / 1;
-            background-color: white;
+            background-color: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
             border-radius: 10px;
-            box-shadow: 0 5px 10px 5px rgba(200, 200, 200, 0.2);
             transition: transform 0.2s ease-in-out;
-            text-align: center;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
         }
 
         .card:hover {
-            transform: scale(1.04);
+            transform: scale(1.02);
+            cursor: pointer;
         }
 
         .logo {
-            width: 100%;
-            padding-left: 1rem;
-            padding-right: 1rem;
             display: block;
             margin: 0 auto;
-        }
+            aspect-ratio: 1 / 1;
-
+            height: 100%;
-        .divider {
+            min-width: 6.5rem;
-            margin-left: 1rem;
+            padding-left: 0.5rem;
-            margin-right: 1rem;
+            padding-right: 0.5rem;
-            border: 1px solid #213141;
         }
 
         .description {
-            
+            font-weight: 700;
+            width: 100%;
+            text-align: center;
+            height: 30%;
+            font-size: 18px;
+            color: white;
+            mix-blend-mode: difference;
         }
     </style>
 </head>
@@ -82,9 +91,17 @@
     <div class="wrapper">
         <div class="card">
             <img src="https://git.myco.systems/assets/img/logo.svg" alt="Logo" class="logo">
-            <hr class="divider">
+            <p class="description">Git with a cup of tea</p>
-            <p class="description">Description text goes here.</p>
         </div>
+        <div class="card">
+            <img src="https://raw.githubusercontent.com/NX211/homer-icons/fbf21fb653358f1cf55fe45cd569d757ebc283aa/svg/adguardhome.svg" alt="Logo" class="logo">
+            <p class="description">AdGuard home</p>
+        </div>
+        <div class="card">
+            <img src="https://raw.githubusercontent.com/NX211/homer-icons/fbf21fb653358f1cf55fe45cd569d757ebc283aa/svg/filerun.svg" alt="Logo" class="logo">
+            <p class="description">FileRun</p>
+        </div>
+
     </div>
 
     <section class="about-me">