From aaeac58d56c7f31438905212e99d2630f1acfa2c Mon Sep 17 00:00:00 2001
From: Gunjan Agrawal <gunjanagrawal582@gmail.com>
Date: Tue, 19 May 2026 14:21:40 +0000
Subject: [PATCH 1/2] feat: add dynamic project filtering feature

---
 package-lock.json                         |  6 +++
 revati-kadam-portfolio/css/style.css      | 41 ++++++++++++++++++
 revati-kadam-portfolio/data/projects.json |  1 +
 revati-kadam-portfolio/index.html         | 53 +++++++++++++++++++++--
 revati-kadam-portfolio/js/main.js         | 39 ++++++++++-------
 5 files changed, 122 insertions(+), 18 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cf94ba0
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "portfolio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/revati-kadam-portfolio/css/style.css b/revati-kadam-portfolio/css/style.css
index 2b76e2b..9198046 100644
--- a/revati-kadam-portfolio/css/style.css
+++ b/revati-kadam-portfolio/css/style.css
@@ -799,6 +799,47 @@ body {
   transition: transform 0.3s, box-shadow 0.3s;
 }
 
+.project-filters {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 2rem;
+}
+
+.filter-btn {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  background: #1e3a5f;
+  color: white;
+  font-weight: 600;
+  transition: 0.3s ease;
+}
+
+.filter-btn:hover {
+  transform: translateY(-2px);
+}
+
+.filter-btn.active {
+  background: #00bcd4;
+  color: #000;
+}
+
+@media (max-width: 768px) {
+
+  .project-filters {
+    gap: 8px;
+  }
+
+  .filter-btn {
+    padding: 8px 14px;
+    font-size: 14px;
+  }
+
+}
+
 .project-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 40px var(--shadow);
diff --git a/revati-kadam-portfolio/data/projects.json b/revati-kadam-portfolio/data/projects.json
index 78de6fb..23a74cd 100644
--- a/revati-kadam-portfolio/data/projects.json
+++ b/revati-kadam-portfolio/data/projects.json
@@ -4,6 +4,7 @@
     "image": "assets/images/project 1.png",
     "description": "A full-featured employee tracking portal with authentication, dashboards, and real-time data management.",
     "tech": ["HTML", "CSS", "JavaScript", "Node.js"],
+    "category": ["JavaScript", "Full Stack"],
     "live": "https://sca-employee-portal.netlify.app/",
     "github": "https://github.com/revatikadam0607/SCA-portal"
   }
diff --git a/revati-kadam-portfolio/index.html b/revati-kadam-portfolio/index.html
index 1bf2a0c..192bd0a 100644
--- a/revati-kadam-portfolio/index.html
+++ b/revati-kadam-portfolio/index.html
@@ -169,9 +169,56 @@ <h2>Skills & Expertise</h2>
 </section>
 
   <section id="projects" class="section">
-    <h2>Projects</h2>
-    <div id="projects-container"></div>
-  </section>
+
+  <h2>Projects</h2>
+
+  <div class="project-filters">
+
+    <button
+      class="filter-btn active"
+      data-filter="All">
+
+      All
+
+    </button>
+
+    <button
+      class="filter-btn"
+      data-filter="React">
+
+      React
+
+    </button>
+
+    <button
+      class="filter-btn"
+      data-filter="JavaScript">
+
+      JavaScript
+
+    </button>
+
+    <button
+      class="filter-btn"
+      data-filter="Full Stack">
+
+      Full Stack
+
+    </button>
+
+    <button
+      class="filter-btn"
+      data-filter="UI/UX">
+
+      UI/UX
+
+    </button>
+
+  </div>
+
+  <div id="projects-container"></div>
+
+</section>
 
   <section id="contact" class="section">
     <h2>Contact Me</h2>
diff --git a/revati-kadam-portfolio/js/main.js b/revati-kadam-portfolio/js/main.js
index 4898210..0707e6e 100644
--- a/revati-kadam-portfolio/js/main.js
+++ b/revati-kadam-portfolio/js/main.js
@@ -71,20 +71,29 @@ fetch("data/skills.json")
 fetch("data/projects.json")
   .then(res => res.json())
   .then(data => {
-    const container = document.getElementById("projects-container");
-
-    data.forEach(project => {
-      const div = document.createElement("div");
-
-      div.innerHTML = `
-        <h3>${project.name}</h3>
-        <img src="${project.image}" width="300">
-        <br>
-        <a href="${project.live}">Live</a> |
-        <a href="${project.github}">GitHub</a>
+    const c = document.getElementById("projects-container");
+    c.innerHTML = "";
+    data.forEach(p => {
+      const d = document.createElement("div");
+      d.className = "project-card";
+      const techTags = (p.tech || []).map(t => `<span class="tech-tag">${t}</span>`).join("");
+      d.innerHTML = `
+        <div class="project-thumb">
+          <img src="${p.image}" alt="${p.name}" onerror="this.parentElement.style.background='#1e3a5f'; this.style.display='none'">
+        </div>
+        <div class="project-info">
+          <h3>${p.name}</h3>
+          <p>${p.description || ""}</p>
+          <div class="tech-tags">${techTags}</div>
+          <div class="project-links">
+            <a href="${p.live}" target="_blank">Live ↗</a>
+            <a href="${p.github}" target="_blank">GitHub ↗</a>
+          </div>
+        </div>
       `;
-
-      container.appendChild(div);
+      c.appendChild(d);
     });
-  });
-  
\ No newline at end of file
+  })
+  .catch(() => {
+    document.getElementById("projects-container").innerHTML = "<p>Could not load projects.</p>";
+  });
\ No newline at end of file

From 310cb985785ae33aa9f8c63fcc10b677a9c5cd46 Mon Sep 17 00:00:00 2001
From: Gunjan Agrawal <gunjanagrawal582@gmail.com>
Date: Tue, 19 May 2026 14:23:45 +0000
Subject: [PATCH 2/2] chore: remove unnecessary package-lock file

---
 package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index cf94ba0..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "portfolio",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}