feat: add art component (#26)

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/26
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/app/art/page.tsx

@@ -0,0 +1,24 @@
+import { ArtComponent } from "@/components/art";
+import { Rule } from "@/components/rule";
+import { Art } from "@/config/Art";
+
+const Arts = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+        <h1 className="text-5xl">Art</h1>
+        <section>
+          <p className="mb-2">See various art depicting Naomi.</p>
+          <Rule />
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
+            {Art.sort((a, b) => a.name.localeCompare(b.name)).map((art) => (
+              <ArtComponent key={art.name} name={art.name} img={art.img} artist={art.artist} url={art.url}/>
+            ))}
+          </div>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Arts;