From 9dc908954e34b26e40a7b5cdea08b010a4ba5b56 Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Mon, 2 Sep 2024 13:45:14 -0600
Subject: [PATCH 1/3] [feat] adding stardust animation on main page

---
 .../animations/StardustAnimation.tsx          | 58 +++++++++++++++++++
 frontend/gostarkme-web/app/page.tsx           | 20 ++++---
 .../components/welcomepage/WelcomeBar.tsx     |  6 +-
 3 files changed, 71 insertions(+), 13 deletions(-)
 create mode 100644 frontend/gostarkme-web/animations/StardustAnimation.tsx

diff --git a/frontend/gostarkme-web/animations/StardustAnimation.tsx b/frontend/gostarkme-web/animations/StardustAnimation.tsx
new file mode 100644
index 0000000..5d9470e
--- /dev/null
+++ b/frontend/gostarkme-web/animations/StardustAnimation.tsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from 'react';
+
+export const StardustAnimation = () => {
+    const canvasRef = useRef(null);
+  
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      let animationFrameId: number;
+  
+      // Set canvas size
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+  
+      // Create stars
+      const stars: { x: number; y: number; size: number; speed: number; }[] = [];
+      for (let i = 0; i < 200; i++) {
+        stars.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          size: Math.random() * 2.5,
+          speed: Math.random() * 0.5 + 0.2,
+        });
+      }
+  
+      // Animation function
+      const animate = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = 'gray';
+  
+        stars.forEach((star) => {
+          ctx.beginPath();
+          ctx.arc(star.x, star.y, star.size, 0, 2 * Math.PI);
+          ctx.fill();
+  
+          // Move star
+          star.y += star.speed;
+  
+          // Reset star position if it goes off screen
+          if (star.y > canvas.height) {
+            star.y = 0;
+            star.x = Math.random() * canvas.width;
+          }
+        });
+  
+        animationFrameId = requestAnimationFrame(animate);
+      };
+  
+      animate();
+  
+      // Clean up
+      return () => {
+        cancelAnimationFrame(animationFrameId);
+      };
+    }, []);
+  
+    return <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full" />;
+  };
\ No newline at end of file
diff --git a/frontend/gostarkme-web/app/page.tsx b/frontend/gostarkme-web/app/page.tsx
index 047314f..c0b2ac4 100644
--- a/frontend/gostarkme-web/app/page.tsx
+++ b/frontend/gostarkme-web/app/page.tsx
@@ -1,25 +1,27 @@
+'use client'
 import { LinkButton } from "@/components/ui/LinkButton";
 import { WelcomeBar } from "@/components/welcomepage/WelcomeBar";
 import { WelcomeItems } from "@/components/welcomepage/WelcomeItems";
 import Image from "next/image";
-import dotenv from 'dotenv';
+import { StardustAnimation } from "@/animations/StardustAnimation";
+
 export default function Home() {
-  dotenv.config();
-  const ROOT = process.env.ROOT;
+  const ROOT = process.env.NEXT_PUBLIC_APP_ROOT;
+  
   return (
     <main className="flex min-h-screen w-full flex-col items-center">
       <WelcomeBar />
       <section className="w-full max-w-screen-2xl grid grid-cols-1 md:grid-cols-2 p-10">
         <div className="justify-self-center flex flex-col  justify-center items-center md:items-start gap-4 p-4">
           <h1 className="text-4xl font-bold">Upload your cause</h1>
-          <WelcomeItems text="Give it a name." src={ROOT + "/icons/user.png"} />
-          <WelcomeItems text="Give a good purpose." src={ROOT + "/icons/target.png"} />
-          <WelcomeItems text="Recollect Stars." src={ROOT + "/icons/star.png"} />
-          <WelcomeItems text="Receive donations." src={ROOT + "/icons/starklogo.png"} />
+          <WelcomeItems text="Give it a name." src={ROOT + "icons/user.png"} />
+          <WelcomeItems text="Give a good purpose." src={ROOT + "icons/target.png"} />
+          <WelcomeItems text="Recollect Stars." src={ROOT + "icons/star.png"} />
+          <WelcomeItems text="Receive donations." src={ROOT + "icons/starklogo.png"} />
         </div>
-
+        <StardustAnimation />
         <Image
-          src={ROOT + "/images/starcard.png"}
+          src={ROOT + "images/starcard.png"}
           alt="stark logo"
           height={771}
           width={450}
diff --git a/frontend/gostarkme-web/components/welcomepage/WelcomeBar.tsx b/frontend/gostarkme-web/components/welcomepage/WelcomeBar.tsx
index 7cb0fe7..73422cc 100644
--- a/frontend/gostarkme-web/components/welcomepage/WelcomeBar.tsx
+++ b/frontend/gostarkme-web/components/welcomepage/WelcomeBar.tsx
@@ -1,17 +1,15 @@
 import Image from "next/image";
 import { LinkButton } from "../ui/LinkButton";
-import dotenv from 'dotenv'; 
 
 export const WelcomeBar = () => {
-  dotenv.config();
-  const ROOT = process.env.ROOT; 
+  const ROOT = process.env.NEXT_PUBLIC_APP_ROOT; 
   return (
     <nav className="sticky bg-white top-0 w-full z-20 border-b-[1px] border-darkblue m-2">
       <div className="max-w-screen-2xl mx-auto w-full p-4 flex flex-col md:flex-row items-center justify-between">
         <span className="w-20 md:w-28" />
         <div className="flex flex-col md:flex-row items-center gap-2 md:gap-4">
           <Image
-            src={ROOT +"/icons/starklogo.png"}
+            src={ROOT +"icons/starklogo.png"}
             alt="stark logo"
             width={24}
             height={24}

From ae6e098b97815705fb4ef53cba884437b66e95fc Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Mon, 2 Sep 2024 13:49:53 -0600
Subject: [PATCH 2/3] [fix] canvas might be null

---
 frontend/gostarkme-web/animations/StardustAnimation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/gostarkme-web/animations/StardustAnimation.tsx b/frontend/gostarkme-web/animations/StardustAnimation.tsx
index 5d9470e..a64467a 100644
--- a/frontend/gostarkme-web/animations/StardustAnimation.tsx
+++ b/frontend/gostarkme-web/animations/StardustAnimation.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
 export const StardustAnimation = () => {
-    const canvasRef = useRef(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
   
     useEffect(() => {
       const canvas = canvasRef.current;

From 3b15fd4c8a451d4f68e58468965c6c5d4ba9ce21 Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Mon, 2 Sep 2024 13:52:30 -0600
Subject: [PATCH 3/3] [fix] ctx might be null

---
 frontend/gostarkme-web/animations/StardustAnimation.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/gostarkme-web/animations/StardustAnimation.tsx b/frontend/gostarkme-web/animations/StardustAnimation.tsx
index a64467a..da9d5c1 100644
--- a/frontend/gostarkme-web/animations/StardustAnimation.tsx
+++ b/frontend/gostarkme-web/animations/StardustAnimation.tsx
@@ -5,7 +5,9 @@ export const StardustAnimation = () => {
   
     useEffect(() => {
       const canvas = canvasRef.current;
+      if (canvas == null) return;
       const ctx = canvas.getContext('2d');
+      if (ctx == null) return;
       let animationFrameId: number;
   
       // Set canvas size