From dd08a2afcd2b008186096e2f41f26102854372e5 Mon Sep 17 00:00:00 2001
From: Sadeep Madurange <sadeep@asciimx.com>
Date: Sat, 25 Oct 2025 11:35:29 +0800
Subject: Use template for project list.

---
 _layouts/projects.html                 | 37 ---------------
 _projects/bumblebee/index.md           |  1 +
 _projects/desktop-unix/index.md        |  1 +
 _projects/e-reader/index.md            |  1 +
 _projects/etlas/index.md               |  1 +
 _projects/fpm-door-lock/index.md       |  1 +
 _projects/matrix-digital-rain/index.md |  1 +
 _site/assets/css/main.css              | 16 ++++++-
 _site/projects/index.html              | 85 +++++++++++++++++++++-------------
 assets/css/main.css                    | 16 ++++++-
 projects.html                          | 20 ++++++++
 projects.md                            |  9 ----
 12 files changed, 110 insertions(+), 79 deletions(-)
 delete mode 100644 _layouts/projects.html
 create mode 100644 projects.html
 delete mode 100644 projects.md

diff --git a/_layouts/projects.html b/_layouts/projects.html
deleted file mode 100644
index d1d155b..0000000
--- a/_layouts/projects.html
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: default
-title: Projects
----
-
-<table style="border: none; width: 100%">
-  <tr style="border: none;">
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="e-reader/thumb.png" alt="E-reader" style="width: 100%">
-      <h5><a href="e-reader">Prototype e-reader</a></h5>
-    </td>
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="matrix-digital-rain/thumb.png" alt="The Matrix" style="width: 100%">
-      <h5><a href="matrix-digital-rain">The Matrix digital rain</a></h5>
-    </td>
-  </tr>
-  <tr style="border: none;">
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="etlas/dash.jpg" alt="Etlas" style="width: 100%">
-      <h5><a href="etlas">Etlas: e-paper display for news, stocks, and the weather</a></h5>
-    </td>
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="bumblebee/thumb.png" alt="Bumblebee" style="width: 100%">
-      <h5><a href="bumblebee">Bumblebee: turn browser sessions to code</a></h5>
-    </td>
-  </tr>
-  <tr style="border: none;">
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="fpm-door-lock/pcb.jpg" alt="FPM door lock" style="width: 100%">
-      <h5><a href="fpm-door-lock">Prototype fingerprint door lock</a></h5>
-    </td>
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="desktop-unix/linux.png" alt="Unix desktop" style="width: 100%">
-      <h5><a href="desktop-unix">Unix for the desktop</a></h5>
-    </td>
-  </tr>
-</table>
diff --git a/_projects/bumblebee/index.md b/_projects/bumblebee/index.md
index 467fa39..9be1657 100644
--- a/_projects/bumblebee/index.md
+++ b/_projects/bumblebee/index.md
@@ -2,6 +2,7 @@
 title: "Bumblebee: turn browser sessions to code"
 date: 2025-04-02T00:00:00+08:00
 author: W. D. Sadeep Madurange
+thumbnail: thumb.png
 ---
 
 Bumblebee is a web browser that turns browser sessions into C# scripts. Its
diff --git a/_projects/desktop-unix/index.md b/_projects/desktop-unix/index.md
index 6e97964..9dfb050 100644
--- a/_projects/desktop-unix/index.md
+++ b/_projects/desktop-unix/index.md
@@ -2,6 +2,7 @@
 title: Unix for the desktop
 date: 2025-09-21T00:00:00+08:00
 author: Wickramage Don Sadeep Madurange
+thumbnail: linux.png
 ---
 
 The year 2020 transformed my personal computing experience. In March 2020, I
diff --git a/_projects/e-reader/index.md b/_projects/e-reader/index.md
index a19603a..2b907bb 100644
--- a/_projects/e-reader/index.md
+++ b/_projects/e-reader/index.md
@@ -2,6 +2,7 @@
 title: Prototype e-reader
 date: 2023-10-24T00:00:00+08:00
 author: W. D. Sadeep Madurange
+thumbnail: thumb.png
 ---
 
 This project features a prototype e-reader powered by a 7.5-inch {{< link
diff --git a/_projects/etlas/index.md b/_projects/etlas/index.md
index 97d92a9..3729d5d 100644
--- a/_projects/etlas/index.md
+++ b/_projects/etlas/index.md
@@ -2,6 +2,7 @@
 title: "Etlas: e-paper display for news, stocks, and the weather"
 date: 2024-09-05T00:00:00+08:00
 author: W. D. Sadeep Madurange
+thumbnail: dash.jpg
 ---
 
 Etlas is a news, stock market, and weather tracker powered by an ESP32 NodeMCU
diff --git a/_projects/fpm-door-lock/index.md b/_projects/fpm-door-lock/index.md
index 72fd171..9122332 100644
--- a/_projects/fpm-door-lock/index.md
+++ b/_projects/fpm-door-lock/index.md
@@ -2,6 +2,7 @@
 title: Prototype fingerprint door lock
 date: 2025-10-03T00:00:00+08:00
 author: W. D. Sadeep Madurange
+thumbnail: pcb.jpg
 ---
 
 This project features a fingerprint door lock powered by an ATmega328P
diff --git a/_projects/matrix-digital-rain/index.md b/_projects/matrix-digital-rain/index.md
index c469762..f2fa23d 100644
--- a/_projects/matrix-digital-rain/index.md
+++ b/_projects/matrix-digital-rain/index.md
@@ -2,6 +2,7 @@
 title: The Matrix digital rain for Unix terminals
 date: 2024-01-12T00:00:00+08:00
 author: W. D. Sadeep Madurange
+thumbnail: thumb.png
 ---
 
 The famous digital rain from the movie The Matrix implemented in C for 
diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index 0a787f2..fca50c0 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -29,14 +29,28 @@ a {
 }
 
 img {
+  width: 100%;
   mix-blend-mode: multiply;
 }
 
 table {
-  border: none;
   width: 100%;
 }
 
+table, tr, td {
+  border: none;
+}
+
+td {
+  background-color: transparent;
+}
+
+.project-item {
+  width: 50%;
+  border: none;
+  vertical-align: top;
+}
+
 #navlist > .active > a {
   color: #000;
   font-weight: 600;
diff --git a/_site/projects/index.html b/_site/projects/index.html
index a1ebd40..af602a6 100644
--- a/_site/projects/index.html
+++ b/_site/projects/index.html
@@ -24,37 +24,60 @@
       </ul>
     </div>
 
-    <main class="container" id="main"><table style="border: none; width: 100%">
-  <tr style="border: none;">
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="e-reader/thumb.png" alt="E-reader" style="width: 100%">
-      <h5><a href="e-reader">Prototype e-reader</a></h5>
-    </td>
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="matrix-digital-rain/thumb.png" alt="The Matrix" style="width: 100%">
-      <h5><a href="matrix-digital-rain">The Matrix digital rain</a></h5>
-    </td>
-  </tr>
-  <tr style="border: none;">
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="etlas/dash.jpg" alt="Etlas" style="width: 100%">
-      <h5><a href="etlas">Etlas: e-paper display for news, stocks, and the weather</a></h5>
-    </td>
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="bumblebee/thumb.png" alt="Bumblebee" style="width: 100%">
-      <h5><a href="bumblebee">Bumblebee: turn browser sessions to code</a></h5>
-    </td>
-  </tr>
-  <tr style="border: none;">
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="fpm-door-lock/pcb.jpg" alt="FPM door lock" style="width: 100%">
-      <h5><a href="fpm-door-lock">Prototype fingerprint door lock</a></h5>
-    </td>
-    <td style="border: none; width: 50%; vertical-align: top; background-color: transparent;">
-      <img src="desktop-unix/linux.png" alt="Unix desktop" style="width: 100%">
-      <h5><a href="desktop-unix">Unix for the desktop</a></h5>
-    </td>
-  </tr>
+    <main class="container" id="main"><table>
+  
+  
+    <tr>
+    
+    
+        <td class="project-item">
+          
+          <img src="e-reader/thumb.png" alt="Prototype e-reader">
+          <h5><a href="e-reader">Prototype e-reader</a></h5>
+        </td>
+    
+        <td class="project-item">
+          
+          <img src="matrix-digital-rain/thumb.png" alt="The Matrix digital rain for Unix terminals">
+          <h5><a href="matrix-digital-rain">The Matrix digital rain for Unix terminals</a></h5>
+        </td>
+    
+    </tr>
+  
+    <tr>
+    
+    
+        <td class="project-item">
+          
+          <img src="etlas/dash.jpg" alt="Etlas: e-paper display for news, stocks, and the weather">
+          <h5><a href="etlas">Etlas: e-paper display for news, stocks, and the weather</a></h5>
+        </td>
+    
+        <td class="project-item">
+          
+          <img src="bumblebee/thumb.png" alt="Bumblebee: turn browser sessions to code">
+          <h5><a href="bumblebee">Bumblebee: turn browser sessions to code</a></h5>
+        </td>
+    
+    </tr>
+  
+    <tr>
+    
+    
+        <td class="project-item">
+          
+          <img src="desktop-unix/linux.png" alt="Unix for the desktop">
+          <h5><a href="desktop-unix">Unix for the desktop</a></h5>
+        </td>
+    
+        <td class="project-item">
+          
+          <img src="fpm-door-lock/pcb.jpg" alt="Prototype fingerprint door lock">
+          <h5><a href="fpm-door-lock">Prototype fingerprint door lock</a></h5>
+        </td>
+    
+    </tr>
+  
 </table>
 </main>
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 0a787f2..fca50c0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -29,14 +29,28 @@ a {
 }
 
 img {
+  width: 100%;
   mix-blend-mode: multiply;
 }
 
 table {
-  border: none;
   width: 100%;
 }
 
+table, tr, td {
+  border: none;
+}
+
+td {
+  background-color: transparent;
+}
+
+.project-item {
+  width: 50%;
+  border: none;
+  vertical-align: top;
+}
+
 #navlist > .active > a {
   color: #000;
   font-weight: 600;
diff --git a/projects.html b/projects.html
new file mode 100644
index 0000000..5f06646
--- /dev/null
+++ b/projects.html
@@ -0,0 +1,20 @@
+---
+layout: default
+title: Projects
+---
+
+<table>
+  {% assign rows = site.projects.size | divided_by: 2.0 | ceil %}
+  {% for i in (1..rows) %}
+    <tr>
+    {% assign offset = forloop.index0 | times: 2 %}
+    {% for item in site.projects limit:2 offset:offset %}
+        <td class="project-item">
+          {% assign parts = item.url | split: '/' %}
+          <img src="{{ parts[2] }}/{{ item.thumbnail }}" alt="{{ item.title }}">
+          <h5><a href="{{ parts[2] }}">{{ item.title }}</a></h5>
+        </td>
+    {% endfor %}
+    </tr>
+  {% endfor %}
+</table>
diff --git a/projects.md b/projects.md
deleted file mode 100644
index 15f630b..0000000
--- a/projects.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: projects
-title: Projects
----
-
-# About page
-
-This page tells you a little bit about me.
-
-- 
cgit v1.2.3