Merge pull request #12 from gmook9/dev

changes to home

src/app/components/Card.tsx

@@ -32,4 +32,4 @@ const Card: React.FC<CardProps> = ({ imageUrl, cardName, cardBodyText, btnColor,
   );
 };
 
-export default Card;
+export default Card;

src/app/components/CodeBlock.tsx

@@ -18,4 +18,4 @@ const CodeBlock: React.FC = () => {
   );
 };
 
-export default CodeBlock;
+export default CodeBlock;

src/app/home/page.tsx

@@ -1,14 +1,106 @@
-import React from 'react';
+'use client'
+import React, { useEffect, useMemo, useState } from 'react';
+import Particles, { initParticlesEngine } from '@tsparticles/react';
+import { loadSlim } from '@tsparticles/slim';
+import { type ISourceOptions, MoveDirection, OutMode } from '@tsparticles/engine';
 import Card from '../components/Card';
 import Avatar from '../components/Avatar';
 
 const Home: React.FC = () => {
+  const [init, setInit] = useState(false);
+
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+
+  const particlesLoaded = async (container?: any): Promise<void> => {
+    console.log(container);
+  };
+
+  const options: ISourceOptions = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: '#1a202c',
+        },
+      },
+      fpsLimit: 120,
+      interactivity: {
+        events: {
+          onClick: {
+            enable: true,
+            mode: 'push',
+          },
+          onHover: {
+            enable: true,
+            mode: 'repulse',
+          },
+        },
+        modes: {
+          push: {
+            quantity: 4,
+          },
+          repulse: {
+            distance: 200,
+            duration: 0.4,
+          },
+        },
+      },
+      particles: {
+        color: {
+          value: '#ffffff',
+        },
+        links: {
+          color: '#ffffff',
+          distance: 150,
+          enable: true,
+          opacity: 0.5,
+          width: 1,
+        },
+        move: {
+          direction: MoveDirection.none,
+          enable: true,
+          outModes: {
+            default: OutMode.out,
+          },
+          random: true,
+          speed: 1,
+          straight: false,
+        },
+        number: {
+          density: {
+            enable: true,
+          },
+          value: 80,
+        },
+        opacity: {
+          value: 0.5,
+        },
+        shape: {
+          type: 'star',
+        },
+        size: {
+          value: { min: 1, max: 5 },
+        },
+      },
+      detectRetina: true,
+    }),
+    []
+  );
+
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white pb-16">
-      <div className="mb-8 pt-4">
+    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white pb-16 overflow-hidden">
+      {init && (
+        <Particles id="tsparticles" particlesLoaded={particlesLoaded} options={options} />
+      )}
+      <div className="relative z-10 mb-8 pt-4">
         <Avatar />
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div className="relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
         <Card
           imageUrl="/images/githubLogo.png"
           cardName="GitHub"
@@ -54,4 +146,4 @@ const Home: React.FC = () => {
   );
 };
 
-export default Home;
+export default Home;