Add mutual links

src/App.tsx

@@ -4,41 +4,50 @@ import Links from "./components/Links"
 import Keys from "./components/Keys"
 import Activities from "./components/Activities"
 import Footer from "./components/Footer"
+import Mutuals from "./components/Mutuals"
 
 import { useState, useEffect } from 'react';
 
 export default function App() {
   const [cardY, setCardY] = useState(0);
   const [contentY, setContentY] = useState(0);
-  
-  const cardElm = document.getElementById("card");
-  const contentElm = document.getElementById("content");
   const [cardOpacity, setCardOpacity] = useState(1.0);
-
+  
   const handleScroll = () => {
-    
-    const card = Math.max((window.innerHeight / 2) - window.scrollY, 0);
+    const card = Math.max((window.innerHeight / 2) - window.scrollY, 100);
     setCardY(card);
-    setContentY(card + (window.innerHeight / 2));
-    
+
+    const mutualsElm = document.getElementById("mutuals");
+    let mutualsY = 0;
+    if (mutualsElm) {
+      mutualsY += mutualsElm.scrollHeight;
+    }
+    setContentY(card + (window.innerHeight / 2) + mutualsY * 2);
+
+    const cardElm = document.getElementById("card");
+    const contentElm = document.getElementById("content");
+    const a = cardElm?.getBoundingClientRect().bottom
+    const b = contentElm?.getBoundingClientRect().top
+
+    if (a && b) {
+      if (a - b > 0 && a - b < 100) {
+        setCardOpacity((100 - (a - b)) / 100)
+      } else if (a - b < 0) {
+        setCardOpacity(100)
+      } else {
+        setCardOpacity(0)
+      }
+    }
   };
 
-  useEffect(() => {
-    const a = cardElm?.getBoundingClientRect().bottom
-    const b = contentElm?.getBoundingClientRect().top
-    if (a && b) {
-        if (a - b > 0 && a - b < 100) {
-          setCardOpacity((100 - (a - b)) / 100)
-        } else if (a - b < 0) {
-          setCardOpacity(100)
-        } else {
-          setCardOpacity(0)
-        }
-      }
-  }, [cardY, contentY])
-
   useEffect(() => {
     handleScroll();
+    
+    const mutualElm = document.getElementById("mutuals");
+    if (mutualElm) {
+      window.scrollTo(0, mutualElm.scrollHeight)
+    }
+
     window.addEventListener('scroll', handleScroll);
     return () => {
       window.removeEventListener('scroll', handleScroll);
@@ -46,8 +55,12 @@ export default function App() {
   }, []);
 
   return (
+    <>
+    <div id="mutuals">
+      <Mutuals />
+    </div>
     <div className="flex justify-center">
-      <div className={`sticky top-0 h-screen absolute`} style={{ opacity: cardOpacity }}>
+      <div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}>
         <div id="card" className="fixed bg-neutral-900 py-5 -ml-40 -mt-20" style={{ top: `${cardY}px` }}>
           <Card />
         </div>
@@ -61,10 +74,11 @@ export default function App() {
           <Activities />
         </div>
 
-        <div className="mb-5">
+        <div className="mb-5" id="test">
           <Footer />
         </div> 
       </div>
     </div>
+    </>
   )
 }

src/components/Footer.tsx

@@ -11,5 +11,5 @@ export default function Footer() {
             </p>
         </div>
     )
-  }
+}
   

src/components/Mutuals.tsx

@@ -0,0 +1,86 @@
+export default function Mutuals() {
+    return (
+        <div className="text-center text-gray-500 mb-5">
+            <a href="https://arkw.net">
+                <img src="./mutual-links/arkwnet.png" className="h-12 inline" />
+            </a>
+            <a href="https://exout.net/~kirby3ds/">
+                <img src="./mutual-links/kirby3ds.png" className="h-12 inline" />
+            </a>
+            <a href="https://kris.fail">
+                <img src="./mutual-links/kris_fail.png" className="h-12 inline" />
+            </a>
+            <a href="https://kusaremkn.com">
+                <img src="./mutual-links/kusaremkn.png" className="h-12 inline" />
+            </a>
+            <a href="https://nona-takahara.github.io/">
+                <img src="./mutual-links/nona-takahara.png" className="h-12 inline" />
+            </a>
+            <a href="https://www.pepepper.net">
+                <img src="./mutual-links/pepepper.png" className="h-12 inline" />
+            </a>
+            <a href="https://qqey.net">
+                <img src="./mutual-links/qqeynet.png" className="h-12 inline" />
+            </a>
+            <a href="https://sasakulab.com">
+                <img src="./mutual-links/sasakulab.png" className="h-12 inline" />
+            </a>
+            <a href="https://nullc.at/">
+                <img src="./mutual-links/nullcat.png" className="h-12 inline" />
+            </a>
+            <a href="https://yank-nvim.com/">
+                <img src="./mutual-links/yank-nvim.png" className="h-12 inline" />
+            </a>
+            <a href="https://zopfco.de/">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    Zopfcode
+                </span>
+            </a>
+            <a href="https://aoirint.com/">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    aoirint
+                </span>
+            </a>
+            <a href="https://fuku.day/">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    Aumy
+                </span>
+            </a>
+            <a href="https://haxibami.net">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    mythfinder
+                </span>
+            </a>
+            <a href="https://donabe8898.dev">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    donabe8898.dev
+                </span>
+            </a>
+            <a href="https://hieri.vercel.app">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    ヒエリの部屋
+                </span>
+            </a>
+            <a href="https://rz7.dev">
+                <span
+                    className="w-32 h-12 bg-gray-500 text-black inline-block"
+                    style={{ paddingTop: `10px`}}>
+                    rz7.dev
+                </span>
+            </a>
+        </div>
+    )
+}
+