From fb95f5fbc219bbd9deba3881e3671ea75c283545 Mon Sep 17 00:00:00 2001 From: Miran Date: Mon, 23 Dec 2024 18:28:00 +0530 Subject: [PATCH 1/2] fix: word breaking in about --- src/components/AboutUs/index.jsx | 23 ++++++++++------------- src/pages/About/index.jsx | 2 +- src/pages/Teams/TeamMember.jsx | 3 ++- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/AboutUs/index.jsx b/src/components/AboutUs/index.jsx index 12ac5ee..b006a4a 100644 --- a/src/components/AboutUs/index.jsx +++ b/src/components/AboutUs/index.jsx @@ -89,28 +89,25 @@ export default function AboutSection() { useEffect(() => { const paragraph = paragraphRef.current; - const originalSpan = paragraph.querySelector(".text-primary"); - const highlightedText = originalSpan.textContent; - // Split all text nodes while preserving the special span const splitText = (node) => { if (node.nodeType === 3) { // Text node - const letters = node.textContent.split(""); - const fragments = letters.map((letter) => { + const words = node.textContent.split(" "); + const fragments = words.map((word) => { const span = document.createElement("span"); span.className = "inline-block letter-span"; - span.innerHTML = letter === " " ? " " : letter; + span.innerHTML = `${word} `; return span; }); node.replaceWith(...fragments); } else if (node.classList?.contains("text-primary")) { // For highlighted text, split but add special class - const letters = node.textContent.split(""); - const fragments = letters.map((letter) => { + const words = node.textContent.split(" "); + const fragments = words.map((word) => { const span = document.createElement("span"); span.className = "inline-block letter-span highlighted"; - span.innerHTML = letter === " " ? " " : letter; + span.innerHTML = `${word}} `; return span; }); node.replaceWith(...fragments); @@ -137,7 +134,7 @@ export default function AboutSection() { // Animate regular text tl.fromTo( paragraph.querySelectorAll(".letter-span:not(.highlighted)"), - { color: "#595959" }, + { color: "transparent" }, { color: "#B7AB98", stagger: 0.02, @@ -148,7 +145,7 @@ export default function AboutSection() { // Animate highlighted text tl.fromTo( paragraph.querySelectorAll(".highlighted"), - { color: "#595959" }, + { color: "transparent" }, { color: "#E76941", stagger: 0.02, @@ -177,10 +174,10 @@ export default function AboutSection() { ref={paragraphRef} className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold" > - Codex is the coding club at{" "} + Codex is the coding club at Symbiosis Institute of Technology - {" "} + that brings together students passionate about technology and programming. Our club is committed to creating an engaging environment where members can learn, collaborate, and grow their diff --git a/src/pages/About/index.jsx b/src/pages/About/index.jsx index ea1bf1b..a2596bc 100644 --- a/src/pages/About/index.jsx +++ b/src/pages/About/index.jsx @@ -1,9 +1,9 @@ import { useEffect, useState, useRef } from "react"; -import Heading from "@/components/Heading/index"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Oval from "@/assets/images/About/oval.svg"; import PageTransition from "../../components/PageTransition"; +import Heading from "@/components/Heading/index"; import "./About.css"; gsap.registerPlugin(ScrollTrigger); diff --git a/src/pages/Teams/TeamMember.jsx b/src/pages/Teams/TeamMember.jsx index 39bf9b5..43a0356 100644 --- a/src/pages/Teams/TeamMember.jsx +++ b/src/pages/Teams/TeamMember.jsx @@ -22,7 +22,8 @@ const images = { }; function TeamMember({ member }) { - const { name, position, description, linkedin, instagram, github, id } = member; + const { name, position, description, linkedin, instagram, github, id } = + member; const image = images[id]; return ( From 07af92fe7f692b90927b7ae3d2778155c2b5265c Mon Sep 17 00:00:00 2001 From: Miran Date: Mon, 23 Dec 2024 18:34:21 +0530 Subject: [PATCH 2/2] fix: remove cursor on mobile view --- src/components/Cursor/index.jsx | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/Cursor/index.jsx b/src/components/Cursor/index.jsx index 957dd4b..48a9710 100644 --- a/src/components/Cursor/index.jsx +++ b/src/components/Cursor/index.jsx @@ -11,6 +11,7 @@ function Cursor() { y: 0, }); + const [isMobile, setIsMobile] = useState(false); // state to track if it's mobile const cursorRef = useRef(null); const debouncedMouseMove = debounce((e) => { @@ -24,10 +25,21 @@ function Cursor() { debouncedMouseMove(e); } + // Check if the device is mobile useEffect(() => { - if (cursorRef.current) { - // cursorRef.current.style.left = `${mousePosition.x}px`; - // cursorRef.current.style.top = `${mousePosition.y}px`; + const checkIfMobile = () => { + setIsMobile(window.innerWidth <= 768); // Change 768px to your desired mobile breakpoint + }; + checkIfMobile(); + + window.addEventListener("resize", checkIfMobile); + return () => { + window.removeEventListener("resize", checkIfMobile); + }; + }, []); + + useEffect(() => { + if (cursorRef.current && !isMobile) { cursorRef.current.animate( { left: `${mousePosition.x}px`, @@ -36,12 +48,16 @@ function Cursor() { { duration: 400, fill: "forwards" }, ); } - window.addEventListener("mousemove", mouseMove); + if (!isMobile) { + window.addEventListener("mousemove", mouseMove); + } return () => { - window.removeEventListener("mousemove", mouseMove); + if (!isMobile) { + window.removeEventListener("mousemove", mouseMove); + } }; - }, [mousePosition]); + }, [mousePosition, isMobile]); const variants = { default: { @@ -60,6 +76,11 @@ function Cursor() { }, }; + // If on mobile, render nothing (invisible cursor) + if (isMobile) { + return null; + } + return (