From 4ffe98c03b6b85173d920ead23820aefc45ba14a Mon Sep 17 00:00:00 2001
From: Nguyen-The-Lap <91041708+Nguyen-The-Lap@users.noreply.github.com>
Date: Tue, 27 Jan 2026 18:23:38 +0000
Subject: [PATCH 1/2] remove dot cursor

---
 src/App.css |  54 -----------------------
 src/App.js  | 124 ++++++++--------------------------------------------
 2 files changed, 18 insertions(+), 160 deletions(-)

diff --git a/src/App.css b/src/App.css
index 10ff32b..b4e03d5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -40,60 +40,6 @@ html, body {
   min-height: 100%;
 }
 
-/* Custom Cursor Styles */
-.cursor-dot {
-  width: 10px;
-  height: 10px;
-  background-color: var(--primary);
-  position: fixed;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 9999;
-  transform: translate(-50%, -50%);
-  transition: transform 0.2s ease, background-color 0.2s ease;
-  will-change: transform;
-  left: 0;
-  top: 0;
-}
-
-/* Hide default cursor */
-*, *::before, *::after, a, button, [role="button"], input, textarea, select, [tabindex] {
-  cursor: none !important;
-}
-
-/* Hover effects for interactive elements */
-a:hover ~ .cursor-dot,
-button:hover ~ .cursor-dot,
-[role="button"]:hover ~ .cursor-dot,
-[tabindex]:hover ~ .cursor-dot {
-  transform: translate(-50%, -50%) scale(1.8);
-  background-color: var(--accent);
-}
-
-/* Ensure cursor stays on top of all elements */
-.cursor-dot {
-  z-index: 2147483647; /* Maximum z-index */
-}
-
-/* Click effect */
-@keyframes click {
-  0% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0.7;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-}
-
-.cursor-dot.click {
-  animation: click 0.3s ease-out;
-}
 
 /* Body styles */
 body {
diff --git a/src/App.js b/src/App.js
index e30488a..0cbc885 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, lazy } from "react";
+import React, { useRef, useEffect, useState, lazy, Suspense, startTransition } from "react";
 import "./App.css";
 import membersData from "./data/notion_member.json";
 import { performanceConfig } from "./config/performance";
@@ -35,68 +35,6 @@ const FadeInOnScroll = lazy(
   () => import("./components/FadeInOnScroll/FadeInOnScroll"),
 );
 
-// Custom Cursor Component
-const CustomCursor = () => {
-  const cursorDot = useRef(null);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [isActive, setIsActive] = useState(false);
-
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      setPosition({ x: e.clientX, y: e.clientY });
-    };
-
-    const handleMouseDown = () => {
-      setIsActive(true);
-      setTimeout(() => setIsActive(false), 100);
-    };
-
-    const handleLinkHover = () => {
-      if (cursorDot.current) {
-        cursorDot.current.classList.add("active");
-      }
-    };
-
-    const handleLinkLeave = () => {
-      if (cursorDot.current) {
-        cursorDot.current.classList.remove("active");
-      }
-    };
-
-    // Add event listeners
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mousedown", handleMouseDown);
-
-    // Add hover effects for interactive elements
-    const interactiveElements = document.querySelectorAll(
-      'a, button, [role="button"], [tabindex]',
-    );
-    interactiveElements.forEach((el) => {
-      el.addEventListener("mouseenter", handleLinkHover);
-      el.addEventListener("mouseleave", handleLinkLeave);
-    });
-
-    return () => {
-      // Cleanup
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mousedown", handleMouseDown);
-      interactiveElements.forEach((el) => {
-        el.removeEventListener("mouseenter", handleLinkHover);
-        el.removeEventListener("mouseleave", handleLinkLeave);
-      });
-    };
-  }, []);
-
-  return (
-    <div
-      ref={cursorDot}
-      className={`cursor-dot ${isActive ? "active" : ""}`}
-      style={{
-        transform: `translate(${position.x}px, ${position.y}px)`,
-      }}
-    />
-  );
-};
 
 const BackgroundDecorations = () => {
   const randomPositions = Array.from({ length: 20 }, () => ({
@@ -303,57 +241,30 @@ function App() {
       }
     `;
 
-    const cursorStyles = document.createElement("style");
-    cursorStyles.innerHTML = `
-      /* Hide all default cursors */
-      *, *::before, *::after, a, button, [role="button"], input, textarea, select, [tabindex] {
-        cursor: none !important;
-      }
-      
-      /* Custom dot cursor - consistent style */
-      .cursor-dot {
-        width: 10px;
-        height: 10px;
-        background-color: var(--primary);
-        position: fixed;
-        border-radius: 50%;
-        pointer-events: none;
-        z-index: 9999;
-        transform: translate(-50%, -50%);
-        transition: none;
-        mix-blend-mode: difference;
-        will-change: transform;
-        left: 0;
-        top: 0;
-      }
-    `;
-    document.head.appendChild(cursorStyles);
     document.head.appendChild(styleElement);
 
     return () => {
-      document.head.removeChild(cursorStyles);
       document.head.removeChild(styleElement);
     };
   }, []);
 
   return (
-    <div
-      className="app-cursor"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        position: "relative",
-        overflow: "hidden",
-        background: "linear-gradient(180deg, #0a0e17 0%, #0f1a26 100%)",
-        zIndex: 1,
-        paddingBottom: 0,
-        margin: 0,
-        cursor: "none",
-      }}
-    >
-      <CustomCursor />
-      <BackgroundDecorations />
+    <Suspense fallback={<div style={{color: 'white', textAlign: 'center', padding: '2rem'}}>Loading...</div>}>
+      <div
+        className="app-cursor"
+        style={{
+          minHeight: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          overflow: "hidden",
+          background: "linear-gradient(180deg, #0a0e17 0%, #0f1a26 100%)",
+          zIndex: 1,
+          paddingBottom: 0,
+          margin: 0,
+        }}
+      >
+        <BackgroundDecorations />
       <div
         style={{
           flex: "0 1 auto",
@@ -1140,6 +1051,7 @@ function App() {
         </FadeInOnScroll>
       </div>
     </div>
+    </Suspense>
   );
 }
 

From b2dc93a79825afa6583ee313e06d3e06803acf4e Mon Sep 17 00:00:00 2001
From: Nguyen-The-Lap <91041708+Nguyen-The-Lap@users.noreply.github.com>
Date: Wed, 28 Jan 2026 04:19:53 +0700
Subject: [PATCH 2/2] Remove unused imports from App.js

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 0cbc885..89b72e9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, lazy, Suspense, startTransition } from "react";
+import React, { useEffect, useState, lazy, Suspense } from "react";
 import "./App.css";
 import membersData from "./data/notion_member.json";
 import { performanceConfig } from "./config/performance";