BLOG-7 feat: motto section and with animation

frontend/src/app/page.tsx

@@ -1,17 +1,13 @@
-import SelfTags from "@/lib/home/framework/ui/SelfTags";
+import AboutMe from "@/lib/home/framework/ui/AboutMe";
+import FirstView from "@/lib/home/framework/ui/FirstView";
+import Motto from "@/lib/home/framework/ui/Motto";
 
 export default function HomePage() {
   return (
-    <div className="mx-auto flex min-h-[--content-height] max-w-screen-xl flex-col justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6">
+    <div>
-      <h2 className="text-3xl font-bold text-gray-800 md:text-6xl">Hello 大家好！</h2>
+      <FirstView />
-      <h1 className="flex flex-row items-center gap-x-2 text-4xl font-extrabold text-gray-800 md:text-7xl">
+      <AboutMe />
-        <span>我是</span>
+      <Motto />
-        <div className="rounded-lg bg-blue-600 px-1.5 py-1">
-          <span className="text-white">Squid</span>
-        </div>
-        <span>魷魚</span>
-      </h1>
-      <SelfTags />
     </div>
   );
 }

frontend/src/lib/home/framework/ui/AboutMe.tsx

@@ -0,0 +1,3 @@
+export default function AboutMe() {
+  return <></>;
+}

frontend/src/lib/home/framework/ui/AnimatedMark.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+export default function AnimatedMark(props: { text: string; direction: "left" | "right" }) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const element = useRef<HTMLSpanElement | null>(null);
+
+  const origin = props.direction === "left" ? "origin-left" : "origin-right";
+
+  useEffect(() => {
+    if (!element.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            console.log(element.current);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 1 },
+    );
+    observer.observe(element.current);
+  }, []);
+
+  return (
+    <span
+      ref={element}
+      className={`rounded-md bg-blue-600 px-1 py-0.5 text-white transition-transform delay-500 duration-1000 md:rounded-lg md:px-2.5 md:py-2 ${origin} ${isVisible ? "scale-x-100" : "scale-x-0"} `}
+    >
+      <span className="scale-x-100">{props.text}</span>
+    </span>
+  );
+}

frontend/src/lib/home/framework/ui/FirstView.tsx

@@ -0,0 +1,17 @@
+import SelfTags from "@/lib/home/framework/ui/SelfTags";
+
+export default function FirstView() {
+  return (
+    <div className="mx-auto flex min-h-[--content-height] max-w-screen-xl flex-col justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6">
+      <h2 className="text-3xl font-bold text-gray-800 md:text-6xl">Hello 大家好！</h2>
+      <h1 className="flex flex-row items-center gap-x-2 text-4xl font-extrabold text-gray-800 md:text-7xl">
+        <span>我是</span>
+        <div className="rounded-lg bg-blue-600 px-1.5 py-1">
+          <span className="text-white">Squid</span>
+        </div>
+        <span>魷魚</span>
+      </h1>
+      <SelfTags />
+    </div>
+  );
+}

frontend/src/lib/home/framework/ui/Motto.tsx

@@ -0,0 +1,18 @@
+import AnimatedMark from "./AnimatedMark";
+
+export default function Motto() {
+  return (
+    <div className="mx-auto flex min-h-[--content-height] max-w-screen-xl flex-col items-center justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6">
+      <div className="flex w-[19rem] flex-col gap-y-3 text-3xl font-bold text-gray-800 md:w-[38rem] md:gap-y-4 md:text-6xl">
+        <div className="flex w-full flex-row items-center justify-start gap-x-2.5">
+          <span>Keep</span>
+          <AnimatedMark text="Learning" direction="left" />
+        </div>
+        <div className="flex w-full flex-row items-center justify-end gap-x-2.5 md:gap-x-4">
+          <AnimatedMark text="Keep" direction="right" />
+          <span>Progressing</span>
+        </div>
+      </div>
+    </div>
+  );
+}