diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..f907d13
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,58 @@
+function renderProjects() {
+  const container = document.getElementById("project-list");
+  if (!container || typeof projects === "undefined") return;
+
+  container.innerHTML = projects.map(function (p) {
+    var tags = p.tags.map(function (t) {
+      return '<span class="project-card-tag">' + t + "</span>";
+    }).join("");
+
+    var link = p.link
+      ? '<a href="' + p.link + '" class="project-card-link" target="_blank" rel="noopener">사이트 방문 →</a>'
+      : "";
+
+    return (
+      '<div class="project-card">' +
+        '<div class="project-card-header">' +
+          '<span class="project-card-name">' + p.name + "</span>" +
+          '<span class="project-card-category">' + p.category + "</span>" +
+        "</div>" +
+        '<p class="project-card-desc">' + p.description + "</p>" +
+        '<div class="project-card-tags">' + tags + "</div>" +
+        link +
+      "</div>"
+    );
+  }).join("");
+}
+
+function setupNavHighlight() {
+  var links = document.querySelectorAll(".nav-link[href^='#']");
+  var sections = [];
+
+  links.forEach(function (link) {
+    var id = link.getAttribute("href").slice(1);
+    var el = document.getElementById(id);
+    if (el) sections.push({ el: el, link: link });
+  });
+
+  if (sections.length === 0) return;
+
+  window.addEventListener("scroll", function () {
+    var scrollY = window.scrollY + 80;
+
+    var current = sections[0];
+    for (var i = 0; i < sections.length; i++) {
+      if (sections[i].el.offsetTop <= scrollY) {
+        current = sections[i];
+      }
+    }
+
+    links.forEach(function (l) { l.classList.remove("active"); });
+    current.link.classList.add("active");
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  renderProjects();
+  setupNavHighlight();
+});