feat: Portfolio, Contact Us

components/StarBackground/StarBackground.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Particles from 'react-tsparticles';
+import particlesConfig from "./particles.config.js";
+import { loadFull } from "tsparticles";
+
+const StarBackground: React.FC = () => {
+    async function loadParticles(main: any){
+        await loadFull(main)
+    }
+  return (
+    <Particles
+      id="star-background"
+      init={loadParticles}
+      options={particlesConfig}
+      style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%' }}
+    />
+  );
+};
+
+export default StarBackground;

components/StarBackground/particles.config.js

@@ -0,0 +1,23 @@
+
+export default {
+    particles: {
+      number: {
+        value: 100, 
+      },
+      size: {
+        value: 2, // 
+      shape: {
+        type: 'star', 
+      },
+      color: {
+        value: '#ffffff', 
+      },
+      opacity: {
+        value: 0.8,
+      },
+      move: {
+        speed: 0.5, 
+      },
+    },
+  }
+}