From 627d76ad3418af8b846bc0d0f019f9fa89599bf1 Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Sun, 20 Sep 2026 11:58:07 +0200
Subject: [PATCH] Brand-accent tags on all project cards

Each card tag now carries an accent sampled from the product's own
UI (Nothing red, Containr lime, Vibly chartreuse, PulseMonitor blue,
SportCreative purple, ZEUS red...). Single --acc variable per class,
auto-darkened for light theme.

Authored By: TDvorak <info@tdvorak.dev>

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 index.html | 20 ++++++++++----------
 style.css  | 15 ++++++++++++++-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index d0daaa7..a5183fd 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
           <a class="card" href="https://nothing-modes.vercel.app" target="_blank" rel="noopener">
             <figure><img src="images/projects/nothing-modes.png" alt="Nothing Modes landing page" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Nothing Modes</h3><span class="tag">Kotlin · Android</span></div>
+              <div class="card-head"><h3>Nothing Modes</h3><span class="tag tag-nothing">Kotlin · Android</span></div>
               <p>Open-source automation for Nothing phones — Modes, Routines and Glyph integration. No cloud, no telemetry.</p>
             </div>
           </a>
@@ -90,7 +90,7 @@
           <a class="card" href="https://calhq.vercel.app" target="_blank" rel="noopener">
             <figure><img src="images/projects/cal.png" alt="Cal landing page" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Cal</h3><span class="tag">Self-hosted</span></div>
+              <div class="card-head"><h3>Cal</h3><span class="tag tag-cal">Self-hosted</span></div>
               <p>Daily toolkit — calendar, tasks, notes, links, files, kanban, time tracking and GitHub inbox. One Docker container.</p>
             </div>
           </a>
@@ -106,7 +106,7 @@
           <a class="card" href="https://timespent.tdvorak.dev" target="_blank" rel="noopener">
             <figure><img src="images/projects/timespent.png" alt="TimeSpent" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>TimeSpent</h3><span class="tag">React · Vite</span></div>
+              <div class="card-head"><h3>TimeSpent</h3><span class="tag tag-silver">React · Vite</span></div>
               <p>Time-tracking CSV exports turned into branded, invoice-style PDF reports — with ink-saving print modes.</p>
             </div>
           </a>
@@ -114,7 +114,7 @@
           <a class="card" href="https://github.com/Dvorinka/PulseMonitor" target="_blank" rel="noopener">
             <figure><img src="images/projects/pulsemonitor.png" alt="PulseMonitor" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>PulseMonitor</h3><span class="tag">TypeScript</span></div>
+              <div class="card-head"><h3>PulseMonitor</h3><span class="tag tag-pulse">TypeScript</span></div>
               <p>Real-time web dashboard for monitoring remote AI agent sessions over SSH — activity feed, todos, metrics.</p>
             </div>
           </a>
@@ -122,7 +122,7 @@
           <a class="card" href="https://bookra.eu" target="_blank" rel="noopener">
             <figure><img src="images/projects/bookra.png" alt="Bookra" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Bookra</h3><span class="tag">SaaS</span></div>
+              <div class="card-head"><h3>Bookra</h3><span class="tag tag-bookra">SaaS</span></div>
               <p>Simple booking software for salons, clinics and local services — reservations, customers and team in one place.</p>
             </div>
           </a>
@@ -130,7 +130,7 @@
           <a class="card" href="https://vibly-5m7g.vercel.app" target="_blank" rel="noopener">
             <figure><img src="images/projects/vibly.png" alt="Vibly" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Vibly</h3><span class="tag">Studio</span></div>
+              <div class="card-head"><h3>Vibly</h3><span class="tag tag-vibly">Studio</span></div>
               <p>AI-driven product &amp; growth studio — from idea to production. My own studio's public site.</p>
             </div>
           </a>
@@ -200,28 +200,28 @@
           <a class="card" href="https://www.sportcreative.eu" target="_blank" rel="noopener">
             <figure><img src="images/projects/sportcreative.png" alt="SportCreative" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>SportCreative</h3><span class="tag">Agency</span></div>
+              <div class="card-head"><h3>SportCreative</h3><span class="tag tag-sportcreative">Agency</span></div>
               <p>Full-service digital marketing for sports clubs — websites, content, social systems.</p>
             </div>
           </a>
           <a class="card" href="https://www.zeusport.cz" target="_blank" rel="noopener">
             <figure><img src="images/projects/zeus.cz.png" alt="ZEUS CZ e-shop" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>ZEUS Sport</h3><span class="tag">E-commerce</span></div>
+              <div class="card-head"><h3>ZEUS Sport</h3><span class="tag tag-zeus">E-commerce</span></div>
               <p>Professional sports equipment e-shop — Czech market entry, CZ and EU storefronts.</p>
             </div>
           </a>
           <a class="card" href="https://www.reklik.net" target="_blank" rel="noopener">
             <figure><img src="images/projects/reklik.png" alt="ReKlik" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>ReKlik</h3><span class="tag">Photography</span></div>
+              <div class="card-head"><h3>ReKlik</h3><span class="tag tag-reklik">Photography</span></div>
               <p>Real-estate photography brand — landing site plus portfolio at foto.reklik.net.</p>
             </div>
           </a>
           <a class="card" href="https://www.bizoniuh.cz" target="_blank" rel="noopener">
             <figure><img src="images/projects/bizoni.png" alt="Bizoni UH" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>FC Bizoni UH</h3><span class="tag">Club site</span></div>
+              <div class="card-head"><h3>FC Bizoni UH</h3><span class="tag tag-bizoni">Club site</span></div>
               <p>Football club website — UX, fan engagement, match photography and video content.</p>
             </div>
           </a>
diff --git a/style.css b/style.css
index 26330c7..68adbed 100644
--- a/style.css
+++ b/style.css
@@ -208,7 +208,20 @@ a { color: inherit; text-decoration: none; }
   font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim);
   padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
 }
-.tag-lime { color: #a3e635; border-color: rgba(163, 230, 53, 0.35); }
+/* brand accent tags — color sampled from each product's own UI */
+.tag-lime { --acc: #a3e635; }            /* containr */
+.tag-nothing { --acc: #f04e55; }         /* nothing red */
+.tag-cal { --acc: #7da88b; }             /* sage */
+.tag-pulse { --acc: #5eb3ff; }           /* monitor blue */
+.tag-bookra { --acc: #d8b98a; }          /* warm tan */
+.tag-vibly { --acc: #b8ff2e; }           /* chartreuse */
+.tag-silver { --acc: #c9cdd3; }          /* timespent mono */
+.tag-sportcreative { --acc: #9a7ae0; }   /* purple */
+.tag-zeus { --acc: #e05a52; }            /* red */
+.tag-reklik { --acc: #58aed8; }          /* blue */
+.tag-bizoni { --acc: #c05b50; }          /* maroon */
+.tag[class*="tag-"] { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 35%, transparent); }
+[data-theme="light"] .tag[class*="tag-"] { color: color-mix(in srgb, var(--acc) 45%, #000); border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
 .card-body > p { margin-top: 8px; font-size: 14px; color: var(--fg-dim); line-height: 1.55; }
 
 /* ============ Row lists ============ */