projects

routes/projects.tsx

@@ -1,3 +1,60 @@
-export default function Projects() {
-  return <h1>Projects Page</h1>;
+import ProjectCard from "../components/ProjectCard.tsx";
+
+interface Project {
+  id: string;
+  name: string;
+  description: string;
+  link: string;
+}
+
+export default function ProjectsPage() {
+  const projects: Project[] = [
+    {
+      id: "bluesky-pds-manager",
+      name: "BlueSky PDS Manager",
+      description:
+        "A web-based BlueSky PDS Manager. Manage your invite codes and users with a simple web UI.",
+      link: "https://pdsman.atri.dad",
+    },
+    {
+      id: "pollo",
+      name: "Pollo",
+      description: "A dead-simple real-time voting tool.",
+      link: "https://git.atri.dad/atridad/pollo",
+    },
+    {
+      id: "goth-stack",
+      name: "GOTH Stack",
+      description:
+        "🚀 A Web Application Template Powered by HTMX + Go + Tailwind 🚀",
+      link: "https://git.atri.dad/atridad/goth.stack",
+    },
+    {
+      id: "himbot",
+      name: "Himbot",
+      description:
+        "A discord bot written in Go. Loosly named after my username online (HimbothySwaggins).",
+      link: "https://git.atri.dad/atridad/himbot",
+    },
+    {
+      id: "loadr",
+      name: "loadr",
+      description:
+        "A lightweight REST load testing tool with robust support for different verbs, token auth, and performance reports.",
+      link: "https://git.atri.dad/atridad/loadr",
+    },
+  ];
+
+  return (
+    <div class="min-h-screen p-4 sm:p-8">
+      <h1 class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center">
+        Projects
+      </h1>
+      <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
+        {projects.map((project) => (
+          <ProjectCard key={project.id} project={project} />
+        ))}
+      </div>
+    </div>
+  );
 }