ui stuff, broken box, EoE dev versions, nginx req

public/blender.txt

@@ -0,0 +1 @@
+Arch Linux - blender 17:4.0.2-8 (x86_64)

public/godot.txt

@@ -0,0 +1 @@
+Arch Linux - godot 4.2.1-1 (x86_64)

public/teardropdark.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="454.27927"
+   height="129.77107"
+   viewBox="0 0 120.19472 34.335263"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect1"
+       style="display:none;fill:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0"
+       d="M -19.736644,-31.973684 H 297.23702 c 0,0 0,0 0,0 V -6.6239681e-7 c 0,3.6696783e-7 0,6.6239681e-7 0,6.6239681e-7 H -19.736644 c 0,0 -1e-6,-2.9542898e-7 -1e-6,-6.6239681e-7 V -31.973684 Z" />
+    <path
+       id="path3"
+       style="display:inline;fill:#111111;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0"
+       d="m 0,0 v 33.88608 c 0,0 41.608442,4.922788 64.420873,-17.825377 C 80.526949,0 97.528814,1.2317739 120.19472,0 v 0 z" />
+  </g>
+</svg>

public/teardroplight.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="454.27927"
+   height="129.77107"
+   viewBox="0 0 120.19472 34.335263"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect1"
+       style="display:none;fill:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0"
+       d="M -19.736644,-31.973684 H 297.23702 c 0,0 0,0 0,0 V -6.6239681e-7 c 0,3.6696783e-7 0,6.6239681e-7 0,6.6239681e-7 H -19.736644 c 0,0 -1e-6,-2.9542898e-7 -1e-6,-6.6239681e-7 V -31.973684 Z" />
+    <path
+       id="path3"
+       style="display:inline;fill:#ffffff;stroke:none;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0"
+       d="m 0,0 v 33.88608 c 0,0 41.608442,4.922788 64.420873,-17.825377 C 80.526949,0 97.528814,1.2317739 120.19472,0 v 0 z" />
+  </g>
+</svg>

public/versions.txt

@@ -0,0 +1,11 @@
+godot 4.2.1-1,
+blender 17:4.0.2-8,
+inkscape 1.3.2-3,
+krita 5.2.2-2,
+gimp 2.10.36-3
+
+
+
+
+
+please GOD LET ME FIX THIS BS

src/App.css

@@ -39,15 +39,39 @@
   animation: LogoHoverAnim 1s ease-in-out;
 }
 
-@keyframes LogoHoverAnim {
+.VersionBox {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.Versions {
+  overflow:hidden;
+  border-right: .15em solid orange;
+  margin-right: auto;
+  text-wrap: auto;
+  animation: typing 1s steps(75, end),
+  blink-caret 1s step-end infinite;
+}
+
+@keyframes typing {
   from {
-    transform: rotate(0deg) scale(1);
+    max-width: 0;}
-  }
   to {
-    transform: rotate(360deg) scale(1.1);
+    max-width: 100%;
   }
 }
 
+@keyframes blink-caret {
+  from, to {
+    border-color: transparent
+  }
+  50% {
+    border-color: orange;
+  }
+}
+
+
 .MainBG {
   background: linear-gradient(
   360deg,
@@ -76,6 +100,15 @@
   }
 }
 
+@keyframes LogoHoverAnim {
+  from {
+    transform: rotate(0deg) scale(1);
+  }
+  to {
+    transform: rotate(360deg) scale(1.1);
+  }
+}
+
 @keyframes Welcome-spin {
   from {
     transform: rotate(-2deg);

src/Home.js

@@ -1,8 +1,29 @@
-const Home = () => {
+import { useEffect, useState } from 'react';
+
+function Home() {
+
+  
+  const [Versions, setVersions] = useState('');
+
+  useEffect(() => {
+    const fetchFiles = async () => {
+      try {
+        const Response = await fetch('versions.txt');
+        const Text = await Response.text();
+        setVersions(Text);
+
+      } catch (error) {
+        console.error('Error fetching file:', error);
+      }
+    };
+
+    fetchFiles();
+  }, []);
+
 return (
-  <div className="flex w-auto h-auto overflow-hidden MainBG">
+    <div className="flex w-auto h-auto overflow-hidden MainBG">
-    <div className="flex flex-col items-center justify-center text-secondary top-14 bottom-8 w-screen h-screen overflow-scroll">
+      <div className="flex flex-col mt-20 items-center justify-center text-secondary top-14 bottom-8 w-screen h-screen overflow-hidden">
-      <p className="text-4xl mb-16 shadow-2xl WelcomeText">Welcome fellow traveller!</p>
+        <p className="text-4xl mb-16 shadow-2xl WelcomeText">Welcome, fellow traveller!</p>
         <div className="flex justify-center align-middle">
 
           <a href="https://librebun.ooguy.com/nc/" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 LogoBoxes">
@@ -12,11 +33,22 @@ return (
           <a href="https://librebun.ooguy.com/gt/" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 LogoBoxes">
             <img className="mx-0 GiteaLogo" draggable="false" src={process.env.PUBLIC_URL + "/Gitea_Logo.svg"} alt="Gitea"></img>
           </a>
-
         </div>
+
+        <div className="bg-primary rounded-lg shadow-lg w-96 h-60 mt-20 overflow-hidden VersionBox">
+          <div className="flex">
+            <div className="flex-row mt-1">
+            <p className="ml-2 mr-2">_&gt;# </p>
+          </div>
+          <div className="mt-1 mr-4 w-80">
+            <p className="Versions">{Versions}</p>
+          </div>
+        </div>
+
+      </div>
     </div>
   </div>
   );
-};
+}
 
 export default Home;

src/TopBar.js

@@ -4,11 +4,18 @@ const TopBar = () => {
         shadow-md justify-center items-center space-x-2">
         <div className="topbar-clickables">
                 <div className="center left-0 flex justify-center items-center overflow-visible">
+                    
+                    <div className="Teardrop"> 
+                        <div className="fixed mt-14 top-0 left-0 w-60">
+                            <img draggable="false" src={process.env.PUBLIC_URL + "/teardropdark.svg"} alt="Teardrop"/>
+                        </div>
+                    </div>
                     <div className="BunnyLogo"> 
                         <div className="fixed top-1 left-0 ml-6">
                             <img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
                         </div>
                     </div>
+
                     <div className="flex items-center">
                         <div className="TopButton">
                             <p className="text-lg mx-4">Projects</p>

src/index.css

@@ -1,7 +1,6 @@
-@tailwind base;
+@import 'tailwindcss/base';
-@tailwind components;
+@import 'tailwindcss/components';
-@tailwind utilities;
+@import 'tailwindcss/utilities';
-@tailwind variants;
 @import url(https://fonts.googleapis.com/css2?family=Sarabun);
 
 @layer components {
@@ -10,7 +9,7 @@
   }
   .DarkModeButton {
     @apply cursor-pointer text-secondary bg-violet-950
-     border-4 border-violet-950 rounded-md
+     border-4 border-violet-950 rounded-md;
   }
 }