diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb0728e..93b83eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
+- "Share My Result" button on results page that copies a pre-filled URL to clipboard (#411)
+- Auto-fill form and trigger recommendations when opening a shared URL (#411)
 - Initial CHANGELOG.md setup for tracking project history
 - Documentation structure for future contributor updates
 - Added .flake8 config file to enforce consistent 88-character line limit for all contributors
diff --git a/static/script.js b/static/script.js
index 8da1561..4a7c55b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,134 +1,169 @@
-// script.js — DevPath client-side logic
-//
-// Responsibilities:
-//   - Mobile navigation toggle
-//   - Skill chip manager (add/remove skills)
-//   - Form validation with per-field error messages
-//   - Recommendation API call and loading states
-//   - Result card rendering
-//   - Code viewer panel (detail page)
+// DevPath client-side behavior.
 
-// ============================================================
-// Detect which page we are on
-// ============================================================
-// !! trick turns the DOM result into a simple true/false
-var isIndexPage = !!document.getElementById("recommend-form");
-// PROJECT_ID is set by the server only on detail pages, so if it's missing we're elsewhere
-var isDetailPage = typeof PROJECT_ID !== "undefined";
-var modal = document.getElementById('github-modal-overlay');
-var openModalBtn = document.getElementById('btn-show-github'); // The trigger in your main form
-var closeModalBtn = document.getElementById('btn-close-github');
-var fetchBtn = document.getElementById('btn-fetch-github');
-var githubInput = document.getElementById('github-username');
-var errorMsg = document.getElementById('github-modal-error');
+var POINTS_PER_SEARCH = 5;
+var POINTS_PER_VIEW = 10;
+var POINTS_PER_CODE_OPEN = 15;
+var POINTS_PER_COMPLETION = 30;
+var PROGRESS_MAX_POINTS = 450;
 
+(function () {
+  var html = document.documentElement;
 
-// ============================================================
-// Mobile navigation toggle (runs on all pages)
-// ============================================================
-(function initMobileNav() {
-  var toggle = document.getElementById("nav-mobile-toggle"); //hamburger button
-  var menu   = document.getElementById("nav-mobile-menu"); //dropdown menu 
+  function applyTheme(theme) {
+    var isDark = theme === "dark";
+    html.setAttribute("data-theme", theme);
+    try {
+      localStorage.setItem("theme", theme);
+    } catch (err) {
+      // Storage can be unavailable in private browsing.
+    }
+
+    document.querySelectorAll(".theme-toggle").forEach(function (button) {
+      button.setAttribute("aria-pressed", isDark ? "true" : "false");
+      button.setAttribute("aria-label", isDark ? "Switch to light mode" : "Switch to dark mode");
+    });
+  }
+
+  function initTheme() {
+    var theme = html.getAttribute("data-theme") || "light";
+    applyTheme(theme);
+    requestAnimationFrame(function () {
+      html.classList.add("theme-ready");
+    });
+  }
+
+  document.addEventListener("click", function (event) {
+    var toggle = event.target.closest(".theme-toggle");
+    if (!toggle) return;
+    event.preventDefault();
+    var current = html.getAttribute("data-theme") || "light";
+    applyTheme(current === "dark" ? "light" : "dark");
+  });
 
-  // Nothing to do if the nav isn't on this page, just bail out
+  initTheme();
+})();
+
+(function initMobileNav() {
+  var toggle = document.getElementById("nav-mobile-toggle");
+  var menu = document.getElementById("nav-mobile-menu");
   if (!toggle || !menu) return;
 
-  toggle.addEventListener("click", function () {
-    // classList.toggle returns true if class was added, false if removed
-    var isOpen = menu.classList.toggle("open");
+  function setOpen(isOpen) {
+    menu.classList.toggle("open", isOpen);
     toggle.classList.toggle("open", isOpen);
-    // Keep aria-expanded in sync so screen readers know if menu is open or closed
-    toggle.setAttribute("aria-expanded", isOpen);
+    toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  }
+
+  toggle.addEventListener("click", function () {
+    setOpen(!menu.classList.contains("open"));
   });
 
-  // Close menu when any mobile link is clicked
-  menu.querySelectorAll(".nav-mobile-link").forEach(function (link) { 
-    link.addEventListener("click", function () { 
-      menu.classList.remove("open"); 
-      toggle.classList.remove("open");
+  menu.querySelectorAll(".nav-mobile-link").forEach(function (link) {
+    link.addEventListener("click", function () {
+      setOpen(false);
     });
   });
-})();
 
+  window.addEventListener("resize", function () {
+    if (window.innerWidth >= 640) setOpen(false);
+  });
+})();
 
-// ============================================================
-// INDEX PAGE
-// ============================================================
-if (isIndexPage) {
-
-  // DOM references
-  // grabbing all the elements we'll need so we're not calling getElementById over and over again throughout the code
-  var form              = document.getElementById("recommend-form");
-  var submitBtn         = document.getElementById("submit-btn");
-  var btnLabel          = document.getElementById("btn-label"); // "get recommendations" text 
-  var btnLoading        = document.getElementById("btn-loading"); // spinner icon inside the button 
-  var resultsSection    = document.getElementById("results-section"); 
-  var resultsGrid       = document.getElementById("results-grid"); 
-  var resultsLoadingEl  = document.getElementById("results-loading"); // "Loading..." text in the results 
-  var resultsEmptyEl    = document.getElementById("results-empty"); 
-  var emptyMessageEl    = document.getElementById("empty-message"); 
-  var skillsHidden      = document.getElementById("skills"); // the hidden input that holds skills list
-  var skillsTextInput   = document.getElementById("skills-input"); //visible text box in which user types skills
-  var chipsSelectedEl   = document.getElementById("skill-chips-selected"); //selected skills tags container
-  var quickPickChips    = document.querySelectorAll(".skill-chip"); // predefined skills user can click
-
-  // Tracks currently selected skills to prevent duplicates
-  var selectedSkills = [];
-
-// Points awarded per action
-var POINTS_PER_SEARCH     = 5;
-var POINTS_PER_VIEW       = 10;
-var POINTS_PER_CODE_OPEN  = 15;
-var POINTS_PER_COMPLETION = 30;
-
-var PROGRESS_TARGET_SEARCHES     = 10;
-var PROGRESS_TARGET_VIEWS        = 10;
-var PROGRESS_TARGET_CODE_OPENS   = 10;
-var PROGRESS_TARGET_COMPLETIONS  = 5;
+var STORAGE_KEY = "devpathUserProgress";
+var progress = {
+  searches: 0,
+  projectViews: 0,
+  codeOpens: 0,
+  completions: 0,
+  points: 0,
+  viewedProjects: [],
+  completedProjects: [],
+  achievements: [],
+  badges: {
+    first_search: false,
+    project_explorer: false,
+    code_starter: false,
+    completionist: false,
+    roadmap_runner: false
+  },
+  bestScore: 0
+};
+
+function loadProgressState() {
+  try {
+    var saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "null");
+    if (!saved || typeof saved !== "object") return;
+    progress = Object.assign(progress, saved);
+    progress.viewedProjects = Array.isArray(saved.viewedProjects) ? saved.viewedProjects : [];
+    progress.completedProjects = Array.isArray(saved.completedProjects) ? saved.completedProjects : [];
+    progress.achievements = Array.isArray(saved.achievements) ? saved.achievements : [];
+    progress.badges = Object.assign(progress.badges, saved.badges || {});
+  } catch (err) {
+    console.warn("Unable to load progress state", err);
+  }
+}
 
-// Maximum achievable points given the targets above
-var PROGRESS_MAX_POINTS = (
-  PROGRESS_TARGET_SEARCHES    * POINTS_PER_SEARCH     +   // 50
-  PROGRESS_TARGET_VIEWS       * POINTS_PER_VIEW       +   // 100
-  PROGRESS_TARGET_CODE_OPENS  * POINTS_PER_CODE_OPEN  +   // 150
-  PROGRESS_TARGET_COMPLETIONS * POINTS_PER_COMPLETION     // 150
-);  // total = 450
+function saveProgressState() {
+  try {
+    progress.bestScore = Math.max(progress.bestScore || 0, progress.points || 0);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
+  } catch (err) {
+    console.warn("Unable to save progress state", err);
+  }
+}
 
 function computeProgressPoints() {
-  var raw =
-    progress.searches      * POINTS_PER_SEARCH     +
-    progress.projectViews  * POINTS_PER_VIEW       +
-    progress.codeOpens     * POINTS_PER_CODE_OPEN  +
-    progress.completions   * POINTS_PER_COMPLETION;
-  // Clamp stored points so they never exceed max — prevents aria-valuenow > 100
-  progress.points = Math.min(raw, PROGRESS_MAX_POINTS);
+  progress.points = progress.searches * POINTS_PER_SEARCH + progress.projectViews * POINTS_PER_VIEW +
+    progress.codeOpens * POINTS_PER_CODE_OPEN + progress.completions * POINTS_PER_COMPLETION;
 }
 
-  // Clear Filters Button Functionality
-  var clearFiltersBtn = document.getElementById("clear-filters-btn");
-  if (clearFiltersBtn) {
-    clearFiltersBtn.addEventListener("click", function () {
-      var recommendForm = document.getElementById("recommend-form");
-      if (recommendForm) {
-        recommendForm.reset();
-        resetSkillSelection();
-        if (skillsTextInput) skillsTextInput.focus();
-      }
-    });
-  }
+function showAchievementToast(title, detail) {
+  var toast = document.getElementById("achievement-toast");
+  if (!toast) return;
+  toast.textContent = "";
+  var strong = document.createElement("strong");
+  strong.textContent = title;
+  var span = document.createElement("span");
+  span.textContent = detail;
+  toast.appendChild(strong);
+  toast.appendChild(span);
+  toast.classList.add("show");
+  window.clearTimeout(showAchievementToast.timeout);
+  showAchievementToast.timeout = window.setTimeout(function () {
+    toast.classList.remove("show");
+  }, 3200);
+}
 
-  // Also reset skills when the native form reset event fires
-  form.addEventListener("reset", function () {
-    window.setTimeout(function () {
-      resetSkillSelection();
-      if (skillsTextInput) skillsTextInput.focus();
-    }, 0);
+function addAchievement(title, detail) {
+  if (progress.achievements.some(function (item) { return item.title === title; })) return;
+  progress.achievements.unshift({
+    title: title,
+    description: detail,
+    date: new Date().toLocaleDateString()
   });
+  progress.achievements = progress.achievements.slice(0, 5);
+}
 
+function unlockBadge(id, title, detail) {
+  if (progress.badges[id]) return;
+  progress.badges[id] = true;
+  addAchievement(title, detail);
+  showAchievementToast("Badge unlocked", title + " - " + detail);
+}
 
-  // ----------------------------------------------------------
-  // Skill chip manager
-  // ----------------------------------------------------------
+function tryUnlockBadges() {
+  if (progress.searches >= 1) unlockBadge("first_search", "First Search", "You used DevPath to find your first project.");
+  if (progress.projectViews >= 1) unlockBadge("project_explorer", "Project Explorer", "You viewed a project detail.");
+  if (progress.codeOpens >= 1) unlockBadge("code_starter", "Code Starter", "You opened starter code.");
+  if (progress.completions >= 1) unlockBadge("completionist", "Completionist", "You marked a project complete.");
+  if (progress.searches >= 5) unlockBadge("roadmap_runner", "Roadmap Runner", "You searched five times.");
+}
+
+function projectIsCompleted(projectId) {
+  return progress.completedProjects.some(function (item) {
+    return (item && typeof item === "object" ? item.id : item) === projectId;
+  });
+}
 
 function updateProfileWidgets() {
   var pointsEl = document.getElementById("progress-points");
@@ -149,10 +184,7 @@ function updateProfileWidgets() {
       "<li><strong>Projects Completed</strong><span>" + progress.completions + "</span></li>";
   }
   if (meterFill) {
-    var percentage = Math.min(
-      100,
-      Math.round((progress.points / PROGRESS_MAX_POINTS) * 100)
-    );
+    var percentage = Math.min(100, Math.round((progress.points / PROGRESS_MAX_POINTS) * 100));
     meterFill.style.width = percentage + "%";
     meterFill.setAttribute("aria-valuenow", String(percentage));
     meterFill.textContent = percentage + "%";
@@ -165,10 +197,46 @@ function updateProfileWidgets() {
       ["completionist", "Completionist"],
       ["roadmap_runner", "Roadmap Runner"]
     ];
+    badgesEl.innerHTML = badges.map(function (badge) {
+      var unlocked = progress.badges[badge[0]];
+      return "<li class=\"progress-badge " + (unlocked ? "progress-badge--unlocked" : "progress-badge--locked") +
+        "\"><span class=\"badge-icon\">" + (unlocked ? "OK" : "*") + "</span><span>" + badge[1] + "</span></li>";
+    }).join("");
+  }
+  if (achievementList) {
+    achievementList.innerHTML = progress.achievements.length
+      ? progress.achievements.map(function (item) {
+        return "<li class=\"achievement-item\"><strong>" + item.title + "</strong><span>" +
+          item.description + "</span><small>" + item.date + "</small></li>";
+      }).join("")
+      : "<li class=\"achievement-empty\">No achievements yet. Use DevPath and unlock the first badge.</li>";
+  }
+  if (leaderboardList) {
+    var entries = [
+      { name: "Ava", points: 245 },
+      { name: "Kai", points: 192 },
+      { name: "Sam", points: 176 },
+      { name: "You", points: progress.points }
+    ].sort(function (a, b) { return b.points - a.points; });
+    leaderboardList.innerHTML = entries.map(function (entry, index) {
+      return "<li><span>" + (index + 1) + ". " + entry.name + "</span><strong>" + entry.points + " pts</strong></li>";
+    }).join("");
+  }
+  if (historyList) {
+    historyList.innerHTML = progress.completedProjects.length
+      ? progress.completedProjects.slice(0, 5).map(function (item) {
+        var title = item && typeof item === "object" ? item.title : "Project " + item;
+        return "<li><span>" + title + "</span><strong>Completed</strong></li>";
+      }).join("")
+      : "<li class=\"achievement-empty\">No completed projects yet. Mark one complete from a project page.</li>";
+  }
+  if (completionBtn && typeof PROJECT_ID !== "undefined") {
+    var completed = projectIsCompleted(PROJECT_ID);
+    completionBtn.textContent = completed ? "Project Completed" : "Mark Project Complete";
+    completionBtn.disabled = completed;
   }
 }
 
-
 function recordSearch() {
   progress.searches += 1;
   computeProgressPoints();
@@ -177,26 +245,42 @@ function recordSearch() {
   updateProfileWidgets();
 }
 
-  var suggestionsDiv         = document.getElementById("skills-suggestions");
-  var skillWrap              = document.getElementById("skill-input-wrap");
-  var visibleSuggestions     = [];
-  var activeSuggestionIndex  = -1;
-
-  // Deduplicate available skills (case-insensitive)
-  availableSkills = availableSkills.filter(function (skill, index, list) {
-    return typeof skill === "string" && skill.trim() &&
-      list.findIndex(function (item) {
-        return item.toLowerCase() === skill.toLowerCase();
-      }) === index;
-  });
+function recordProjectView() {
+  if (typeof PROJECT_ID === "undefined") return;
+  if (progress.viewedProjects.indexOf(PROJECT_ID) === -1) {
+    progress.viewedProjects.push(PROJECT_ID);
+    progress.projectViews = progress.viewedProjects.length;
+    computeProgressPoints();
+    tryUnlockBadges();
+    saveProgressState();
+    updateProfileWidgets();
+  }
+}
 
-  if (suggestionsDiv) suggestionsDiv.setAttribute("role", "listbox");
+function recordCodeOpen() {
+  progress.codeOpens += 1;
+  computeProgressPoints();
+  tryUnlockBadges();
+  saveProgressState();
+  updateProfileWidgets();
+}
 
-  function normalizeSkill(skill) { return skill.trim().toLowerCase(); }
+function recordCompletion(projectId, projectTitle) {
+  if (!projectId || projectIsCompleted(projectId)) return;
+  progress.completedProjects.push({ id: projectId, title: projectTitle || "Project " + projectId });
+  progress.completions = progress.completedProjects.length;
+  computeProgressPoints();
+  tryUnlockBadges();
+  saveProgressState();
+  updateProfileWidgets();
+}
 
 loadProgressState();
 updateProfileWidgets();
 
+// ============================================================
+// INDEX PAGE
+// ============================================================
 (function initIndexPage() {
   var form = document.getElementById("recommend-form");
   if (!form) return;
@@ -223,222 +307,108 @@ updateProfileWidgets();
   var visibleSuggestions = [];
   var SAVED_PROJECTS_KEY = "devpathSavedProjects";
 
-  window.addSkill = function addSkill(rawSkill) {
-    var skill = canonicalSkill(rawSkill);
-    if (!skill || isSelected(skill)) return;
-    selectedSkills.push(skill);
-    renderSelectedChips();
-    syncSkillsHiddenInput();
-    updateQuickPickState();
-    clearFieldError("skills-error");
-    if (skillsInput) skillsInput.focus();
-  };
-
   function normalize(value) {
     return String(value || "").trim().toLowerCase();
   }
 
-  function getCanonicalSkill(rawSkill) {
-    var normalizedSkill = normalizeSkill(rawSkill);
-    var matched = availableSkills.find(function (s) { return normalizeSkill(s) === normalizedSkill; });
-    return matched || rawSkill.trim();
-  }
-
-  function getFilteredSkills(query) {
-    var normalizedQuery = normalizeSkill(query);
-    return availableSkills.filter(function (skill) {
-      return normalizeSkill(skill).includes(normalizedQuery) && !isSkillSelected(skill);
-    }).slice(0, 8);
-  }
-
-  function renderActiveSuggestion() {
-    if (!suggestionsDiv) return;
-    suggestionsDiv.querySelectorAll(".suggestion-item").forEach(function (item, index) {
-      var isActive = index === activeSuggestionIndex;
-      item.classList.toggle("suggestion-item--active", isActive);
-      item.setAttribute("aria-selected", isActive ? "true" : "false");
-    });
-  }
-
-  function hideSuggestions() {
-    visibleSuggestions     = [];
-    activeSuggestionIndex  = -1;
-    if (suggestionsDiv) { suggestionsDiv.style.display = "none"; suggestionsDiv.innerHTML = ""; }
+  function syncSkillsHiddenInput() {
+    skillsHidden.value = JSON.stringify(selectedSkills);
   }
 
-  function selectSuggestion(skill) {
-    addSkill(skill);
-    skillsTextInput.value = "";
-    hideSuggestions();
-    skillsTextInput.focus();
+  function isSelected(skill) {
+    return selectedSkills.some(function (item) { return normalize(item) === normalize(skill); });
   }
 
-  function displaySuggestions(items) {
-    if (!suggestionsDiv) return;
-    visibleSuggestions    = items;
-    activeSuggestionIndex = -1;
-    if (items.length === 0) { hideSuggestions(); return; }
-    suggestionsDiv.innerHTML = "";
-    items.forEach(function (skill, index) {
-      var item = document.createElement("div");
-      item.className = "suggestion-item";
-      item.textContent = skill;
-      item.setAttribute("role", "option");
-      item.setAttribute("id", "skills-suggestion-" + index);
-      item.setAttribute("aria-selected", "false");
-      // Prevent the input blur handler from closing the menu before click runs
-      item.addEventListener("mousedown", function (evt) { evt.preventDefault(); });
-      item.addEventListener("mouseenter", function () { activeSuggestionIndex = index; renderActiveSuggestion(); });
-      item.addEventListener("click", function () { selectSuggestion(skill); });
-      suggestionsDiv.appendChild(item);
-    });
-    suggestionsDiv.style.display = "block";
-    skillsTextInput.setAttribute("aria-expanded", "true");
+  function canonicalSkill(rawSkill) {
+    var trimmed = String(rawSkill || "").trim();
+    var match = availableSkills.find(function (skill) { return normalize(skill) === normalize(trimmed); });
+    return match || trimmed;
   }
 
   function updateQuickPickState() {
     quickPickChips.forEach(function (chip) {
-      var isActive = isSkillSelected(chip.getAttribute("data-skill") || "");
-      chip.classList.toggle("active", isActive);
-      chip.setAttribute("aria-pressed", isActive ? "true" : "false");
+      var active = isSelected(chip.getAttribute("data-skill"));
+      chip.classList.toggle("active", active);
+      chip.classList.toggle("selected", active);
+      chip.setAttribute("aria-pressed", active ? "true" : "false");
     });
   }
 
-  // Add skill on Enter key in the text input
-  // we intercept Enter here so it doesn't accidentally submit the whole form
-  skillsTextInput.addEventListener("keydown", function (evt) {
-    if (evt.key === "ArrowDown" || evt.key === "ArrowUp") {
-      if (visibleSuggestions.length === 0) displaySuggestions(getFilteredSkills(skillsTextInput.value));
-      if (visibleSuggestions.length === 0) return;
-      evt.preventDefault();
-      if (evt.key === "ArrowDown") {
-        activeSuggestionIndex = (activeSuggestionIndex + 1) % visibleSuggestions.length;
-      } else {
-        activeSuggestionIndex = activeSuggestionIndex <= 0 ? visibleSuggestions.length - 1 : activeSuggestionIndex - 1;
-      }
-      renderActiveSuggestion();
-      return;
-    }
-    if (evt.key === "Escape") { hideSuggestions(); return; }
-    if (evt.key === "Enter") {
-      evt.preventDefault();
-      if (activeSuggestionIndex >= 0 && visibleSuggestions[activeSuggestionIndex]) {
-        selectSuggestion(visibleSuggestions[activeSuggestionIndex]);
-        return;
-      }
-      if (skillsTextInput.value.trim()) { addSkill(skillsTextInput.value); skillsTextInput.value = ""; }
-      hideSuggestions();
-    }
-  });
-
-  // Add/toggle skill on quick-pick chip click
-  quickPickChips.forEach(function (chip) {
-    chip.addEventListener("click", function () {
-      var skill = chip.getAttribute("data-skill");
-      if (!skill) return;
-      if (isSkillSelected(skill)) { removeSkill(skill); } else { addSkill(skill); }
-      skillsTextInput.value = "";
-      hideSuggestions();
+  function renderSelectedChips() {
+    selectedChips.textContent = "";
+    selectedSkills.forEach(function (skill) {
+      var chip = document.createElement("span");
+      chip.className = "skill-chip-selected";
+      chip.appendChild(document.createTextNode(skill));
+      var button = document.createElement("button");
+      button.type = "button";
+      button.className = "skill-chip-remove";
+      button.setAttribute("aria-label", "Remove " + skill);
+      button.textContent = "x";
+      button.addEventListener("click", function (event) {
+        event.stopPropagation();
+        removeSkill(skill);
+      });
+      chip.appendChild(button);
+      selectedChips.appendChild(chip);
     });
-  });
-
-  // Show suggestions on input
-  skillsTextInput.addEventListener("input", function (evt) {
-    var typedValue = evt.target.value.trim();
-    if (typedValue.length === 0) { hideSuggestions(); return; }
-    displaySuggestions(getFilteredSkills(typedValue));
-  });
-
-  skillsTextInput.addEventListener("focus", function () {
-    if (skillsTextInput.value.trim()) displaySuggestions(getFilteredSkills(skillsTextInput.value));
-  });
-
-  // Hide suggestions when input loses focus
-  skillsTextInput.addEventListener("blur", function () {
-    setTimeout(function () { hideSuggestions(); }, 150);
-  });
-
-  if (skillWrap) {
-    skillWrap.addEventListener("click", function () { skillsTextInput.focus(); });
   }
 
-  document.addEventListener("click", function (evt) {
-    if (skillWrap && !skillWrap.contains(evt.target)) hideSuggestions();
-  });
+  window.addSkill = function addSkill(rawSkill) {
+    var skill = canonicalSkill(rawSkill);
+    if (!skill || isSelected(skill)) return;
+    selectedSkills.push(skill);
+    renderSelectedChips();
+    syncSkillsHiddenInput();
+    updateQuickPickState();
+    clearFieldError("skills-error");
+    if (skillsInput) skillsInput.focus();
+  };
 
   function removeSkill(skill) {
-    // Rebuild the array without the skill that was just removed
-    selectedSkills = selectedSkills.filter(function (s) { return normalizeSkill(s) !== normalizeSkill(skill); });
+    selectedSkills = selectedSkills.filter(function (item) { return normalize(item) !== normalize(skill); });
     renderSelectedChips();
     syncSkillsHiddenInput();
     updateQuickPickState();
   }
 
-  // recreate the selected skills chips based on the current array(selectedSkills)
-  // called every time we add or remove a skill
-  function renderSelectedChips() {
-    // Wipe out old chips first so we don't end up with duplicates in the UI
-    chipsSelectedEl.innerHTML = "";
-    selectedSkills.forEach(function (skill) {
-      // Create a new chip element for each selected skill
-      var chipEl = document.createElement("span");
-      chipEl.className = "skill-chip-selected";
-      chipEl.textContent = skill;
-
-      // Remove button for each chip (create lil "x" button)
-      var removeBtn = document.createElement("button");
-      removeBtn.type = "button";
-      removeBtn.className = "skill-chip-remove";
-      removeBtn.innerHTML = "&times;"; //'x' symbol
-      removeBtn.setAttribute("aria-label", "Remove " + skill); 
-      removeBtn.addEventListener("click", function (e) {
-        // Stop click from bubbling up to the chip wrap's click listener
-        e.stopPropagation();
-        removeSkill(skill);
-      });
-
-      chipEl.appendChild(removeBtn); // put x button inside the chip
-      chipsSelectedEl.appendChild(chipEl); //add chip to page
-    });
+  function clearFieldError(id) {
+    var el = document.getElementById(id);
+    if (el) el.textContent = "";
   }
 
-  function syncSkillsHiddenInput() {
-    if (!skillsHidden) return;
-    // Keep the hidden <input> in sync for form serialisation
-    // The API expects a comma-separated string, so join the array that way
-    skillsHidden.value = selectedSkills.join(", ");
+  function showFieldError(id, message) {
+    var el = document.getElementById(id);
+    if (el) el.textContent = message;
   }
 
-  updateQuickPickState();
+  function clearAllErrors() {
+    ["skills-error", "level-error", "interest-error", "time-error"].forEach(clearFieldError);
+    var general = document.getElementById("form-error-general");
+    if (general) general.textContent = "";
+  }
 
   function hideSuggestions() {
     visibleSuggestions = [];
     activeSuggestionIndex = -1;
-    if (suggestionsDiv) {
-      suggestionsDiv.style.display = "none";
-      suggestionsDiv.classList.remove("show");
-      suggestionsDiv.innerHTML = "";
-    }
-    syncSuggestionsA11yState();
     suggestions.style.display = "none";
     suggestions.textContent = "";
     skillsInput.setAttribute("aria-expanded", "false");
   }
 
-  // ----------------------------------------------------------
-  // Form validation
-  // ----------------------------------------------------------
-
-  //puts error msg under specific field
-  function showFieldError(fieldId, message) {
-    var el = document.getElementById(fieldId);
-    if (el) el.textContent = message;
+  function filteredSkills(query) {
+    var q = normalize(query);
+    if (!q) return [];
+    return availableSkills.filter(function (skill) {
+      return normalize(skill).indexOf(q) !== -1 && !isSelected(skill);
+    }).slice(0, 8);
   }
 
-  //clears error msg under specific field
-  function clearFieldError(fieldId) {
-    var el = document.getElementById(fieldId);
-    if (el) el.textContent = ""; //empty string = no error msg
+  function renderSuggestionState() {
+    suggestions.querySelectorAll(".suggestion-item").forEach(function (item, index) {
+      item.classList.toggle("suggestion-item--active", index === activeSuggestionIndex);
+      item.setAttribute("aria-selected", index === activeSuggestionIndex ? "true" : "false");
+    });
   }
 
   function showSuggestions(items) {
@@ -452,23 +422,6 @@ updateProfileWidgets();
     items.forEach(function (skill, index) {
       var item = document.createElement("div");
       item.className = "suggestion-item";
-      
-      // Check if skill is already selected for multi-select styling
-      var isSelected = isSkillSelected(skill);
-      if (isSelected) {
-        item.classList.add("selected");
-      }
-      
-      item.textContent = skill;
-      item.setAttribute("role", "option");
-      item.setAttribute("id", "skills-suggestion-" + index);
-      item.setAttribute("aria-selected", isSelected ? "true" : "false");
-
-      // Prevent the input blur handler from closing the menu before click runs.
-      item.addEventListener("mousedown", function (evt) {
-        evt.preventDefault();
-      });
-
       item.id = "skills-suggestion-" + index;
       item.setAttribute("role", "option");
       item.setAttribute("aria-selected", "false");
@@ -479,12 +432,6 @@ updateProfileWidgets();
         renderSuggestionState();
       });
       item.addEventListener("click", function () {
-        selectSuggestion(skill);
-        // Keep dropdown open if clicking from dropdown (multi-select mode)
-        if (suggestionsDiv.classList.contains("show")) {
-          displaySuggestions(items);
-          skillsTextInput.focus();
-        }
         window.addSkill(skill);
         skillsInput.value = "";
         hideSuggestions();
@@ -495,13 +442,9 @@ updateProfileWidgets();
     skillsInput.setAttribute("aria-expanded", "true");
   }
 
-  // checks form fields and shows error messages if any required field is missing or invalid. 
-  // Returns true if the form is valid, false otherwise
   function validateForm() {
     var valid = true;
-
-    // Check both the array and the hidden input since skills can come from either source
-    if (selectedSkills.length === 0 && !skillsHidden.value.trim()) {
+    if (!selectedSkills.length) {
       showFieldError("skills-error", "Please add at least one skill.");
       valid = false;
     }
@@ -509,50 +452,6 @@ updateProfileWidgets();
       showFieldError("level-error", "Please select your experience level.");
       valid = false;
     }
-  });
-
-  // Add/toggle skill on quick-pick chip click
-  quickPickChips.forEach(function (chip) {
-    chip.addEventListener("click", function () {
-      var skill = chip.getAttribute("data-skill");
-      var isAlreadySelected = selectedSkills.some(function (s) {
-        return s.toLowerCase() === skill.toLowerCase();
-      });
-
-      if (isAlreadySelected) {
-        removeSkill(skill);
-      } else {
-        addSkill(skill);
-      }
-      hideSuggestions();
-      skillsTextInput.value = "";
-    });
-  });
-
-  // Multi-select dropdown toggle functionality
-  var dropdownBtn = document.getElementById("skills-dropdown-toggle");
-  if (dropdownBtn) {
-    dropdownBtn.addEventListener("click", function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      var suggestionsOpen = suggestionsDiv.style.display === "block";
-      
-      if (suggestionsOpen) {
-        hideSuggestions();
-      } else {
-        // Show all available skills in dropdown
-        displaySuggestions(availableSkills);
-        suggestionsDiv.classList.add("show");
-      }
-    });
-  }
-
-  // Show suggestions on input
-  skillsTextInput.addEventListener("input", function (evt) {
-    var typedValue = evt.target.value.trim();
-    if (typedValue.length === 0) {
-      hideSuggestions();
-      return;
     if (!document.getElementById("interest").value) {
       showFieldError("interest-error", "Please select an area of interest.");
       valid = false;
@@ -561,371 +460,323 @@ updateProfileWidgets();
       showFieldError("time-error", "Please select your time availability.");
       valid = false;
     }
-
     return valid;
   }
 
-
-  document.addEventListener("click", function (evt) {
-    if (skillWrap && !skillWrap.contains(evt.target)) {
-      hideSuggestions();
-    }
-  });
-
-  //add a skill to the list if it's not empty or a duplicate
-  function addSkill(rawSkill) {
-    // Clean up any extra spaces and match to canonical skill name
-    var skill = getCanonicalSkill(rawSkill);
-    // Nothing to add if string is empty after trimming
-    if (!skill) return;
-
-    // Block duplicate entries (case-insensitive)
-    if (isSkillSelected(skill)) return;
-
-    selectedSkills.push(skill);
-    renderSelectedChips();
-    syncSkillsHiddenInput();
-    updateQuickPickState();
-    // Once a skill is added, remove the "please add a skill" error if it was showing
-    clearFieldError("skills-error");
-    // Ensure the corresponding quick-pick chip is visually active immediately
-    try {
-      var quickChip = document.querySelector('.skill-chip[data-skill="' + skill + '"]');
-      if (quickChip) {
-        quickChip.classList.add('active', 'selected');
-        quickChip.setAttribute('aria-pressed', 'true');
-      }
-    } catch (e) {
-      // ignore DOM errors
-    }
-    // Keep focus in the input so user can continue typing
-    if (skillsTextInput) skillsTextInput.focus();
-  }
-
-  // remove a skill from the list and update the UI accordingly
-  function removeSkill(skill) {
-    // Rebuild the array without the skill that was just removed
-    selectedSkills = selectedSkills.filter(function (selectedSkill) {
-      return normalizeSkill(selectedSkill) !== normalizeSkill(skill);
-    });
-    renderSelectedChips();
-    syncSkillsHiddenInput();
-    updateQuickPickState();
-    // Also clear the visual active state on the quick-pick chip if present
-    try {
-      var quickChip = document.querySelector('.skill-chip[data-skill="' + skill + '"]');
-      if (quickChip) {
-        quickChip.classList.remove('active', 'selected');
-        quickChip.setAttribute('aria-pressed', 'false');
-      }
-    } catch (e) {
-      // ignore DOM errors
-    }
-  }
-
-  // recreate the selected skills chips based on the current array(selectedSkills)
-  // called every time we add or remove a skill
-  function renderSelectedChips() {
-    // Wipe out old chips first so we don't end up with duplicates in the UI
-    chipsSelectedEl.innerHTML = "";
-    selectedSkills.forEach(function (skill) {
-      // Create a new chip element for each selected skill
-      var chipEl = document.createElement("span");
-      chipEl.className = "skill-chip-selected";
-      chipEl.textContent = skill;
-
-      // Remove button for each chip (create lil "x" button)
-      var removeBtn = document.createElement("button");
-      removeBtn.type = "button";
-      removeBtn.className = "skill-chip-remove";
-      removeBtn.innerHTML = "&times;"; //'x' symbol
-      removeBtn.setAttribute("aria-label", "Remove " + skill);
-      removeBtn.addEventListener("click", function (e) {
-        // Stop click from bubbling up to the chip wrap's click listener
-        e.stopPropagation();
-        removeSkill(skill);
-      });
-
-      chipEl.appendChild(removeBtn); // put x button inside the chip
-      chipsSelectedEl.appendChild(chipEl); //add chip to page
-    });
-  }
-
-  function syncSkillsHiddenInput() {
-    if (!skillsHidden) {
-      var skillsHidden = document.getElementById("skills");
-    }
-  }
-
-  updateQuickPickState();
-
-
   // ----------------------------------------------------------
-  // Form validation
+  // Loading state
   // ----------------------------------------------------------
 
-  //puts error msg under specific field
-  function showFieldError(fieldId, message) {
-    var el = document.getElementById(fieldId);
-    if (el) el.textContent = message;
-  }
-
-  //clears error msg under specific field
-  function clearFieldError(fieldId) {
-    var el = document.getElementById(fieldId);
-    if (el) el.textContent = ""; //empty string = no error msg
-  }
-
-  //clears all error msgs in the form, called at the start of form submission to reset any previous errors
-  function clearAllErrors() {
-    ["skills-error", "level-error", "interest-error", "time-error"].forEach(clearFieldError);
-    var generalErr = document.getElementById("form-error-general");
-    if (generalErr) generalErr.textContent = "";
-  }
-
-  // checks form fields and shows error messages if any required field is missing or invalid. 
-  // Returns true if the form is valid, false otherwise
-  function validateForm() {
-    var valid = true;
-
-    // Check both the array and the hidden input since skills can come from either source
-    if (selectedSkills.length === 0 && !skillsHidden.value.trim()) {
-      showFieldError("skills-error", "Please add at least one skill.");
-      valid = false;
-    }
-    if (!document.getElementById("level").value) {
-      showFieldError("level-error", "Please select your experience level.");
-      valid = false;
-    }
-    if (!document.getElementById("interest").value) {
-      showFieldError("interest-error", "Please select an area of interest.");
-      valid = false;
-    }
-    if (!document.getElementById("time").value) {
-      showFieldError("time-error", "Please select your time availability.");
-      valid = false;
-    }
-
-    return valid;
-  }
-
-
-
-  // ----------------------------------------------------------
-  // Form submission and API call
-  // ----------------------------------------------------------
-
-  // Manages the loading state of the form and results section(whats visible or not)
   function setLoadingState(isLoading) {
-    // Disable the button so the user can't accidentally submit twice
     submitBtn.disabled = isLoading;
-    submitBtn.setAttribute("aria-busy", isLoading);
+    submitBtn.setAttribute("aria-busy", isLoading ? "true" : "false");
     btnLabel.style.display = isLoading ? "none" : "inline";
     btnLoading.style.display = isLoading ? "inline-flex" : "none";
-
     if (isLoading) {
-      resultsGrid.innerHTML = "";         
+      resultsSection.style.display = "block";
+      resultsLoadingEl.style.display = "block";
       resultsGrid.style.display = "none";
       resultsEmptyEl.style.display = "none";
-      resultsEmptyEl.textContent = "";
-      resultsLoadingEl.style.display = "block";
-      resultsSection.style.display = "block";
       resultsSection.scrollIntoView({ behavior: "smooth" });
     } else {
-      resultsLoadingEl.style.display  = "none";
-      resultsGrid.style.display       = "grid"; //switch back to gird layout 
+      resultsLoadingEl.style.display = "none";
     }
   }
 
-
   // ----------------------------------------------------------
   // Render result cards
   // ----------------------------------------------------------
 
-  //takes the array of projects from the api and draws them on the page as cards
-  //if array is empty it shows the "no results" message instead
-  function renderResults(projects, message) {
-    resultsSection.style.display = "block";
-    resultsLoadingEl.style.display = "none";
-    // Clear out any cards from a previous search before showing new ones
-    resultsGrid.innerHTML = "";
-
-    if (!projects || projects.length === 0) { // if no projects returned from api, show "no results" and hide the grid
-      resultsGrid.style.display    = "none";
-      resultsEmptyEl.style.display = "block";
-      if (message && emptyMessageEl) emptyMessageEl.textContent = message;
-      resultsSection.scrollIntoView({ behavior: "smooth" });
-      return;
-    }
-
-    resultsEmptyEl.style.display = "none";
-    resultsGrid.style.display = "grid";
-
-    //build a card for each project and add it to the grid
-    projects.forEach(function (project) {
-      resultsGrid.appendChild(buildProjectCard(project));
-    });
-
-    resultsSection.scrollIntoView({ behavior: "smooth" });
-  }
-
   function truncate(text, maxLength) {
-    text = text || "";
+    if (!text) return "";
     return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
   }
 
   function createTag(text, type) {
     var span = document.createElement("span");
-    span.className = "project-tag project-tag--" + normalize(type).replace(/[^a-z0-9_-]/g, "-");
+    span.className = "project-tag project-tag--" + type;
     span.textContent = text;
     return span;
   }
 
-  //takes the array of projects from the api and draws them on the page as cards
-  //if array is empty it shows the "no results" message instead
+  // Renders project result cards or shows the empty-state message.
   function renderResults(projects, message) {
-    console.log("Rendering results with projects:", projects);
-    console.log("Message:", message);
-    
     resultsSection.style.display = "block";
     resultsLoadingEl.style.display = "none";
-    // Clear out any cards from a previous search before showing new ones
     resultsGrid.innerHTML = "";
-    recordSearch();
 
-    if (!projects || projects.length === 0) {
-      resultsGrid.style.display = "none";
-      resultsEmptyEl.style.display = "block";
-
-      // Show a friendly custom message when the user selected an interest
-      var selectedInterest = document.getElementById("interest")?.value;
-      if (selectedInterest) {
-        emptyMessageEl.textContent = "No projects are currently available for this interest. Please check back later or try a different area.";
-      } else if (message) {
-        emptyMessageEl.textContent = message;
-      } else {
-        emptyMessageEl.textContent = "Try adjusting your skills or choosing a different interest area.";
-      }
+    var shareWrap = document.getElementById("share-result-wrap");
+    var hasResults = projects && projects.length > 0;
 
-  // Clear out previous results before rendering new ones
-  resultsGrid.innerHTML = "";
+    // Single consolidated toggle for empty vs. populated state
+    resultsGrid.style.display    = hasResults ? "grid" : "none";
+    resultsEmptyEl.style.display = hasResults ? "none" : "block";
+    if (shareWrap) shareWrap.style.display = hasResults ? "flex" : "none";
 
-  // If no projects are returned, show the empty state message
-  if (!projects || projects.length === 0) {
-    resultsGrid.style.display = "none";
-    resultsEmptyEl.style.display = "block";
+    if (!hasResults) {
+      if (emptyMessageEl) { if (message) emptyMessageEl.textContent = message; }
+      resultsSection.scrollIntoView({ behavior: "smooth" });
+      return;
+    }
 
+    // Build a card for each project and add it to the grid
     projects.forEach(function (project) {
       resultsGrid.appendChild(buildProjectCard(project));
     });
 
-    recordSearch();
     resultsSection.scrollIntoView({ behavior: "smooth" });
   }
 
   function buildProjectCard(project) {
-    
     var card = document.createElement("div");
     card.className = "project-card";
 
-    // Console logging for debugging
-    console.log("Building card for project:", project);
-    console.log("Project ID:", project.id);
-
-    // Title
     var title = document.createElement("h3");
     title.className = "project-card-title";
     title.textContent = project.title;
 
-    // Description (truncated for visual consistency)
     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);
-
-    // Tags row
-    var tagsRow = document.createElement("div");
-    tagsRow.className = "project-card-tags";
-
-    // Show all project skills as tags so users can see the full match
-    (project.skills || []).forEach(function (skill) {
-      tagsRow.appendChild(createTag(skill, "skill"));
-    });
-
-    // Level tag (colour-coded via CSS class)
-    // Lowercase so it matches the CSS class names like "level beginner", "level advanced"
-    tagsRow.appendChild(createTag(project.level, "level " + (project.level || "").toLowerCase()));
+    var descText = document.createElement("span");
+    descText.className = "project-card-desc-text";
+    descText.textContent = truncate(project.description, 120);
+    desc.appendChild(descText);
+
+    if (project.description && project.description.length > 120) {
+      var expanded = false;
+      var readMore = document.createElement("button");
+      readMore.type = "button";
+      readMore.className = "read-more-btn";
+      readMore.textContent = "Read more";
+      readMore.setAttribute("aria-expanded", "false");
+      readMore.addEventListener("click", function () {
+        expanded = !expanded;
+        descText.textContent = expanded ? project.description : truncate(project.description, 120);
+        readMore.textContent = expanded ? "Read less" : "Read more";
+        readMore.setAttribute("aria-expanded", expanded ? "true" : "false");
+      });
+      desc.appendChild(readMore);
+    }
 
-    // Time tag
-    tagsRow.appendChild(createTag("Time: " + project.time, "time"));
+    var tags = document.createElement("div");
+    tags.className = "project-card-tags";
+    (project.skills || []).forEach(function (skill) { tags.appendChild(createTag(skill, "skill")); });
+    tags.appendChild(createTag(project.level, project.level));
+    tags.appendChild(createTag("Time: " + project.time, "time"));
 
-    // Footer with view-details link
     var footer = document.createElement("div");
     footer.className = "project-card-footer";
 
+    if (typeof DevPathBookmarks !== "undefined") {
+      var saveBtn = document.createElement("button");
+      saveBtn.type = "button";
+      saveBtn.className = "btn-save-project";
+      saveBtn.setAttribute("data-save-project-id", project.id);
+      var isSaved = DevPathBookmarks.isSaved(project.id);
+      if (isSaved) saveBtn.classList.add("saved");
+      saveBtn.setAttribute("aria-pressed", isSaved ? "true" : "false");
+      DevPathBookmarks.setButtonContent(saveBtn, isSaved);
+      saveBtn.addEventListener("click", function () {
+        DevPathBookmarks.toggle(project, saveBtn);
+      });
+      footer.appendChild(saveBtn);
+    }
+
     var link = document.createElement("a");
     link.className = "btn-details";
     link.textContent = "View Full Project";
-    link.href = "/project/" + project.id; //each project has a unique id
-    
-    console.log("Created link with href:", link.href);
-
     link.href = "/project/" + project.id;
-    footer.appendChild(saveButton);
     footer.appendChild(link);
 
-    // Assemble the card in order
     card.appendChild(title);
     card.appendChild(desc);
-    card.appendChild(tagsRow);
+    card.appendChild(tags);
     card.appendChild(footer);
     return card;
   }
 
-  function runProjectSearch(query) {
-    if (!query) return;
-    setLoadingState(true);
-    fetch("/api/search?q=" + encodeURIComponent(query))
-      .then(function (response) {
-        return response.json().then(function (data) {
-          if (!response.ok) throw new Error("Search failed. Please try again.");
-          return data;
+
+  // ----------------------------------------------------------
+  // Share My Result ΓÇö build URL and copy to clipboard
+  // ----------------------------------------------------------
+
+  var MAX_SHARE_SKILLS = 10;
+  var MAX_URL_LENGTH   = 2000;
+
+  // Build a shareable URL from the current form selections.
+  // Caps skill count and enforces a max URL length to avoid oversized links.
+  function buildShareUrl() {
+    var baseUrl = window.location.origin + window.location.pathname;
+    var params = new URLSearchParams();
+    var allSkills = skillsHidden.value.trim();
+    var skillsArr = [];
+    var truncatedFlag = false;
+
+    if (allSkills) {
+      skillsArr = allSkills.split(",").map(function (s) { return s.trim(); }).filter(Boolean);
+      if (skillsArr.length > MAX_SHARE_SKILLS) {
+        skillsArr = skillsArr.slice(0, MAX_SHARE_SKILLS);
+        truncatedFlag = true;
+      }
+      params.set("skills", skillsArr.join(", "));
+    }
+
+    params.set("level", document.getElementById("level").value);
+    params.set("interest", document.getElementById("interest").value);
+    params.set("time", document.getElementById("time").value);
+
+    var url = baseUrl + "?" + params.toString();
+
+    // Progressively trim skills if URL still exceeds safe browser limit
+    while (url.length > MAX_URL_LENGTH && skillsArr.length > 1) {
+      skillsArr.pop();
+      truncatedFlag = true;
+      params.set("skills", skillsArr.join(", "));
+      url = baseUrl + "?" + params.toString();
+    }
+
+    return { url: url, truncated: truncatedFlag };
+  }
+
+  var shareBtn = document.getElementById("share-result-btn");
+  var shareToast = document.getElementById("share-toast");
+  var shareToastTimeout = null;
+  var _shareWasTruncated = false;
+
+  // Show the "Copied!" state on the share button and display the toast.
+  function showShareSuccess() {
+    if (!shareBtn) return;
+    var originalLabel = shareBtn.querySelector(".share-btn-label");
+    var labelText = _shareWasTruncated ? "Copied! (some skills trimmed)" : "Copied!";
+    if (originalLabel) originalLabel.textContent = labelText;
+    shareBtn.classList.add("copied");
+
+    if (shareToast) shareToast.classList.add("show");
+
+    // Auto-reset after 2.5 seconds
+    clearTimeout(shareToastTimeout);
+    shareToastTimeout = setTimeout(function () {
+      if (originalLabel) originalLabel.textContent = "Share My Result";
+      shareBtn.classList.remove("copied");
+      if (shareToast) shareToast.classList.remove("show");
+    }, 2500);
+  }
+
+  // Fallback clipboard copy using a hidden textarea (for older browsers)
+  function fallbackShareCopy(text) {
+    var ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try { document.execCommand("copy"); showShareSuccess(); } catch (e) { /* silent fail */ }
+    document.body.removeChild(ta);
+  }
+
+  if (shareBtn) {
+    shareBtn.addEventListener("click", function () {
+      var result = buildShareUrl();
+      var url = result.url;
+      _shareWasTruncated = result.truncated;
+
+      // Use Clipboard API with textarea fallback
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(url).then(function () {
+          showShareSuccess();
+        }).catch(function () {
+          fallbackShareCopy(url);
         });
-      })
-      .then(function (projects) {
-        setLoadingState(false);
-        recordSearch();
-        var message = projects.length
-          ? null
-          : "No projects matched \"" + query + "\". Try a different keyword.";
-        renderResults(projects, message);
-        var mobileMenu = document.getElementById("nav-mobile-menu");
-        var mobileToggle = document.getElementById("nav-mobile-toggle");
-        if (mobileMenu && mobileMenu.classList.contains("open")) {
-          mobileMenu.classList.remove("open");
-          if (mobileToggle) {
-            mobileToggle.classList.remove("open");
-            mobileToggle.setAttribute("aria-expanded", "false");
-          }
-        }
-      })
-      .catch(function (err) {
-        setLoadingState(false);
-        var general = document.getElementById("form-error-general");
-        if (general) general.textContent = err.message || "Search failed. Please try again.";
-      });
+      } else {
+        fallbackShareCopy(url);
+      }
+    });
   }
 
-    return card;
+
+  // ----------------------------------------------------------
+  // Query param validation for shared URLs
+  // ----------------------------------------------------------
+
+  var VALID_LEVELS    = ["Beginner", "Intermediate", "Advanced"];
+  var VALID_INTERESTS = ["Web", "Data", "Education", "Automation", "Games"];
+  var VALID_TIMES     = ["Low", "Medium", "High"];
+
+  // Strip HTML tags and restrict to safe characters for skill values
+  function sanitizeSkillValue(raw) {
+    if (!raw || typeof raw !== "string") return "";
+    // Remove any HTML/script tags
+    var cleaned = raw.replace(/<[^>]*>/g, "");
+    // Allow only safe characters: letters, digits, spaces, dots, #, +, _, -, /
+    cleaned = cleaned.replace(/[^A-Za-z0-9 .#+_\-\/]/g, "");
+    return cleaned.trim();
+  }
+
+  // Return the value only if it appears in the allowlist, otherwise ""
+  function validateDropdownValue(value, allowlist) {
+    if (!value || typeof value !== "string") return "";
+    var trimmed = value.trim();
+    for (var i = 0; i < allowlist.length; i++) {
+      if (allowlist[i] === trimmed) return trimmed;
+    }
+    return "";
   }
 
-  bindSearchForm(document.getElementById("topic-search-form"), document.getElementById("topic-search"));
-  bindSearchForm(document.getElementById("topic-search-form-mobile"), document.getElementById("topic-search-mobile"));
 
+  // ----------------------------------------------------------
+  // Auto-fill from shared URL query params (no auto-submit)
+  // ----------------------------------------------------------
 
-  skillsInput.setAttribute("role", "combobox");
-  skillsInput.setAttribute("aria-expanded", "false");
-  suggestions.setAttribute("role", "listbox");
+  // Pre-fill form from URL params but require user to click Generate
+  (function initFromQueryParams() {
+    var params = new URLSearchParams(window.location.search);
+    var qSkills   = params.get("skills");
+    var qLevel    = params.get("level");
+    var qInterest = params.get("interest");
+    var qTime     = params.get("time");
+
+    // Only auto-fill if all four params are present
+    if (!qSkills || !qLevel || !qInterest || !qTime) return;
+
+    // Validate dropdown values against their allowlists
+    var safeLevel    = validateDropdownValue(qLevel, VALID_LEVELS);
+    var safeInterest = validateDropdownValue(qInterest, VALID_INTERESTS);
+    var safeTime     = validateDropdownValue(qTime, VALID_TIMES);
+
+    // Abort if any dropdown value is invalid
+    if (!safeLevel || !safeInterest || !safeTime) return;
+
+    // Sanitize and add each skill from the comma-separated query param
+    qSkills.split(",").forEach(function (s) {
+      var safe = sanitizeSkillValue(s);
+      if (safe) window.addSkill(safe);
+    });
+
+    // Set dropdown values to the validated selections
+    document.getElementById("level").value = safeLevel;
+    document.getElementById("interest").value = safeInterest;
+    document.getElementById("time").value = safeTime;
+
+    // Show the prefill banner instead of auto-submitting
+    var banner = document.getElementById("share-prefill-banner");
+    var bannerClose = document.getElementById("share-prefill-banner-close");
+    if (banner) {
+      banner.style.display = "flex";
+      if (bannerClose) {
+        bannerClose.addEventListener("click", function () {
+          banner.style.display = "none";
+        });
+      }
+      // Scroll form into view so user sees the pre-filled state
+      var formSection = document.getElementById("find-project");
+      if (formSection) formSection.scrollIntoView({ behavior: "smooth" });
+    }
+  })();
+
+
+  // ----------------------------------------------------------
+  // Skill input event listeners
+  // ----------------------------------------------------------
 
   skillsInput.addEventListener("input", function () {
     showSuggestions(filteredSkills(skillsInput.value));
@@ -947,7 +798,6 @@ updateProfileWidgets();
       renderSuggestionState();
       return;
     }
-
     if (event.key === "Escape") {
       hideSuggestions();
       return;
@@ -978,261 +828,333 @@ updateProfileWidgets();
     skillWrap.addEventListener("click", function () { skillsInput.focus(); });
   }
 
-  function truncate(text, maxLength) {
-    // Safety check — just return empty string if text is missing
-    if (!text) return "";
-    // Only add "..." if the text is actually longer than the limit
-    return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+  var clearBtn = document.getElementById("clear-filters-btn");
+  if (clearBtn) {
+    clearBtn.addEventListener("click", function () {
+      form.reset();
+      selectedSkills = [];
+      renderSelectedChips();
+      syncSkillsHiddenInput();
+      updateQuickPickState();
+      clearAllErrors();
+      hideSuggestions();
+      resultsSection.style.display = "none";
+      skillsInput.focus();
+    });
+  }
+
+  var resetProgressBtn = document.getElementById("reset-progress-btn");
+  if (resetProgressBtn) {
+    resetProgressBtn.addEventListener("click", function () {
+      progress.searches = 0;
+      progress.projectViews = 0;
+      progress.codeOpens = 0;
+      progress.completions = 0;
+      progress.points = 0;
+      progress.viewedProjects = [];
+      progress.completedProjects = [];
+      progress.achievements = [];
+      progress.badges = {
+        first_search: false,
+        project_explorer: false,
+        code_starter: false,
+        completionist: false,
+        roadmap_runner: false
+      };
+      saveProgressState();
+      updateProfileWidgets();
+      showAchievementToast("Progress reset", "Your local profile has been cleared.");
+    });
+  }
+
+  // ----------------------------------------------------------
+  // Form submission and API call
+  // ----------------------------------------------------------
+
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    clearAllErrors();
+    if (skillsInput.value.trim()) {
+      window.addSkill(skillsInput.value);
+      skillsInput.value = "";
+      hideSuggestions();
+    }
+    if (!validateForm()) return;
+    setLoadingState(true);
+    fetch("/api/recommend", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        skills: JSON.stringify(selectedSkills),
+        level: document.getElementById("level").value,
+        interest: document.getElementById("interest").value,
+        time: document.getElementById("time").value
+      })
+    })
+      .then(function (response) {
+        return response.json().then(function (data) {
+          if (!response.ok) throw new Error(data.error || "Unable to generate recommendations.");
+          return data;
+        });
+      })
+      .then(function (data) {
+        setLoadingState(false);
+        recordSearch();
+        renderResults(data.projects || [], data.message);
+      })
+      .catch(function (err) {
+        setLoadingState(false);
+        var general = document.getElementById("form-error-general");
+        if (general) general.textContent = err.message || "An unexpected error occurred. Please try again.";
+      });
+  });
+
+  // ----------------------------------------------------------
+  // GitHub modal
+  // ----------------------------------------------------------
+
+  var modal = document.getElementById("github-modal-overlay");
+  var openModalBtn = document.getElementById("btn-show-github");
+  var closeModalBtn = document.getElementById("btn-close-github");
+  var fetchBtn = document.getElementById("btn-fetch-github");
+  var githubInput = document.getElementById("github-username");
+  var errorMsg = document.getElementById("github-modal-error");
+
+  function closeGithubModal() {
+    modal.classList.remove("active");
+    githubInput.value = "";
+    errorMsg.textContent = "";
   }
 
-} // end isIndexPage
+  if (modal && openModalBtn && closeModalBtn && fetchBtn && githubInput && errorMsg) {
+    openModalBtn.addEventListener("click", function () {
+      modal.classList.add("active");
+      githubInput.focus();
+    });
+    closeModalBtn.addEventListener("click", closeGithubModal);
+    modal.addEventListener("click", function (event) {
+      if (event.target === modal) closeGithubModal();
+    });
+    fetchBtn.addEventListener("click", function (event) {
+      event.preventDefault();
+      var username = githubInput.value.trim();
+      errorMsg.textContent = "";
+      if (!username) {
+        errorMsg.textContent = "Please enter a GitHub username.";
+        return;
+      }
+      fetchBtn.disabled = true;
+      fetchBtn.textContent = "Syncing...";
+      fetch("https://api.github.com/users/" + encodeURIComponent(username) + "/repos?sort=updated&per_page=100")
+        .then(function (response) {
+          if (!response.ok) throw new Error(response.status === 404 ? "Username not found." : "Unable to fetch GitHub repositories.");
+          return response.json();
+        })
+        .then(function (repos) {
+          var languages = [];
+          repos.forEach(function (repo) {
+            if (repo.language && languages.indexOf(repo.language) === -1) languages.push(repo.language);
+          });
+          if (!languages.length) {
+            errorMsg.textContent = "No public languages found.";
+            return;
+          }
+          languages.forEach(window.addSkill);
+          closeGithubModal();
+        })
+        .catch(function (err) {
+          if (err.message && err.message.toLowerCase().indexOf("networkerror") !== -1 || err.name === "TypeError") {
+            errorMsg.textContent = "Network error: Connection blocked or offline. Please disable adblockers or check your connection.";
+          } else {
+            errorMsg.textContent = err.message || "Failed to fetch skills.";
+          }
+          fetchBtn.disabled = false;
+          fetchBtn.textContent = "Fetch Skills";
+        });
+    });
+  }
+})();
 
 
 // ============================================================
 // DETAIL PAGE
 // ============================================================
-if (isDetailPage) {
+(function initDetailPage() {
+  if (typeof PROJECT_ID === "undefined") return;
+  recordProjectView();
+
+  var codePanel = document.getElementById("code-panel");
+  var codePanelOverlay = document.getElementById("code-panel-overlay");
+  var codeContentEl = document.getElementById("code-content");
+  var codePanelFilename = document.getElementById("code-panel-filename");
+  var btnViewCode = document.getElementById("btn-view-code");
+  var btnViewCodeSm = document.getElementById("btn-view-code-sm");
+  var btnClosePanel = document.getElementById("code-panel-close");
+  var btnCopyCode = document.getElementById("btn-copy-code");
+  var copyToast = document.getElementById("copy-toast");
+  var completionBtn = document.getElementById("btn-mark-complete");
+  var codeFetched = false;
 
-  var codePanel         = document.getElementById("code-panel"); // sliding panel that shows the starter code "
-  var codePanelOverlay  = document.getElementById("code-panel-overlay"); // background overlay 
-  var codeContentEl     = document.getElementById("code-content"); // <pre> element inside the panel where the code will be inserted
-  var codePanelFilename = document.getElementById("code-panel-filename"); // filename display
-  var btnViewCode       = document.getElementById("btn-view-code"); // button to open the code panel on desktop
-  var btnViewCodeSm     = document.getElementById("btn-view-code-sm"); // button to open the code panel on mobile (could be the same button with different styling, but we have two here for simplicity)
-  var btnClosePanel     = document.getElementById("code-panel-close"); // button inside the panel to close it
+  function renderCode(code) {
+    codeContentEl.textContent = "";
+    String(code || "").split("\n").forEach(function (line, index) {
+      var row = document.createElement("div");
+      row.className = "code-line";
+      var number = document.createElement("span");
+      number.className = "code-line-number";
+      number.setAttribute("aria-hidden", "true");
+      number.textContent = index + 1;
+      var content = document.createElement("span");
+      content.className = "code-line-content";
+      content.textContent = line;
+      row.appendChild(number);
+      row.appendChild(content);
+      codeContentEl.appendChild(row);
+    });
+  }
 
-  // Cache flag so code is only fetched once per page load
-  var codeFetched = false;
+  function fetchStarterCode() {
+    codeContentEl.textContent = "Loading starter code...";
+    fetch("/project/" + PROJECT_ID + "/code")
+      .then(function (response) {
+        return response.json().then(function (data) {
+          if (!response.ok) throw new Error(data.error || "Starter code unavailable.");
+          return data;
+        });
+      })
+      .then(function (data) {
+        codePanelFilename.textContent = data.filename;
+        renderCode(data.code);
+        codeFetched = true;
+      })
+      .catch(function (err) {
+        codeContentEl.textContent = err.message || "Could not load starter code. Try downloading it instead.";
+      });
+  }
 
-  //opens the sliding code panel 
   function openCodePanel() {
-    // Panel element might not exist on every detail page, so check first
     if (!codePanel) return;
     codePanel.classList.add("active");
     if (codePanelOverlay) codePanelOverlay.classList.add("active");
-    // Lock background scroll so the page doesn't scroll behind the panel
     document.body.style.overflow = "hidden";
-
-    // Only fetch the code on the first open, no need to re-fetch every time
+    recordCodeOpen();
     if (!codeFetched) fetchStarterCode();
   }
 
-  //closes the code panel and hides the overlay
   function closeCodePanel() {
     if (!codePanel) return;
     codePanel.classList.remove("active");
     if (codePanelOverlay) codePanelOverlay.classList.remove("active");
-    // Restore normal scrolling once the panel is closed
     document.body.style.overflow = "";
   }
 
-  //fetches the starter code from the server via an API call
-  //inserts the code into the panel and handles loading/error states
-  function fetchStarterCode() {
-    // Show a loading message while we wait for the API response
-    if (codeContentEl) codeContentEl.textContent = "Loading starter code...";
-
-    fetch("/project/" + PROJECT_ID + "/code")
-      .then(function (res) { return res.json(); })
-      .then(function (data) {
-        if (data.error) {
-          if (codeContentEl) codeContentEl.textContent = "Error: " + data.error;
-          return;
-        }
-        if (codePanelFilename) codePanelFilename.textContent = data.filename;
-        if (codeContentEl) {
-          codeContentEl.textContent = "";
-          renderCodeWithLineNumbers(data.code).forEach(function (row) {
-            codeContentEl.appendChild(row);
-          });
-        }
-        // Mark as fetched so we don't hit the API again on the next open
-        codeFetched = true;
-      })
-      .catch(function () {
-        if (codeContentEl) {
-          codeContentEl.textContent = "Could not load starter code. Try downloading it instead.";
-        }
-      });
-  }
-
-  // Attach open/close handlers
   if (btnViewCode) btnViewCode.addEventListener("click", openCodePanel);
   if (btnViewCodeSm) btnViewCodeSm.addEventListener("click", openCodePanel);
   if (btnClosePanel) btnClosePanel.addEventListener("click", closeCodePanel);
-
-  if (codePanelOverlay) {
-    codePanelOverlay.addEventListener("click", closeCodePanel); //clicking on the background overlay to also close the panel
-  }
-
-  // Let keyboard users close the panel with Escape — important for accessibility
-  document.addEventListener("keydown", function (evt) {
-    if (evt.key === "Escape") closeCodePanel(); //esc key to close
+  if (codePanelOverlay) codePanelOverlay.addEventListener("click", closeCodePanel);
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") closeCodePanel();
   });
 
-  // ----------------------------------------------------------
-  // Copy Code button
-  // ----------------------------------------------------------
-  var btnCopyCode  = document.getElementById("btn-copy-code");
-  var copyToast    = document.getElementById("copy-toast"); //popup msg when copied 
-  var toastTimeout = null; 
-
-  //shows the "copied to clipboard" state on the button and the toast message, then resets after a short delay
-  function showCopySuccess() {
-    if (!btnCopyCode) return;
-
-    // Swap icons on the button(copy and checkmark icons)
-    var copyIcon  = btnCopyCode.querySelector(".copy-icon");
-    var checkIcon = btnCopyCode.querySelector(".check-icon");
-    var btnLabel  = btnCopyCode.querySelector(".copy-btn-label");
-    if (copyIcon)  copyIcon.style.display  = "none";
-    if (checkIcon) checkIcon.style.display = "inline";
-    if (btnLabel) btnLabel.textContent = "Copied!";
-    btnCopyCode.classList.add("copied");
-    // Disable button so user can't spam click it while toast is showing
-    btnCopyCode.disabled = true;
-
-    // Show toast
-    if (copyToast) {
-      copyToast.classList.add("show");
-    }
-
-    // Auto-reset after 2.5 s
-    // Clear any previous timeout first so timers don't stack up
-    clearTimeout(toastTimeout);
-    toastTimeout = setTimeout(function () {
-      if (copyIcon) copyIcon.style.display = "inline";
-      if (checkIcon) checkIcon.style.display = "none";
-      if (btnLabel) btnLabel.textContent = "Copy Code";
-      btnCopyCode.classList.remove("copied");
-      btnCopyCode.disabled = false;
-      if (copyToast) copyToast.classList.remove("show");
-    }, 2500);
-  }
-
   if (btnCopyCode) {
     btnCopyCode.addEventListener("click", function () {
-      var code = codeContentEl
-        ? Array.from(codeContentEl.querySelectorAll(".line-content"))
-          .map(function (el) { return el.textContent; })
-          .join("\n")
-        : "";
-      // Don't copy if the code hasn't loaded yet — just ignore the click
-      if (!code || code === "Loading..." || code === "Loading starter code...") return;
-
-      // Use Clipboard API with textarea fallback
+      var code = Array.prototype.slice.call(codeContentEl.querySelectorAll(".code-line-content"))
+        .map(function (line) { return line.textContent; })
+        .join("\n");
+      if (!code) return;
+      var done = function () {
+        if (copyToast) {
+          copyToast.classList.add("show");
+          window.setTimeout(function () { copyToast.classList.remove("show"); }, 2500);
+        }
+      };
       if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(code).then(showCopySuccess).catch(function () {
-          fallbackCopy(code); // clipboard api failed, try the old way
-        });
+        navigator.clipboard.writeText(code).then(done);
       } else {
-        fallbackCopy(code); // Clipboard API not supported, use fallback method
+        var textarea = document.createElement("textarea");
+        textarea.value = code;
+        textarea.style.cssText = "position:fixed;top:-9999px;left:-9999px";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        try { document.execCommand("copy"); } catch (err) {}
+        document.body.removeChild(textarea);
+        done();
       }
     });
-  } // end github modal handlers
-
-    /* ---- Scroll-to-top button ---- */
-      
-  var SCROLL_THRESHOLD = 300;
-  var scrollTopBtn = document.getElementById('scroll-top-btn');
-
-  function handleScroll() {
-    if (!scrollTopBtn) return;
-    if (window.pageYOffset > SCROLL_THRESHOLD) {
-      scrollTopBtn.classList.add('visible');
-    } else {
-      scrollTopBtn.classList.remove('visible');
-    }
-  }
-
-  function scrollToTop() {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
   }
 
-  if (scrollTopBtn) {
-    window.addEventListener('scroll', handleScroll);
-    scrollTopBtn.addEventListener('click', scrollToTop);
-  }
+  var roadmapCheckboxes = Array.prototype.slice.call(document.querySelectorAll(".roadmap-checkbox"));
+  var progressFill = document.getElementById("roadmap-progress-fill");
+  var progressText = document.getElementById("roadmap-progress-text");
+  var progressBar = document.querySelector(".roadmap-progress-bar");
+  var roadmapStorageKey = "devpath-roadmap-progress-" + PROJECT_ID;
+
+  function updateRoadmapProgress() {
+    if (!roadmapCheckboxes.length) return;
+    var completed = roadmapCheckboxes.filter(function (checkbox) { return checkbox.checked; }).length;
+    var percent = Math.round((completed / roadmapCheckboxes.length) * 100);
+    roadmapCheckboxes.forEach(function (checkbox) {
+      var step = checkbox.closest(".roadmap-step");
+      if (step) step.classList.toggle("completed", checkbox.checked);
+    });
+    if (progressFill) progressFill.style.width = percent + "%";
+    if (progressText) progressText.textContent = percent + "% completed";
+    if (progressBar) progressBar.setAttribute("aria-valuenow", String(percent));
+    try {
+      localStorage.setItem(roadmapStorageKey, JSON.stringify(roadmapCheckboxes.map(function (checkbox) {
+        return checkbox.checked;
+      })));
+    } catch (err) {}
   }
 
-  // Fallback method to copy text using a hidden textarea and execCommand (for older browsers)
-  function fallbackCopy(text) {
-    // Some older browsers don't support navigator.clipboard, so we use a hidden textarea instead
-    var ta = document.createElement("textarea");
-    ta.value = text;
-    // Push it off-screen so it's not visible but can still be selected
-    ta.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
-    document.body.appendChild(ta);
-    ta.focus();
-    ta.select();
-    // execCommand is old and deprecated but works as a last resort — fail silently if it doesn't
-    try { document.execCommand("copy"); showCopySuccess(); } catch (e) { /* silent fail */ }
-    document.body.removeChild(ta);
-  }
-} // end isDetailPage
-
-if (
-    openModalBtn &&
-    closeModalBtn &&
-    modal &&
-    githubInput &&
-    fetchBtn &&
-    errorMsg
-) {
-// 1. Open Github Input Modal
-  openModalBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      modal.classList.add('active');
-      githubInput.focus();
+  try {
+    var saved = JSON.parse(localStorage.getItem(roadmapStorageKey) || "[]");
+    roadmapCheckboxes.forEach(function (checkbox, index) {
+      checkbox.checked = !!saved[index];
+    });
+  } catch (err) {}
+  roadmapCheckboxes.forEach(function (checkbox) {
+    checkbox.addEventListener("change", updateRoadmapProgress);
   });
+  updateRoadmapProgress();
 
-  // 2. Close Github Input Modal
-  const closeGithubModal = () => {
-      modal.classList.remove('active');
-      githubInput.value = '';
-      errorMsg.textContent = '';
-  };
+  if (completionBtn) {
+    completionBtn.addEventListener("click", function () {
+      recordCompletion(PROJECT_ID, typeof PROJECT_TITLE !== "undefined" ? PROJECT_TITLE : "");
+      showAchievementToast("Project completed", "Nice work finishing this project.");
+    });
+  }
+})();
 
-  closeModalBtn.addEventListener('click', closeGithubModal);
 
-  // Close on clicking outside the card
-  modal.addEventListener('click', (e) => {
-      if (e.target === modal) closeGithubModal();
-  });
+// ============================================================
+// Scroll-to-top / scroll-to-bottom button
+// ============================================================
+(function initScrollButton() {
+  var button = document.getElementById("scroll-top-btn");
+  var icon = document.getElementById("scroll-btn-icon");
+  if (!button) return;
+  var atBottom = false;
+
+  function nearBottom() {
+    return window.innerHeight + window.pageYOffset >= document.body.scrollHeight - 40;
+  }
 
-  // 3. Fetch Skills Logic
-  fetchBtn.addEventListener('click', async () => {
-      const username = githubInput.value.trim();
-      if (!username) return;
+  function update() {
+    button.classList.toggle("visible", window.pageYOffset > 200);
+    atBottom = nearBottom();
+    button.setAttribute("aria-label", atBottom ? "Scroll to top" : "Scroll to bottom");
+    button.title = atBottom ? "Scroll to top" : "Scroll to bottom";
+    if (icon) icon.innerHTML = atBottom ? '<polyline points="18 15 12 9 6 15"/>' : '<polyline points="6 9 12 15 18 9"/>';
+  }
 
-      fetchBtn.disabled = true;
-      fetchBtn.textContent = 'Syncing...';
-
-      try {
-          const response = await fetch(`https://api.github.com/users/${username}/repos`);
-          if (!response.ok) throw new Error();
-          
-          const repos = await response.json();
-          const langs = [...new Set(repos.map(r => r.language).filter(Boolean))];
-
-          if (langs.length > 0) {
-              langs.forEach(lang => {
-                  if (typeof addSkill === 'function') addSkill(lang);
-              });
-              closeGithubModal();
-          } else {
-              errorMsg.textContent = "No public languages found.";
-          }
-      } catch (err) {
-          errorMsg.textContent = err.message ?? "Failed to fetch skills";
-      } finally {
-          fetchBtn.disabled = false;
-          fetchBtn.textContent = 'Fetch Skills';
-      }
+  window.addEventListener("scroll", update, { passive: true });
+  button.addEventListener("click", function () {
+    window.scrollTo({ top: atBottom ? 0 : document.body.scrollHeight, behavior: "smooth" });
   });
   update();
 })();
-
 (function initScrollSpy() {
   var sections = document.querySelectorAll("section[id], header[id]");
   var navLinks = document.querySelectorAll(".nav-link, .nav-mobile-link");
@@ -1241,22 +1163,19 @@ if (
 
   var observerOptions = {
     root: null,
-    rootMargin: "-20% 0px -70% 0px",
+    rootMargin: "0px 0px -50% 0px",
     threshold: 0
   };
 
-  if (scrollTopBtn) {
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    scrollTopBtn.addEventListener('click', function () {
-      if (atBottom) {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      } else {
-        window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      if (entry.isIntersecting) {
+        navLinks.forEach(function(link) {
+          link.classList.toggle('active', link.getAttribute('href') === '#' + entry.target.id);
+        });
       }
     });
-    handleScroll();
-  }
-}());
+  }, observerOptions);
 
   sections.forEach(function (sec) {
     observer.observe(sec);
diff --git a/static/style.css b/static/style.css
index 1cbf860..b578f91 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5022,3 +5022,123 @@ body.dark-theme .theme-toggle:hover {
   background: rgba(16, 185, 129, 0.15);
   color: #6ee7b7;
 }
+
+
+/* ---- Share Result button ---- */
+.share-result-wrap {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
+
+.btn-share {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: var(--white);
+  color: var(--text-body);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.btn-share:hover {
+  background: var(--indigo-600);
+  color: #fff;
+  border-color: var(--indigo-600);
+  transform: translateY(-1px);
+}
+
+.btn-share.copied {
+  background: var(--green-500);
+  color: #fff;
+  border-color: var(--green-500);
+}
+
+
+
+/* ---- Share Toast notification ---- */
+.share-toast {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--gray-900);
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: var(--r-md);
+  font-family: var(--font-body);
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  z-index: 1000;
+  box-shadow: var(--shadow-lg);
+}
+
+.share-toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+  pointer-events: auto;
+}
+
+
+
+/* ---- Share Prefill Banner ---- */
+.share-prefill-banner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px;
+  margin-bottom: 24px;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
+  border: 1px solid rgba(99, 102, 241, 0.22);
+  border-radius: var(--r-sm);
+  font-size: 0.88rem;
+  line-height: 1.6;
+  color: var(--text-body);
+  animation: bannerSlideIn 0.35s ease-out;
+}
+
+@keyframes bannerSlideIn {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.share-prefill-banner-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.share-prefill-banner-content svg {
+  flex-shrink: 0;
+  margin-top: 3px;
+  color: var(--indigo-600);
+}
+
+.share-prefill-banner-close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: var(--gray-400);
+  padding: 0 4px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color var(--t);
+}
+
+.share-prefill-banner-close:hover {
+  color: var(--text-heading);
+}
diff --git a/templates/index.html b/templates/index.html
index cf11844..4265d16 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,6 +8,35 @@
     content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
   <title>DevPath — Find Projects Based On Your Skills</title>
   
+  <script>
+    window.addEventListener('error', function(e) {
+      var errDiv = document.createElement('div');
+      errDiv.style.position = 'fixed';
+      errDiv.style.top = '0';
+      errDiv.style.left = '0';
+      errDiv.style.width = '100%';
+      errDiv.style.background = 'red';
+      errDiv.style.color = 'white';
+      errDiv.style.zIndex = '999999';
+      errDiv.style.padding = '20px';
+      errDiv.textContent = 'JS ERROR: ' + e.message + ' at ' + e.filename + ':' + e.lineno;
+      document.body.appendChild(errDiv);
+    });
+    window.addEventListener('unhandledrejection', function(e) {
+      var errDiv = document.createElement('div');
+      errDiv.style.position = 'fixed';
+      errDiv.style.top = '50px';
+      errDiv.style.left = '0';
+      errDiv.style.width = '100%';
+      errDiv.style.background = 'orange';
+      errDiv.style.color = 'white';
+      errDiv.style.zIndex = '999999';
+      errDiv.style.padding = '20px';
+      errDiv.textContent = 'PROMISE REJECTION: ' + (e.reason ? e.reason.message : e.reason);
+      document.body.appendChild(errDiv);
+    });
+  </script>
+
   <!-- Open Graph meta tags for social media sharing -->
   <meta property="og:title" content="DevPath — Find Projects Based On Your Skills" />
   <meta property="og:description" content="{{ config.SITE_DESCRIPTION }}" />
@@ -42,65 +71,6 @@
     <div class="nav-inner">
       <a href="/" class="nav-logo">Dev<span class="nav-logo-accent">Path</span></a>
 
-      <form id="topic-search-form" class="navbar-search">
-          <input
-            type="text"
-            id="topic-search"
-            autocomplete="on"
-            aria-label="Search projects"
-            placeholder="Search Projects"
-          />
-
-          <button class="glass-search-btn" type="submit" aria-label="Search">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
-          </button>
-        </form>
-      
-      <div class="nav-links">
-        <a href="#home" class="nav-link">Home</a>
-        <a href="#how-it-works" class="nav-link">How It Works</a>
-        <a href="#features" class="nav-link">Features</a>
-        <a href="#the-project" class="nav-link">Find Project</a>
-        <a href="#find-project" class="nav-link">Find Project</a>
-        <a href="/contact" class="nav-link">Contact Us</a>
-        <a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-btn-outline">GitHub</a>
-       
-        <button class="theme-toggle" id="theme-toggle-desktop"
-                aria-pressed="false"
-                aria-label="Switch to dark mode">
-          <!-- Moon icon: shown in light mode (clicking switches to dark) -->
-          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24"
-               fill="none" stroke="currentColor" stroke-width="2"
-               stroke-linecap="round" stroke-linejoin="round"
-               aria-hidden="true">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-          </svg>
-          <!-- Sun icon: shown in dark mode (clicking switches to light) -->
-          <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24"
-               fill="none" stroke="currentColor" stroke-width="2"
-               stroke-linecap="round" stroke-linejoin="round"
-               aria-hidden="true">
-            <circle cx="12" cy="12" r="5"/>
-            <line x1="12" y1="1" x2="12" y2="3"/>
-            <line x1="12" y1="21" x2="12" y2="23"/>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-            <line x1="1" y1="12" x2="3" y2="12"/>
-            <line x1="21" y1="12" x2="23" y2="12"/>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
       <form id="topic-search-form" class="navbar-search" role="search">
         <input
           type="search"
@@ -282,10 +252,6 @@ <h1 class="hero-heading">
 
         <div class="hero-visual-card hero-visual-card--bottom">
           <div class="hvc-icon hvc-icon--green">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke- 
-  width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 
-  12 2 12" /></svg>
-          <div class="hvc-icon hvc-icon--green">            
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
               stroke-linecap="round" stroke-linejoin="round">
               <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
@@ -575,6 +541,21 @@ <h2 class="section-title">Find The Project</h2>
 
       <div class="form-card-outer">
         <div class="form-card" id="form-section">
+          <!-- Shared link prefill banner (hidden by default, shown by JS when URL params detected) -->
+          <div class="share-prefill-banner" id="share-prefill-banner" style="display:none;">
+            <div class="share-prefill-banner-content">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="18" cy="5" r="3" />
+                <circle cx="6" cy="12" r="3" />
+                <circle cx="18" cy="19" r="3" />
+                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+              </svg>
+              <span>Someone shared their DevPath settings with you. Review the pre-filled form below and click <strong>Generate My Projects</strong> to see their recommendations.</span>
+            </div>
+            <button type="button" class="share-prefill-banner-close" id="share-prefill-banner-close" aria-label="Dismiss banner">&times;</button>
+          </div>
           <form id="recommend-form" novalidate onsubmit="event.preventDefault()">
             <div class="form-group">
               <div class="form-label-row"
@@ -583,8 +564,6 @@ <h2 class="section-title">Find The Project</h2>
                   Your Skills
                   <button type="button" class="tooltip" aria-label="Skills help" aria-describedby="skills-tooltip">
   <span aria-hidden="true">ⓘ</span>
-</button>
-                    
                     <span id="skills-tooltip" class="tooltip-text" role="tooltip">
                       Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.
                     </span>
@@ -593,7 +572,7 @@ <h2 class="section-title">Find The Project</h2>
                 
                 <!-- Reset button and Inline GitHub Trigger -->
                 <div style="display: flex; gap: 3px; align-items: center;">
-                   <button type="reset" id="reset-btn" class="btn-clear" style="padding: 4px 12px; font-size: 0.75rem;">
+                   <button type="reset" id="clear-filters-btn" class="btn-clear" style="padding: 4px 12px; font-size: 0.75rem;">
                     Reset
                   </button>
                 <div class="github-inline-trigger" id="github-trigger-wrap" style="line-height: 1.2;">
@@ -613,7 +592,7 @@ <h2 class="section-title">Find The Project</h2>
                 <div class="skill-multiselect-wrapper">
                   <input
                     type="text"
-                    id="skills-input" 
+                    id="skills-input"
                     placeholder="Type a skill and press Enter or select from dropdown..."
                     autocomplete="off"
                     aria-haspopup="listbox"
@@ -625,13 +604,7 @@ <h2 class="section-title">Find The Project</h2>
                   </button>
                 </div>
                 <div id="skills-suggestions" class="skills-suggestions skills-dropdown" style="display: none; max-height: 250px; overflow-y: auto; border: 1px solid var(--color-border); border-top: none; background: white; position: absolute; width: 100%; margin-top: -2px; z-index: 10;"></div>
-                <input type="text" id="skills-input" placeholder="Type a skill and press Enter..." autocomplete="off" />
-                <input type="text" id="skills-input" placeholder="Type a skill and press Enter..."
-  autocomplete="off"
-  aria-haspopup="listbox"
-  aria-expanded="false"
-  aria-controls="skills-suggestions" />
-                <div id="skills-suggestions" class="skills-suggestions"></div>
+
               </div>
               <!-- Hidden field holds the final comma-separated value -->
               <input type="hidden" id="skills" name="skills" />
@@ -786,6 +759,30 @@ <h2 class="section-title">Find The Project</h2>
       <h2 class="section-title">Recommended Projects</h2>
       <p class="section-sub" id="results-subtitle">Based on your inputs, here are your top matches.</p>
 
+      <!-- Share result button — visible only when results are displayed -->
+      <div class="share-result-wrap" id="share-result-wrap" style="display:none;">
+        <button type="button" class="btn-share" id="share-result-btn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="18" cy="5" r="3" />
+            <circle cx="6" cy="12" r="3" />
+            <circle cx="18" cy="19" r="3" />
+            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+          </svg>
+          <span class="share-btn-label">Share My Result</span>
+        </button>
+      </div>
+
+      <!-- Share toast notification -->
+      <div class="share-toast" id="share-toast">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+        Link copied to clipboard!
+      </div>
+
       <!-- Loading state -->
       <div id="results-loading" aria-live="polite" aria-atomic="true" style="display:none;">
         <div class="loading-box">
@@ -1002,6 +999,7 @@ <h4 class="footer-col-title">About Us</h4>
   <script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
 
   <script src="/static/script.js"></script>
+  <script src="/static/bookmarks.js"></script>
 
 </body>
 
diff --git a/tests/test_basic.py b/tests/test_basic.py
index ebaea02..d1ad342 100644
--- a/tests/test_basic.py
+++ b/tests/test_basic.py
@@ -29,9 +29,7 @@
     validate_recommendation_inputs,
     parse_skills,
     score_single_project,
-    WEIGHT_LEVEL,
-    WEIGHT_INTEREST,
-    WEIGHT_TIME,
+    SCORING_WEIGHTS,
 )
 from app import app, internal_server_error
 
@@ -293,7 +291,7 @@ def test_score_no_project_skills_does_not_crash():
     project = {"skills": [], "level": "Beginner", "interest": "Data", "time": "Low"}
     score = score_single_project(project, ["python"], "Beginner", "Data", "Low")
     # Skill score is 0, but other criteria still score
-    assert score == pytest.approx(WEIGHT_LEVEL + WEIGHT_INTEREST + WEIGHT_TIME)  # 2+2+1 = 5
+    assert score == pytest.approx(SCORING_WEIGHTS["level"] + SCORING_WEIGHTS["interest"] + SCORING_WEIGHTS["time"])  # 2+2+1 = 5
 
 
 def test_score_three_skills_partial_coverage():
@@ -552,7 +550,7 @@ def test_project_detail_not_found():
 
 def test_internal_server_error_page():
     """The 500 handler should render the friendly internal error template."""
-    with app.app_context():
+    with app.test_request_context("/"):
         rendered_page, status_code = internal_server_error(Exception("Test error"))
 
     assert status_code == 500
@@ -641,15 +639,69 @@ def test_search_api_empty_query():
     data = response.get_json()
     assert data == []
 
-def test_search_api_no_match():
-    """Search should return empty list for nonsense query."""
+def test_home_route_with_share_params():
+    """The homepage should load normally even when share query params are present."""
     client = get_client()
-    response = client.get("/api/search?q=nonexistentqueryxyz")
+    response = client.get("/?skills=Python,HTML&level=Beginner&interest=Data&time=Low")
     assert response.status_code == 200
 
+
+def test_share_banner_element_exists():
+    """The page HTML must include the share-prefill-banner element for JS to populate."""
+    client = get_client()
+    response = client.get("/")
+    html = response.data.decode()
+    assert 'id="share-prefill-banner"' in html
+
+
+def test_share_params_partial_loads_ok():
+    """Partial share params should not break the page — server renders normally."""
+    client = get_client()
+    response = client.get("/?skills=Python&level=Beginner")
+    assert response.status_code == 200
+
+
+def test_share_params_invalid_level_not_reflected():
+    """An invalid level value should not appear in the server-rendered HTML form options."""
+    client = get_client()
+    response = client.get("/?skills=Python&level=Expert&interest=Data&time=Low")
+    html = response.data.decode()
+    # 'Expert' is not a valid option, so it must not appear as a selected value
+    assert 'value="Expert" selected' not in html
+
+
+def test_share_params_xss_not_reflected():
+    """Script tags in query params must not be rendered in server HTML."""
+    client = get_client()
+    response = client.get("/?skills=<script>alert(1)</script>&level=Beginner&interest=Data&time=Low")
+    html = response.data.decode()
+    assert "<script>alert(1)</script>" not in html
+
+
+def test_share_params_excessive_skills_loads_ok():
+    """A URL with many skills should not crash the server."""
+    skills = ",".join(["Skill" + str(i) for i in range(30)])
+    client = get_client()
+    response = client.get(f"/?skills={skills}&level=Beginner&interest=Data&time=Low")
+    assert response.status_code == 200
+
+
+def test_api_recommend_invalid_level_no_crash():
+    """Posting an unrecognized level should not crash — returns empty or error."""
+    client = get_client()
+    response = client.post("/api/recommend", json={
+        "skills": "Python",
+        "level": "Expert",
+        "interest": "Data",
+        "time": "Low"
+    })
+    assert response.status_code in (200, 400)
     data = response.get_json()
-    assert isinstance(data, list)
-    assert len(data) == 0
+    # Should either be an error or return empty results (no match for 'Expert')
+    if response.status_code == 200:
+        assert "projects" in data
+
+
 # ============================================================
 # Sitemap and robots.txt tests
 # ============================================================
diff --git a/tests/test_error_handling.py b/tests/test_error_handling.py
index 29d953d..325a3d0 100644
--- a/tests/test_error_handling.py
+++ b/tests/test_error_handling.py
@@ -109,20 +109,20 @@ def test_404_does_not_expose_stack_trace():
 
 def test_500_html_renders():
     """The 500 handler must render the friendly template and return 500."""
-    with app.app_context():
+    with app.test_request_context("/"):
         from errors.handlers import internal_server_error
         rendered, status = internal_server_error(Exception("test"))
     assert status == 500
-    assert b"Internal Server Error" in rendered
-    assert b"Back to Home" in rendered
+    assert "Internal Server Error" in rendered
+    assert "Back to Home" in rendered
 
 
 def test_500_does_not_expose_exception_message():
     """The 500 HTML response must not contain the raw exception message."""
-    with app.app_context():
+    with app.test_request_context("/"):
         from errors.handlers import internal_server_error
         rendered, _ = internal_server_error(Exception("super secret db password"))
-    assert b"super secret db password" not in rendered
+    assert "super secret db password" not in rendered
 
 
 def test_405_on_wrong_method():
@@ -223,7 +223,7 @@ def test_security_headers_on_404():
 
 
 def test_security_headers_on_500():
-    with app.app_context():
+    with app.test_request_context("/"):
         from errors.handlers import internal_server_error as h
         _, status = h(Exception("hdr test"))
     # Headers are added by after_request; verify the handler itself returns 500
@@ -240,6 +240,7 @@ def test_unhandled_exception_returns_500():
     with app.test_request_context():
         pass  # ensure app context works
 
+    app._got_first_request = False
     @app.route("/test-unhandled-exception-xyz")
     def _broken_route():
         raise RuntimeError("deliberate crash for testing")
@@ -249,15 +250,12 @@ def _broken_route():
     assert response.status_code == 500
 
     # Clean up the temporary route
-    app.url_map._rules = [
-        r for r in app.url_map._rules
-        if r.rule != "/test-unhandled-exception-xyz"
-    ]
     app.view_functions.pop("_broken_route", None)
 
 
 def test_unhandled_exception_does_not_leak_message():
     """The 500 response from an unhandled exception must not expose the error message."""
+    app._got_first_request = False
     @app.route("/test-leak-check-xyz")
     def _leaky_route():
         raise ValueError("do not expose this secret value")
@@ -266,8 +264,4 @@ def _leaky_route():
     response = client.get("/test-leak-check-xyz")
     assert b"do not expose this secret value" not in response.data
 
-    app.url_map._rules = [
-        r for r in app.url_map._rules
-        if r.rule != "/test-leak-check-xyz"
-    ]
     app.view_functions.pop("_leaky_route", None)
diff --git a/utils/recommender.py b/utils/recommender.py
index c0ef127..4e10bd3 100644
--- a/utils/recommender.py
+++ b/utils/recommender.py
@@ -12,6 +12,9 @@
 
 MAX_RESULTS = 3
 
+VALID_LEVELS = {"beginner", "intermediate", "advanced"}
+VALID_INTERESTS = {"web", "data", "education", "automation", "games", "cybersecurity", "devops", "backend", "tools", "productivity", "business logic", "mobile", "machine learning/ai"}
+VALID_TIME_AVAILABILITY = {"low", "medium", "high"}
 SCORING_WEIGHTS = {
     "skill": 3,
     "level": 2,
@@ -29,6 +32,15 @@
 }
 
 def parse_skills(skills_string):
+    if not skills_string or not skills_string.strip():
+        return []
+    try:
+        raw_skills = json.loads(skills_string)
+        if isinstance(raw_skills, list):
+            return [SKILL_ALIASES.get(s.strip().lower(), s.strip().lower()) for s in raw_skills if str(s).strip()]
+    except json.JSONDecodeError:
+        pass
+
     raw_skills = [
         s.strip().lower()
         for s in skills_string.split(",")
@@ -111,7 +123,8 @@ def score_single_project(project, user_skills, level, interest, time_availabilit
     # skills required by the current project.
     matched_skills = sum(1 for skill in user_skills if skill in project_skills)
 
-    score += matched_skills * SCORING_WEIGHTS["skill"]
+    coverage = (matched_skills / len(project_skills)) if project_skills else 0
+    score += matched_skills * SCORING_WEIGHTS["skill"] * coverage
 
     if project.get("level", "").lower() == level.lower():
         score += SCORING_WEIGHTS["level"]
@@ -119,7 +132,7 @@ def score_single_project(project, user_skills, level, interest, time_availabilit
     if project.get("interest", "").lower() == interest.lower():
         score += SCORING_WEIGHTS["interest"]
 
-    if project_time == user_time:
+    if project.get("time", "").lower() == time_availability.lower():
         score += SCORING_WEIGHTS["time"]
 
     return score
@@ -132,7 +145,7 @@ def get_recommendations(skills_string, level, interest, time_availability):
     user_skills = parse_skills(skills_string)
     all_projects = load_all_projects()
 
-    scored = []
+    scored_projects = []
     for project in all_projects:
         rule_score = score_single_project(
             project,
@@ -151,9 +164,6 @@ def get_recommendations(skills_string, level, interest, time_availability):
             all_projects,
         )
 
-    # Sort projects in descending order so the
-    # most relevant recommendations appear first.
-    scored_projects.sort(key=lambda item: (item["score"], item["project"].get("id", 0)), reverse=True)
         final_score = rule_score + similarity_score
 
         if final_score > 0:
@@ -162,7 +172,8 @@ def get_recommendations(skills_string, level, interest, time_availability):
                 "score": final_score,
             })
 
-    scored_projects.sort(key=lambda item: item["score"], reverse=True)
+    # Sort projects in descending order so the most relevant recommendations appear first.
+    scored_projects.sort(key=lambda item: (item["score"], item["project"].get("id", 0)), reverse=True)
 
     return [item["project"] for item in scored_projects[:MAX_RESULTS]]
 
diff --git a/utils/url_validator.py b/utils/url_validator.py
index 7a82fae..d419ab8 100644
--- a/utils/url_validator.py
+++ b/utils/url_validator.py
@@ -20,7 +20,7 @@
 # Intentionally strict: rejects bare domains, ftp://, mailto:, etc.
 _URL_RE = re.compile(
     r'^https?://'                      # scheme
-    r'(?:[A-Za-z0-9-]+\.)+[A-Za-z]{2,}'  # domain
+    r'(?:(?:[A-Za-z0-9-]+\.)+[A-Za-z]{2,}|localhost)'  # domain
     r'(?::\d+)?'                       # optional port
     r'(?:[/?#][^\s]*)?$',              # optional path/query/fragment
     re.IGNORECASE,