feat: pages, router etc

package-lock.json

@@ -14,6 +14,7 @@
         "eslint": "8.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -8499,6 +8500,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13999,6 +14008,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -22819,6 +22852,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26613,6 +26654,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "eslint": "8.22.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^2.1.4"
-    "eslint": "8.22.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -15,6 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

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;
@@ -31,8 +61,3 @@ a:hover {
     color:#81A2A1;
     animation:fadein;
 }
-
-.listitem:hover {
-    animation-name: hover;
-    animation-duration:0.5s;
-}