Fix project navigation and improve UI consistency

routes/main_routes.py

@@ -140,10 +140,37 @@ def recommend():
 @main.route("/project/<int:project_id>")
 def project_detail(project_id):
     """Render the full detail page for a single project."""
+
     project = find_project_by_id(project_id)
+
     if not project:
         abort(404)
-    return render_template("project.html", project=project, config=Config)
+
+    projects = load_all_projects()
+
+    current_index = next(
+        (index for index, p in enumerate(projects) if p["id"] == project_id),
+        None
+    )
+
+    prev_project = (
+        projects[current_index - 1]
+        if current_index is not None and current_index > 0
+        else None
+    )
+
+    next_project = (
+        projects[current_index + 1]
+        if current_index is not None and current_index < len(projects) - 1
+        else None
+    )
+
+    return render_template(
+        "project.html",
+        project=project,
+        prev_project=prev_project,
+        next_project=next_project
+    )
 
 
 @main.route("/project/<int:project_id>/code")

static/script.js

@@ -586,12 +586,15 @@ updateProfileWidgets();
       hideSuggestions();
     }
 
-    if (!validateForm()) return; //stop - anything missing/invalid
+  clearAllErrors();
 
-    setLoadingState(true);
+  if (skillsTextInput.value.trim()) {
+    addSkill(skillsTextInput.value);
+    skillsTextInput.value = "";
+    hideSuggestions();
+  }
 
-    // Allow browser to paint spinner before request starts
-    requestAnimationFrame(function () {
+  if (!validateForm()) return;
 
       //combine form values into an object to send to server/api
       var payload = {
@@ -631,6 +634,7 @@ updateProfileWidgets();
         });
     });
   });
+});
 
 
   // Manages the loading state of the form and results section(whats visible or not)
@@ -1233,6 +1237,12 @@ updateProfileWidgets();
     return window.innerHeight + window.pageYOffset >= document.body.scrollHeight - 40;
   }
 
+/* Only wire up listeners if the button exists on this page */
+if (scrollTopBtn) {
+    window.addEventListener('scroll', handleScroll);
+    scrollTopBtn.addEventListener('click', scrollToTop);
+}
+}
   function update() {
     button.classList.toggle("visible", window.pageYOffset > 200);
     atBottom = nearBottom();

static/style.css

@@ -4001,6 +4001,86 @@ html[data-theme="dark"] .btn-view-code-sm {
   color: #e6edf3;
 }
 
+/* ============================================================
+   Project Navigation
+   ============================================================ */
+
+.project-navigation {
+  margin-top: 4rem;
+  padding: 2rem 0;
+}
+
+.project-navigation-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.project-nav-card {
+  flex: 1 1 240px;
+  min-width: 240px;
+  padding: 1.25rem;
+  border-radius: 16px;
+
+  background: #111827;
+  border: 1px solid #1f2937;
+
+  text-decoration: none;
+
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.project-nav-card:hover {
+  transform: translateY(-2px);
+  border-color: #374151;
+  background: #0f172a;
+}
+
+.project-nav-card:focus-visible {
+  outline: 2px solid #60a5fa;
+  outline-offset: 3px;
+}
+
+.project-nav-card--right {
+  text-align: right;
+}
+
+.project-nav-label {
+  display: block;
+  margin-bottom: 0.4rem;
+
+  font-size: 0.85rem;
+  color: #9ca3af;
+}
+
+.project-nav-title {
+  display: block;
+
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+
+  color: #f9fafb;
+}
+
+/* Mobile stacking */
+@media (max-width: 640px) {
+  .project-navigation-inner {
+    flex-direction: column;
+  }
+
+  .project-nav-card--right {
+    text-align: left;
+  }
+}
+[data-theme="dark"] .navbar {
+  background: rgba(5, 8, 30, 0.92);
+}
+
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
     scroll-behavior: auto;

templates/project.html

@@ -372,6 +372,31 @@ <h3 class="sidebar-card-title">
 
   <div class="achievement-toast" id="achievement-toast" role="status" aria-live="polite"></div>
 
+  <!-- ============================================================
+     Project Navigation
+     ============================================================ -->
+<div class="project-navigation">
+  <div class="container">
+    <div class="project-navigation-inner">
+
+      {% if prev_project %}
+      <a href="/project/{{ prev_project.id }}" class="project-nav-card">
+        <span class="project-nav-label">← Previous Project</span>
+        <span class="project-nav-title">{{ prev_project.title }}</span>
+      </a>
+      {% endif %}
+
+      {% if next_project %}
+      <a href="/project/{{ next_project.id }}" class="project-nav-card project-nav-card--right">
+        <span class="project-nav-label">Next Project →</span>
+        <span class="project-nav-title">{{ next_project.title }}</span>
+      </a>
+      {% endif %}
+
+    </div>
+  </div>
+</div>
+
   <!-- ============================================================
        Footer
        ============================================================ -->