Revert "performance stuff"

This reverts commit 4b34e8a.

next.config.js

@@ -8,7 +8,6 @@ const withMDX = require("@next/mdx")();
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ["geist"],
-  swcMinify: true,
 };
 
 module.exports = withBundleAnalyzer(removeImports(withMDX(nextConfig)));

package.json

@@ -16,9 +16,6 @@
     "@next/mdx": "^14.0.3",
     "@nextui-org/react": "^2.2.9",
     "@prisma/client": "^5.6.0",
-    "@tsparticles/engine": "^3.2.1",
-    "@tsparticles/react": "^3.0.0",
-    "@tsparticles/slim": "^3.2.1",
     "@types/mdx": "^2.0.10",
     "@uiw/react-md-editor": "^4.0.1",
     "@vercel/speed-insights": "^1.0.9",
@@ -36,7 +33,10 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
+    "react-particles": "^2.12.2",
     "remark-gfm": "^4.0.0",
+    "tsparticles": "^2.12.0",
+    "tsparticles-interaction-particles-repulse": "^2.12.0",
     "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {

src/app/layout.tsx

@@ -3,23 +3,23 @@ import "@/styles/globals.css";
 import { Providers } from "@/app/providers";
 import React from "react";
 import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
 
 import dynamic from "next/dynamic";
 import Footer from "@/components/footer";
 import { Metadata } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 
-export const metadata: Metadata = {
-  title: "Badbird5907",
-  description: "My portfolio",
-};
-
 const Particles = dynamic(() => import("@/components/particles"), {
   ssr: false,
 });
 const Navbar = dynamic(() => import("@/components/nav/navbar"), {
   ssr: false,
 });
+export const metadata: Metadata = {
+  title: "Badbird5907",
+  description: "My portfolio",
+};
 export default function RootLayout({
   children,
 }: {
@@ -33,7 +33,7 @@ export default function RootLayout({
           <main className={`dark font-sans antialiased min-h-screen`}>
             <Particles />
             <Navbar />
-            {children}
+            <div className={"min-h-screen"}>{children}</div>
             <Footer />
           </main>
         </Providers>

src/components/framer/pop-in.tsx

@@ -11,8 +11,6 @@ type PopInProps = {
   className?: string;
 };
 const PopIn = ({ once = true, ...props }: PopInProps) => {
-  if (process.env.NEXT_PUBLIC_DISABLE_ANIMATIONS === "true")
-    return <div className={props.className}>{props.children}</div>;
   return (
     <motion.div
       className={props.className}

src/components/framer/slide.tsx

@@ -26,9 +26,6 @@ const Slide = ({
   component = motion.div,
   ...props
 }: SlideProps) => {
-  if (process.env.NEXT_PUBLIC_DISABLE_ANIMATIONS === "true")
-    return <div className={props.className}>{props.children}</div>;
-
   const Component = component;
   // the children should be hidden, and then while fading in, slide up
   if (props.stagger) {

src/components/particles.tsx

@@ -1,122 +1,110 @@
 "use client";
 
-import { IOptions, RecursivePartial } from "@tsparticles/engine";
+import { loadParticlesRepulseInteraction } from "tsparticles-interaction-particles-repulse";
 import {
-  initParticlesEngine,
-  Particles as ReactParticles,
-} from "@tsparticles/react";
+  Engine,
+  IOptions,
+  RecursivePartial,
+  tsParticles,
+} from "tsparticles-engine";
+import { Particles as ReactParticles } from "react-particles";
+import { loadFull } from "tsparticles";
 import colors from "tailwindcss/colors";
-import { useEffect, useMemo, useState } from "react";
-import { loadSlim } from "@tsparticles/slim";
 
 export default function Particles() {
-  /*
-  async function initOld(engine: Engine) {
+  async function init(engine: Engine) {
     await loadFull(engine);
-    await loadParticlesRepulseInteraction(tsParticles);
+    loadParticlesRepulseInteraction(tsParticles);
   }
 
-   */
-  const [init, setInit] = useState(false);
-  useEffect(() => {
-    initParticlesEngine(async (engine) => {
-      await loadSlim(engine);
-    }).then(() => setInit(true));
-  }, []);
-
-  const options = useMemo(() => {
-    return {
-      detectRetina: true,
-      interactivity: {
-        events: {
-          onClick: {
-            enable: false,
-          },
-          onHover: {
+  const options: RecursivePartial<IOptions> = {
+    detectRetina: true,
+    interactivity: {
+      events: {
+        onClick: {
+          enable: false,
+        },
+        onHover: {
+          enable: true,
+          mode: "repulse",
+          parallax: {
             enable: true,
-            mode: "repulse",
-            parallax: {
-              enable: true,
-              force: 80,
-              smooth: 80,
-            },
+            force: 80,
+            smooth: 80,
           },
-          // resize: true,
         },
-        modes: {
-          repulse: {
-            distance: 200,
-            duration: 0,
-            factor: 5,
-            speed: 1,
-          },
+        resize: true,
+      },
+      modes: {
+        repulse: {
+          distance: 200,
+          duration: 0,
+          factor: 5,
+          speed: 1,
         },
       },
-      fullScreen: {
-        zIndex: 0,
+    },
+    fullScreen: {
+      zIndex: 0,
+    },
+    particles: {
+      zIndex: {
+        value: 0,
       },
-      particles: {
-        zIndex: {
-          value: 0,
-        },
+      color: {
+        value: colors.blue[500],
+      },
+      links: {
+        enable: true,
         color: {
           value: colors.blue[500],
         },
-        links: {
-          enable: true,
-          color: {
-            value: colors.blue[500],
-          },
-          distance: 120,
-          opacity: 0.4,
-          width: 2,
-        },
-        move: {
+        distance: 120,
+        opacity: 0.4,
+        width: 2,
+      },
+      move: {
+        enable: true,
+        random: true,
+        speed: 3,
+      },
+      number: {
+        value: 60,
+        density: {
           enable: true,
-          random: true,
-          speed: 3,
+          area: 1000,
         },
-        number: {
-          value: 60,
-          density: {
-            enable: true,
-            // area: 1000,
-          },
+      },
+      opacity: {
+        value: {
+          max: 0.8,
+          min: 0.1,
         },
-        opacity: {
-          value: {
-            max: 0.8,
-            min: 0.1,
-          },
-          animation: {
-            enable: true,
-            speed: 0.4,
-          },
+        animation: {
+          enable: true,
+          speed: 0.4,
         },
-        shape: {
-          type: "circle",
+      },
+      shape: {
+        type: "circle",
+      },
+      size: {
+        value: {
+          max: 10,
+          min: 1,
         },
-        size: {
-          value: {
-            max: 10,
-            min: 1,
-          },
-          animation: {
-            enable: true,
-            speed: 5,
-          },
+        animation: {
+          enable: true,
+          speed: 5,
         },
       },
-    } as RecursivePartial<IOptions>;
-  }, []);
-  if (!init) {
-    return <></>;
-  }
+    },
+  };
 
   return (
     <ReactParticles
-      id="tsparticles"
       options={options}
+      init={init}
       className={"negativeZIndex"}
       style={{
         zIndex: "-1 !important",