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

app/components/CurrentlyReading.tsx

@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import { BookOpen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 interface CurrentlyReading {
   title: string;
@@ -107,11 +108,12 @@ const CurrentlyReading = () => {
                 className="flex-shrink-0"
               >
                 <div className="relative w-24 h-36 sm:w-28 sm:h-40 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
-                  <img
+                  <Image
                     src={book.image}
                     alt={book.title}
-                    className="w-full h-full object-cover"
-                    loading="lazy"
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 640px) 96px, 112px"
                   />
                   {/* Glossy Overlay */}
                   <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />