{{define "nav"}}          
 

<div>
        <p class="sidebar-label">pages</p>
        <div class="sidebar-links">
          <a href="/automation">automation</a>
          <a href="/research">research</a>
          <a href="/bookkeeping">bookkeeping</a>
         
        </div>
      </div>

      <div>
        <p class="sidebar-label">subjects</p>
        <div class="skill-list">
          <div class="skill-item">movies</div>
          <div class="skill-item">games</div>
          <div class="skill-item">linux</div>
          <div class="skill-item">board games</div>
        </div>
      </div>

{{end}}

{{define "body"}}
<section id="interests">
          <div id="interests-body" >
                <span class="matrix-hidden" id="matrix-hidden">
                  Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.
                  <br>
                  Neo: What truth?
                  <br>
                  Boy: There is no spoon.
            </span>
            <div class="section-head">
            <h2>Movie/Show Top list</h2>
          </div>
          <div class="toplist-group">
            <h3>Top 5 Movies</h3>
            <div class="toplist-body">
              <div class="poster-grid">
                <div class="poster-item posterhover" onclick="bladerunnerClick()">
                  <img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
                  <p>Blade Runner 2049</p>
                </div>
                <div class="poster-item posterhover" onclick="cureClick()">
                  <img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
                  <p>A Cure of Wellness</p>
                </div>
                <div class="poster-item posterhover" onclick="matrixClick()">
                  <img src="/static/posters/matrix.jpg" alt="matrix">
                  <p>The Matrix</p>
                </div>
                <div class="poster-item posterhover" onclick="draculaClick()">
                  <img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
                  <p>Dracula: A Love Tale</p>
                </div>
                <div class="poster-item posterhover" onclick="dragonTypewriterClick()">
                  <img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
                  <p>Girl with a Dragon Tattoo</p>
                </div>
              </div>
            </div>

            <div class="toplist-group">
              <h3>Top 5 Shows</h3>
              <div class="toplist-body">
                <div class="poster-grid">
                  <div class="poster-item">
                    <img src="/static/posters/foundation.jpg" alt="foundation">
                    <p>Foundation</p>
                  </div>
                  <div class="poster-item">
                    <img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
                    <p>Chernobyl</p>
                  </div>
                  <div class="poster-item">
                    <img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad">
                    <p>Breaking Bad</p>
                  </div>
                  <div class="poster-item">
                    <img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender">
                    <p>Avatar: The Last Airbender</p>
                  </div>
                  <div class="poster-item">
                    <img src="/static/posters/Adolescence.webp" alt="Adolescence">
                    <p>Adolescence</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="section-head">
              <h2>Lunix rice</h2>
            </div>
            <div style="display: flex; align-items: center; gap: 1rem;">
              <p class="exp-body">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows
                on my screen so everything stays organized without dragging things around. I also use Quickshell, which
                lets me customize menus, shortcuts, and system controls to work exactly how I want.
                My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more
                control and customization than a typical computer setup. The result is a clean, fast, and super
                efficient desktop that’s hard to go back from.
                <a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles">Git repo</a>
              </p>
              <img src="/static/images/rice.png" style="height: 200px; align-self: center;">
            </div>
            <div class="section-head">
              <h2>programing</h2>
            </div>
            <div style="display: flex; align-items: center; gap: 1rem;">
              <img src="/static/images/program.png" style="height: 350px;" alt="program">
              <div>
              <p class="exp-body">
                Programming can be a task, but for me it's a source of joy. This is something I do as a hobby, and I
                don't use AI much. It's about having fun and making a fool of yourself. It's not about how good it is,
                in this case, I'd rather just listen to music and drink a cup of tea. I enjoy the struggle to debug, the
                beauty in understanding why a bug is there to begin with.
              </p>
              <br>
              <p class="exp-body">
                The text editor I use most is VS Code, but I love the Neovim setup as it enables me to code on a
                low-level system without a desktop environment being necessary. I do most of my coding on my own
                desktop, synced with Git to other systems, like the server that hosts this website, which I have built
                myself. The creation of this website is more of a fun dumb activity for me... go click on one of the
                movie posters and see.
              </p>
              </div>
            </div>
            <br>
            <div class="section-head">
              <h2>Games</h2>
            </div>
            <p class="exp-body" >Game i will play in my free time to wind down.</p>
            <div hx-get="/static/components/games.html" hx-trigger="load" hx-swap="outerHTML">
              <span class="spinner">Loading stats…</span>
            </div>
          </div>
        </section>
{{end}}