Enhance menu and page components with refs for smoother transitions and animations

@@ -1,4 +1,4 @@import React, { useState } from "react";import React, { useState, useRef } from "react";import { CSSTransition } from "react-transition-group";import Image from "next/image";

@@ -7,6 +7,9 @@ import styles from "@styles/components/menu.module.css";const Menu = () => {  const [open, setOpen] = useState(false);  const overlayRef = useRef(null);  const gridLeftRef = useRef(null);  const gridRightRef = useRef(null);  const pages = [    { num: "000", href: "/", title: "Home" },    { num: "001", href: "/about", title: "About" },

@@ -41,6 +44,7 @@ const Menu = () => {        timeout={500}        classNames="menu"        appear        nodeRef={overlayRef}        onEnter={() => {          if (typeof document !== "undefined") {            document.body.style.overflowY = "hidden";

@@ -52,10 +56,16 @@ const Menu = () => {          }        }}      >        <div className={styles.overlay}>        <div className={styles.overlay} ref={overlayRef}>          <div className={styles.overlayGrid}>            <CSSTransition in={open} timeout={500} classNames="menu" appear>              <div className={styles.overlayGridLeft}>            <CSSTransition              in={open}              timeout={500}              classNames="menu"              appear              nodeRef={gridLeftRef}            >              <div className={styles.overlayGridLeft} ref={gridLeftRef}>                <div className={styles.topBar}>                  <Link href="https://blog.bythewood.me/" passHref>                    <a className={styles.topLink} target="_blank">

@@ -109,13 +119,21 @@ const Menu = () => {                </div>              </div>            </CSSTransition>            <CSSTransition in={open} timeout={500} classNames="menu" appear>              <div className={styles.overlayGridRight}>            <CSSTransition              in={open}              timeout={500}              classNames="menu"              appear              nodeRef={gridRightRef}            >              <div className={styles.overlayGridRight} ref={gridRightRef}>                <Image                  src="/static/images/art/acrylic-pours/006.webp"                  alt="#006 Molten Copper"                  loading="lazy"                  layout="fill"                  objectFit="cover"                  objectPosition="center"                />              </div>            </CSSTransition>

@@ -1,4 +1,4 @@import React from "react";import React, { createRef } from "react";import App from "next/app";import "../styles/globals.css";import { TransitionGroup, CSSTransition } from "react-transition-group";

@@ -10,6 +10,10 @@ import Loader from "../components/loader";import Mouse from "../components/mouse";class MyApp extends App {  constructor(props) {    super(props);    this.transitionNodeRef = createRef();  }  render() {    const { Component, pageProps } = this.props;

@@ -25,8 +29,9 @@ class MyApp extends App {            appear            timeout={250}            classNames="transition"            nodeRef={this.transitionNodeRef}          >            <div className="transition">            <div className="transition" ref={this.transitionNodeRef}>              <Grid>                <Component {...pageProps} />              </Grid>

@@ -18,6 +18,13 @@ const About = () => {  ]);  const wordsRef = useRef(words);  wordsRef.current = words;  const wordRefs = useRef(new Map());  const getWordRef = (key) => {    if (!wordRefs.current.has(key)) {      wordRefs.current.set(key, React.createRef());    }    return wordRefs.current.get(key);  };  useEffect(() => {    const getRandomWordIndex = () => {

@@ -57,6 +64,7 @@ const About = () => {      <div className={styles.words}>        <TransitionGroup component={null}>          {words.map((word) => {            const nodeRef = getWordRef(word);            return (              <CSSTransition                key={word}

@@ -69,8 +77,9 @@ const About = () => {                  enterDone: styles.wordEnterDone,                  exitActive: styles.wordExitActive,                }}                nodeRef={nodeRef}              >                <h2 className={styles.word}>                <h2 className={styles.word} ref={nodeRef}>                  <span className={styles.wordText}>{word}</span>                </h2>              </CSSTransition>

@@ -1,4 +1,4 @@import React from "react";import React, { useRef } from "react";import { TransitionGroup, CSSTransition } from "react-transition-group";import styles from "@styles/pages/contact.module.css";import Image from "next/image";

@@ -6,6 +6,13 @@ import Image from "next/image";import Page from "../components/page";const Contact = () => {  const lineRefs = useRef(new Map());  const getLineRef = (key) => {    if (!lineRefs.current.has(key)) {      lineRefs.current.set(key, React.createRef());    }    return lineRefs.current.get(key);  };  const chatMessages = [    "Hello!",    "I prefer people reach out to me via email.",

@@ -79,15 +86,18 @@ const Contact = () => {              {chatMessages.map((message, index) => {                const transitionTimeout = (index + 2) * 2000;                const transitionDelay = (index + 1) * 2000;                const nodeRef = getLineRef(index);                return (                  <CSSTransition                    key={index}                    appear                    timeout={{ appear: transitionTimeout }}                    classNames="fade"                    nodeRef={nodeRef}                  >                    <div                      className={styles.chatLine}                      ref={nodeRef}                      style={{ transitionDelay: `${transitionDelay}ms` }}                    >                      <span className={styles.chatAvatar}>

@@ -10,6 +10,13 @@ const Index = () => {  const [currentWords, setCurrentWord] = useState([words[0]]);  const currentWordsRef = useRef(currentWords);  currentWordsRef.current = currentWords;  const wordRefs = useRef(new Map());  const getWordRef = (key) => {    if (!wordRefs.current.has(key)) {      wordRefs.current.set(key, React.createRef());    }    return wordRefs.current.get(key);  };  useEffect(() => {    // Swap words interval

@@ -39,6 +46,7 @@ const Index = () => {      </div>      <TransitionGroup component="div" className={styles.words}>        {currentWords.map((word) => {          const nodeRef = getWordRef(word);          return (            <CSSTransition              key={word}

@@ -54,8 +62,11 @@ const Index = () => {                exitActive: styles.wordExitActive,              }}              appear              nodeRef={nodeRef}            >              <h3 className={styles.word}>{word}</h3>              <h3 className={styles.word} ref={nodeRef}>                {word}              </h3>            </CSSTransition>          );        })}

@@ -90,6 +90,8 @@.overlayGridRight {  grid-area: 1/2;  position: relative;  width: 100%;  height: 100vh;  overflow: hidden;  transition: transform 500ms;