dev #24
+132
-24
@@ -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,
|
||||
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.
|
||||
</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><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> — <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>
|
||||
<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
|
||||
> — <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); }
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user