diff --git a/src/Embed.js b/src/components/Embed.js
similarity index 100%
rename from src/Embed.js
rename to src/components/Embed.js
diff --git a/src/FilePage.js b/src/components/FilePage.js
similarity index 100%
rename from src/FilePage.js
rename to src/components/FilePage.js
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..14043dc
--- /dev/null
+++ b/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 (
+
+
+
Welcome to Zoey's Bits!
+
The home of all my bits and pieces.
+
+
+
+
Feel free to use my public services.
+
+
+
+
+ );
+
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Projects.js b/src/components/Projects.js
new file mode 100644
index 0000000..d70f113
--- /dev/null
+++ b/src/components/Projects.js
@@ -0,0 +1,12 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const ProjectsPage = () => {
+ return(
+
+
WIP projectspage
+
+ );
+}
+
+export default ProjectsPage;
\ No newline at end of file
diff --git a/src/RTMP.js b/src/components/RTMP.js
similarity index 100%
rename from src/RTMP.js
rename to src/components/RTMP.js
diff --git a/src/SideBar.js b/src/components/SideBar.js
similarity index 100%
rename from src/SideBar.js
rename to src/components/SideBar.js
diff --git a/src/components/Stream.js b/src/components/Stream.js
new file mode 100644
index 0000000..61c5c55
--- /dev/null
+++ b/src/components/Stream.js
@@ -0,0 +1,27 @@
+import BottomBar from "./BottomBar";
+import TopBar from "./TopBar";
+
+const StreamPage = () => {
+ return(
+
+ );
+}
+
+export default StreamPage;
\ No newline at end of file
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
new file mode 100644
index 0000000..e797a71
--- /dev/null
+++ b/src/components/TopBar.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const TopBar = () => {
+ const navigate = useNavigate();
+ return (
+
+
+
+
+
+
![]()
navigate("/")} draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default TopBar;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8d5cddf..8d7e273 100644
--- a/src/index.js
+++ b/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: (
+ <>
+
+
+
+
+ ),
+ },
+ {
+ path: "/about",
+ element: (
+ <>
+
+
+
+
+ ),
+ },
+ {
+ path: "/stream",
+ element: (
+ <>
+
+
+
+
+ ),
+ },
+ {
+ path: "/projects",
+ element: (
+ <>
+
+
+
+
+ ),
+ },
+ {
+ path: "/blog",
+ element: (
+ <>
+
+
+
+
+ ),
+ }
+]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
-
+
+
+
);
reportWebVitals();