add gradient BG

components/GradientBG.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { Gradient } from '../Gradient.js'
+
+
+export const GradientBG = () =>{
+    // Create your instance
+    const gradient = new Gradient();
+
+    useEffect(() => {
+        // Call `initGradient` with the selector to your canvas
+        gradient.initGradient('#gradient-background')
+    }, []);
+
+    return (
+        <canvas className='-z-40 w-screen h-screen fixed top-0 left-0'  id="gradient-background" data-transition-in />
+    );
+};
+
+        

layouts/MainLayout.tsx

@@ -1,10 +1,13 @@
 import { PropsWithChildren } from "react";
+
+import { GradientBG } from '../components/GradientBG';
 import { Navbar } from "../components/Navbar";
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className="w-full">
       <Navbar />
+      <GradientBG />
       <main className="xl:p-10 p-4 px-10 xl:mx-0">{children}</main>
     </div>
   );

package.json

@@ -30,7 +30,8 @@
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.1",
     "remark-smartypants": "^2.0.0",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@types/react-syntax-highlighter": "^15.5.5",

styles/globals.css

@@ -47,4 +47,15 @@ h4 > a:hover::before {
 
 div > code, pre > code {
   @apply p-0 m-0 !important
-}
+}
+
+#gradient-background {
+  width:100%;
+  height:100%;
+  fill: rgba(0, 0, 0, 0.6);
+  --gradient-color-1: #161926; 
+  --gradient-color-2: #1E96FC; 
+  --gradient-color-3: #FF3366;  
+  --gradient-color-4: #1b2034;
+}
+