feat: implement dark mode infrastructure, optimize images, and add SEO structured data

app/_ui/ProjectDetailClient.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 export type ProjectDetailData = {
   id: number;
@@ -130,8 +131,14 @@ export default function ProjectDetailClient({
           className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
         >
           {project.imageUrl ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src={project.imageUrl} alt={project.title} className="w-full h-full object-cover" />
+            <Image
+              src={project.imageUrl}
+              alt={project.title}
+              fill
+              className="object-cover"
+              priority
+              sizes="(max-width: 896px) 100vw, 896px"
+            />
           ) : (
             <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
               <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">