diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1b938ef..0b6d487 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
import Footer from "../components/footer/Footer";
import type { Metadata } from "next";
import "./globals.css";
-import "./stars.css";
+import Stars from "@/components/stars/stars";
import { FloatingNav } from "@/components/navbar/FloatingNav";
export const metadata: Metadata = {
@@ -40,9 +40,7 @@ export default function RootLayout({
return (
-
-
-
+
{children}
diff --git a/src/components/stars/stars.module.css b/src/components/stars/stars.module.css
new file mode 100644
index 0000000..bc6d360
--- /dev/null
+++ b/src/components/stars/stars.module.css
@@ -0,0 +1,25 @@
+@keyframes starAnimation {
+ from {
+ transform: translateY(100vh);
+ opacity: 1;
+ }
+ to {
+ transform: translateY(-100vh);
+ opacity: 0;
+ }
+}
+
+.stars {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ z-index: 0; /* Behind all content */
+ overflow: hidden;
+}
+
+.star {
+ position: absolute;
+ background-color: white;
+ border-radius: 50%;
+ animation: starAnimation linear infinite;
+}
diff --git a/src/components/stars/stars.tsx b/src/components/stars/stars.tsx
new file mode 100644
index 0000000..193c5d4
--- /dev/null
+++ b/src/components/stars/stars.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { useEffect } from "react";
+import styles from "./stars.module.css";
+
+interface StarsProps {
+ starCount?: number;
+}
+
+const Stars: React.FC = ({ starCount = 50 }) => {
+ useEffect(() => {
+ const starsContainer = document.getElementById("stars-container");
+
+ if (starsContainer) {
+ for (let i = 0; i < starCount; i++) {
+ const star = document.createElement("div");
+ star.className = styles.star;
+
+ const size = `${Math.random() * 2 + 1}px`;
+ star.style.width = size;
+ star.style.height = size;
+
+ star.style.left = `${Math.random() * 100}%`;
+ star.style.top = `${Math.random() * 100}vh`;
+
+ // Random animation duration between 20 and 40s
+ star.style.animationDuration = `${Math.random() * 20 + 20}s`;
+
+ star.style.animationDelay = "0s";
+ starsContainer.appendChild(star);
+ }
+ }
+ }, [starCount]);
+
+ return ;
+};
+
+export default Stars;