projects

components/ProjectCard.tsx

@@ -0,0 +1,37 @@
+import { LuLink } from "@preact-icons/lu";
+
+interface Project {
+  id: string;
+  name: string;
+  description: string;
+  link: string;
+}
+
+export default function ProjectCard(props: { project: Project }) {
+  const { project } = props;
+  return (
+    <div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
+      <div class="card-body p-6">
+        <h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
+          {project.name}
+        </h2>
+
+        <p class="text-center break-words my-4 text-base-100">
+          {project.description}
+        </p>
+
+        <div class="card-actions justify-end mt-4 ">
+          <a
+            href={project.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-circle btn-secondary text-accent"
+            aria-label={`Visit ${project.name}`}
+          >
+            <LuLink class="text-lg" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

routes/posts.tsx

@@ -13,7 +13,7 @@ export default function PostsPage(props: PageProps<Post[]>) {
   const posts = props.data;
   return (
     <div class="min-h-screen p-4 sm:p-8">
-      <h1 class="text-3xl sm:text-4xl font-bold text-accent mb-6 sm:mb-8 text-center">
+      <h1 class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center">
         Posts
       </h1>
       <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">

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>
+  );
 }