updating modes and structures

index.org

@@ -1,40 +1,183 @@
-#+TITLE: Home Page
-#+OPTIONS: num:nil title:nil
+#+TITLE: Home
+#+OPTIONS: num:nil title:nil toc:nil
+#+NO_SIDENOTES: t
 #+DATE: <2025-08-04 Mon>
 
-* Welcome! 🌱
+#+BEGIN_EXPORT html
+<div class="db-root">
 
-This is a website built using Emacs Org-mode and published using ~org-publish~. {{{sidenote(1, The very first iteration of this website used the Angular framework\, only after a while I realised (as every Emacs lover does) that I want to make this an Emacs-centric project)}}}
+  <!-- ░░ 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>
 
-Feel free to explore:
+  <!-- ░░ 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>
 
-** Lima
+  <!-- ░░ MAIN GRID ░░ -->
+  <div class="db-grid">
 
-- [[file:lima/index.org][lima's page]]
+    <!-- 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>
 
-** Main Pages:
+    <!-- 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>
 
-- [[file:posts/career/career-list.org][Career Page]]
+    <!-- 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>
 
-- [[file:blogs/blogs-list.org][Blogs Page]]
+    <!-- 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>
 
-- [[file:posts/posts-list.org][Posts Page]]
+    <!-- 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>
 
-** Wird Page
+    <!-- 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>
 
-- [[file:home/wird-tracker.org][Wird Page]]
-
-** Sitemap
-
-- [[file:sitemap.org][Sitemap]]
- 
-** Extra (reference pages)
-
-- [[file:home/status.org][Status of competencies]]
-
-- [[file:wip.org][Work In Progress Files]]
-
-- [[file:home/backlog.org][Backlog Page]]
-
-- [[file:recently-updated.org][Recent Updates Page]]
+    <!-- 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