Fix linting errors, title padding, add subtitle

src/pages/api/revalidate.ts

@@ -1,8 +1,8 @@
-import { readItem, readItems } from "@directus/sdk";
+import { env } from "@/env/server.mjs";
+import directus from "@/utils/directus";
+import { readItem } from "@directus/sdk";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
-import directus from "@/utils/directus";
-import { env } from "@/env/server.mjs";
 
 async function getURLs(
   type: string,
@@ -25,11 +25,11 @@ async function getURLs(
     const urls = ["/technology"];
 
     // Get all projects with the technology
-    const all_projects = await directus.request(readItems("project", {
-      fields: ["id", {
-        technologies: ["id"],
-      }],
-    }));
+    // const all_projects = await directus.request(readItems("project", {
+    //   fields: ["id", {
+    //     technologies: ["id"],
+    //   }],
+    // }));
 
     // if (all_projects != null) {
     //   for (const project of all_projects) {

src/pages/projects.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 async function getProjects() {
   return await directus.request(readItems("project", {
-    fields: ["name", "shortDescription", "icon", {links: ["url"]}],
+    fields: ["id", "name", "shortDescription", "icon", {links: ["url"]}],
   }));
 }
 
@@ -28,18 +28,22 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
   return (
     <AppWrapper dotsClassName="animate-bg-fast">
       <div className="max-w-500 mx-auto py-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 md:grid-cols-2 lg:grid-cols-3">
-        <div className="md:col-span-2 lg:col-span-3 w-full">
-          <h1 className="text-4xl md:text-5xl text-center text-zinc-200 opacity-100 font-hanken">
+        <div className="md:col-span-2 text-center lg:col-span-3 w-full mb-10">
+          <h1 className="text-4xl md:text-5xl pb-3 text-zinc-200 opacity-100 font-hanken">
           Projects
           </h1>
+          <span className="text-lg text-zinc-400">
+            created, maintained, or contributed to by me...
+          </span>
         </div>
-        {projects.map(({ name, shortDescription: description, links, icon }) =>
+        {projects.map(({ id, name, shortDescription: description, links, icon }) =>
         {
-          const DynamicLink = links?.length ?? 0 > 0  ? Link : "div";
-          const linkProps = links?.length ?? 0 > 0 ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {};
+          const useAnchor = links?.length ?? 0 > 0;
+          const DynamicLink = useAnchor  ? Link : "div";
+          const linkProps = useAnchor ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {};
 
-            return <div className="flex">
-              {/* @ts-ignore */}
+            return <div className="flex" key={id}>
+              {/* @ts-expect-error because div can't accept href */}
               <DynamicLink
                 key={name}
                 title={name}