From 4b34e8a41330d2ae5364fd5782d6b4cbe24a6be3 Mon Sep 17 00:00:00 2001
From: Badbird5907 <50347938+Badbird5907@users.noreply.github.com>
Date: Tue, 6 Feb 2024 21:46:25 -0500
Subject: [PATCH] performance stuff
---
next.config.js | 1 +
package.json | 6 +-
src/app/layout.tsx | 12 +-
src/components/framer/pop-in.tsx | 2 +
src/components/framer/slide.tsx | 3 +
src/components/particles.tsx | 168 +++++----
yarn.lock | 626 +++++++++++++------------------
7 files changed, 371 insertions(+), 447 deletions(-)
diff --git a/next.config.js b/next.config.js
index 09b2bdd..f686d51 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,6 +8,7 @@ const withMDX = require("@next/mdx")();
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["geist"],
+ swcMinify: true,
};
module.exports = withBundleAnalyzer(removeImports(withMDX(nextConfig)));
diff --git a/package.json b/package.json
index f89e1a5..9531204 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,9 @@
"@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",
"axios": "^1.6.2",
@@ -32,10 +35,7 @@
"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": {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fdc90c7..53bcd68 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,22 +3,22 @@ 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";
+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,
}: {
@@ -31,7 +31,7 @@ export default function RootLayout({
- {children}
+ {children}
diff --git a/src/components/framer/pop-in.tsx b/src/components/framer/pop-in.tsx
index d15b3c9..994c11c 100644
--- a/src/components/framer/pop-in.tsx
+++ b/src/components/framer/pop-in.tsx
@@ -11,6 +11,8 @@ type PopInProps = {
className?: string;
};
const PopIn = ({ once = true, ...props }: PopInProps) => {
+ if (process.env.NEXT_PUBLIC_DISABLE_ANIMATIONS === "true")
+ return {props.children}
;
return (
{
+ if (process.env.NEXT_PUBLIC_DISABLE_ANIMATIONS === "true")
+ return {props.children}
;
+
const Component = component;
// the children should be hidden, and then while fading in, slide up
if (props.stagger) {
diff --git a/src/components/particles.tsx b/src/components/particles.tsx
index 220e033..2f37491 100644
--- a/src/components/particles.tsx
+++ b/src/components/particles.tsx
@@ -1,110 +1,122 @@
"use client";
-import { loadParticlesRepulseInteraction } from "tsparticles-interaction-particles-repulse";
+import { IOptions, RecursivePartial } from "@tsparticles/engine";
import {
- Engine,
- IOptions,
- RecursivePartial,
- tsParticles,
-} from "tsparticles-engine";
-import { Particles as ReactParticles } from "react-particles";
-import { loadFull } from "tsparticles";
+ initParticlesEngine,
+ Particles as ReactParticles,
+} from "@tsparticles/react";
import colors from "tailwindcss/colors";
+import { useEffect, useMemo, useState } from "react";
+import { loadSlim } from "@tsparticles/slim";
export default function Particles() {
- async function init(engine: Engine) {
+ /*
+ async function initOld(engine: Engine) {
await loadFull(engine);
- loadParticlesRepulseInteraction(tsParticles);
+ await loadParticlesRepulseInteraction(tsParticles);
}
- const options: RecursivePartial = {
- detectRetina: true,
- interactivity: {
- events: {
- onClick: {
- enable: false,
- },
- onHover: {
- enable: true,
- mode: "repulse",
- parallax: {
+ */
+ 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: {
enable: true,
- force: 80,
- smooth: 80,
+ mode: "repulse",
+ parallax: {
+ enable: true,
+ force: 80,
+ smooth: 80,
+ },
},
+ // resize: true,
},
- resize: true,
- },
- modes: {
- repulse: {
- distance: 200,
- duration: 0,
- factor: 5,
- speed: 1,
+ modes: {
+ repulse: {
+ distance: 200,
+ duration: 0,
+ factor: 5,
+ speed: 1,
+ },
},
},
- },
- fullScreen: {
- zIndex: 0,
- },
- particles: {
- zIndex: {
- value: 0,
- },
- color: {
- value: colors.blue[500],
+ fullScreen: {
+ zIndex: 0,
},
- links: {
- enable: true,
+ particles: {
+ zIndex: {
+ value: 0,
+ },
color: {
value: colors.blue[500],
},
- distance: 120,
- opacity: 0.4,
- width: 2,
- },
- move: {
- enable: true,
- random: true,
- speed: 3,
- },
- number: {
- value: 60,
- density: {
+ links: {
enable: true,
- area: 1000,
- },
- },
- opacity: {
- value: {
- max: 0.8,
- min: 0.1,
+ color: {
+ value: colors.blue[500],
+ },
+ distance: 120,
+ opacity: 0.4,
+ width: 2,
},
- animation: {
+ move: {
enable: true,
- speed: 0.4,
+ random: true,
+ speed: 3,
},
- },
- shape: {
- type: "circle",
- },
- size: {
- value: {
- max: 10,
- min: 1,
+ number: {
+ value: 60,
+ density: {
+ enable: true,
+ // area: 1000,
+ },
},
- animation: {
- enable: true,
- speed: 5,
+ opacity: {
+ value: {
+ max: 0.8,
+ min: 0.1,
+ },
+ animation: {
+ enable: true,
+ speed: 0.4,
+ },
+ },
+ shape: {
+ type: "circle",
+ },
+ size: {
+ value: {
+ max: 10,
+ min: 1,
+ },
+ animation: {
+ enable: true,
+ speed: 5,
+ },
},
},
- },
- };
+ } as RecursivePartial;
+ }, []);
+ if (!init) {
+ return <>;
+ }
return (