major rewrite

Signed-off-by: Zoey <friendlypossum@netc.fr>

src/About.js

@@ -1,9 +0,0 @@
-const AboutPage = () => {
-    return(
-        <div>
-            <p></p>
-        </div>
-    );
-}
-
-export default AboutPage;

src/App.css

@@ -20,7 +20,7 @@
 }
 
 .HeaderButt {
-  font-size: large;
+  font-size: larger;
   user-select: none;
 }
 
@@ -67,7 +67,12 @@
 
 .BunnyLogo {
   user-select: none;
-  pointer-events: none;
+  cursor: pointer;
+}
+
+.BunnyLogo:hover {
+  transform:scale(0.56);
+  animation: LogoHoverAnime 0.1s ease-in-out;
 }
 
 .Teardrop {
@@ -158,21 +163,20 @@
 
 .MainBG {
   background: linear-gradient(
-  360deg,
+    to right,
     #69233b,
-  #473b21,
+    #61182a,
     #520a22,
-  #3f2749
+    #312436
   );
   background-size: 600% 600%;
   animation: Gradient 120s ease infinite;
-  animation: Gradient 120s ease infinite;
 }
 
 @keyframes Gradient {
-  0% {background-position: 0% 50%;}
+  0% { background-position: 0% 50%; }
-  50% {background-position: 100% 50%;}
+  50% { background-position: 100% 50%; }
-  100% {background-position: 0% 50%;}
+  100% { background-position: 0% 50%; }
 }
 
 @keyframes DarkModeButton-spin {

src/App.js

@@ -1,27 +1,16 @@
-//import logo from './logo.svg';
+import React, { Component } from 'react';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
 import './App.css';
-import TopBar from './TopBar';
+import StreamEmbed from './components/Embed';
-import BottomBar from './BottomBar';
-import StreamEmbed from './Embed';
-import AboutPage from './About';
-//import SideBar from './SideBar';
 
-import Home from './Home';
+import Home from './components/Home';
 
 
 function App() {
   return (
     <div className="body">    
       <Home/>
-      <TopBar/>
-      <AboutPage/>
-      <StreamEmbed/>
-      <BottomBar/>
     </div>
+    
   );
 }
 

src/Home.js

@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-import RTMP from './RTMP';
-
-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-screen h-screen overflow-hidden MainBG">
-      <div className="flex flex-col backdrop-brightness-75 backdrop-blur-md justify-center text-secondary rounded-md min-w-fit">
-
-        <p className="text-xl self-center justify-start mt-10 mb-2 shadow-2xl SubHeaders">Public Services.</p>
-
-        <div className="backdrop-grayscale flex-col self-center">
-          <div className="flex-col align-middle h-auto">
-            <a href="https://git.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
-              <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/forgejologo.svg"} alt="Memos"></img>
-              <p className="self-center ml-2 mr-2 PubP">Forgejo</p>
-            </a>
-            <a href="https://lemmy.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
-              <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/lemmylogo.svg"} alt="Lemmy"></img>
-              <p className="self-center ml-2 mr-2 PubP">Lemmy</p>
-            </a>
-            <a href="https://clips.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
-              <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/firesharelogo.png"} alt="Owncast"></img>
-              <p className="self-center ml-2 mr-2 PubP">Fireshare</p>
-            </a>
-            <a href="https://memos.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
-              <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
-              <p className="self-center ml-2 mr-2 PubP">Memos</p>
-            </a>
-            <a href="https://send.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
-              <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/sendlogo.svg"} alt="Memos"></img>
-              <p className="self-center ml-2 mr-2 PubP">Send</p>
-            </a>
-          </div>
-        </div>
-        <p className="text-xl self-center justify-start mb-1 mt-4 shadow-2xl SubHeaders">My Streams.</p>
-        <div>
-          <a href="https://cast.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-primary shadow-md rounded-md ml-4 mr-4 p-1 flex LogoBoxesPub">
-            <img className="Logos" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
-            <p className="self-center ml-2 mr-2 PubP">Owncast</p>
-          </a>
-        </div>
-      </div>
-      <div className="flex flex-col backdrop-brightness-75 text-secondary rounded-md ml-5 mr-5 mt-16 mb-12 w-screen overflow-auto">
-        <div className="flex justify-center top-0">
-          <p className="flex UpdatesTitle">Welcome to Zoey's Bits.</p>
-        </div>
-        <div className="flex flex-col ml-5 mt-2 justify-center text-wrap">
-          <p className="UpdatesContent">I don't really know what to put here yet.</p>
-          <p className="UpdatesContent">You are free to use any of the services in the sidebar.</p>
-          <RTMP/>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Home;

src/TopBar.js

@@ -1,45 +0,0 @@
-const TopBar = () => {
-    return (
-        <div className="fixed top-0 left-0 h-12 w-screen flex flex-row bg-primary text-secondary 
-        shadow-md justify-center items-center space-x-2">
-        <div className="topbar-clickables">
-                <div className="flex items-center justify-center overflow-hidden">
-                    <div className="Teardrop"> 
-                        <div className="fixed mt-12 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-0 left-0 ml-3">
-                            <img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
-                        </div>
-                    </div>
-                    <div className="flex ml-40">
-                        <p className="mr-20 top-1 left-28 fixed HeaderName">Zoey's Bits</p>
-                        <div className="">
-                            <button className="mx-3 HeaderButt">News</button>
-                        </div>
-                        <div className="">
-                            <button className="mx-3 HeaderButt">Projects</button>
-                        </div>
-                        <div className="">
-                            <button className="mx-3 HeaderButt">Stream</button>
-                        </div>
-                        <div className="">
-                            <button className="mx-3 HeaderButt">About</button>
-                        </div>
-                    </div>
-                    <div className="fixed right-0 mr-6">                       
-                        <div className="DarkModeButton">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="half-crescent-moon">
-                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                        </svg>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default TopBar;

src/components/About.js

@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const AboutPage = () => {
+    return(  
+        <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">
+            <h1>WIP butt</h1>
+        </div>
+    );
+}
+
+export default AboutPage;

src/components/Blog.js

@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const BlogPage = () => {
+    return(  
+        <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">
+            <h1>WIP blogpage</h1>
+        </div>
+    );
+}
+
+export default BlogPage;

src/components/BottomBar.js

@@ -1,6 +1,6 @@
 const BottomBar = () => {
     return (
-        <div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row bg-primary text-secondary shadow-sm justify-center items-center">
+        <div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row backdrop-brightness-50 text-secondary justify-center items-center">
             <div className="fixed flex justify-center">
                 <p className="text-sm">&copy; LibreBun 2024</p>
             </div>

src/components/Home.js

@@ -0,0 +1,62 @@
+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 flex-col justify-center items-center w-screen h-screen overflow-hidden MainBG'>
+      <div className='flex flex-col items-center'>
+        <p className='text-4xl mb-2 text-secondary'>Welcome to Zoey's Bits!</p>
+        <p className='text-xl mb-8 text-secondary'>The home of all my bits and pieces.</p>
+      </div>
+      <div className='flex'>
+        <div className='flex flex-col w-fit h-fit text-secondary rounded-md items-center'>
+          <p className='text-xl'>Feel free to use my public services.</p>
+          <div className='grid grid-cols-3 grid-rows-2 gap-4 mx-2 my-2'>
+            <a href='https://git.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+              <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/forgejologo.svg'} alt='Memos' />
+              <p className='self-center mx-2 PubP'>Forgejo</p>
+            </a>
+            <a href='https://lemmy.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+              <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/lemmylogo.svg'} alt='Lemmy' />
+              <p className='self-center mx-2 PubP'>Lemmy</p>
+            </a>
+            <a href='https://clips.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+              <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/firesharelogo.png'} alt='Fireshare' />
+              <p className='self-center mx-2 PubP'>Fireshare</p>
+            </a>
+            <a href='https://memos.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+              <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/memoslogo.png'} alt='Memos' />
+              <p className='self-center mx-2 PubP'>Memos</p>
+            </a>
+            <a href='https://send.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+              <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/sendlogo.svg'} alt='Send' />
+              <p className='self-center mx-2 PubP'>Send</p>
+            </a>
+            <a href='https://cast.li-yo.ts.net/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
+              <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/owncastlogo.png'} alt='Owncast' />
+              <p className='self-center mx-2 PubP'>Owncast</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+  
+}
+
+export default Home;

src/components/Projects.js

@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const ProjectsPage = () => {
+    return(  
+        <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">
+            <h1>WIP projectspage</h1>
+        </div>
+    );
+}
+
+export default ProjectsPage;

src/components/Stream.js

@@ -0,0 +1,27 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const StreamPage = () => {
+    return(  
+        <div className="flex flex-col items-center justify-center w-screen h-screen text-xl text-secondary MainBG">
+            <div className="flex flex-row items-center justify-center w-screen h-5/6 mt-8 text-xl text-secondary">    
+                <iframe
+                    className="mt-5 overflow-hidden justify-left flex"
+                    src="https://cast.li-yo.ts.net/embed/video"
+                    title="Owncast"
+                    height="100%" width="60%"
+                    referrerpolicy="origin"
+                    allowfullscreen>
+                </iframe>
+                <iframe
+                    className="ml-5 mt-5 overflow-scroll"
+                    src="https://cast.li-yo.ts.net/embed/chat/readwrite/"
+                    height="100%" width="30%">
+                </iframe>
+            </div>
+            <a href="https://cast.li-yo.ts.net/" className="my-5">Join me on my actual Owncast site!</a>
+        </div>
+    );
+}
+
+export default StreamPage;

src/components/TopBar.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const TopBar = () => {
+    const navigate = useNavigate();
+    return (
+        <div className="fixed top-0 left-0 h-16 w-screen flex flex-row backdrop-brightness-75 text-secondary items-center">
+        <div className="topbar-clickables">
+                <div className="flex flex-row">
+                    <div className="scale-50 BunnyLogo"> 
+                        <div className="">
+                            <img onClick={() => navigate("/")} draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
+                        </div>
+                    </div>
+                    <div className="flex space-x-3">
+                        <button className="HeaderButt" onClick={() => navigate("/blog")}>Blog</button>
+                        <button className="HeaderButt" onClick={() => navigate("/projects")}>Projects</button>
+                        <button className="HeaderButt" onClick={() => navigate("/stream")}>Stream</button>
+                        <button className="HeaderButt" onClick={() => navigate("/about")}>About</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TopBar;

src/index.js

@@ -1,14 +1,74 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {createBrowserRouter,RouterProvider} from "react-router-dom";
+import AboutPage from './components/About';
+import StreamPage from './components/Stream';
+import ProjectsPage from './components/Projects';
+import BlogPage from './components/Blog';
+import TopBar from './components/TopBar';
+import BottomBar from './components/BottomBar';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: (
+    <> 
+    <TopBar/>
+    <App/>
+    <BottomBar/>
+    </>
+    ),
+  },
+  {
+    path: "/about",
+    element: (
+    <> 
+    <AboutPage/>
+    <TopBar/>
+    <BottomBar/>
+    </>
+    ),
+  },
+  {
+    path: "/stream",
+    element: (
+    <> 
+    <StreamPage/>
+    <TopBar/>
+    <BottomBar/>
+    </>
+    ),
+  },
+  {
+    path: "/projects",
+    element: (
+    <> 
+    <ProjectsPage/>
+    <TopBar/>
+    <BottomBar/>
+    </>
+    ),
+  },
+  {
+    path: "/blog",
+    element: (
+    <> 
+    <BlogPage/>
+    <TopBar/>
+    <BottomBar/>
+    </>
+    ),
+  }
+]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <StrictMode>
-    <App />
+  <RouterProvider router={router} />
-  </React.StrictMode>
+  </StrictMode>
 );
 
 reportWebVitals();