{{define "nav"}}          
<div>
        <p class="sidebar-label">navigate</p>
        <div class="sidebar-links">
          <a href="#about">about</a>
          <a href="#product">product</a>
          <a href="#install">Installation</a>
        </div>
      </div>

      <div>
        <p class="sidebar-label">links</p>
        <div class="sidebar-links">
          <a href="https://git.samantha42.xyz/samantha/accounting/releases">git repo</a>
        </div>
      </div>
    
      <div>
        <p class="sidebar-label">subjects</p>
        <div class="skill-list">
          <div class="skill-item">opinion</div>
          <div class="skill-item">due diligence</div>
          <div class="skill-item">performance</div>
        </div>
      </div>
{{end}}

{{define "body"}}
<section class="hero" id="about">
        <p class="hero-eyebrow">bookkeeping · 2026</p>
        <h1>Administration<br><span>infrastructure</span>
        </h1>
        <p class="hero-bio">
            buildout of internal tooling the hardship of this endiver and leason learn of programming for reliability and easy use. 
        </p>

      </section>


<section id="paradigms">
        <div class="section-head">
          <h2>Record Keeping paradigm</h2>
        </div>
          <div class="exp-card">
            <div class="exp-header">
              <span class="exp-title">Emultable entries/data</span>
            </div>
            <p class="exp-body">
                Book keeping and other record keeping tasks, benefit of not having a real deletation of data/infomation. Rather have a record of change.
                <br>

            </p>
            </div>
        <br>
       <div class="exp-flex">
  <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/sql.png" style="height: 400px; align-self: center;">
</div>
      </section>

<section id="product">
        <div class="section-head">
          <h2>Web based access</h2>
        </div>
          <div class="exp-card">
            <div class="exp-header">
              <span class="exp-title">minimal</span>
            </div>
            <p class="exp-body">
              later versions will have more user account restricted access, in this beta version, web access is consider the same user. 
              <br>
              I can assume all actions is myself as i self host on my local network.
            </p>
            </div>
        
        <br>
        <div class="exp-flex">
          <img style="width: 25rem; padding: 10px;" src="/static/images/image.png">
          <p class="exp-body">
             This is first look at the testing of the web ui of the bookkeeping software.

             The alerts represent the current failure to comply with the law, is no attachments have been filed to these evenets.

             <br>
            The Blue highlighted event of synthitc nature, as it is created by the system as the resulting section of the book have yet to be moved to balance as a result.

            <br>
            <br>

            Most of these posted done via the command line (cli) tool as this will give 100% control of the events and the underlying entries

            <br>

            Depreciation and amortization will soon be automatic as "notes" will soon contain the data such as lifespan of assets and other human insight infomation, like the accoutning method in use.
            

         </p>
        </div>
        
      </section>

<section id="install">
        <div class="section-head">
          <h2>Installation Guide</h2>
        </div>
          <div class="exp-card link" onclick="window.open('https://git.samantha42.xyz/samantha/accounting/releases', '_blank')">
            <div class="exp-header">
              <span class="exp-title">Selfhosting for free</span>
              <div>
              <span class="exp-tag">linux</span>
              <span class="exp-tag red">BETA</span>
            </div>
            </div>
            <p class="exp-body">Command: ./klacq_acc_linux_xx.xx --port=8081</p>
            <br>

            <p class="exp-body">Password enable by setting ".env" file with PASSWORD_HASH="secret" secret is bcrypt</p>
            <br>
            <p class="exp-body">                    Free to run on your own machine or server. No account needed.
</p>
            
            <div style="font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 8px;">
            DATA LOCATIONS <span style="opacity:0.7;">(relative to program directory)</span>
        </div>
        <table class="info-table" style="width:100%;">
            <tbody>
                <tr>
                    <td style="font-family:'DM Mono', monospace; font-size:12px; width: 40%;">/data/app.db</td>
                    <td style="font-family:'DM Sans', sans-serif; font-size:12px; color: var(--muted);">Main database</td>
                </tr>
                <tr>
                    <td style="font-family:'DM Mono', monospace; font-size:12px;">/data/attachments</td>
                    <td style="font-family:'DM Sans', sans-serif; font-size:12px; color: var(--muted);">Receipts &amp; documents</td>
                </tr>
                <tr>
                    <td style="font-family:'DM Mono', monospace; font-size:12px;">/data/reports</td>
                    <td style="font-family:'DM Sans', sans-serif; font-size:12px; color: var(--muted);">Generated reports</td>
                </tr>

                <tr>
                    <td style="font-family:'DM Mono', monospace; font-size:12px;">/data/config.json</td>
                    <td style="font-family:'DM Sans', sans-serif; font-size:12px; color: var(--muted);">company info</td>
                </tr>
            </tbody>
        </table>
            </div>
      </section>
{{end}}