src/pages/about.astro

@@ -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>
+                <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>
-            </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,
+                    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 class="desc">
-                    I'm a gay furry developer who builds things because I want them to exist —
+                    I run a homelab because I enjoy learning by building, breaking,
-                    not because some product manager told me to. My stack leans toward Python
+                    fixing, and gradually improving the systems I rely on. I tend to
-                    and self-hosted tooling, but I'm always exploring new things.
+                    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
+                    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 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>
             </section>
 
             <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 reveals
-                    <li><span class="value-key">self-hosting:</span> If you can run it yourself, you should.</li>
+                    the parts most people never notice: who owns the platform, where the data
-                    <li><span class="value-key">open source:</span> Knowledge should be shared.</li>
+                    goes, 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>
             </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) {