From 3a5e5220440e8bb9762d0e35cdf8b29a1d7ba1c7 Mon Sep 17 00:00:00 2001
From: Krishna Jha <krishnajha@Krishnas-MacBook-Pro.local>
Date: Mon, 18 May 2026 15:53:42 +0530
Subject: [PATCH] Fix: add Read more toggle to expand truncated project
 descriptions

---
 static/script.js | 24 ++++++++++++++++++++++--
 static/style.css | 16 ++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/static/script.js b/static/script.js
index d4de221..d6e8447 100644
--- a/static/script.js
+++ b/static/script.js
@@ -541,11 +541,31 @@ if (isIndexPage) {
     title.textContent = project.title;
 
     // Description (truncated for visual consistency)
+    // Description with Read More toggle
     var desc = document.createElement("p");
     desc.className = "project-card-desc";
-    // Cut description to 120 chars so all cards stay the same height
-    desc.textContent = truncate(project.description, 120);
 
+    var shortText = truncate(project.description, 120);
+    var fullText = project.description;
+    var isExpanded = false;
+
+    desc.textContent = shortText;
+
+    // Only add Read More button if description is actually truncated
+    if (fullText.length > 120) {
+      var readMoreBtn = document.createElement("button");
+      readMoreBtn.className = "read-more-btn";
+      readMoreBtn.textContent = "Read more";
+
+      readMoreBtn.addEventListener("click", function () {
+        isExpanded = !isExpanded;
+        desc.textContent = isExpanded ? fullText : shortText;
+        readMoreBtn.textContent = isExpanded ? "Read less" : "Read more";
+        desc.appendChild(readMoreBtn); // re-append button since textContent clears it
+      });
+
+      desc.appendChild(readMoreBtn);
+    }
     // Tags row
     var tagsRow = document.createElement("div");
     tagsRow.className = "project-card-tags";
diff --git a/static/style.css b/static/style.css
index 3b11ca9..4f9b427 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2011,4 +2011,20 @@ select:focus {
 
 #scroll-top-btn.visible {
     display: flex;
+}
+
+.read-more-btn {
+  background: none;
+  border: none;
+  color: #6366f1;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 4px;
+  text-decoration: underline;
+}
+
+.read-more-btn:hover {
+  color: #4f46e5;
 }
\ No newline at end of file