init: new react website base

src/components/App.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+// components/resources
+import { NavBar } from './Nav';
+
+export class App extends React.Component {
+    render() {
+        return (
+            <div id={"container"}>
+                <NavBar/>
+            </div>
+        )
+    }
+}

src/components/Nav.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { pages } from '../index';
+
+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>
+    })
+
+    render() {
+        return (
+            <div id="navbar">
+                <ul className="pagelist">
+                    {this.list}
+                </ul>
+            </div>
+        )
+    }
+}

src/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+// components/global styling
+import { App } from './components/App';
+import './styling/anims.css';
+import './styling/main.css';
+
+// "sitemap" for react components
+export const pages = [
+    {
+        "display": "Home",
+        "path": "/",
+        "key": "home"
+    },
+    {
+        "display": "Contact",
+        "path": "/contact",
+        "key": "contact"
+    }
+]
+
+// react 18 compliance
+const root = ReactDOM.createRoot(document.getElementById("root"))
+root.render(<App d={pages} />)

src/styling/anims.css

@@ -0,0 +1,4 @@
+@keyframes hover {
+    75% { opacity: 0.5 }
+    100% { opacity: 1; }
+}

src/styling/main.css

@@ -0,0 +1,38 @@
+body {
+    margin:0;
+    padding:0;
+    background-color:#3E3E3E;
+}
+
+/* nav styling */
+#navbar {
+    text-align:center;
+    background-color:#525459;
+}
+
+#navbar li {
+    display:inline-block;
+    padding: 10px 10px;
+    font-size:20px;
+}
+
+#navbar ul {
+    margin: 0;
+    padding:0;
+    list-style-type:none;
+}
+
+a {
+    color:white;
+    text-decoration:none;
+}
+
+a:hover {
+    color:#81A2A1;
+    animation:fadein;
+}
+
+.listitem:hover {
+    animation-name: hover;
+    animation-duration:0.5s;
+}