From a7265bc7cefa0e25150272f8009823dd1c0009f1 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Wed, 4 Mar 2026 16:48:05 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20project=20cards=20=E2=80=94=20per-projec?=
 =?UTF-8?q?t=20color=20cycling=20and=20collapsible=20grid=20stretch=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add items-start to grid container so expanding one project card no longer
stretches the adjacent card to fill the row height. Add per-project color
cycling (border-l + tech tags) using the 8-color palette, replacing uniform
amber accent colors.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
---
 .../sections/cv-projects-personal.njk         | 27 ++++++++++++++++---
 .../components/sections/cv-projects-work.njk  | 27 ++++++++++++++++---
 _includes/components/sections/cv-projects.njk | 27 ++++++++++++++++---
 3 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/_includes/components/sections/cv-projects-personal.njk b/_includes/components/sections/cv-projects-personal.njk
index 53a6f84..e3e6ab0 100644
--- a/_includes/components/sections/cv-projects-personal.njk
+++ b/_includes/components/sections/cv-projects-personal.njk
@@ -23,9 +23,19 @@
     {{ sectionConfig.title or "Personal Projects" }}
   </h2>
 
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in personalProjects | head(maxItems) %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors overflow-hidden">
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
       {# Summary row — always visible, clickable #}
       <button
         class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
@@ -35,7 +45,7 @@
         <div class="flex items-center gap-2 min-w-0 flex-1">
           <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
             {% if item.url %}
-            <a href="{{ item.url }}" class="hover:text-accent-600 dark:hover:text-accent-400" @click.stop>{{ item.name }}</a>
+            <a href="{{ item.url }}" class="hover:underline" @click.stop>{{ item.name }}</a>
             {% else %}
             {{ item.name }}
             {% endif %}
@@ -91,7 +101,16 @@
         {% if showTechnologies and item.technologies and item.technologies.length %}
         <div class="flex flex-wrap gap-1">
           {% for tech in item.technologies %}
-          <span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400 rounded">
+          <span class="text-xs px-2 py-0.5 rounded
+            {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
+            {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
+            {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
+            {% elif ci == 3 %}bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300
+            {% elif ci == 4 %}bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
+            {% elif ci == 5 %}bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300
+            {% elif ci == 6 %}bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
+            {% elif ci == 7 %}bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300
+            {% endif %}">
             {{ tech }}
           </span>
           {% endfor %}
diff --git a/_includes/components/sections/cv-projects-work.njk b/_includes/components/sections/cv-projects-work.njk
index dc9efae..47d7014 100644
--- a/_includes/components/sections/cv-projects-work.njk
+++ b/_includes/components/sections/cv-projects-work.njk
@@ -23,9 +23,19 @@
     {{ sectionConfig.title or "Work Projects" }}
   </h2>
 
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in workProjects | head(maxItems) %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors overflow-hidden">
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
       {# Summary row — always visible, clickable #}
       <button
         class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
@@ -35,7 +45,7 @@
         <div class="flex items-center gap-2 min-w-0 flex-1">
           <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
             {% if item.url %}
-            <a href="{{ item.url }}" class="hover:text-accent-600 dark:hover:text-accent-400" @click.stop>{{ item.name }}</a>
+            <a href="{{ item.url }}" class="hover:underline" @click.stop>{{ item.name }}</a>
             {% else %}
             {{ item.name }}
             {% endif %}
@@ -91,7 +101,16 @@
         {% if showTechnologies and item.technologies and item.technologies.length %}
         <div class="flex flex-wrap gap-1">
           {% for tech in item.technologies %}
-          <span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400 rounded">
+          <span class="text-xs px-2 py-0.5 rounded
+            {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
+            {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
+            {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
+            {% elif ci == 3 %}bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300
+            {% elif ci == 4 %}bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
+            {% elif ci == 5 %}bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300
+            {% elif ci == 6 %}bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
+            {% elif ci == 7 %}bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300
+            {% endif %}">
             {{ tech }}
           </span>
           {% endfor %}
diff --git a/_includes/components/sections/cv-projects.njk b/_includes/components/sections/cv-projects.njk
index c0d0a94..99cc152 100644
--- a/_includes/components/sections/cv-projects.njk
+++ b/_includes/components/sections/cv-projects.njk
@@ -13,9 +13,19 @@
     {{ sectionConfig.title or "Projects" }}
   </h2>
 
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in cv.projects | head(maxItems) %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors overflow-hidden">
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
       {# Summary row — always visible, clickable #}
       <button
         class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
@@ -25,7 +35,7 @@
         <div class="flex items-center gap-2 min-w-0 flex-1">
           <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
             {% if item.url %}
-            <a href="{{ item.url }}" class="hover:text-accent-600 dark:hover:text-accent-400" @click.stop>{{ item.name }}</a>
+            <a href="{{ item.url }}" class="hover:underline" @click.stop>{{ item.name }}</a>
             {% else %}
             {{ item.name }}
             {% endif %}
@@ -81,7 +91,16 @@
         {% if showTechnologies and item.technologies and item.technologies.length %}
         <div class="flex flex-wrap gap-1">
           {% for tech in item.technologies %}
-          <span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400 rounded">
+          <span class="text-xs px-2 py-0.5 rounded
+            {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
+            {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
+            {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
+            {% elif ci == 3 %}bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300
+            {% elif ci == 4 %}bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
+            {% elif ci == 5 %}bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300
+            {% elif ci == 6 %}bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
+            {% elif ci == 7 %}bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300
+            {% endif %}">
             {{ tech }}
           </span>
           {% endfor %}