upgrade

frontend/src/pages/home/home.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import HeroCarousel from "../../components/hero/HeroCarousel";
+import PortfolioGrid from "../../components/portfolio/PortfolioGrid";
+import TradingGraph from "../../components/trading/TradingGraph";
+import DonationShop from "../../components/donate/DonationShop";
+import SkillsSection from "../../components/skills/SkillsSection";
+import HostingSecuritySection from "../../components/hosting/HostingSecuritySection";
+
+export default function Home() {
+  // Optional: keep spark effect for fun
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const spark = document.createElement("div");
+      spark.className = "spark-cursor";
+      document.body.appendChild(spark);
+      spark.style.top = `${event.pageY}px`;
+      spark.style.left = `${event.pageX}px`;
+      for (let i = 0; i < 8; i++) {
+        const span = document.createElement("span");
+        span.style.transform = `rotate(${i * 45}deg)`;
+        spark.appendChild(span);
+      }
+      setTimeout(() => {
+        spark.querySelectorAll("span").forEach((s) => {
+          (s as HTMLElement).classList.add("animate");
+        });
+      }, 10);
+      setTimeout(() => spark.remove(), 1000);
+    };
+    document.body.addEventListener("click", handleClick);
+    return () => document.body.removeEventListener("click", handleClick);
+  }, []);
+
+  return (
+    <main>
+      <HeroCarousel />
+      <div className="divider" />
+      <PortfolioGrid />
+      <div className="divider" />
+      <TradingGraph />
+      <div className="divider" />
+      <DonationShop />
+      <div className="divider" />
+      <SkillsSection />
+      <div className="divider" />
+      <HostingSecuritySection />
+    </main>
+  );
+}