feat(site): add icon-based More Works section before footer

Insert a 7-card sibling grid between the main content and the footer,
and remove the redundant text-link sibling column from the footer cols.
Each card shows an external Pages-hosted icon with the project name.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: hooosberg

site/index.html

@@ -377,6 +377,40 @@ <h2 class="section__title" data-i18n="faq.title">Quick answers</h2>
         </div>
       </section>
 
+      <section class="more-works container">
+        <h3 class="more-works-title">More Works</h3>
+        <p class="more-works-sub">Creative tools from the same developer</p>
+        <div class="more-works-grid">
+          <a href="https://agentlimb.com" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://agentlimb.com/icons/icon.svg" alt="AgentLimb" loading="lazy">
+            <span>AgentLimb</span>
+          </a>
+          <a href="https://hooosberg.github.io/BeRaw/" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://hooosberg.github.io/BeRaw/assets/icon-128.png" alt="BeRaw" loading="lazy">
+            <span>BeRaw</span>
+          </a>
+          <a href="https://hooosberg.github.io/WitNote/" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://hooosberg.github.io/WitNote/assets/icon.png" alt="WitNote" loading="lazy">
+            <span>WitNote</span>
+          </a>
+          <a href="https://hooosberg.github.io/GlotShot/" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://hooosberg.github.io/GlotShot/public/icon/icon-128.png" alt="GlotShot" loading="lazy">
+            <span>GlotShot</span>
+          </a>
+          <a href="https://hooosberg.github.io/TrekReel/" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://hooosberg.github.io/TrekReel/Apple/icon-128.png" alt="TrekReel" loading="lazy">
+            <span>TrekReel</span>
+          </a>
+          <a href="https://hooosberg.github.io/DOMPrompter/" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://hooosberg.github.io/DOMPrompter/pages/img/icon-128.png" alt="DOMPrompter" loading="lazy">
+            <span>DOMPrompter</span>
+          </a>
+          <a href="https://uixskills.com" target="_blank" rel="noopener" class="more-works-card">
+            <img src="https://uixskills.com/icons/icon.png" alt="UIXskills" loading="lazy">
+            <span>UIXskills</span>
+          </a>
+        </div>
+      </section>
     </main>
 
     <footer class="foot">
@@ -405,16 +439,6 @@ <h4 data-i18n="footer.colProduct">Packpour</h4>
             <a href="https://github.com/hooosberg/Packpour/issues" target="_blank" rel="noreferrer noopener" data-i18n="footer.linkIssue">Report an issue</a>
             <a href="mailto:zikedece@proton.me" data-i18n="footer.linkContact">Contact: zikedece@proton.me</a>
           </div>
-          <div class="foot__col">
-            <h4 data-i18n-html="footer.colBuilt">Built by <a href="https://github.com/hooosberg" target="_blank" rel="noreferrer noopener">hooosberg</a></h4>
-            <a href="https://github.com/hooosberg/BeRaw" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj1">BeRaw — Behance raw-image grabber</a>
-            <a href="https://github.com/hooosberg/AgentLimb" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj2">AgentLimb — teach AI to control your browser</a>
-            <a href="https://github.com/hooosberg/WitNote" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj3">WitNote — local-first AI writing companion</a>
-            <a href="https://github.com/hooosberg/GlotShot" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj4">GlotShot — App Store preview images</a>
-            <a href="https://github.com/hooosberg/TrekReel" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj5">TrekReel — outdoor trails, cinematic reels</a>
-            <a href="https://github.com/hooosberg/DOMPrompter" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj6">DOMPrompter — visualize DOM for AI code</a>
-            <a href="https://github.com/hooosberg/UIXskills" target="_blank" rel="noreferrer noopener" data-i18n="footer.proj7">UIXskills — AI → JSON → Whiteboard → UI</a>
-          </div>
         </div>
       </div>
 

site/styles.css

@@ -1,6 +1,69 @@
 /* ── Reset & base ───────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+.more-works {
+  text-align: center;
+  padding: 72px 20px 32px;
+  border-top: 1px solid var(--line);
+  margin-top: 48px;
+}
+
+.more-works-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ink);
+  margin: 0 0 8px;
+}
+
+.more-works-sub {
+  font-size: 14px;
+  color: var(--muted);
+  margin: 0 0 36px;
+}
+
+.more-works-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 28px;
+  max-width: 880px;
+  margin: 0 auto;
+}
+
+.more-works-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 96px;
+  text-decoration: none;
+  color: var(--ink);
+  transition: transform 0.2s;
+}
+
+.more-works-card:hover {
+  transform: translateY(-3px);
+}
+
+.more-works-card img {
+  width: 64px;
+  height: 64px;
+  border-radius: 14px;
+  object-fit: contain;
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+}
+
+.more-works-card[href*="uixskills"] img,
+.more-works-card[href*="agentlimb"] img {
+  padding: 4px;
+}
+
+.more-works-card span {
+  font-size: 13px;
+  font-weight: 500;
+}
+
 :root {
   --bg: #ffffff;
   --bg-soft: #f6f5f1;