feat: pages, router etc

2022-09-06 01:22:07 -04:00
parent 4b412af60e
commit ba5cacd742
9 changed files with 139 additions and 10 deletions
@@ -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",
@@ -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",
-    "eslint": "8.22.0"
+    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
@@ -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.
@@ -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>
        )
    }
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export class Contact extends React.Component {
+    render() {
+        return (
+            <div id={"contact"}>
+                <p>Contact works!</p>
+            </div>
+        )
+    }
+}
@@ -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>
+        )
+    }
+}
@@ -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() {
@@ -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>
+)
@@ -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;
-}