typescript more like gayscript

src/App.css

@@ -1,6 +1,6 @@
 :root {
   background-color: #121212;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: monospace;
   overflow-x: hidden;
   color: pink;
 }
@@ -12,13 +12,22 @@
   justify-content: center;
 }
 
+.header img:hover{
+  animation: bigsmall .5s infinite;
+}
+
 .cardchild h1 {
+  font-size: 3em;
   text-align: center;
 }
 
+.cardchild span {
+  font-size: 1.5em;
+}
+
 .cardchild img {
-  max-width: 4em;
-  margin: 1em;
+  max-width: 5em;
+  margin: 0.5em;
 }
 
 .cardchild {
@@ -32,31 +41,41 @@
   cursor: default;
   background-color: #272525;
   border-radius: 5%;
+  margin: 1em 1em .5em .5em;
   width: 20em;
-  padding: 0.5em 2em 2em 2em;
+  padding: 0.5em 5em 2em 5em;
   transform: translateY(-0em);
   transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
 }
 
 .cardchild:hover {
-  box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
-  -webkit-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
-  -moz-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
+  box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
   background-color: #5e5a5a;
   animation: big 500ms infinite;
   transform: translateY(-0.3em);
   transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
 }
+.linktree {
+  display: flex;
+  justify-content: space-around; 
+}
+
+.linktree img {
+  cursor: pointer;
+}
 
 .parent {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-evenly;
 }
 
 .header h1 {
-  font-size: 2.5em;
+  font-size: 3.6em;
   color: blanchedalmond;
   display: inline-table;
 }
@@ -82,6 +101,16 @@
   animation: slide-left 1.5s;
 }
 
+.gaybackground {
+  background-image: url("/gaybackground.png");
+}
+
+.animate {
+  z-index: 10000000;
+  transform: scale(10000); 
+  transition: 20s;
+}
+
 @keyframes slide-left {
   from {
     transform: translateX(-10000em);
@@ -102,6 +131,19 @@
   }
 }
 
+@keyframes bigsmall {
+  0% {
+    max-width: 10em;
+  }
+  50% {
+    width: 10.5em;
+    max-width: 10.5em;
+  }
+  100% {
+    max-width: 10em;
+  }
+}
+
 @keyframes shake {
   0% {
     transform: translate(0, 0) rotate(0deg);

src/App.jsx

@@ -1,46 +0,0 @@
-import { createSignal } from 'solid-js'
-import './App.css'
-import HoverComponent from './components/name'
-import AdvancedBr from './components/comps'
-import Review from './components/api'
-function App() {
-
-  return (
-    <>
-      <div class='header'>
-        <img src="https://dp.nea.moe/avatar/712639419785412668" class="logo-pfp" alt="Vite logo" />
-        <HoverComponent />
-      </div>
-
-
-      <p style={{ display: "none" }}>AdvancedBr my beloved</p>
-      <AdvancedBr count={10}/>
-
-
-      <div className='parent'>  
-        <div className='cardchild'>
-          <h1>link tree</h1>
-          <img src="https://openpgpjs.org/images/logo_proton_mail.png" alt="LMAO IMAGINE BEING BLIND" />
-          <img src="https://git.gay/assets/img/logo.png" alt="" />
-          <img src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="" />
-        </div>
-
-        <div className='cardchild'>
-          <h1>hi :3</h1>
-            <span style={{
-              fontSize: "15em",
-              fontFamily: "monospace"
-            }}>silly goober who does silly stuff <br/> self proclaimed programmer and progamer <br /> shitposts for fun</span>
-        </div>
-
-        <div className='cardchild'>
-          <h1>reviews</h1>
-          <Review/>
-        </div>
-      </div>
-      <AdvancedBr count={10}/>
-    </>
-  )
-}
-
-export default App

src/App.tsx

@@ -0,0 +1,79 @@
+import './App.css'
+import HoverComponent from './components/name.tsx'
+import AdvancedBr from './components/comps.tsx'
+import { createSignal } from 'solid-js';
+function App() {
+  function remov() {
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      let styleSheet = document.styleSheets[i];
+      let rules = styleSheet.cssRules || styleSheet.rules;
+      for (let j = 0; j < rules.length; j++) {
+        let rule = rules[j];
+        if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
+          styleSheet.deleteRule(j);
+        }
+      }
+    }
+  }
+
+  const [isAnimating, setIsAnimating] = createSignal(false);
+  const [animatedwoem, setanimatedwoem] = createSignal(false);
+  let gitgay = <img onClick={() => {
+    setIsAnimating(true)
+    setTimeout(() => {
+      window.location.href = "https://git.gay/exhq"
+    }, 200);
+    gitgay.src = "/gaybackground.png"
+  }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
+  return (
+
+    <>
+      <div class='header'>
+        <img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
+        <HoverComponent />
+      </div>
+
+
+      <p style={{ display: "none" }}>AdvancedBr my beloved</p>
+      <AdvancedBr count={6} />
+
+
+      <div class='parent'>
+        <div class='cardchild'>
+          <h1>link tree</h1>
+          <div class='linktree'>
+            {gitgay}
+            <img onClick={() => {
+              setanimatedwoem(true)
+              setTimeout(() => {
+                window.location.href = "https://woem.men/@exhq"
+              }, 200);
+            }} classList={{ 'woemimg': true, 'animate': animatedwoem() }} src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="LMAO IMAGINE BEING BLIND" />
+          </div>
+          <br />
+          <div class='linktree'>
+            <span class='gitgaytext' >Git</span>
+            <span class='woemtext' >Fedi</span>
+          </div>
+        </div>
+
+        <div style={{
+          opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
+        }} class='cardchild'>
+          <h1>hi :3</h1>
+          <span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
+        </div>
+
+        <div style={{
+          opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
+        }} class='cardchild'>
+          <h1>reviews</h1>
+          {/* <Review/> */}
+        </div>
+      </div>
+      <AdvancedBr count={10} />
+    </>
+  )
+}
+
+export default App

src/components/api.jsx

@@ -1,38 +0,0 @@
-import { createSignal, createEffect } from 'solid-js';
-
-const Review = () => {
-    // State to store the fetched data
-    const [data, setData] = createSignal([]);
-    const [name, setName] = createSignal([]);
-    let colontree = {}
-    
-
-    createEffect(() => {
-        
-        fetch('https://api.review.exhq.dev/getreviews/')
-            .then(res => res.json())
-            .then(jsonData => {
-                setData(jsonData);
-            })
-            .catch(error => {
-                console.error('Error fetching data:', error);
-            });
-
-
-        for (let i = 0; i < data().length; i++) {
-
-            fetch(`https://discordlookup.mesalytic.moe/v1/user/${data()[i].discordID}`)
-            .then(res => res.json()).then(console.log)
-        }
-    });
-
-    return (
-        <div>
-            {data().reverse().map(i => (
-                <li>{i.discordID}</li>
-            ))}
-        </div>
-    );
-};
-
-export default Review;

src/components/comps.tsx

@@ -1,6 +1,6 @@
 // warning: this IS horrible code. its a joke. DO NOT try this at home because
 // your local senior programmer CAN and WILL hunt you down
 // you have been warned.
-export default function AdvancedBr({ count }) {
+export default function AdvancedBr({count}: any) {
     return new Array(count).fill(null).map(_=>(<br/>))
 }

src/components/name.jsx

@@ -4,12 +4,11 @@ import { removethething } from "./utils";
 function HoverComponent() {
   let timerId;
 
-  const [isHovered, setIsHovered] = createSignal(false);
   const [name, setname] = createSignal(true)
 
   const startTimer = () => {
     timerId = setTimeout(() => {
-      executeFunction();
+      setname(!name())
     }, 3000);
   };
 
@@ -19,22 +18,12 @@ function HoverComponent() {
       timerId = null;
     }
   };
-
-  const executeFunction = () => {
-    setname(!name())
-  };
-
+  
   const handleMouseEnter = () => {
     removethething()
-    setIsHovered(true);
     startTimer();
   };
 
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-    clearTimer();
-  };
-
   onCleanup(() => {
     clearTimer();
   });
@@ -43,7 +32,7 @@ function HoverComponent() {
     <h1
       className="removethisinstantly"
       onMouseEnter={handleMouseEnter} 
-      onMouseLeave={handleMouseLeave} 
+      onMouseLeave={clearTimer} 
     >
       {name() ? "ECHO" : "exhq"}
     </h1>

src/components/name.tsx

@@ -0,0 +1,42 @@
+import { createSignal, onCleanup } from "solid-js";
+import { removethething } from "./utils.ts";
+
+function HoverComponent() {
+  let timerId: number|null;
+
+  const [name, setname] = createSignal(true)
+
+  const startTimer = () => {
+    timerId = setTimeout(() => {
+      setname(!name())
+    }, 3000);
+  };
+
+  const clearTimer = () => {
+    if (timerId) {
+      clearTimeout(timerId);
+      timerId = null;
+    }
+  };
+  
+  const handleMouseEnter = () => {
+    removethething()
+    startTimer();
+  };
+
+  onCleanup(() => {
+    clearTimer();
+  });
+
+  return (
+    <h1
+      class="removethisinstantly"
+      onMouseEnter={handleMouseEnter} 
+      onMouseLeave={clearTimer} 
+    >
+      {name() ? "ECHO" : "exhq"}
+    </h1>
+  );
+}
+
+export default HoverComponent;

src/components/utils.ts

@@ -4,14 +4,14 @@ export function removethething() {
         let rules = styleSheet.cssRules || styleSheet.rules;
         for (let j = 0; j < rules.length; j++) {
             let rule = rules[j];
-            if (rule.type === CSSRule.KEYFRAMES_RULE && rule.name === "slide-right") {
+            if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-right" )) {
                 styleSheet.deleteRule(j);
             }
         }
     }
 }
 
-export async function getLatestItems(apiUrl) {
+export async function getLatestItems(apiUrl: string) {
   try {
     const response = await fetch(apiUrl);
     if (!response.ok) {

src/index.tsx

@@ -5,4 +5,4 @@ import App from './App'
 
 const root = document.getElementById('root')
 
-render(() => <App />, root)
+render(() => <App />, root!)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />