From 2504037f26bff8e5eb14edca20e29bde7cf1f463 Mon Sep 17 00:00:00 2001 From: Alvalen Date: Fri, 18 Jul 2025 05:38:12 +0700 Subject: [PATCH] fix: implement blurDataURL --- app/projects/(project-card)/index.jsx | 3 ++- app/projects/[slug]/page.jsx | 3 ++- app/projects/components/ProjectCard.jsx | 3 ++- public/image/placeholder/blur.jpg | Bin 0 -> 18791 bytes 4 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 public/image/placeholder/blur.jpg diff --git a/app/projects/(project-card)/index.jsx b/app/projects/(project-card)/index.jsx index a4e8882..17aa3c9 100644 --- a/app/projects/(project-card)/index.jsx +++ b/app/projects/(project-card)/index.jsx @@ -2,6 +2,7 @@ import Link from "next/link"; import Image from "next/image"; import { motion } from "framer-motion"; import PropTypes from "prop-types"; +import BlurImage from "@/public/image/placeholder/blur.jpg"; export default function ProjectCard({ project, index, activeCategory }) { return ( @@ -28,7 +29,7 @@ export default function ProjectCard({ project, index, activeCategory }) { objectFit="cover" placeholder="blur" className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500" - blurDataURL={project.thumbnail} + blurDataURL={BlurImage.src} />

{project.year}

diff --git a/app/projects/[slug]/page.jsx b/app/projects/[slug]/page.jsx index 88b6a63..f415ccf 100644 --- a/app/projects/[slug]/page.jsx +++ b/app/projects/[slug]/page.jsx @@ -8,6 +8,7 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; import NotFound from "@/app/not-found"; import Image from "next/image"; +import BlurImage from "@/public/image/placeholder/blur.jpg"; import FixedButon from "@/components/FixedButton"; import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; @@ -199,7 +200,7 @@ function Page(props) { className="mb-5 h-auto max-h-screen max-w-7xl mx-auto" width={1920} height={1080} - blurDataURL={image} + blurDataURL={BlurImage.src} layout="responsive" objectFit="contain" /> diff --git a/app/projects/components/ProjectCard.jsx b/app/projects/components/ProjectCard.jsx index a4e8882..17aa3c9 100644 --- a/app/projects/components/ProjectCard.jsx +++ b/app/projects/components/ProjectCard.jsx @@ -2,6 +2,7 @@ import Link from "next/link"; import Image from "next/image"; import { motion } from "framer-motion"; import PropTypes from "prop-types"; +import BlurImage from "@/public/image/placeholder/blur.jpg"; export default function ProjectCard({ project, index, activeCategory }) { return ( @@ -28,7 +29,7 @@ export default function ProjectCard({ project, index, activeCategory }) { objectFit="cover" placeholder="blur" className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500" - blurDataURL={project.thumbnail} + blurDataURL={BlurImage.src} />

{project.year}

diff --git a/public/image/placeholder/blur.jpg b/public/image/placeholder/blur.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a73bcad2e2476de0dc3a3f379f0a3fe4e4e6e237 GIT binary patch literal 18791 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 bgUA!!t%+VmRzAq5*fHJ{2$GY(y7IpPnp=XK literal 0 HcmV?d00001