init

src/App.css

@@ -0,0 +1,61 @@
+:root {
+  background-color: #121212;
+  font-family: 'Courier New', Courier, monospace;
+  overflow-x: hidden;
+}
+
+.header {
+  margin-top: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.header h1 {
+  font-size: 2.5em;
+  color:blanchedalmond;
+  display: inline-table;
+}
+
+.header h1:not(:active){
+  animation: slide-right 1.5s;
+}
+
+.header h1:hover {
+  animation: shake 10ms infinite;
+}
+
+.header img {
+  border-radius: 25%;
+  margin-right: 1em;
+  vertical-align: middle;
+  max-width: 10em;
+  animation: slide-left 1.5s ;
+}
+
+@keyframes slide-left {
+  from {
+    transform: translateX(-10000em);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-right {
+  from {
+    transform: translateX(10000em);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes shake {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  25% { transform: translate(5px, 5px) rotate(5deg); }
+  50% { transform: translate(0, 0) rotate(0eg); }
+  75% { transform: translate(-5px, 5px) rotate(-5deg); }
+  100% { transform: translate(0, 0) rotate(0deg); }
+}

src/App.jsx

@@ -0,0 +1,21 @@
+import { createSignal } from 'solid-js'
+import './App.css'
+import HoverComponent from './components/name'
+function App() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <>
+    <script defer> 
+      
+    </script>
+      <div class='header'>
+            <img src="https://adu.shiggy.fun/v1/712639419785412668/avatar.png" class="logo-pfp" alt="Vite logo" />
+            <HoverComponent/>
+      </div>
+      
+    </>
+  )
+}
+
+export default App

src/components/name.jsx

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

src/components/utils.js

@@ -0,0 +1,12 @@
+export function removethething() {
+    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.name === "slide-right") {
+                styleSheet.deleteRule(j);
+            }
+        }
+    }
+}

src/index.jsx

@@ -0,0 +1,8 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import App from './App'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root)