Commit Major Implementation now that gitea is setup

src/App.tsx

@@ -1,16 +1,52 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { useEffect, useRef } from 'react';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
 import './App.css';
+import FloatingHeader from './components/floatingHeader';
+import ParticlesBackground from './components/ParticlesBackground';
+import Home from './pages/Home';
+import About from './pages/About';
+import WorkExperience from './pages/WorkExperience';
+import Projects from './pages/Projects';
+import Contact from './pages/Contact';
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const backgroundDiv = document.querySelector('.background');
+    if (backgroundDiv) {
+      backgroundDiv.scrollTop = 0;
+    }
+  }, [pathname]);
+
+  return null;
+}
 
 function App() {
+
   return (
-    <div>
-      <header>
-        <p>
-          Hello World!
-        </p>
-      </header>
-    </div>
+    <BrowserRouter>
+      <ScrollToTop />
+      <ParticlesBackground />
+      <div className='background'>
+        <div className='verticalContentItem'>
+          <FloatingHeader></FloatingHeader>
+          <div>
+            <div style={{ height: "65px" }}></div>
+          </div>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/work-experience" element={<WorkExperience />} />
+            <Route path="/projects" element={<Projects />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+          <div>
+            <div style={{ height: "20px" }}></div>
+          </div>
+        </div>
+      </div>
+    </BrowserRouter>
   );
 }