feat: pages, router etc

src/components/App.jsx

@@ -1,13 +1,20 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
 
 // components/resources
 import { NavBar } from './Nav';
+import { Home } from './Home';
+import { Contact } from './Contact';
 
 export class App extends React.Component {
     render() {
         return (
             <div id={"container"}>
                 <NavBar/>
+                <Routes>
+                    <Route path="/" element={<Home />}></Route>
+                    <Route path="/contact" element={<Contact />}></Route>
+                </Routes>
             </div>
         )
     }

src/components/Contact.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export class Contact extends React.Component {
+    render() {
+        return (
+            <div id={"contact"}>
+                <p>Contact works!</p>
+            </div>
+        )
+    }
+}

src/components/Home.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export class Home extends React.Component {
+    render() {
+        return (
+            <div id={"home"}>
+                <div className={"homecontent"}>
+                    <h1>hi, i'm alex!</h1>
+                    <p>professional smooth brain, nodejs buillier, medal.tv whiffer</p>
+                </div>
+            </div>
+        )
+    }
+}

src/components/Nav.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { pages } from '../index';
+import { Link } from 'react-router-dom';
 
 export class NavBar extends React.Component {
     list = pages.map((page, i) => {
-        return <li className={"listitem button"} key={"page_" + page.key}><a href={page.path}>{page.display}</a></li>
+        return <li className={"listitem button"} key={"page_" + page.key}>
+            <Link to={page.path}>{page.display}</Link>
+        </li>
     })
 
     render() {

src/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom'
 
 // components/global styling
 import { App } from './components/App';
@@ -22,4 +23,10 @@ export const pages = [
 
 // react 18 compliance
 const root = ReactDOM.createRoot(document.getElementById("root"))
-root.render(<App d={pages} />)
+root.render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <App d={pages} />
+        </BrowserRouter>
+    </React.StrictMode>
+)

src/styling/main.css

@@ -1,7 +1,8 @@
-body {
+html, body {
     margin:0;
     padding:0;
     background-color:#3E3E3E;
+    font-family: 'IBM Plex Sans', sans-serif;
 }
 
 /* nav styling */
@@ -22,6 +23,35 @@ body {
     list-style-type:none;
 }
 
+.listitem:hover {
+    animation-name: hover;
+    animation-duration:0.5s;
+}
+
+/* home */
+#home {
+    background-color:black;
+    position:relative;
+    max-height:40vh;
+    color:white;
+    vertical-align:top;
+}
+
+.homecontent {
+    padding:50px 15vw !important;
+}
+
+.homecontent p {
+    font-size:20px;
+}
+
+#home * {
+    padding:0;
+    margin:0;
+}
+
+/* global type stuff */
+
 a {
     color:white;
     text-decoration:none;
@@ -30,9 +60,4 @@ a {
 a:hover {
     color:#81A2A1;
     animation:fadein;
-}
-
-.listitem:hover {
-    animation-name: hover;
-    animation-duration:0.5s;
 }