From 8a54d9916be491174852de342b19a42c3cfea223 Mon Sep 17 00:00:00 2001 From: Zoey Date: Tue, 10 Sep 2024 23:03:54 +0200 Subject: [PATCH] major rewrite Signed-off-by: Zoey --- src/About.js | 9 ---- src/App.css | 26 ++++++----- src/App.js | 19 ++------ src/Home.js | 73 ------------------------------- src/TopBar.js | 45 ------------------- src/components/About.js | 12 +++++ src/components/Blog.js | 12 +++++ src/{ => components}/BottomBar.js | 2 +- src/{ => components}/Embed.js | 0 src/{ => components}/FilePage.js | 0 src/components/Home.js | 62 ++++++++++++++++++++++++++ src/components/Projects.js | 12 +++++ src/{ => components}/RTMP.js | 0 src/{ => components}/SideBar.js | 0 src/components/Stream.js | 27 ++++++++++++ src/components/TopBar.js | 27 ++++++++++++ src/index.js | 68 ++++++++++++++++++++++++++-- 17 files changed, 236 insertions(+), 158 deletions(-) delete mode 100644 src/About.js delete mode 100644 src/Home.js delete mode 100644 src/TopBar.js create mode 100644 src/components/About.js create mode 100644 src/components/Blog.js rename src/{ => components}/BottomBar.js (79%) rename src/{ => components}/Embed.js (100%) rename src/{ => components}/FilePage.js (100%) create mode 100644 src/components/Home.js create mode 100644 src/components/Projects.js rename src/{ => components}/RTMP.js (100%) rename src/{ => components}/SideBar.js (100%) create mode 100644 src/components/Stream.js create mode 100644 src/components/TopBar.js diff --git a/src/About.js b/src/About.js deleted file mode 100644 index 8f8e531..0000000 --- a/src/About.js +++ /dev/null @@ -1,9 +0,0 @@ -const AboutPage = () => { - return( -
-

-
- ); -} - -export default AboutPage; \ No newline at end of file diff --git a/src/App.css b/src/App.css index 5a4a88c..3844986 100644 --- a/src/App.css +++ b/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, - #69233b, - #473b21, - #520a22, - #3f2749 + to right, + #69233b, + #61182a, + #520a22, + #312436 ); background-size: 600% 600%; animation: Gradient 120s ease infinite; - animation: Gradient 120s ease infinite; } @keyframes Gradient { - 0% {background-position: 0% 50%;} - 50% {background-position: 100% 50%;} - 100% {background-position: 0% 50%;} + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } @keyframes DarkModeButton-spin { diff --git a/src/App.js b/src/App.js index 86ce36a..06b4678 100644 --- a/src/App.js +++ b/src/App.js @@ -1,27 +1,16 @@ -//import logo from './logo.svg'; - -import React from 'react'; -import ReactDOM from 'react-dom'; - +import React, { Component } from 'react'; import './App.css'; -import TopBar from './TopBar'; -import BottomBar from './BottomBar'; -import StreamEmbed from './Embed'; -import AboutPage from './About'; -//import SideBar from './SideBar'; +import StreamEmbed from './components/Embed'; -import Home from './Home'; +import Home from './components/Home'; function App() { return (
- - - -
+ ); } diff --git a/src/Home.js b/src/Home.js deleted file mode 100644 index 366d523..0000000 --- a/src/Home.js +++ /dev/null @@ -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 ( -
-
- -

Public Services.

- -
- -
-

My Streams.

-
- - Owncast -

Owncast

- -
-
-
-
-

Welcome to Zoey's Bits.

-
-
-

I don't really know what to put here yet.

-

You are free to use any of the services in the sidebar.

- -
-
-
- ); -} - -export default Home; \ No newline at end of file diff --git a/src/TopBar.js b/src/TopBar.js deleted file mode 100644 index 20ebd0d..0000000 --- a/src/TopBar.js +++ /dev/null @@ -1,45 +0,0 @@ -const TopBar = () => { - return ( -
-
-
-
-
- Teardrop -
-
-
-
- Bunnie -
-
-
-

Zoey's Bits

-
- -
-
- -
-
- -
-
- -
-
-
-
- - - -
-
-
-
-
- ); -}; - -export default TopBar; \ No newline at end of file diff --git a/src/components/About.js b/src/components/About.js new file mode 100644 index 0000000..f65e371 --- /dev/null +++ b/src/components/About.js @@ -0,0 +1,12 @@ +import BottomBar from "./BottomBar"; +import TopBar from "./TopBar"; + +const AboutPage = () => { + return( +
+

WIP butt

+
+ ); +} + +export default AboutPage; \ No newline at end of file diff --git a/src/components/Blog.js b/src/components/Blog.js new file mode 100644 index 0000000..956e441 --- /dev/null +++ b/src/components/Blog.js @@ -0,0 +1,12 @@ +import BottomBar from "./BottomBar"; +import TopBar from "./TopBar"; + +const BlogPage = () => { + return( +
+

WIP blogpage

+
+ ); +} + +export default BlogPage; \ No newline at end of file diff --git a/src/BottomBar.js b/src/components/BottomBar.js similarity index 79% rename from src/BottomBar.js rename to src/components/BottomBar.js index 8be016f..74dd7aa 100644 --- a/src/BottomBar.js +++ b/src/components/BottomBar.js @@ -1,6 +1,6 @@ const BottomBar = () => { return ( -
+

© LibreBun 2024

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.

+
+ +
+ ); + +} + +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( +
+
+ + +
+ Join me on my actual Owncast site! +
+ ); +} + +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();