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

dev #60

Merged
Latte merged 42 commits from dev into main 2026-03-08 09:41:15 +00:00
Conversation 0 Commits 42 Files Changed 54
+226 -32
1 changed files with 226 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit acdb782ebe - Show all commits
src/pages/about.astro
+226 -32
View File
@@ -4,67 +4,189 @@ import BaseLayout from "../layouts/BaseLayout.astro";
<BaseLayout
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>
<main class="main">
<div class="container">
<header class="header fade-in">
<p class="eyebrow">Latte / Hidden Den</p>
<h1 class="title">About</h1>
<div class="divider">══════════════════════════════</div>
</header>
<section class="section fade-in">
<h2>The Den</h2>
<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 class="lead">
Hi, I'm Latte. Hidden Den exists because I wanted a personal place on
the internet that feels the way I want technology to feel: calm,
understandable, warm, and fully mine.
</p>
</section>
</header>
<section class="section fade-in">
<h2>Who I Am</h2>
<p class="desc">
I'm <span class="highlight">Latte</span> — an IT wizard with a homelab,
a love for privacy, and a deep distrust of companies that treat your data
like their product. I believe in owning your infrastructure, running your
own services, and keeping things under your own roof.
I'm <span class="highlight">Latte</span> - an IT professional, a
developer, and someone who spends a lot of time close to systems. A
lot of my day-to-day thinking is shaped by infrastructure, maintenance,
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 class="desc">
I'm a gay furry developer who builds things because I want them to exist —
not because some product manager told me to. My stack leans toward Python
and self-hosted tooling, but I'm always exploring new things.
I run a homelab because I genuinely enjoy learning by building,
breaking, fixing, and gradually improving the systems I rely on. I tend
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>
</section>
<section class="section fade-in">
<h2>The Homelab</h2>
<h2>The Person Behind The Stack</h2>
<p class="desc">
Most of what runs here lives on my own hardware — Gitea for code, Docker
for deployment, nginx for serving. Where physical infra doesn't make sense,
I rent VPS capacity from OVH and Play.hosting. For work, the Microsoft 365
ecosystem does what it needs to do.
The technical side is real, but it is not the whole story. I'm also a
gay furry developer with a soft spot for cozy cafe aesthetics, warm
tones, coffee culture, quiet spaces, and slow building. I am much less
interested in performing some polished hacker persona than I am in
making a space that feels thoughtful, lived in, and unmistakably human.
</p>
<p class="desc">
The goal isn't purity — it's control. Keep data minimal, choose providers
you understand, avoid surveillance-adjacent platforms. Self-host what you
can; rent infra where it's practical; use what you need without pretending
you don't.
Hidden Den reflects that mix. It is technical, but not sterile. It is
personal, but not performative. It is a place where infrastructure,
writing, projects, experiments, and internet philosophy can sit next to
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>
</section>
<section class="section fade-in">
<h2>Ethos</h2>
<ul class="values">
<li><span class="value-key">privacy:</span> Your data is yours. Period.</li>
<li><span class="value-key">self-hosting:</span> If you can run it yourself, you should.</li>
<li><span class="value-key">open source:</span> Knowledge should be shared.</li>
<li><span class="value-key">small web:</span> The internet is better when it's personal.</li>
<h2>Why This Matters To Me</h2>
<p class="desc">
Working with infrastructure changes how you see the internet. It makes
the hidden parts visible: who owns the platform, where the data goes,
what happens when the service changes, and how little control people
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>
</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">
<p>Made with love by Latte</p>
</footer>
@@ -117,6 +239,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
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 {
font-size: 2rem;
font-weight: 700;
@@ -131,6 +261,13 @@ import BaseLayout from "../layouts/BaseLayout.astro";
user-select: none;
}
.lead {
color: var(--color-text);
line-height: 1.8;
max-width: 36rem;
margin: 0 auto;
}
.section {
margin: var(--space-lg) 0;
}
@@ -153,11 +290,56 @@ import BaseLayout from "../layouts/BaseLayout.astro";
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 {
color: var(--color-accent-bright);
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 {
list-style: none;
display: flex;
@@ -175,6 +357,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
font-weight: 600;
}
.compact {
margin-top: var(--space-md);
}
.footer {
margin-top: var(--space-xl);
text-align: center;
@@ -221,6 +407,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
.divider {
font-size: 0.6rem;
}
.lead {
font-size: 0.95rem;
}
.value-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {