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 (