diff --git a/src/pages/Root.css b/src/pages/Root.css index 32ea2d3..b151ee2 100644 --- a/src/pages/Root.css +++ b/src/pages/Root.css @@ -1,21 +1,21 @@ .App { - width: 100vw; - height: 100vh; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background-color: #262225; - color: black; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: #262225; + color: black; } .container { - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; } .profile { @@ -23,63 +23,63 @@ } .profile:hover { - animation: rotate 1s linear infinite; + animation: rotate 1000ms linear infinite; } @keyframes rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } .left { - width: 40%; - height: 100%; - background-color: #373236; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - border-top-right-radius: 25px; - border-bottom-right-radius: 25px; + width: 40%; + height: 100%; + background-color: #373236; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; } .right { - width: 60%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #262225; + width: 60%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #262225; } @media screen and (max-width: 768px) { - .App { - display: flex; - flex-direction: column; - } + .App { + display: flex; + flex-direction: column; + } - .container { - flex-direction: column; - } + .container { + flex-direction: column; + } - .left { - width: 100%; - height: 70%; + .left { + width: 100%; + height: 70%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-left-radius: 25px; - border-bottom-right-radius: 25px; - } + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; + } - .right { - width: 100%; - height: 30%; - } -} \ No newline at end of file + .right { + width: 100%; + height: 30%; + } +} diff --git a/src/pages/Root.tsx b/src/pages/Root.tsx index 9ef45d3..48a18db 100644 --- a/src/pages/Root.tsx +++ b/src/pages/Root.tsx @@ -1,87 +1,223 @@ -import { useEffect, useState } from 'react'; -import { useLocation, Link } from 'react-router-dom'; -import Repos from '../components/repos'; -import Tippy from '@tippyjs/react'; -import 'tippy.js/dist/tippy.css' -import './Root.css'; +import { useEffect, useState } from "react"; +import { useLocation, Link } from "react-router-dom"; +import Repos from "../components/repos"; +import Tippy from "@tippyjs/react"; +import "tippy.js/dist/tippy.css"; +import "./Root.css"; function Root() { const location = useLocation(); - const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp'); - const [gotoHref, setGotoHref] = useState('/'); + const [imageSrc, setImageSrc] = useState( + "https://f.imnyang.xyz/profile/imnyang.webp", + ); + const [gotoHref, setGotoHref] = useState("/"); useEffect(() => { const queryParams = new URLSearchParams(location.search); - if (queryParams.has('kawaii')) { - setImageSrc('https://f.imnyang.xyz/profile/hatchu_imnyang.webp'); - setGotoHref('/'); + if (queryParams.has("kawaii")) { + setImageSrc("https://f.imnyang.xyz/profile/hatchu_imnyang.webp"); + setGotoHref("/"); } else { - setImageSrc('https://f.imnyang.xyz/profile/imnyang.webp'); - setGotoHref('/?kawaii'); + setImageSrc("https://f.imnyang.xyz/profile/imnyang.webp"); + setGotoHref("/?kawaii"); + } + if (queryParams.has("no_hair") && queryParams.has("no_ear")) { + setImageSrc("https://f.imnyang.xyz/profile/no_ear_no_long_hair.png"); + } else if (queryParams.has("no_ear")) { + setImageSrc("https://f.imnyang.xyz/profile/no_ear.png"); + } else if (queryParams.has("no_hair")) { + setImageSrc("https://f.imnyang.xyz/profile/no_hair.avif"); + } + if (queryParams.has("fast")) { + const style = document.createElement("style"); + style.innerHTML = ` + .profile:hover { + animation: rotate 1ms linear infinite; + } + `; + document.head.appendChild(style); } - if (queryParams.has('no_hair') && queryParams.has("no_ear")) { - setImageSrc('https://f.imnyang.xyz/profile/no_ear_no_long_hair.png'); - } else if (queryParams.has('no_ear')) { - setImageSrc('https://f.imnyang.xyz/profile/no_ear.png'); - } else if (queryParams.has('no_hair')) { - setImageSrc('https://f.imnyang.xyz/profile/no_hair.avif'); - } - }, [location.search]); return ( -
- { (document.querySelector('link[rel="stylesheet"]') as HTMLLinkElement).rel = 'stylesheet'; }}> -
-
-

/?no_hair

+
+ { + ( + document.querySelector('link[rel="stylesheet"]') as HTMLLinkElement + ).rel = "stylesheet"; + }} + > +
+
+

/?no_hair

{/* /?no_ear */} - -

- imnyang + +

+ + imnyang +

-
-

-

+
+

+

{window.innerWidth <= 768 && ( - + + + + + )} - - - - - -
-
+ + + + + + + + + + + + + + + + + + + + + +
+
🖥️ Software Engineer -
- 🎨 Team. Sqlare -

+
+ 🎨 Team. Sqlare +
+
📚 Middle School Student in South Korea -
-
-

Enter Furry.

+
+
+

Enter Furry.

- -