Add project filter feature

revati-kadam-portfolio/css/style.css

@@ -717,6 +717,47 @@ body {
   transition: var(--transition);
 }
 
+.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(-10px);
   border-color: color-mix(in srgb, var(--primary) 40%, transparent);

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"
   }

revati-kadam-portfolio/index.html

@@ -235,9 +235,56 @@ <h3>Secondary School Certificate (SSC)</h3>
   </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>

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);
     });
-  });
-
+  })
+  .catch(() => {
+    document.getElementById("projects-container").innerHTML = "<p>Could not load projects.</p>";
+  });