fix: reimplement blurhasj

package.json

@@ -10,11 +10,13 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "blurhash": "^2.0.5",
     "clsx": "^2.1.1",
     "focus-trap-react": "^11.0.4",
     "next": "15.1.7",
     "nodemailer": "^6.10.0",
     "react": "^19.0.0",
+    "react-blurhash": "^0.3.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0"

src/components/sections/Hero.tsx

@@ -1,8 +1,36 @@
+"use client";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import { decode } from "blurhash";
 
 import nav_items from "@/data/nav_items.json";
 
+const HERO_BLURHASH = "LQFq2y}uGE5REMNawJn%RQaeso$*";
+
+function blurhashToBase64(blurhash: string, width = 32, height = 32): string {
+  const pixels = decode(blurhash, width, height);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const imageData = ctx.createImageData(width, height);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+
+  return canvas.toDataURL("image/jpeg", 0.5);
+}
+
 export default function Hero() {
+  const [blurDataURL, setBlurDataURL] = useState<string>("");
+
+  useEffect(() => {
+    setBlurDataURL(blurhashToBase64(HERO_BLURHASH, 32, 21));
+  }, []);
+
   return (
     <section id={nav_items[0]}>
       <h2 className="hidden">{nav_items[0]}</h2>
@@ -16,6 +44,8 @@ export default function Hero() {
           style={{ objectFit: "cover" }}
           priority={true}
           fetchPriority="high"
+          placeholder={blurDataURL ? "blur" : "empty"}
+          blurDataURL={blurDataURL || undefined}
         />
       </div>
       <div className="h-screen w-screen flex flex-col justify-center items-center">