fix: project cards — per-project color cycling and collapsible grid stretch bug

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

_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 %}

_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 %}

_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 %}