diff --git a/public/banner_new.png b/public/banner_new.png new file mode 100644 index 0000000..797adf6 Binary files /dev/null and b/public/banner_new.png differ diff --git a/public/busy_banner.webp b/public/busy_banner.webp new file mode 100644 index 0000000..4e8e183 Binary files /dev/null and b/public/busy_banner.webp differ diff --git a/public/mutual-links/arkwnet.png b/public/mutual-links/arkwnet.png new file mode 100644 index 0000000..e99b439 Binary files /dev/null and b/public/mutual-links/arkwnet.png differ diff --git a/public/mutual-links/kirby3ds.png b/public/mutual-links/kirby3ds.png new file mode 100644 index 0000000..a125ca6 Binary files /dev/null and b/public/mutual-links/kirby3ds.png differ diff --git a/public/mutual-links/kris_fail.png b/public/mutual-links/kris_fail.png new file mode 100644 index 0000000..8b122ec Binary files /dev/null and b/public/mutual-links/kris_fail.png differ diff --git a/public/mutual-links/kusaremkn.webp b/public/mutual-links/kusaremkn.webp new file mode 100644 index 0000000..c2ad880 Binary files /dev/null and b/public/mutual-links/kusaremkn.webp differ diff --git a/public/mutual-links/nona-takahara.png b/public/mutual-links/nona-takahara.png new file mode 100644 index 0000000..4766b6c Binary files /dev/null and b/public/mutual-links/nona-takahara.png differ diff --git a/public/mutual-links/nullcat.png b/public/mutual-links/nullcat.png new file mode 100644 index 0000000..9580765 Binary files /dev/null and b/public/mutual-links/nullcat.png differ diff --git a/public/mutual-links/pepepper.png b/public/mutual-links/pepepper.png new file mode 100644 index 0000000..b21a0ac Binary files /dev/null and b/public/mutual-links/pepepper.png differ diff --git a/public/mutual-links/qqeynet.png b/public/mutual-links/qqeynet.png new file mode 100644 index 0000000..5601fd4 Binary files /dev/null and b/public/mutual-links/qqeynet.png differ diff --git a/public/mutual-links/sasakulab.png b/public/mutual-links/sasakulab.png new file mode 100644 index 0000000..14bc3f5 Binary files /dev/null and b/public/mutual-links/sasakulab.png differ diff --git a/public/mutual-links/yank-nvim.png b/public/mutual-links/yank-nvim.png new file mode 100644 index 0000000..0c8a76c Binary files /dev/null and b/public/mutual-links/yank-nvim.png differ diff --git a/src/App.tsx b/src/App.tsx index 92bfce8..1aafa39 100644 --- a/src/App.tsx +++ b/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 ( + <> +
+ +
-
+
@@ -61,10 +74,11 @@ export default function App() {
-
+
+ ) } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 93337a4..0c8e972 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -11,5 +11,5 @@ export default function Footer() {

) - } +} \ No newline at end of file diff --git a/src/components/Mutuals.tsx b/src/components/Mutuals.tsx new file mode 100644 index 0000000..b2450ff --- /dev/null +++ b/src/components/Mutuals.tsx @@ -0,0 +1,86 @@ +export default function Mutuals() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Zopfcode + + + + + aoirint + + + + + Aumy + + + + + mythfinder + + + + + donabe8898.dev + + + + + ヒエリの部屋 + + + + + rz7.dev + + +
+ ) +} + \ No newline at end of file