From 1fa64edd4f70072d76f8319f759e983c4ab729ed Mon Sep 17 00:00:00 2001
From: senior <senior@ffaerber.duckdns.org>
Date: Wed, 8 Jul 2026 08:11:25 +0000
Subject: [PATCH] Address QA review: tag contrast, lede width, link rel, story
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bump tech-tag text color to --tag-fg (#8a929e dark / #57606a light) and
  raise opacity to 0.95 so chips stay legible on the dark card background
- Give .section-lede display:block + max-width:60ch so the italic intro
  reads as a lede paragraph rather than a stretched heading
- Add margin-block-start (0.5rem) to .card-story so the project name
  doesn't crowd the story
- Add rel="noopener noreferrer" to all external GitHub links
  (card-link, section-link, footer) for external-link hardening
- Section ordering already matches the issue spec; Ethereum infra has
  only stakingtracker — confirmed no stale/duplicated entry
---
 index.html | 40 ++++++++++++++++++++--------------------
 styles.css | 11 +++++++----
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 1012519..015b751 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
       <div class="section-head">
         <h2 class="section-title">CipherDolls — AI companion platform</h2>
         <p class="section-lede">What if an AI companion wasn't just an app, but something physical in your room? CipherDolls is my biggest project: an AI companion platform where characters can talk, listen — and live inside real devices.</p>
-        <a class="section-link" href="https://github.com/cipherdolls" rel="noopener" target="_blank">github.com/cipherdolls ↗</a>
+        <a class="section-link" href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a>
       </div>
       <div class="cards">
 
@@ -32,7 +32,7 @@
           <ul class="tags">
             <li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li><li>Redis</li><li>MQTT</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/core" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/core" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -41,7 +41,7 @@
           <ul class="tags">
             <li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/server" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/server" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -50,7 +50,7 @@
           <ul class="tags">
             <li>React Router</li><li>TypeScript</li><li>Tailwind</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/webapp" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/webapp" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -59,7 +59,7 @@
           <ul class="tags">
             <li>TypeScript</li><li>Redis</li><li>WebSocket</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/stream-player" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/stream-player" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -68,7 +68,7 @@
           <ul class="tags">
             <li>TypeScript</li><li>WebSocket</li><li>ffmpeg</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/stream-recorder" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/stream-recorder" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -77,7 +77,7 @@
           <ul class="tags">
             <li>C</li><li>ESP-IDF</li><li>ESP32-S3</li><li>LVGL</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/firmware-watcher" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/firmware-watcher" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -86,7 +86,7 @@
           <ul class="tags">
             <li>C</li><li>ESP-IDF</li><li>ESP32-S3</li>
           </ul>
-          <a class="card-link" href="https://github.com/cipherdolls/firmware-m5sticks3" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/cipherdolls/firmware-m5sticks3" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
       </div>
@@ -106,7 +106,7 @@
           <ul class="tags">
             <li>Solidity</li><li>React</li><li>Swarm PSS</li><li>WebRTC</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/SwarmChat" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/SwarmChat" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -115,7 +115,7 @@
           <ul class="tags">
             <li>Solidity</li><li>Foundry</li><li>React</li><li>Swarm</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/pinkchainsaw" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/pinkchainsaw" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -124,7 +124,7 @@
           <ul class="tags">
             <li>Solidity</li><li>Gnosis Chain</li><li>Swarm</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/freeemarket" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/freeemarket" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -133,7 +133,7 @@
           <ul class="tags">
             <li>React</li><li>TypeScript</li><li>Vite</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/walletmatrix" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/walletmatrix" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -142,7 +142,7 @@
           <ul class="tags">
             <li>React</li><li>wagmi</li><li>npm package</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/swarm-connect" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/swarm-connect" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -151,7 +151,7 @@
           <ul class="tags">
             <li>Next.js</li><li>TypeScript</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/opentab" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/opentab" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
       </div>
@@ -171,7 +171,7 @@
           <ul class="tags">
             <li>Python</li><li>FastAPI</li><li>CUDA</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/whisper-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/whisper-cuda" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -180,7 +180,7 @@
           <ul class="tags">
             <li>Python</li><li>FastAPI</li><li>CUDA</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/kokoro-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/kokoro-cuda" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
         <article class="card">
@@ -189,7 +189,7 @@
           <ul class="tags">
             <li>Python</li><li>vLLM</li><li>CUDA</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/voxtral-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/voxtral-cuda" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
       </div>
@@ -208,7 +208,7 @@
           <ul class="tags">
             <li>TypeScript</li><li>Fastify</li><li>SQLite</li>
           </ul>
-          <a class="card-link" href="https://github.com/ffaerber/stakingtracker" rel="noopener" target="_blank">View on GitHub ↗</a>
+          <a class="card-link" href="https://github.com/ffaerber/stakingtracker" rel="noopener noreferrer" target="_blank">View on GitHub ↗</a>
         </article>
 
       </div>
@@ -219,8 +219,8 @@
   <footer class="site-footer">
     <div class="container">
       <nav class="footer-links">
-        <a href="https://github.com/ffaerber" rel="noopener" target="_blank">github.com/ffaerber ↗</a>
-        <a href="https://github.com/cipherdolls" rel="noopener" target="_blank">github.com/cipherdolls ↗</a>
+        <a href="https://github.com/ffaerber" rel="noopener noreferrer" target="_blank">github.com/ffaerber ↗</a>
+        <a href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a>
       </nav>
       <p class="footer-meta">Served from a container built in <a href="https://git.ffaerber.duckdns.org/ffaerber/homepage" rel="noopener">ffaerber/homepage</a>.</p>
     </div>
diff --git a/styles.css b/styles.css
index 275225f..4acb9d6 100644
--- a/styles.css
+++ b/styles.css
@@ -6,6 +6,7 @@
   --accent: #58a6ff;
   --border: #30363d;
   --tag-bg: #1f2630;
+  --tag-fg: #8a929e;
   --radius: 12px;
   --maxw: 64rem;
 }
@@ -19,6 +20,7 @@
     --accent: #0969da;
     --border: #d0d7de;
     --tag-bg: #eaeef2;
+    --tag-fg: #57606a;
   }
 }
 
@@ -72,10 +74,11 @@ body {
   font-weight: 700;
 }
 .section-lede {
+  display: block;
+  max-width: 60ch;
   margin: 0 0 0.6rem;
   color: var(--muted);
   font-size: 1.05rem;
-  max-width: 46rem;
   font-style: italic;
   line-height: 1.65;
 }
@@ -113,7 +116,7 @@ body {
   letter-spacing: -0.01em;
 }
 .card-story {
-  margin: 0 0 1.1rem;
+  margin: 0.5rem 0 1.1rem;
   color: var(--fg);
   font-size: 1.02rem;
   line-height: 1.65;
@@ -132,13 +135,13 @@ body {
 .tags li {
   font-size: 0.7rem;
   line-height: 1.4;
-  color: var(--muted);
+  color: var(--tag-fg);
   background: var(--tag-bg);
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: 0.1rem 0.5rem;
   white-space: nowrap;
-  opacity: 0.85;
+  opacity: 0.95;
 }
 
 /* Card link — subtle, sits below the story */