From e3b0079a901d3803b0e03a514a1f330b330f1ec5 Mon Sep 17 00:00:00 2001
From: Fascinated <admin@fascinated.cc>
Date: Wed, 12 Jul 2023 10:43:14 +0100
Subject: [PATCH] migrate background image to a nextjs image

---
 config.json      |  2 +-
 src/app/page.tsx | 33 ++++++++++++++-------------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/config.json b/config.json
index 948c4f2..5b6c866 100644
--- a/config.json
+++ b/config.json
@@ -4,7 +4,7 @@
   "description": "A description about yourself",
   "avatar": "/avatar.webp",
   "background": {
-    "showBackground": true,
+    "showBackground": false,
     "blur": true,
     "darken": {
       "enabled": true,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 79366a3..7106422 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -46,26 +46,21 @@ export default function Home() {
   return (
     <>
       <main
-        className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
+        className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-800 ${selectedTheme.textColor}`}
       >
-        <div
-          className={`absolute inset-0 filter w-screen h-screen ${
-            background.blur && "blur-sm"
-          }`}
-          style={
-            background.showBackground
-              ? {
-                  zIndex: 0,
-                  background: background.darken.enabled
-                    ? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
-                    url(${background.backgroundImage})`
-                    : `url(${background.backgroundImage})`,
-                  backgroundSize: "cover",
-                  backgroundBlendMode: "multiply",
-                }
-              : {}
-          }
-        ></div>
+        {background.showBackground && background.backgroundImage && (
+          <Image
+            alt="Background image"
+            src={background.backgroundImage}
+            fill={true}
+            style={{
+              zIndex: 0,
+              filter: `${background.blur && "blur(4px)"} brightness(${
+                background.darken.enabled && background.darken.amount / 2
+              })`,
+            }}
+          />
+        )}
         <div
           className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
           style={{