Merge pull request 'Add age, socials, and cryptographic keys to index' (#15) from feature/more-socials into dev

Reviewed-on: #15

src/pages/index.astro

@@ -1,5 +1,10 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+
+const birthday = new Date(2003, 6, 8); // July 8, 2003
+const now = new Date();
+let age = now.getFullYear() - birthday.getFullYear();
+if (now < new Date(now.getFullYear(), 6, 8)) age--;
 ---
 
 <BaseLayout
@@ -27,6 +32,31 @@ import BaseLayout from "../layouts/BaseLayout.astro";
                     and keeping control of my own data. Companies don't get to sell
                     or misuse what's mine.
                 </p>
+                <div class="meta">
+                    <span><span class="meta-key">age:</span> {age}</span>
+                    <span><span class="meta-key">status:</span> healing</span>
+                </div>
+            </section>
+
+            <div class="divider">══════════════════════════════</div>
+
+            <!-- Cryptographic Keys -->
+            <section class="section fade-in">
+                <h2>Cryptographic Keys</h2>
+                <div class="keys">
+                    <div class="key-item">
+                        <span class="key-label">pgp fingerprint:</span>
+                        <code class="key-value">50DAAAABFD6D76B86507C46E723D1C7AB893AEBE</code>
+                    </div>
+                    <div class="key-item">
+                        <span class="key-label">pgp key:</span>
+                        <a href="https://git.hiddenden.cafe/Latte.gpg" target="_blank" rel="noopener noreferrer" class="key-link">latte.gpg</a>
+                    </div>
+                    <div class="key-item">
+                        <span class="key-label">ssh public key:</span>
+                        <a href="https://git.hiddenden.cafe/Latte.keys" target="_blank" rel="noopener noreferrer" class="key-link">latte.keys</a>
+                    </div>
+                </div>
             </section>
 
             <div class="divider">══════════════════════════════</div>
@@ -41,11 +71,26 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
             <div class="divider">══════════════════════════════</div>
 
-            <!-- Links -->
+            <!-- Socials -->
             <section class="section fade-in">
-                <h2>Links</h2>
+                <h2>Socials</h2>
                 <ul class="links">
-                    <li><a href="https://git.hiddenden.cafe" target="_blank" rel="noopener noreferrer">Gitea</a> — Self-hosted git server</li>
+                    <li><a href="mailto:latte@hiddenden.cafe">email</a> — latte@hiddenden.cafe</li>
+                    <li><a href="https://signal.me/#eu/SkC6qz0-CzbhpnKwhkkvV6QGFL-NJ_FHfQqafsWqwHfW3QZGuO5D-KlCF2NBE6RA" target="_blank" rel="noopener noreferrer">signal</a></li>
+                    <li><a href="https://discord.com/users/714955493923225639" target="_blank" rel="noopener noreferrer">discord</a></li>
+                    <li><a href="https://bsky.app/profile/hiddenden.cafe" target="_blank" rel="noopener noreferrer">bluesky</a></li>
+                    <li><a href="https://steamcommunity.com/profiles/76561198292838319/" target="_blank" rel="noopener noreferrer">steam</a></li>
+                    <li><a href="https://git.hiddenden.cafe/Latte" target="_blank" rel="noopener noreferrer">gitea</a></li>
+                </ul>
+            </section>
+
+            <div class="divider">══════════════════════════════</div>
+
+            <!-- Services -->
+            <section class="section fade-in">
+                <h2>Services</h2>
+                <ul class="links">
+                    <li><a href="https://git.hiddenden.cafe" target="_blank" rel="noopener noreferrer">Gitea</a> — self-hosted git server</li>
                 </ul>
             </section>
 
@@ -167,6 +212,56 @@ import BaseLayout from "../layouts/BaseLayout.astro";
         line-height: 1.7;
     }
 
+    .meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-xs) var(--space-md);
+        margin-top: var(--space-sm);
+        font-size: 0.9rem;
+        color: var(--color-text-dim);
+    }
+
+    .meta-key {
+        color: var(--color-accent);
+    }
+
+    .keys {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+    }
+
+    .key-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: var(--space-xs);
+    }
+
+    .key-label {
+        color: var(--color-accent);
+        font-size: 0.85rem;
+        white-space: nowrap;
+    }
+
+    .key-value {
+        font-size: 0.72rem;
+        color: var(--color-text-dim);
+        word-break: break-all;
+        background: var(--color-bg);
+        padding: 2px 6px;
+        border-radius: 4px;
+    }
+
+    .key-link {
+        color: var(--color-blue);
+        font-size: 0.85rem;
+    }
+
+    .key-link:hover {
+        color: var(--color-accent-bright);
+    }
+
     .games {
         color: var(--color-text-dim);
     }