feat: add about page

Squashed commit of the following:

commit f80247223cad7bc7ebcd4a7d8581762c9be37175
Author: Zhu Zhanyan <[email protected]>
Date:   Thu Jul 25 15:46:47 2024 +0800

    feat: add about page

commit f03c2a435d63f8c3db07dd0576af3458308ab6e7
Author: Zhu Zhanyan <[email protected]>
Date:   Thu Jul 25 15:46:18 2024 +0800

    refactor: allow StaticImageData to passed to SmoothImage component

app/about/page.tsx

@@ -0,0 +1,44 @@
+/*
+ * art.mrzzy.co
+ * Pages
+ * About
+ */
+
+import SmoothImage from "@/components/ui/smooth-image"
+import ProfileImg from "@/public/images/about/profile.png";
+import BackgroundImg from "@/public/images/about/background.png";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { NavItem } from "@/components/navigation/navitem";
+
+/**
+ * Renders the About pageA.
+*/
+export default function About() {
+  return (
+    <main className="md:my-8 p-8 flex flex-col md:flex-row mx-auto md:max-w-[80rem] gap-8">
+      <SmoothImage
+        className="object-contain basis-1/2" src={ProfileImg}
+        alt="Zhanyan painting" width={ProfileImg.width} height={ProfileImg.height} />
+      <div className="basis-1/2 flex flex-col gap-y-8">
+        <SmoothImage
+          className="hidden md:block object-contain w-[22rem]" src={BackgroundImg}
+          alt="Watercolor background" width={BackgroundImg.width} height={BackgroundImg.height} />
+        <h1 className="font-serif text-6xl">Zhu Zhanyan</h1>
+        <p>
+          is a Singaporean watercolorist. Welding the fluidity and transparency of the medium,
+          he primarily works En Plein Air to capture the light and atmosphere to capture of fleeting moment.
+          As self-taught artist, he work is influenced by likes of Thomas Schaller, Hazel Sloan & Joseph Zbukvic.
+        </p>
+        <div>
+          <Link
+            className={`${buttonVariants()}`}
+            href={NavItem.Gallery}
+          >
+            View Work &gt;
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

components/ui/smooth-image.tsx

@@ -10,6 +10,7 @@ import ExportedImage from "next-image-export-optimizer";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "./skeleton";
+import { StaticImageData } from "next/image";
 
 /**
  * Renders an smooth image at the given path under images.
@@ -18,10 +19,10 @@ import { Skeleton } from "./skeleton";
  * @param props Additional props are the same for ExportedImage.
  */
 export default function SmoothImage(props: {
-  src: string;
+  src: string | StaticImageData;
   alt: string;
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   className?: string;
   skeletonClassName?: string;
 }) {