1 files changed, 65 insertions, 0 deletions
diff --git a/layouts/partials/project-row.html b/layouts/partials/project-row.html
new file mode 100644
index 0000000..82a3481
--- /dev/null
+++ b/layouts/partials/project-row.html
@@ -0,0 +1,65 @@
+{{ $p := .page }}
+{{ $reverse := eq (mod .index 2) 1 }}
+
+{{ $status := $p.Params.status | default "active" }}
+{{/* status -> theme-aware bg/text var pair (all defined in main.css) */}}
+{{ $bgVar := "--type-tech" }}{{ $txtVar := "--type-tech-text" }}
+{{ if eq $status "maintained" }}{{ $bgVar = "--type-quote" }}{{ $txtVar = "--type-quote-text" }}{{ end }}
+{{ if eq $status "wip" }}{{ $bgVar = "--type-life" }}{{ $txtVar = "--type-life-text" }}{{ end }}
+{{ if eq $status "archived" }}{{ $bgVar = "--text-dim" }}{{ $txtVar = "--bg" }}{{ end }}
+
+{{ $imageURL := "" }}
+{{ if $p.Params.image }}
+  {{ $res := $p.Resources.GetMatch $p.Params.image }}
+  {{ if $res }}{{ $imageURL = $res.RelPermalink }}{{ else }}{{ $imageURL = $p.Params.image }}{{ end }}
+{{ end }}
+{{ $glyph := substr (upper $p.Title) 0 2 }}
+
+<article class="group flex flex-col md:flex-row {{ if $reverse }}md:flex-row-reverse{{ end }} gap-6 items-stretch border-l-4 border-accent bg-surface/30 rounded-lg overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg hover:bg-surface/50">
+  <!-- Visual (decorative duplicate of the title link; hidden from AT) -->
+  <a href="{{ $p.RelPermalink }}" tabindex="-1" aria-hidden="true" class="md:w-1/3 flex-shrink-0 flex items-center justify-center bg-bg/40 min-h-[10rem]">
+    {{ if $imageURL }}
+      <img src="{{ $imageURL }}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200" loading="lazy" />
+    {{ else }}
+      <span class="text-5xl font-bold font-oxanium text-accent/80 select-none">{{ $glyph }}</span>
+    {{ end }}
+  </a>
+
+  <!-- Body -->
+  <div class="flex-1 p-6 flex flex-col gap-3">
+    <div class="flex items-start justify-between gap-3">
+      <h2 class="text-2xl font-bold font-oxanium">
+        <a href="{{ $p.RelPermalink }}" class="group-hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent">{{ $p.Title }}</a>
+      </h2>
+      <span class="flex-shrink-0 px-3 py-1 rounded-full text-xs font-semibold" style="background-color: var({{ $bgVar }}); color: var({{ $txtVar }});">
+        {{ i18n (printf "status-%s" $status) }}
+      </span>
+    </div>
+
+    {{ with $p.Params.tagline }}
+    <p class="text-text-dim">{{ . }}</p>
+    {{ end }}
+
+    {{ with $p.Params.tags }}
+    <ul class="flex flex-wrap gap-2 mt-1">
+      {{ range . }}
+      <li class="px-2 py-1 rounded text-xs bg-bg/60 text-text">{{ . }}</li>
+      {{ end }}
+    </ul>
+    {{ end }}
+
+    <div class="flex flex-wrap items-center gap-3 mt-auto pt-2">
+      <a href="{{ $p.RelPermalink }}" class="btn btn-sm inline-flex items-center gap-2">
+        {{ i18n "readMore" }}
+        <i data-feather="arrow-right" class="w-4 h-4" aria-hidden="true"></i>
+      </a>
+      {{ with $p.Params.repo_url }}
+      <a href="{{ . }}" target="_blank" rel="noopener noreferrer" class="text-sm text-text-dim hover:text-accent inline-flex items-center gap-1 transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent">
+        {{ i18n "viewRepo" }}
+        <i data-feather="external-link" class="w-3 h-3" aria-hidden="true"></i>
+        <span class="sr-only">{{ i18n "opensInNewTab" }}</span>
+      </a>
+      {{ end }}
+    </div>
+  </div>
+</article>