Finalized

src/components/ProjectCard.astro

@@ -0,0 +1,40 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Project {
+  id: string;
+  name: string;
+  description: string;
+  link: string;
+}
+
+export interface Props {
+  project: Project;
+}
+
+const { project } = Astro.props;
+---
+
+<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-sm bg-base-100 hover:bg-base-200 text-accent"
+        aria-label={`Visit ${project.name}`}
+      >
+        <Icon name="mdi:link" class="text-lg" />
+      </a>
+    </div>
+  </div>
+</div>