[feat] add animatioin on note setion and Update style

components/AboutSection.tsx

@@ -1,81 +1,100 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import ProjectContent from '../components/updating/ProjectContent';
 import Skillset from './updating/Skillset';
 
 const AboutSection = () => {
   useEffect(() => {
-    aboutAnimation();
-    screwsRotate();
-  }, []);
-
-  const aboutAnimation = () => {
     const skillsetElement = document.querySelector('.skillset');
-    const skillsetClasslist = skillsetElement
-      ? skillsetElement.classList
-      : null;
-
-    const enterAnimation = () => {
-      const aboutElement = document
-        .getElementById('aboutSection')
-        ?.getBoundingClientRect();
-      if (
-        aboutElement && // Add null check for aboutElement
-        aboutElement.top >= 0 - aboutElement.height / 4 &&
-        aboutElement.top <=
-          window.innerHeight - aboutElement.height + aboutElement.height / 4
-      ) {
-        window.requestAnimationFrame(() => {
-          skillsetClasslist?.add('skillset--show');
-        });
-
-        window.removeEventListener('scroll', enterAnimation);
-      }
-    };
-    window.addEventListener('scroll', enterAnimation);
+    const skillsetClasslist = skillsetElement?.classList;
 
-    // skillSet title hover animation
-    document.getElementById('skill')?.addEventListener('mouseleave', () => {
+    const handleSkillMouseLeave = () => {
       window.requestAnimationFrame(() => {
         skillsetClasslist?.add('skillset--show');
       });
-    });
-    document.getElementById('skill')?.addEventListener('mouseover', () => {
+    };
+
+    const handleSkillMouseOver = () => {
       skillsetClasslist?.remove('skillset--show');
-    });
+    };
 
-    // projectContent title
-    const projectContentTitle = document.getElementById('collects');
-    projectContentTitle?.addEventListener('click', () => {
+    const handleProjectContentClick = () => {
       window.open('https://github.com/barrystone', '_blank');
-    });
-    projectContentTitle?.addEventListener('mouseover', () => {
-      projectContentTitle.innerHTML = 'Github';
-    });
-    projectContentTitle?.addEventListener('mouseleave', () => {
-      projectContentTitle.innerHTML = '我的作品';
-      projectContentTitle.style.cursor = 'pointer';
-    });
-  };
-
-  const screwsRotate = () => {
-    const rotete = (id: any) => {
+    };
+
+    const handleProjectContentMouseOver = () => {
+      const projectContentTitle = document.getElementById('collects');
+      if (projectContentTitle) {
+        projectContentTitle.innerHTML = 'Github';
+      }
+    };
+
+    const handleProjectContentMouseLeave = () => {
+      const projectContentTitle = document.getElementById('collects');
+      if (projectContentTitle) {
+        projectContentTitle.innerHTML = '我的作品';
+        projectContentTitle.style.cursor = 'pointer';
+      }
+    };
+
+    const handleScrewMouseOver = () => {
       const screws = document.querySelectorAll('.section-about__screwbox');
-      document.getElementById(id)?.addEventListener('mouseover', () => {
-        for (let screw of screws) {
-          screw.classList.add('section-about__screwbox--rotate');
-        }
-      });
-      document.getElementById(id)?.addEventListener('mouseleave', () => {
-        for (let screw of screws) {
-          screw.classList.remove('section-about__screwbox--rotate');
-        }
-      });
+      screws.forEach((screw) =>
+        screw.classList.add('section-about__screwbox--rotate')
+      );
     };
 
-    rotete('skill');
-    rotete('work-arrow');
-  };
+    const handleScrewMouseLeave = () => {
+      const screws = document.querySelectorAll('.section-about__screwbox');
+      screws.forEach((screw) =>
+        screw.classList.remove('section-about__screwbox--rotate')
+      );
+    };
+
+    const skillElement = document.getElementById('skill');
+    const projectContentTitle = document.getElementById('collects');
+    const workArrowElement = document.getElementById('work-arrow');
+
+    skillElement?.addEventListener('mouseleave', handleSkillMouseLeave);
+    skillElement?.addEventListener('mouseover', handleSkillMouseOver);
+    projectContentTitle?.addEventListener('click', handleProjectContentClick);
+    projectContentTitle?.addEventListener(
+      'mouseover',
+      handleProjectContentMouseOver
+    );
+    projectContentTitle?.addEventListener(
+      'mouseleave',
+      handleProjectContentMouseLeave
+    );
+    skillElement?.addEventListener('mouseover', handleScrewMouseOver);
+    skillElement?.addEventListener('mouseleave', handleScrewMouseLeave);
+    workArrowElement?.addEventListener('mouseover', handleScrewMouseOver);
+    workArrowElement?.addEventListener('mouseleave', handleScrewMouseLeave);
+
+    return () => {
+      skillElement?.removeEventListener('mouseleave', handleSkillMouseLeave);
+      skillElement?.removeEventListener('mouseover', handleSkillMouseOver);
+      projectContentTitle?.removeEventListener(
+        'click',
+        handleProjectContentClick
+      );
+      projectContentTitle?.removeEventListener(
+        'mouseover',
+        handleProjectContentMouseOver
+      );
+      projectContentTitle?.removeEventListener(
+        'mouseleave',
+        handleProjectContentMouseLeave
+      );
+      skillElement?.removeEventListener('mouseover', handleScrewMouseOver);
+      skillElement?.removeEventListener('mouseleave', handleScrewMouseLeave);
+      workArrowElement?.removeEventListener('mouseover', handleScrewMouseOver);
+      workArrowElement?.removeEventListener(
+        'mouseleave',
+        handleScrewMouseLeave
+      );
+    };
+  }, []);
 
   return (
     <section className="section section-about" id="aboutSection">

components/NoteList.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { NotesData } from '../utils/analyzeReadme';
+
+const LIST_NOTES = 6;
+
+const container = {
+  hidden: { opacity: 1, scale: 0 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      delayChildren: 0.3,
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const item = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+  },
+};
+
+interface NoteListProps {
+  notes: NotesData[string];
+  isVisible: boolean;
+}
+
+const NoteList: React.FC<NoteListProps> = ({ notes, isVisible }) => {
+  return (
+    <motion.ul
+      variants={container}
+      initial="hidden"
+      animate={isVisible ? 'visible' : 'hidden'}
+    >
+      {notes
+        .slice(0, LIST_NOTES)
+        .map((note: NotesData[string][0], index: number) => (
+          <motion.li
+            key={index}
+            className={
+              Object.keys(note).toString().length >= 20
+                ? 'notetree__li-font--small'
+                : ''
+            }
+            variants={item}
+          >
+            &nbsp;
+            <a href={Object.values(note).toString()} target="_blank">
+              {Object.keys(note)}
+            </a>
+          </motion.li>
+        ))}
+
+      {notes?.length > 0 ? (
+        <motion.li
+          style={{
+            listStyle: 'none',
+            letterSpacing: '.3rem',
+            fontSize: '1.8rem',
+            marginTop: '-1.5rem',
+          }}
+          variants={item}
+        >
+          ...
+        </motion.li>
+      ) : (
+        ''
+      )}
+    </motion.ul>
+  );
+};
+
+export default NoteList;