{{ define "main" }}
<article class="about-page">
  <div class="about-content">
    <div class="content-screen">
      <div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
      <div class="screen-display crt no-scroll">
        > about -s <br />
        <span>Name</span> / <span class="info">Dan (He/Him)</span><br />
        <span>Age</span> / <span class="info">40-something</span><br />
        <span>Location</span> / <span class="info">UK 🇬🇧</span><br /><br />
        <span>Interests</span> /
        <span class="info"> Programming. Music. Movies. Tech. Photography.</span
        ><br />
        <span class="cursor-blink">_</span>
      </div>
    </div>

    <div class="info-badges random-rotation">
      {{ $likes := slice "LovingWifex1" "CrazyKidsx3" "labradorsx2" "Linux_User"
      "Developer" "PC_GAMING" "RETRO_TECH" "HOMELABBER"}} {{ range $likes }} {{
      partial "elements/lcd-screen.html" (dict "text" .) }} {{ end }}
    </div>

    <div class="wide-item">
      <div class="content-screen">
        <div class="screen-display crt">
          > about -v
          <br /><br />
          <p>
            <span>Intro</span> /
            <span class="info">
              How do you do? Welcome to my little corner of the internet. I've
              been building websites since the original IndieWeb, so am happy to
              see the movement taking off and people embracing building and
              curating their own websites. This is my virtual garden, you can
              read more about why of it all in my "manifesto" below.</span
            ><br />
          </p>

          <p>
            <span>What's here</span> /
            <span class="info">
              I'm working on creating pages on my varied interests, so far you
              can find a section on the things I have been
              <a href="/audio"> listening to and enjoying</a>, and what I have
              been listening to them on. There's also a
              <a href="/blog">blog(gish)</a> where I am going to write whatever
              comes to mind, and theoretically a brief weekly update*.<br /><br />
              I am working on a resources section to share some of my CSS
              artwork and various random scripts with the world. Please look
              foward to it.
              <br /><br />
              <em
                >* I have never kept up with a blog before, don't expect
                much.</em
              ></span
            ><br />
          </p>
          <p>
            <span>Click around</span> /
            <span class="info">
              It's probably best if you just have a little click around for
              yourself. Good luck.</span
            ><br />
          </p>
          <span class="cursor-blink">_</span>
        </div>
      </div>
    </div>

    <div class="wide-item manifesto-container">
      <div class="content-screen">
        <div class="screen-display crt">
          > cat manifesto
          <div style="display: flex; justify-content: center">
            <pre>
                                         
                          ▄▄                    
                         ██             █▄      
 ▄              ▄     ▀▀▄██▄           ▄██▄     
 ███▄███▄ ▄▀▀█▄ ████▄ ██ ██ ▄█▀█▄ ▄██▀█ ██ ▄███▄
 ██ ██ ██ ▄█▀██ ██ ██ ██ ██ ██▄█▀ ▀███▄ ██ ██ ██
▄██ ██ ▀█▄▀█▄██▄██ ▀█▄██▄██▄▀█▄▄▄█▄▄██▀▄██▄▀███▀
                         ██                     
                        ▀▀                      
        </pre
            >
          </div>

          <p>I hate being told what to do.</p>
          <p>
            That's about the long and the short of it. But if you want to know
            more...
          </p>
          <p>
            I grew up with the internet. I'm of the generation that saw the
            internet come into existence, when it was free, open and finding out
            what it could become. There was so much hope.
          </p>
          <p>
            Unfortunately what it has become is an algorithmic slopshop. I
            fucking hate it.
          </p>
          <p>
            During my formative years I chatted to people from all over the
            world, I found them through mutual interests, friends of friends of
            friends, and just spending time exploring. IRC, forums, and MSN
            messenger were our tools; building connections was our mission.
          </p>
          <p>
            The internet was so inspiring to me I studied it at college and
            university and it eventually became a prosperous career. I still
            work with the internet daily.
          </p>
          <p>
            Unfortunately, socially the internet has become a cesspit.
            Particularly in recent years. It's the cyberpunk dystopia of
            corporations telling us what to think, billionaires telling us what
            to feel, and politicians disregarding everyone.
          </p>
          <p>
            This website is meant to be a giant fuck you to web 2.0, social
            media, algorithms and anyone or anything that tells me what to think
            or feel.
          </p>
          <p>
            I want to get back the feeling of the early internet, with some
            amount of modernity thrown in.
          </p>
          <p>
            This is my space. Anyone is welcome to hang out if you bring good
            vibes.
          </p>
          <span class="cursor-blink">_</span>
        </div>
      </div>
      <div class="manifesto-floppy">
        {{ partial "elements/floppy.html" (dict "title" "They're spying on you"
        "lines" (slice "" "" "run truth.exe" "" "") "bgColor" "#1a4d8f"
        "bgColorDark" "#0d2747") }}
      </div>
    </div>

    <div class="content-screen">
      <div class="screen-display crt no-scroll">
        > ./hardware -main <br />
        PC /
        <span class="info">Ryzen 7 9800X3D, Radeon RX 7900 XTX, 64gb RAM</span>
        / <span class="warning">Bazzite &bull; kitty &bull; KDE Plasma</span
        ><br />
        Camera / <span class="info">Fuji X-T5</span><br />
        Audio / <span class="info">Hiby R4 EVA, Fiio FT-1</span> <br /><br />
        Check out my <a href="/now">/now</a> page to see more hardware and
        software information. <br /><span class="cursor-blink">_</span>
      </div>
    </div>

    <div class="about-music hidden-xxl-down">
      <div class="music">
        {{ partial "elements/ipod.html" . }}

        <div class="">{{ partial "elements/vu-meter.html" . }}</div>
      </div>
    </div>

    <div class="content-screen wide-item">
      <div class="screen-display crt">
        > cat contact_info<br />
        <div class="about-contact-section">
          <p>
            If you have any comments, questions, corrections, or just fancy
            saying "hello" please feel free to get in touch.
          </p>
          <p>
            I am still debating with myself if I want to put more effort into a
            mastodon/bluesky type thing, so for now email is the best way to
            talk to me. PGP is available if that's your kind of thing.
          </p>
          <div class="contact-info">
            <div class="contact-item">
              <span class="contact-label">Email</span> /
              <a href="mailto:dan@ritual.sh" class="info">dan@ritual.sh</a>
            </div>
            <div class="contact-item">
              <span class="contact-label">PGP Public Key</span> /
              <div class="pgp-actions">
                <a href="/publickey.asc" download class="pgp-button">
                  <span class="button-icon">↓</span> Download
                </a>
                <button id="copy-pgp-key-about" class="pgp-button">
                  <span class="button-icon">⎘</span> Copy to Clipboard
                </button>
              </div>
            </div>
            <div id="copy-feedback-about" class="copy-feedback"></div>
          </div>
        </div>
        <pre>
|     .-.
|    /   \         .-.
|   /     \       /   \       .-.     .-.     _   _
+--/-------\-----/-----\-----/---\---/---\---/-\-/-\/\/---
| /         \   /       \   /     '-'     '-'
|/           '-'         '-'

        </pre>
        <span class="cursor-blink">_</span>
      </div>
    </div>
  </div>
</article>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const copyButton = document.getElementById("copy-pgp-key-about");
    const feedback = document.getElementById("copy-feedback-about");

    if (copyButton) {
      copyButton.addEventListener("click", async function () {
        try {
          const response = await fetch("/publickey.asc");
          const pgpKey = await response.text();

          await navigator.clipboard.writeText(pgpKey);

          feedback.textContent = "PGP key copied to clipboard!";
          feedback.classList.add("show", "success");

          setTimeout(() => {
            feedback.classList.remove("show");
          }, 3000);
        } catch (err) {
          feedback.textContent = "Failed to copy key";
          feedback.classList.add("show", "error");

          setTimeout(() => {
            feedback.classList.remove("show");
          }, 3000);
        }
      });
    }
  });
</script>

{{ end }}