Skip to content

Commit

Permalink
performance stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
Badbird5907 committed Feb 7, 2024
1 parent 01f0b89 commit 4b34e8a
Show file tree
Hide file tree
Showing 7 changed files with 371 additions and 447 deletions.
1 change: 1 addition & 0 deletions next.config.js
Expand Up @@ -8,6 +8,7 @@ const withMDX = require("@next/mdx")();
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["geist"],
swcMinify: true,
};

module.exports = withBundleAnalyzer(removeImports(withMDX(nextConfig)));
6 changes: 3 additions & 3 deletions package.json
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
12 changes: 6 additions & 6 deletions src/app/layout.tsx
Expand Up @@ -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,
}: {
Expand All @@ -31,7 +31,7 @@ export default function RootLayout({
<main className={`dark font-sans antialiased min-h-screen`}>
<Particles />
<Navbar />
<div className={"min-h-screen"}>{children}</div>
{children}
<Footer />
</main>
</Providers>
Expand Down
2 changes: 2 additions & 0 deletions src/components/framer/pop-in.tsx
Expand Up @@ -11,6 +11,8 @@ 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}
Expand Down
3 changes: 3 additions & 0 deletions src/components/framer/slide.tsx
Expand Up @@ -26,6 +26,9 @@ 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) {
Expand Down
168 changes: 90 additions & 78 deletions 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<IOptions> = {
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<IOptions>;
}, []);
if (!init) {
return <></>;
}

return (
<ReactParticles
id="tsparticles"
options={options}
init={init}
className={"negativeZIndex"}
style={{
zIndex: "-1 !important",
Expand Down

0 comments on commit 4b34e8a

Please sign in to comment.