From d7f07e3cb3da67e4dac94a4776dbefef45cb8fb5 Mon Sep 17 00:00:00 2001 From: Latte Date: Wed, 4 Mar 2026 20:38:44 +0100 Subject: [PATCH] Polish homepage avatar and project card interactions - Remove avatar border, increase size to 128px, add circular clip wrapper with overflow:hidden + scale(1.08) to crop spiky fur edges cleanly - Tighten hero avatar margin-bottom from 20px to 12px - Add translateY(-2px) hover transform to project cards for subtle lift effect Co-Authored-By: Claude Sonnet 4.6 --- src/pages/index.astro | 156 +++++++++++++++++++++++++++++++++------ src/pages/projects.astro | 5 +- 2 files changed, 135 insertions(+), 26 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 0d91922..69cade6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -17,6 +17,11 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
+
+
+ Latte avatar +
+

Hidden Den Cafe

══════════════════════════════
@@ -28,9 +33,9 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;

gay furry wizard

- IT wizard with a homelab. I believe in self-hosting, privacy, - and keeping control of my own data. Companies don't get to sell - or misuse what's mine. + IT wizard with a homelab. I believe in self-hosting, + privacy, and keeping control of my own data. Companies don't + get to sell or misuse what's mine.

age: {age} @@ -44,15 +49,27 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;
pgp fingerprint: - 50DAAAABFD6D76B86507C46E723D1C7AB893AEBE + 50DAAAABFD6D76B86507C46E723D1C7AB893AEBE
pgp key: - latte.gpg + latte.gpg
ssh public key: - latte.keys + latte.keys
@@ -69,12 +86,48 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;

Socials

@@ -82,7 +135,13 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--;

Services

    -
  • Gitea — self-hosted git server
    • +
  • + Gitea — self-hosted git server +
@@ -92,11 +151,15 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--; @@ -127,8 +190,12 @@ if (now < new Date(now.getFullYear(), 6, 8)) age--; } @keyframes grid-move { - 0% { transform: translate(0, 0); } - 100% { transform: translate(50px, 50px); } + 0% { + 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(2) { animation-delay: 0.2s; } - .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; } + .fade-in:nth-child(1) { + animation-delay: 0.1s; + } + .fade-in:nth-child(2) { + animation-delay: 0.2s; + } + .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; } diff --git a/src/pages/projects.astro b/src/pages/projects.astro index 07a52c0..5f5d610 100644 --- a/src/pages/projects.astro +++ b/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 {