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">

  <!-- ░░ HERO ░░ -->
  <header class="db-hero">
    <div class="db-hero__text">
      <p class="db-hero__greeting" id="db-greeting">Good morning</p>
      <h1 class="db-hero__title">zxh</h1>
      <p class="db-hero__sub">z's homepage</p>
    </div>
    <div class="db-hero__clock" id="db-clock" aria-live="polite">00:00:00</div>
  </header>

  <!-- ░░ QUICK LINKS ░░ -->
  <nav class="db-quicknav" aria-label="Quick links">
    <a class="db-qn-item" href="/blogs/blogs-list.html">
      <span class="db-qn-icon">✦</span>
      <span class="db-qn-label">Blogs</span>
    </a>
    <a class="db-qn-item" href="/posts/posts-list.html">
      <span class="db-qn-icon">◈</span>
      <span class="db-qn-label">Posts</span>
    </a>
    <a class="db-qn-item" href="/posts/career/career-list.html">
      <span class="db-qn-icon">◇</span>
      <span class="db-qn-label">Career</span>
    </a>
    <a class="db-qn-item" href="/lima/index.html">
      <span class="db-qn-icon">⬡</span>
      <span class="db-qn-label">Lima</span>
    </a>
    <a class="db-qn-item" href="/home/wird-tracker.html">
      <span class="db-qn-icon">◉</span>
      <span class="db-qn-label">Wird</span>
    </a>
    <a class="db-qn-item" href="/home/status.html">
      <span class="db-qn-icon">▣</span>
      <span class="db-qn-label">Status</span>
    </a>
    <a class="db-qn-item" href="/home/backlog.html">
      <span class="db-qn-icon">≡</span>
      <span class="db-qn-label">Backlog</span>
    </a>
    <a class="db-qn-item" href="/sitemap.html">
      <span class="db-qn-icon">⊞</span>
      <span class="db-qn-label">Sitemap</span>
    </a>
    <a class="db-qn-item" href="https://zone.zainezq.com" target="_blank" rel="noopener">
      <span class="db-qn-icon">⟢</span>
      <span class="db-qn-label">Dashboard</span>
    </a>
  </nav>

  <!-- ░░ MAIN GRID ░░ -->
  <div class="db-grid">

    <!-- Recent Blogs -->
    <section class="db-card db-card--blogs" aria-labelledby="db-blogs-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-blogs-title">
          <span class="db-card__accent">✦</span> Recent Blogs
        </h2>
        <a class="db-card__more" href="/blogs/blogs-list.html">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>

    <!-- Recent Posts -->
    <section class="db-card db-card--posts" aria-labelledby="db-posts-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-posts-title">
          <span class="db-card__accent">◈</span> Recent Posts
        </h2>
        <a class="db-card__more" href="/posts/posts-list.html">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>

    <!-- Stats widget -->
    <section class="db-card db-card--stats" aria-labelledby="db-stats-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-stats-title">
          <span class="db-card__accent">▣</span> At a Glance
        </h2>
      </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 of year</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 in year</span>
        </div>
      </div>
      <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"></span>
      </div>
    </section>

    <!-- Lima quick access -->
    <section class="db-card db-card--lima" aria-labelledby="db-lima-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-lima-title">
          <span class="db-card__accent">⬡</span> Lima
        </h2>
        <a class="db-card__more" href="/lima/index.html">Open →</a>
      </header>
      <p class="db-card__desc">
        Limas deidcated sub page
      </p>
      <div class="db-lima-links">
        <a class="db-lima-chip" href="/lima/index.html">Index</a>
        <a class="db-lima-chip" href="/lima/lima-list.html">All entries</a>
      </div>
    </section>

    <!-- WIP tracker -->
    <section class="db-card db-card--wip" aria-labelledby="db-wip-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-wip-title">
          <span class="db-card__accent">◎</span> Work in Progress
        </h2>
        <a class="db-card__more" href="/wip.html">All →</a>
      </header>
      <p class="db-card__desc">Pages currently being drafted or actively updated.</p>
      <a class="db-wip-btn" href="/wip.html">View WIP files →</a>
    </section>

    <!-- Recently Updated -->
    <section class="db-card db-card--recent" aria-labelledby="db-recent-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-recent-title">
          <span class="db-card__accent">⟳</span> Recently Updated
        </h2>
        <a class="db-card__more" href="/recently-updated.html">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>

    <!-- About / Site info -->
    <section class="db-card db-card--about" aria-labelledby="db-about-title">
      <header class="db-card__head">
        <h2 class="db-card__title" id="db-about-title">
          <span class="db-card__accent">◉</span> About this site
        </h2>
      </header>
      <p class="db-card__desc">
        Built entirely in <strong>Emacs Org-mode</strong> and published with
        <code>org-publish</code> to static HTML. No JavaScript framework, no build pipeline -
        just text files and a Lisp script.
      </p>
      <div class="db-tags">
        <span class="db-tag">Emacs</span>
        <span class="db-tag">Org-mode</span>
        <span class="db-tag">Static site</span>
        <span class="db-tag">Arch Linux</span>
      </div>
    </section>

  </div><!-- /db-grid -->
</div><!-- /db-root -->
#+END_EXPORT