refactor + webp background

abhishekg999 · Oct 20, 2024 · 7cf1418 · 7cf1418
1 parent 697289a
commit 7cf1418
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/public/min/background-min.webp b/public/min/background-min.webp
diff --git a/src/app.tsx b/src/app.tsx
@@ -11,13 +11,7 @@ export function App() {
     <>
       <div className="flex flex-col min-h-[100dvh] relative">
         <Background />
-        <div className="absolute inset-0 z-0 pointer-events-none">
-          {/** Very light gradients overlaying the image */}
-          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
-          <div className="absolute inset-0 bg-gradient-to-t from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
-          <div className="absolute inset-0 bg-gradient-to-r from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
-          <div className="absolute inset-0 bg-gradient-to-l from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
-        </div>
+
         <LocationProvider>
           <Navbar />
           <Router>

diff --git a/src/components/Background.tsx b/src/components/Background.tsx
@@ -6,14 +6,20 @@ export function Background() {
 
     // TODO: maybe have some loading screen while the image loads...
     return (
-        <>
+        <div className="absolute inset-0 z-0 pointer-events-none">
+            {/** Very light gradients overlaying the image */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
+            <div className="absolute inset-0 bg-gradient-to-t from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
+            <div className="absolute inset-0 bg-gradient-to-l from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
+
             {/** Background image, always full size */}
             <img
-                src="/min/background-min.jpg"
+                src="/min/background-min.webp"
                 className="w-full h-full fixed inset-0 object-cover object-right-top opacity-40 z-[-1]"
                 alt=""
                 onLoad={() => setLoaded(true)}
             />
-        </>
+        </div>
     )
-}
+}