org_web/index.org

#+TITLE: Home
#+OPTIONS: num:nil title:nil toc:nil
#+NO_SIDENOTES: t
#+DATE: <2025-08-04 Mon>

#+BEGIN_EXPORT html
<div class="db-root">
  <section class="db-hero" aria-labelledby="db-home-title">
    <div class="db-hero__brand">
      <img class="db-hero__logo" src="/assets/images/gr.png" alt="" loading="eager" decoding="async" />
      <div>
        <p class="db-kicker" id="db-greeting">Good morning</p>
        <h1 class="db-hero__title" id="db-home-title">zxh</h1>
        <p class="db-hero__sub">A working dashboard for notes, writing, learning, and live site navigation.</p>
      </div>
    </div>

    <aside class="db-now" aria-label="Current time and year progress">
      <span class="db-now__label">Local time</span>
      <time class="db-now__clock" id="db-clock" aria-live="polite">00:00:00</time>
      <div class="db-year-bar" title="Year progress">
        <div class="db-year-bar__fill" id="db-year-fill"></div>
        <span class="db-year-bar__label" id="db-year-pct">0%</span>
      </div>
    </aside>
  </section>

  <section class="db-command" aria-labelledby="db-command-title">
    <div class="db-command__main">
      <p class="db-kicker">Command center</p>
      <h2 class="db-command__title" id="db-command-title">Find the right area quickly</h2>
    </div>
    <label class="db-command__search">
      <span class="db-search-icon" aria-hidden="true">⌕</span>
      <input id="db-command-search" type="search" placeholder="Filter links, pages, and tools..." autocomplete="off" />
    </label>
  </section>

  <nav class="db-quicknav" id="db-quicknav" aria-label="Dashboard shortcuts">
    <a class="db-qn-item db-qn-item--writing" href="/blogs/blogs-list.html" data-keywords="blogs journal writing weekly review life">
      <span class="db-qn-icon">✎</span>
      <span class="db-qn-label">Blogs</span>
      <span class="db-qn-meta">journal</span>
    </a>
    <a class="db-qn-item db-qn-item--notes" href="/posts/posts-list.html" data-keywords="posts notes knowledge reference learning">
      <span class="db-qn-icon">◫</span>
      <span class="db-qn-label">Posts</span>
      <span class="db-qn-meta">notes</span>
    </a>
    <a class="db-qn-item db-qn-item--career" href="/posts/career/career-list.html" data-keywords="career work engineering probation objectives">
      <span class="db-qn-icon">⌘</span>
      <span class="db-qn-label">Career</span>
      <span class="db-qn-meta">work</span>
    </a>
    <a class="db-qn-item db-qn-item--lima" href="/lima/index.html" data-keywords="lima project archive index entries">
      <span class="db-qn-icon">⬢</span>
      <span class="db-qn-label">Lima</span>
      <span class="db-qn-meta">project</span>
    </a>
    <a class="db-qn-item db-qn-item--wird" href="/home/wird-tracker.html" data-keywords="wird tracker habit status progress">
      <span class="db-qn-icon">◎</span>
      <span class="db-qn-label">Wird</span>
      <span class="db-qn-meta">tracker</span>
    </a>
    <a class="db-qn-item db-qn-item--system" href="/sitemap.html" data-keywords="sitemap pages map browse all">
      <span class="db-qn-icon">⌗</span>
      <span class="db-qn-label">Sitemap</span>
      <span class="db-qn-meta">map</span>
    </a>
    <a class="db-qn-item db-qn-item--status" href="/home/status.html" data-keywords="status services uptime home">
      <span class="db-qn-icon">◉</span>
      <span class="db-qn-label">Status</span>
      <span class="db-qn-meta">site</span>
    </a>
    <a class="db-qn-item db-qn-item--zone" href="https://zone.zainezq.com" target="_blank" rel="noopener" data-keywords="external dashboard zone tools">
      <span class="db-qn-icon">↗</span>
      <span class="db-qn-label">Zone</span>
      <span class="db-qn-meta">external</span>
    </a>
  </nav>

  <div class="db-grid">
    <section class="db-panel db-panel--wide" aria-labelledby="db-blogs-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">Latest writing</p>
          <h2 class="db-panel__title" id="db-blogs-title">Recent blogs</h2>
        </div>
        <a class="db-panel__more" href="/blogs/blogs-list.html">View all</a>
      </header>
      <ul class="db-feed" id="db-feed-blogs">
        <li class="db-feed__item"><span class="db-feed__dot"></span><a href="/blogs/blogs-list.html">Browse all blog posts</a></li>
      </ul>
    </section>

    <section class="db-panel db-panel--stats" aria-labelledby="db-stats-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">Snapshot</p>
          <h2 class="db-panel__title" id="db-stats-title">At a glance</h2>
        </div>
      </header>
      <div class="db-stats-grid">
        <div class="db-stat">
          <span class="db-stat__num" id="db-stat-day">-</span>
          <span class="db-stat__label">Day</span>
        </div>
        <div class="db-stat">
          <span class="db-stat__num" id="db-stat-week">-</span>
          <span class="db-stat__label">Week</span>
        </div>
        <div class="db-stat">
          <span class="db-stat__num" id="db-stat-month">-</span>
          <span class="db-stat__label">Month</span>
        </div>
        <div class="db-stat">
          <span class="db-stat__num" id="db-stat-left">-</span>
          <span class="db-stat__label">Days left</span>
        </div>
      </div>
    </section>

    <section class="db-panel db-panel--wide" aria-labelledby="db-posts-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">Knowledge base</p>
          <h2 class="db-panel__title" id="db-posts-title">Recent posts</h2>
        </div>
        <a class="db-panel__more" href="/posts/posts-list.html">View all</a>
      </header>
      <ul class="db-feed" id="db-feed-posts">
        <li class="db-feed__item"><span class="db-feed__dot"></span><a href="/posts/posts-list.html">Browse all posts</a></li>
      </ul>
    </section>

    <section class="db-panel db-panel--focus" aria-labelledby="db-focus-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">Work queue</p>
          <h2 class="db-panel__title" id="db-focus-title">Active areas</h2>
        </div>
      </header>
      <div class="db-task-list">
        <a href="/wip.html"><span>Drafts and WIP</span><strong>Open</strong></a>
        <a href="/home/backlog.html"><span>Backlog</span><strong>Plan</strong></a>
        <a href="/home/countdown.html"><span>Countdowns</span><strong>Track</strong></a>
      </div>
    </section>

    <section class="db-panel" aria-labelledby="db-recent-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">Activity</p>
          <h2 class="db-panel__title" id="db-recent-title">Recently updated</h2>
        </div>
        <a class="db-panel__more" href="/recently-updated.html">View all</a>
      </header>
      <ul class="db-feed" id="db-feed-recent">
        <li class="db-feed__item"><span class="db-feed__dot"></span><a href="/recently-updated.html">See all recent changes</a></li>
      </ul>
    </section>

    <section class="db-panel" aria-labelledby="db-system-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">System</p>
          <h2 class="db-panel__title" id="db-system-title">Site controls</h2>
        </div>
      </header>
      <div class="db-link-stack">
        <a href="/home/services.html">Services</a>
        <a href="/home/categories.html">Categories</a>
        <a href="/home/notes.html">Notes wall</a>
        <a href="/home/contact.html">Contact</a>
      </div>
    </section>

    <section class="db-panel db-panel--about" aria-labelledby="db-about-title">
      <header class="db-panel__head">
        <div>
          <p class="db-kicker">Build</p>
          <h2 class="db-panel__title" id="db-about-title">Org-powered static site</h2>
        </div>
      </header>
      <p class="db-panel__desc">
        Built in Emacs Org-mode and published through <code>org-publish</code>.
        The homepage stays lightweight while acting as a practical launch surface for the rest of the site.
      </p>
      <div class="db-tags">
        <span class="db-tag">Emacs</span>
        <span class="db-tag">Org-mode</span>
        <span class="db-tag">Static HTML</span>
        <span class="db-tag">No framework</span>
      </div>
    </section>
  </div>
</div>
#+END_EXPORT