initial commit

src/app/(app)/projects/page.tsx

@@ -0,0 +1,35 @@
+export const dynamic = 'force-dynamic'
+
+import ProjectCard from "@/components/project-card";
+import Rule from "@/components/horizontal-rule";
+import { getProjects } from "@/services/projects-service";
+import Image from "next/image";
+import Link from "next/link";
+import { Fragment } from "react";
+
+const ProjectsPage = async () => {
+  const projects = await getProjects();
+  return (
+    <div className="flex flex-col gap-4 justify-center items-center my-15">
+      <div className="flex flex-row items-center gap-2 my-2">
+        <Image src="/images/liam_pietralla.jpg" width={50} height={50} alt="Liam Pietralla" className="rounded-full" />
+        <Link href="/" className="group leading-relaxed font-semi-bold">
+          Liam Pietralla
+          <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-white"></span>
+        </Link>
+      </div>
+      <h1 className="text-5xl font-bold">Projects</h1>
+      <h2>A collection of interesting projects that I am working on currently or have worked on in the past.</h2>
+      <div className="flex flex-col gap-4">
+        {projects.docs.map((project, index) => (
+          <Fragment key={index}>
+            <ProjectCard {...project} />
+            {index < projects.docs.length - 1 && <Rule />}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ProjectsPage;