make cv a markdown page

src/components/CvProjects.astro

@@ -0,0 +1,91 @@
+---
+import Link from "@components/Link.astro";
+import { createSlug } from "@lib/utils";
+
+const projects = [
+  {
+    id: 1,
+    name: "MUST FIND BEANS",
+    description:
+      "A fast-paced first person shooter set following the realization that you’re all out of beans. The problem is, you’re nearing the end of cooking all the other items and you can’t just not have them. Without beans, the day just won’t be started off right.",
+    tags: ["Godot", "Blender", "GIMP", "Steamworks"],
+    link: "/projects/must-find-beans",
+    done: false,
+  },
+  {
+    id: 2,
+    name: "troylusty.com",
+    description:
+      "My personal website made using Astro as a way to show off my portfolio of work and display blog posts.",
+    tags: [
+      "Astro",
+      "Tailwind CSS",
+      "TypeScript",
+      "Self-hosted Forgejo Actions",
+      "Docker",
+    ],
+    link: "https://code.troylusty.com/troy/troylusty.com",
+    done: true,
+  },
+  {
+    id: 3,
+    name: "Artwork",
+    description:
+      "A collection of digital artwork created with a variety of tools.",
+    tags: ["Blender", "Cinema 4D", "DaVinci Resolve"],
+    link: "/projects",
+    done: true,
+  },
+  {
+    id: 4,
+    name: "Packard",
+    description:
+      "Packard is a simple terminal based RSS aggregator meant to allow you to take a quick glance at what’s occurring in topics you care about.",
+    tags: ["Rust", "Tokio", "Clap", "NixOS Flake"],
+    link: "https://code.troylusty.com/troy/packard",
+    done: true,
+  },
+];
+const sortedProjects = [...projects].sort((a, b) => a.id - b.id);
+---
+
+<ol class="grid grid-cols-1 gap-3 pl-0 md:grid-cols-2 print:grid-cols-2">
+  {
+    sortedProjects.map((project) => (
+      <li class="flex flex-col overflow-hidden pl-0">
+        <div class="flex flex-col space-y-1.5">
+          <div class="space-y-1">
+            <>
+              <h3 class="mt-0 text-base font-semibold tracking-tight">
+                <Link
+                  href={project.link}
+                  class="text-secondary inline-flex items-center gap-1 hover:underline"
+                >
+                  {project.done ? (
+                    <span class="mr-1 h-1 w-1 rounded-full bg-green-500" />
+                  ) : (
+                    <span class="mr-1 h-1 w-1 rounded-full bg-amber-500" />
+                  )}
+                  {project.name}
+                </Link>
+              </h3>
+              <p class="text-secondary/70 text-xs">{project.description}</p>
+            </>
+          </div>
+        </div>
+        <div class="mt-auto flex text-sm text-pretty">
+          <div class="mt-2 flex flex-wrap gap-1">
+            {project.tags.map((tag) => (
+              <a
+                href={`/tags/${createSlug(tag)}`}
+                class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center font-sans text-[10px] font-light text-nowrap capitalize no-underline transition-colors duration-300"
+              >
+                {tag}
+              </a>
+            ))}
+          </div>
+        </div>
+      </li>
+    ))
+  }
+</ol>