Remove tag pills from projects pages

Author: davidbingmann

src/pages/Project.jsx

@@ -44,19 +44,10 @@ export default function Project() {
           </a>
         </p>
 
-        <div className="tag-row tag-row--compact" aria-label="Project tags">
-          {project.tags.map((tag) => (
-            <Link key={tag} className="tag" to={`/projects?tag=${encodeURIComponent(tag)}`}>
-              #{tag}
-            </Link>
-          ))}
-        </div>
-
         {project.body.map((paragraph) => (
           <p key={paragraph}>{paragraph}</p>
         ))}
       </div>
     </section>
   );
 }
-

src/pages/Projects.jsx

@@ -1,79 +1,38 @@
-import { useEffect, useMemo } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { projects } from '../data/projects.js';
 
 export default function Projects() {
-  const [searchParams] = useSearchParams();
-  const activeTag = searchParams.get('tag');
-
   useEffect(() => {
     document.title = 'Projects - David Bingmann';
   }, []);
 
-  const allTags = useMemo(() => {
-    const tags = new Set();
-    projects.forEach((project) => project.tags.forEach((tag) => tags.add(tag)));
-    return Array.from(tags).sort((a, b) => a.localeCompare(b));
-  }, []);
-
-  const visibleProjects = activeTag
-    ? projects.filter((project) => project.tags.includes(activeTag))
-    : projects;
-
   return (
     <section className="section">
       <h1 className="section-title">projects/</h1>
-
-      <div className="tag-row" aria-label="Project tag filter">
-        <Link className={`tag${activeTag ? '' : ' tag--active'}`} to="/projects">
-          all
-        </Link>
-        {allTags.map((tag) => (
-          <Link
-            key={tag}
-            className={`tag${activeTag === tag ? ' tag--active' : ''}`}
-            to={`/projects?tag=${encodeURIComponent(tag)}`}
+      <div className="project-list">
+        {projects.map((project, index) => (
+          <article
+            key={project.slug}
+            className="project-card"
+            style={{ '--delay': `${index * 120}ms` }}
           >
-            #{tag}
-          </Link>
+            <h2 className="project-card-title">
+              <Link className="project-title-link" to={`/projects/${project.slug}`}>
+                {project.title} Project
+              </Link>
+            </h2>
+            <p className="project-card-headline">{project.headline}</p>
+            <p className="project-card-summary">{project.summary}</p>
+
+            <p className="project-card-meta">
+              <a href={project.repo.href} target="_blank" rel="noreferrer">
+                {project.repo.label}
+              </a>
+            </p>
+          </article>
         ))}
       </div>
-
-      {visibleProjects.length === 0 ? (
-        <div className="empty-note">No projects found for that tag.</div>
-      ) : (
-        <div className="project-list">
-          {visibleProjects.map((project, index) => (
-            <article
-              key={project.slug}
-              className="project-card"
-              style={{ '--delay': `${index * 120}ms` }}
-            >
-              <h2 className="project-card-title">
-                <Link className="project-title-link" to={`/projects/${project.slug}`}>
-                  {project.title} Project
-                </Link>
-              </h2>
-              <p className="project-card-headline">{project.headline}</p>
-              <p className="project-card-summary">{project.summary}</p>
-
-              <div className="tag-row tag-row--compact" aria-label="Project tags">
-                {project.tags.map((tag) => (
-                  <Link key={tag} className="tag" to={`/projects?tag=${encodeURIComponent(tag)}`}>
-                    #{tag}
-                  </Link>
-                ))}
-              </div>
-
-              <p className="project-card-meta">
-                <a href={project.repo.href} target="_blank" rel="noreferrer">
-                  {project.repo.label}
-                </a>
-              </p>
-            </article>
-          ))}
-        </div>
-      )}
     </section>
   );
 }

src/styles.css

@@ -264,37 +264,6 @@ p {
   background: var(--surface);
 }
 
-.tag-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem;
-  align-items: center;
-}
-
-.tag-row--compact {
-  gap: 0.5rem;
-}
-
-.tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.28rem 0.65rem;
-  border-radius: 999px;
-  border: 1px solid var(--line);
-  background: transparent;
-  color: var(--muted);
-  font-size: 0.8rem;
-  letter-spacing: 0.04em;
-  text-transform: lowercase;
-  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
-}
-
-.tag--active {
-  color: var(--text);
-  border-color: var(--accent);
-  background-color: var(--hover);
-}
-
 .project-list {
   display: grid;
   gap: 1.25rem;
@@ -499,11 +468,6 @@ p {
     border-color: var(--accent);
   }
 
-  .tag:hover {
-    color: var(--text);
-    border-color: var(--accent);
-  }
-
   .project-title-link:hover {
     border-color: var(--text);
   }