---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout
    title="About — 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>
                <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>
            </header>

            <section class="section fade-in">
                <h2>Who I Am</h2>
                <p class="desc">
                    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 run a homelab because I 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 Person Behind The Stack</h2>
                <p class="desc">
                    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">
                    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>
                <p class="uses-link">
                    Curious about the actual tools and setup? <a href="/uses">See what I use →</a>
                </p>
            </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>Why This Matters To Me</h2>
                <p class="desc">
                    Working with infrastructure changes how you see the internet. It reveals
                    the parts most people never notice: 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>
        </div>
    </main>
</BaseLayout>

<style>
    .matrix-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.03;
        background:
            linear-gradient(var(--color-accent) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: grid-move 20s linear infinite;
    }

    @keyframes grid-move {
        0% { transform: translate(0, 0); }
        100% { transform: translate(50px, 50px); }
    }

    .main {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-lg) var(--space-md);
        padding-top: calc(var(--space-lg) + 3rem);
    }

    .container {
        max-width: 700px;
        width: 100%;
        background: var(--color-glass);
        backdrop-filter: blur(10px);
        border: 1px solid var(--color-surface);
        border-radius: 8px;
        padding: var(--space-xl);
    }

    .header {
        text-align: center;
        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;
        letter-spacing: 2px;
    }

    .divider {
        color: var(--color-surface);
        text-align: center;
        font-size: 0.75rem;
        margin: var(--space-md) 0;
        user-select: none;
    }

    .lead {
        color: var(--color-text);
        line-height: 1.8;
        max-width: 36rem;
        margin: 0 auto;
    }

    .section {
        margin: var(--space-lg) 0;
    }

    .section h2 {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: var(--space-sm);
        color: var(--color-accent);
    }

    .desc {
        color: var(--color-text-dim);
        line-height: 1.7;
        margin-bottom: var(--space-sm);
    }

    .desc:last-child {
        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;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .values li {
        color: var(--color-text-dim);
        line-height: 1.6;
    }

    .value-key {
        color: var(--color-accent);
        font-weight: 600;
    }

    .uses-link {
        margin-top: var(--space-md);
        font-size: 0.875rem;
        color: var(--color-text-dim);
    }

    .uses-link a {
        color: var(--color-accent);
    }

    .uses-link a:hover {
        color: var(--color-accent-bright);
    }

    .compact {
        margin-top: var(--space-md);
    }

    .footer {
        margin-top: var(--space-xl);
        text-align: center;
    }

    .footer p {
        color: var(--color-text-dim);
        font-size: 0.85rem;
    }

    .fade-in {
        animation: fadeIn 0.6s ease-out forwards;
        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; }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 600px) {
        .container {
            padding: var(--space-md);
        }

        .title {
            font-size: 1.5rem;
        }

        .divider {
            font-size: 0.6rem;
        }

        .lead {
            font-size: 0.95rem;
        }

        .value-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .matrix-bg {
            animation: none;
        }

        .fade-in {
            animation: none;
            opacity: 1;
        }
    }
</style>
