From ec1c936eb3d10faa6a1901923703df7359481a85 Mon Sep 17 00:00:00 2001
From: Pranathi <kunjetipranathi@gmail.com>
Date: Mon, 18 May 2026 13:09:12 +0530
Subject: [PATCH 1/2] feat: limit visible skill suggestions with show more
 option

---
 static/script.js     | 21 +++++++++++++++++++++
 static/style.css     | 23 +++++++++++++++++++++++
 templates/index.html | 40 ++++++++++++++++++++++------------------
 3 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/static/script.js b/static/script.js
index aebc922..d4f5ed0 100644
--- a/static/script.js
+++ b/static/script.js
@@ -200,6 +200,27 @@ if (isIndexPage) {
   }
 
   function updateQuickPickState() {
+    /* Toggle extra skill suggestions */
+var toggleBtn = document.getElementById("toggleSkillsBtn");
+var skillsExpanded = false;
+
+if (toggleBtn) {
+  toggleBtn.addEventListener("click", function () {
+    var hiddenSkills = document.querySelectorAll(".extra-skill");
+
+    for (var i = 0; i < hiddenSkills.length; i++) {
+      hiddenSkills[i].style.display = skillsExpanded
+        ? "none"
+        : "inline-flex";
+    }
+
+    skillsExpanded = !skillsExpanded;
+
+    toggleBtn.textContent = skillsExpanded
+      ? "Show Less"
+      : "Show More";
+  });
+}
     quickPickChips.forEach(function (chip) {
       var isActive = isSkillSelected(chip.getAttribute("data-skill") || "");
       chip.classList.toggle("active", isActive);
diff --git a/static/style.css b/static/style.css
index 18d9cbf..97ff32d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -986,12 +986,35 @@ label {
   cursor: pointer;
   transition: background var(--t), border-color var(--t), color var(--t);
 }
+.extra-skill {
+  display: none;
+}
+
 .skill-chip:hover, .skill-chip.active {
   background: var(--indigo-700);
   border-color: var(--indigo-700);
   color: var(--white);
+}/* Hide extra skill chips initially */
+
+
+/* Toggle button for extra skills */
+.toggle-skills-btn {
+  margin-top: 12px;
+  background: transparent;
+  border: none;
+  color: var(--indigo-600);
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 0;
+  transition: color var(--t);
 }
 
+.toggle-skills-btn:hover {
+  color: var(--indigo-800);
+}
+
+
 /* Select wrapper with custom chevron */
 .select-wrap { position: relative; }
 .select-wrap::after {
diff --git a/templates/index.html b/templates/index.html
index 49556f7..60ea299 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -370,25 +370,29 @@ <h2 class="section-title">Find Your Next Project</h2>
             </div>
 
             <!-- Quick-select skill chips -->
-            <div class="skill-chips-row" id="skill-chips-available">
-              <button type="button" class="skill-chip" data-skill="Python">Python</button>
-              <button type="button" class="skill-chip" data-skill="JavaScript">JavaScript</button>
-              <button type="button" class="skill-chip" data-skill="HTML">HTML</button>
-              <button type="button" class="skill-chip" data-skill="CSS">CSS</button>
-              <button type="button" class="skill-chip" data-skill="Flask">Flask</button>
-              <button type="button" class="skill-chip" data-skill="SQL">SQL</button>
-              <button type="button" class="skill-chip" data-skill="React">React</button>
-              <button type="button" class="skill-chip" data-skill="Node.js">Node.js</button>
-              <button type="button" class="skill-chip" data-skill="C++">C++</button>
-              <button type="button" class="skill-chip" data-skill="Java">Java</button>
-              <button type="button" class="skill-chip" data-skill="TypeScript">TypeScript</button>
-              <button type="button" class="skill-chip" data-skill="Go">Go</button>
-              <button type="button" class="skill-chip" data-skill="Rust">Rust</button>
-              <button type="button" class="skill-chip" data-skill="C#">C#</button>
-              <button type="button" class="skill-chip" data-skill="Kotlin">Kotlin</button>
-
-            </div>
+            
+          <div class="skill-chips-row" id="skill-chips-available">
+            <button type="button" class="skill-chip" data-skill="Python">Python</button>
+            <button type="button" class="skill-chip" data-skill="JavaScript">JavaScript</button>
+            <button type="button" class="skill-chip" data-skill="HTML">HTML</button>
+            <button type="button" class="skill-chip" data-skill="CSS">CSS</button>
+            <button type="button" class="skill-chip" data-skill="Flask">Flask</button>
+            <button type="button" class="skill-chip" data-skill="SQL">SQL</button>
+
+            <button type="button" class="skill-chip extra-skill" data-skill="React">React</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Node.js">Node.js</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="C++">C++</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Java">Java</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="TypeScript">TypeScript</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Go">Go</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Rust">Rust</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="C#">C#</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Kotlin">Kotlin</button>
+          </div>
 
+          <button type="button" id="toggleSkillsBtn" class="toggle-skills-btn">
+            Show More
+          </button>
             <!-- Level + Interest in a row -->
             <div class="form-row">
               <div class="form-group">

From db0568d3320803e10a73740c2eaba2e724ffa0a5 Mon Sep 17 00:00:00 2001
From: Pranathi <kunjetipranathi@gmail.com>
Date: Mon, 18 May 2026 15:50:50 +0530
Subject: [PATCH 2/2] feat: limit visible skill suggestions with show more
 option

---
 static/script.js | 45 +++++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/static/script.js b/static/script.js
index d4f5ed0..c1a8f4b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -199,28 +199,33 @@ if (isIndexPage) {
     syncSuggestionsA11yState();
   }
 
-  function updateQuickPickState() {
-    /* Toggle extra skill suggestions */
-var toggleBtn = document.getElementById("toggleSkillsBtn");
-var skillsExpanded = false;
-
-if (toggleBtn) {
-  toggleBtn.addEventListener("click", function () {
-    var hiddenSkills = document.querySelectorAll(".extra-skill");
-
-    for (var i = 0; i < hiddenSkills.length; i++) {
-      hiddenSkills[i].style.display = skillsExpanded
-        ? "none"
-        : "inline-flex";
-    }
+  // Skills expansion state (shared across multiple function calls)
+  var skillsExpanded = false;
+
+  // Initialize toggle button once (moved outside updateQuickPickState to prevent duplicate listeners)
+  (function initToggleButton() {
+    var toggleBtn = document.getElementById("toggleSkillsBtn");
+    if (toggleBtn) {
+      toggleBtn.addEventListener("click", function () {
+        var hiddenSkills = document.querySelectorAll(".extra-skill");
+
+        for (var i = 0; i < hiddenSkills.length; i++) {
+          hiddenSkills[i].style.display = skillsExpanded
+            ? "none"
+            : "inline-flex";
+        }
 
-    skillsExpanded = !skillsExpanded;
+        skillsExpanded = !skillsExpanded;
 
-    toggleBtn.textContent = skillsExpanded
-      ? "Show Less"
-      : "Show More";
-  });
-}
+        toggleBtn.textContent = skillsExpanded
+          ? "Show Less"
+          : "Show More";
+      });
+    }
+  })();
+
+  function updateQuickPickState() {
+    // Update the quick-pick chip states based on selected skills
     quickPickChips.forEach(function (chip) {
       var isActive = isSkillSelected(chip.getAttribute("data-skill") || "");
       chip.classList.toggle("active", isActive);