meow

src/App.css

@@ -2,6 +2,7 @@
   background-color: #121212;
   font-family: 'Courier New', Courier, monospace;
   overflow-x: hidden;
+  color: pink;
 }
 
 .header {
@@ -10,13 +11,62 @@
   align-items: center;
   justify-content: center;
 }
+
+.cardchild h1 {
+  text-align: center;
+}
+
+.cardchild img {
+  max-width: 4em;
+  margin: 1em;
+}
+
+.cardchild {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* browsers agreeing on stuff challenge (impossible) */
+  cursor: default;
+  background-color: #272525;
+  border-radius: 5%;
+  width: 20em;
+  padding: 0.5em 2em 2em 2em;
+  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);
+  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;
+}
+
+.parent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+
 .header h1 {
   font-size: 2.5em;
-  color:blanchedalmond;
+  color: blanchedalmond;
   display: inline-table;
 }
 
-.header h1:not(:active){
+.cardchild h2 {
+  display: inline-table;
+  vertical-align: text-bottom;
+}
+
+.header h1:not(:active) {
   animation: slide-right 1.5s;
 }
 
@@ -29,7 +79,7 @@
   margin-right: 1em;
   vertical-align: middle;
   max-width: 10em;
-  animation: slide-left 1.5s ;
+  animation: slide-left 1.5s;
 }
 
 @keyframes slide-left {
@@ -53,9 +103,23 @@
 }
 
 @keyframes shake {
-  0% { transform: translate(0, 0) rotate(0deg); }
+  0% {
-  25% { transform: translate(5px, 5px) rotate(5deg); }
+    transform: translate(0, 0) rotate(0deg);
-  50% { transform: translate(0, 0) rotate(0eg); }
+  }
-  75% { transform: translate(-5px, 5px) rotate(-5deg); }
+
-  100% { 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

@@ -1,19 +1,44 @@
 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() {
-  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" />
+        <img src="https://dp.nea.moe/avatar/712639419785412668" class="logo-pfp" alt="Vite logo" />
-            <HoverComponent/>
+        <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}/>
     </>
   )
 }

src/components/api.jsx

@@ -0,0 +1,40 @@
+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);
+            });
+
+        
+https://adu.shiggy.fun/v1/
+
+        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.jsx

@@ -0,0 +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 }) {
+    return new Array(count).fill(null).map(_=>(<br/>))
+}

src/components/utils.js

@@ -10,3 +10,23 @@ export function removethething() {
         }
     }
 }
+
+export async function getLatestItems(apiUrl) {
+  try {
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error(`API call failed with status ${response.status}`);
+    }
+    const data = await response.json();
+    // Check if data is an array
+    if (!Array.isArray(data)) {
+      throw new Error('API response is not an array');
+    }
+    // Slice the last 5 items
+    const lastFive = data.slice(-5);
+    // Print or use the lastFive array as needed
+    return lastFive;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}