Hiddenden/Cozy-Den
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revise 'About' page content and structure; enhance personal narrative and values presentation

Browse Source
This commit is contained in:
Latte
2026-03-07 11:56:32 +01:00
parent bf503233ac
commit acdb782ebe
1 changed files with 226 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/about.astro
+226 -32
View File
@@ -4,67 +4,189 @@ import BaseLayout from "../layouts/BaseLayout.astro";
<BaseLayout <BaseLayout
title="About — Hidden Den Cafe" title="About — Hidden Den Cafe"
description="About Latte — IT wizard, self-hosting advocate, privacy enthusiast, and the person behind Hidden Den Cafe." description="About Latte and Hidden Den: a personal introduction, the values behind the site, and why this quiet corner of the internet exists."
> >
<div class="matrix-bg" aria-hidden="true"></div> <div class="matrix-bg" aria-hidden="true"></div>
<main class="main"> <main class="main">
<div class="container"> <div class="container">
<header class="header fade-in"> <header class="header fade-in">
<p class="eyebrow">Latte / Hidden Den</p>
<h1 class="title">About</h1> <h1 class="title">About</h1>
<div class="divider">══════════════════════════════</div> <div class="divider">══════════════════════════════</div>
</header> <p class="lead">
Hi, I'm Latte. Hidden Den exists because I wanted a personal place on
<section class="section fade-in"> the internet that feels the way I want technology to feel: calm,
<h2>The Den</h2> understandable, warm, and fully mine.
<p class="desc">
Hidden Den Cafe is my little corner of the internet — self-hosted,
self-maintained, and free from corporate nonsense. No trackers, no ads,
no data harvesting. Just a cozy space that I built and control.
</p> </p>
</section> </header>
<section class="section fade-in"> <section class="section fade-in">
<h2>Who I Am</h2> <h2>Who I Am</h2>
<p class="desc"> <p class="desc">
I'm <span class="highlight">Latte</span> — an IT wizard with a homelab, I'm <span class="highlight">Latte</span> - an IT professional, a
a love for privacy, and a deep distrust of companies that treat your data developer, and someone who spends a lot of time close to systems. A
like their product. I believe in owning your infrastructure, running your lot of my day-to-day thinking is shaped by infrastructure, maintenance,
own services, and keeping things under your own roof. deployment, networking, and the quiet work required to keep things
reliable. I like understanding how things fit together, not just using
them from a distance.
</p> </p>
<p class="desc"> <p class="desc">
I'm a gay furry developer who builds things because I want them to exist — I run a homelab because I genuinely enjoy learning by building,
not because some product manager told me to. My stack leans toward Python breaking, fixing, and gradually improving the systems I rely on. I tend
and self-hosted tooling, but I'm always exploring new things. to prefer tools I can audit, services I can migrate, setups I can back
up, and infrastructure I can replace without begging a platform to keep
my life intact.
</p> </p>
</section> </section>
<section class="section fade-in"> <section class="section fade-in">
<h2>The Homelab</h2> <h2>The Person Behind The Stack</h2>
<p class="desc"> <p class="desc">
Most of what runs here lives on my own hardware — Gitea for code, Docker The technical side is real, but it is not the whole story. I'm also a
for deployment, nginx for serving. Where physical infra doesn't make sense, gay furry developer with a soft spot for cozy cafe aesthetics, warm
I rent VPS capacity from OVH and Play.hosting. For work, the Microsoft 365 tones, coffee culture, quiet spaces, and slow building. I am much less
ecosystem does what it needs to do. interested in performing some polished hacker persona than I am in
making a space that feels thoughtful, lived in, and unmistakably human.
</p> </p>
<p class="desc"> <p class="desc">
The goal isn't purity — it's control. Keep data minimal, choose providers Hidden Den reflects that mix. It is technical, but not sterile. It is
you understand, avoid surveillance-adjacent platforms. Self-host what you personal, but not performative. It is a place where infrastructure,
can; rent infra where it's practical; use what you need without pretending writing, projects, experiments, and internet philosophy can sit next to
you don't. warmth, identity, and the kinds of details that make a site feel like
someone actually lives there.
</p>
<div class="callout">
<p>
More cozy tech wizard than cyberpunk hacker.
</p>
</div>
</section>
<section class="section fade-in">
<h2>How I Tend To Build</h2>
<div class="value-grid">
<article class="value-card">
<h3>Understand It</h3>
<p>
I am most comfortable with systems I can inspect and reason
about. If I do not understand the tradeoffs, the failure modes,
or the path out, I do not feel like I really own the tool.
</p>
</article>
<article class="value-card">
<h3>Keep It Durable</h3>
<p>
I prefer setups that can be backed up, migrated, repaired, and
replaced. Durable systems are not always flashy, but they age
better and make better foundations for real life.
</p>
</article>
<article class="value-card">
<h3>Leave Room For Care</h3>
<p>
I care about interfaces and environments that feel intentional.
Warmth matters to me. I do not think technical spaces need to be
cold to be serious.
</p>
</article>
<article class="value-card">
<h3>Stay Practical</h3>
<p>
I do not treat purity as a goal. I self-host a lot because it
teaches me things and gives me control, but I still care about
workable systems more than ideological posturing.
</p>
</article>
</div>
</section>
<section class="section fade-in">
<h2>Why Hidden Den Exists</h2>
<p class="desc">
This site is not a portfolio, a startup brand, or a personal marketing
project. It exists because I wanted a real personal website again: a
place for writing, projects, experiments, infrastructure notes, and the
kinds of ideas that do not fit neatly into social platforms.
</p>
<p class="desc">
I wanted something quieter than a feed and more honest than a polished
personal brand. Hidden Den gives me room to publish on my own terms and
let the site grow slowly, in the shape that actually suits me.
</p> </p>
</section> </section>
<section class="section fade-in"> <section class="section fade-in">
<h2>Ethos</h2> <h2>Why This Matters To Me</h2>
<ul class="values"> <p class="desc">
<li><span class="value-key">privacy:</span> Your data is yours. Period.</li> Working with infrastructure changes how you see the internet. It makes
<li><span class="value-key">self-hosting:</span> If you can run it yourself, you should.</li> the hidden parts visible: who owns the platform, where the data goes,
<li><span class="value-key">open source:</span> Knowledge should be shared.</li> what happens when the service changes, and how little control people
<li><span class="value-key">small web:</span> The internet is better when it's personal.</li> often have over the spaces they depend on. That matters to me both
technically and personally.
</p>
<p class="desc">
I care about technology that feels intentional instead of engineered for
surveillance, lock-in, or endless engagement. I want the tools around me
to be legible. I want the places I spend time in to respect the people
using them. Hidden Den is one small attempt to build that kind of space.
</p>
</section>
<section class="section fade-in">
<h2>On The Internet I Want</h2>
<p class="desc">
Too much of the modern web is optimized for extraction: attention,
behavior, identity, and dependence. I prefer a smaller internet made of
personal sites, weird projects, community infrastructure, and spaces
that are allowed to be specific. Not everything needs to become a
platform, and not every page needs to be a funnel.
</p>
<p class="desc">
I still believe the web is better when more people make places that feel
like their own. Places with taste. Places with personality. Places that
are maintained because someone cares about them, not because they have
been optimized against a dashboard.
</p>
</section>
<section class="section fade-in">
<h2>Privacy-First, In Practice</h2>
<p class="desc">
Privacy is part of the philosophy here, but it is also part of the
implementation. Hidden Den avoids trackers, ads, invasive analytics, and
unnecessary third-party dependencies. Static pages are not a compromise
for me. They are often the cleaner solution.
</p>
<p class="desc">
The same goes for the infrastructure behind the site. I prefer systems I
can audit, migrate, back up, and replace. People should be able to visit
a personal website without quietly being turned into a behavioral profile.
</p>
<ul class="values compact">
<li><span class="value-key">no trackers:</span> Visitors are guests, not telemetry.</li>
<li><span class="value-key">minimal dependencies:</span> Fewer external systems means fewer leaks.</li>
<li><span class="value-key">self-hosting bias:</span> Control matters when the tradeoff is reasonable.</li>
<li><span class="value-key">human scale:</span> The site is built to feel inhabited, not optimized.</li>
</ul> </ul>
</section> </section>
<section class="section fade-in">
<h2>What I Want This Place To Be</h2>
<p class="desc">
Hidden Den is meant to feel like a quiet corner of the internet: warm,
thoughtful, technical, and personal. A place where I can share what I am
building and thinking about without flattening myself into a bio, a
brand, or a feed.
</p>
<p class="desc">
If this page does its job, it should feel clear that there is a real
person behind the site. Someone who likes systems and infrastructure,
cares about privacy, prefers warm light over neon, and still thinks the
internet is worth building on carefully.
</p>
</section>
<footer class="footer fade-in"> <footer class="footer fade-in">
<p>Made with love by Latte</p> <p>Made with love by Latte</p>
</footer> </footer>
@@ -117,6 +239,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
margin-bottom: var(--space-lg); margin-bottom: var(--space-lg);
} }
.eyebrow {
color: var(--color-text-dim);
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.75rem;
margin-bottom: var(--space-sm);
}
.title { .title {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
@@ -131,6 +261,13 @@ import BaseLayout from "../layouts/BaseLayout.astro";
user-select: none; user-select: none;
} }
.lead {
color: var(--color-text);
line-height: 1.8;
max-width: 36rem;
margin: 0 auto;
}
.section { .section {
margin: var(--space-lg) 0; margin: var(--space-lg) 0;
} }
@@ -153,11 +290,56 @@ import BaseLayout from "../layouts/BaseLayout.astro";
margin-bottom: 0; margin-bottom: 0;
} }
.callout {
margin-top: var(--space-md);
padding: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--color-accent) 10%, transparent),
transparent 70%
),
color-mix(in srgb, var(--color-bg-light) 84%, transparent);
border-radius: 8px;
}
.callout p {
color: var(--color-text);
line-height: 1.7;
}
.highlight { .highlight {
color: var(--color-accent-bright); color: var(--color-accent-bright);
font-weight: 700; font-weight: 700;
} }
.value-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
}
.value-card {
padding: var(--space-md);
border-radius: 8px;
background: color-mix(in srgb, var(--color-bg-light) 88%, transparent);
border: 1px solid color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.value-card h3 {
color: var(--color-accent-bright);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: var(--space-xs);
}
.value-card p {
color: var(--color-text-dim);
line-height: 1.7;
}
.values { .values {
list-style: none; list-style: none;
display: flex; display: flex;
@@ -175,6 +357,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
font-weight: 600; font-weight: 600;
} }
.compact {
margin-top: var(--space-md);
}
.footer { .footer {
margin-top: var(--space-xl); margin-top: var(--space-xl);
text-align: center; text-align: center;
@@ -221,6 +407,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
.divider { .divider {
font-size: 0.6rem; font-size: 0.6rem;
} }
.lead {
font-size: 0.95rem;
}
.value-grid {
grid-template-columns: 1fr;
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {