src/pages/index.astro

@@ -17,6 +17,11 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
         <div class="container">
             <!-- Header -->
             <header class="header fade-in">
+                <div class="hero-avatar">
+                    <div class="avatar-circle">
+                        <img src="/images/avatar.png" alt="Latte avatar" />
+                    </div>
+                </div>
                 <h1 class="title">Hidden Den Cafe</h1>
                 <div class="divider">══════════════════════════════</div>
             </header>
@@ -28,9 +33,9 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
                 </p>
                 <p class="tagline">gay furry wizard</p>
                 <p class="desc">
-                    IT wizard with a homelab. I believe in self-hosting, privacy,
+                    IT wizard with a homelab. I believe in self-hosting,
-                    and keeping control of my own data. Companies don't get to sell
+                    privacy, and keeping control of my own data. Companies don't
-                    or misuse what's mine.
+                    get to sell or misuse what's mine.
                 </p>
                 <div class="meta">
                     <span><span class="meta-key">age:</span> {age}</span>
@@ -44,15 +49,27 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
                 <div class="keys">
                     <div class="key-item">
                         <span class="key-label">pgp fingerprint:</span>
-                        <code class="key-value">50DAAAABFD6D76B86507C46E723D1C7AB893AEBE</code>
+                        <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>
+                        <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>
+                        <a
+                            href="https://git.hiddenden.cafe/Latte.keys"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="key-link">latte.keys</a
+                        >
                     </div>
                 </div>
             </section>
@@ -69,12 +86,48 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
             <section class="section fade-in">
                 <h2>Socials</h2>
                 <ul class="links">
-                    <li><a href="mailto:latte@hiddenden.cafe">email</a> — latte@hiddenden.cafe</li>
+                    <li>
-                    <li><a href="https://signal.me/#eu/SkC6qz0-CzbhpnKwhkkvV6QGFL-NJ_FHfQqafsWqwHfW3QZGuO5D-KlCF2NBE6RA" target="_blank" rel="noopener noreferrer">signal</a></li>
+                        <a href="mailto:latte@hiddenden.cafe">email</a> — latte@hiddenden.cafe
-                    <li><a href="https://discord.com/users/714955493923225639" target="_blank" rel="noopener noreferrer">discord</a> — <a href="https://discord.gg/kjwwDtSXYY" target="_blank" rel="noopener noreferrer">join my server</a></li>
+                    </li>
-                    <li><a href="https://bsky.app/profile/hiddenden.cafe" target="_blank" rel="noopener noreferrer">bluesky</a></li>
+                    <li>
-                    <li><a href="https://steamcommunity.com/profiles/76561198292838319/" target="_blank" rel="noopener noreferrer">steam</a></li>
+                        <a
-                    <li><a href="https://git.hiddenden.cafe/Latte" target="_blank" rel="noopener noreferrer">gitea</a></li>
+                            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
+                        > — <a
+                            href="https://discord.gg/kjwwDtSXYY"
+                            target="_blank"
+                            rel="noopener noreferrer">join my server</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>
 
@@ -82,7 +135,13 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
             <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>
+                    <li>
+                        <a
+                            href="https://git.hiddenden.cafe"
+                            target="_blank"
+                            rel="noopener noreferrer">Gitea</a
+                        > — self-hosted git server
+                    </li>
                 </ul>
             </section>
 
@@ -92,11 +151,15 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
                 <div class="donate">
                     <div class="crypto">
                         <span class="crypto-label">[XMR]</span>
-                        <code class="crypto-addr">41uiUeBru8jhtzjQz3M5CKV1uFpern7juStdfveNQS52LQ9aw3mNkdbc8akM81YnxuE2RT9K2Cmyp9cfyi1osrbVBjBbzQ3</code>
+                        <code class="crypto-addr"
+                            >41uiUeBru8jhtzjQz3M5CKV1uFpern7juStdfveNQS52LQ9aw3mNkdbc8akM81YnxuE2RT9K2Cmyp9cfyi1osrbVBjBbzQ3</code
+                        >
                     </div>
                     <div class="crypto">
                         <span class="crypto-label">[ETH]</span>
-                        <code class="crypto-addr">0x3Dfc92458267b91BFa6bF8f6c86bAE809Ab76Cb4</code>
+                        <code class="crypto-addr"
+                            >0x3Dfc92458267b91BFa6bF8f6c86bAE809Ab76Cb4</code
+                        >
                     </div>
                 </div>
             </section>
@@ -127,8 +190,12 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
     }
 
     @keyframes grid-move {
-        0% { transform: translate(0, 0); }
+        0% {
-        100% { transform: translate(50px, 50px); }
+            transform: translate(0, 0);
+        }
+        100% {
+            transform: translate(50px, 50px);
+        }
     }
 
     .main {
@@ -155,6 +222,28 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
         margin-bottom: var(--space-lg);
     }
 
+    .hero-avatar {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 12px;
+    }
+
+    .avatar-circle {
+        width: 128px;
+        height: 128px;
+        border-radius: 50%;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .avatar-circle img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transform: scale(1.08);
+        transform-origin: center;
+    }
+
     .title {
         font-size: 2rem;
         font-weight: 700;
@@ -317,13 +406,27 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
         opacity: 0;
     }
 
-    .fade-in:nth-child(1) { animation-delay: 0.1s; }
+    .fade-in:nth-child(1) {
-    .fade-in:nth-child(2) { animation-delay: 0.2s; }
+        animation-delay: 0.1s;
-    .fade-in:nth-child(3) { animation-delay: 0.3s; }
+    }
-    .fade-in:nth-child(4) { animation-delay: 0.4s; }
+    .fade-in:nth-child(2) {
-    .fade-in:nth-child(5) { animation-delay: 0.5s; }
+        animation-delay: 0.2s;
-    .fade-in:nth-child(6) { animation-delay: 0.6s; }
+    }
-    .fade-in:nth-child(7) { animation-delay: 0.7s; }
+    .fade-in:nth-child(3) {
+        animation-delay: 0.3s;
+    }
+    .fade-in:nth-child(4) {
+        animation-delay: 0.4s;
+    }
+    .fade-in:nth-child(5) {
+        animation-delay: 0.5s;
+    }
+    .fade-in:nth-child(6) {
+        animation-delay: 0.6s;
+    }
+    .fade-in:nth-child(7) {
+        animation-delay: 0.7s;
+    }
 
     @keyframes fadeIn {
         from {
@@ -342,6 +445,11 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
             padding: var(--space-md);
         }
 
+        .avatar-circle {
+            width: 100px;
+            height: 100px;
+        }
+
         .title {
             font-size: 1.5rem;
         }

src/pages/projects.astro

@@ -169,12 +169,13 @@ function getPrimaryLink(project: Project): string | undefined {
         border-radius: 6px;
         padding: var(--space-md);
         background: var(--color-bg);
-        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
     }
 
     .project-item:hover {
-        border-color: var(--color-accent);
+        border-color: rgba(255, 255, 255, 0.2);
         box-shadow: 0 0 0 1px var(--color-accent);
+        transform: translateY(-2px);
     }
 
     .project-item:hover .project-name {