Update base landing page

package-lock.json

@@ -15,6 +15,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-helmet": "^6.1.0",
+        "react-router-dom": "^6.24.1",
         "react-scripts": "5.0.1",
         "serve": "^14.2.1",
         "web-vitals": "^2.1.4"
@@ -3358,6 +3359,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz",
+      "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15795,6 +15804,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz",
+      "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz",
+      "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1",
+        "react-router": "6.24.1"
+      },
+      "engines": {
+        "node": ">=14.0.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",

package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.24.1",
     "react-scripts": "5.0.1",
     "serve": "^14.2.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,10 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
 import LandingPage from './components/LandingPage/LandingPage';
+import NavBar from './components/NavBar/NavBar';
 
 function App() {
   return (
     <div className="App">
+      <NavBar />
       <LandingPage style={{height: '100%'}}/>
   </div>
   );

src/components/ContactPage/ContactPage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ContactPage = () => (
+  <div>
+    ContactPage Component
+  </div>
+);
+
+ContactPage.propTypes = {};
+
+ContactPage.defaultProps = {};
+
+export default ContactPage;

src/components/HomePage/HomePage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const HomePage = () => (
+  <div>
+    HomePage Component
+  </div>
+);
+
+HomePage.propTypes = {};
+
+HomePage.defaultProps = {};
+
+export default HomePage;

src/components/LandingPage/LandingPage.js

@@ -1,18 +1,33 @@
 import React from 'react';
-import '../../styles/landingPage.scss'
+import { Route } from 'react-router-dom';
+import { Routes } from 'react-router-dom';
+import { typeWriterEffect } from '../../helpers/animations';
+import LinksPage from '../LinksPage/LinksPage';
+import ProjectsPage from '../ProjectsPage/ProjectsPage';
+import './LandingPage.scss'
 
 const LandingPage = () => {
   return (
     <div className='main'>
       <div className='main-paragraph'>
-        <h1 className='title'>nÿlo.dev</h1>
-        <h2 className='subtitle'>Hello.&nbsp;</h2>
-        <span style={{ width: '80%%', textAlign: 'left', marginTop: '5px', marginBottom: '5px' }}>
-          My name is Danylo; welcome to my homepage. Feel free to reach me at the following <a className='link' href="mailto:danylo@dotsenko.ca">email</a>.
-        </span>
-        <span>
-          Thank you for visiting.
-        </span>
+        <Routes>
+          <Route path="/" element={
+            <div style={{width: '80%'}}>
+              <h1 className='title'>nÿlo.dev</h1>
+              <h2 className='subtitle'>Hello.&nbsp;</h2>
+              <span className='body'>
+                My name is Danylo; welcome to my homepage. I am a software engineer and general enthusiast of making things.
+                You can reach me at <i>dotsenkodanylo@gmail.com</i>.
+                <br />
+                Thank you for visiting!
+              </span>
+            </div>
+          } />
+          <Route path="/projects" element={<ProjectsPage/>} />
+          <Route path="/links" element={<LinksPage/>} />
+        </Routes>
+
+
       </div>
     </div>
   )

src/components/LandingPage/LandingPage.scss

@@ -17,6 +17,8 @@
     font-family: 'Menlo', 'Helvetica', 'Futura';
     letter-spacing: -1px;
     text-align: left;
+    display: flex;
+    justify-content: center;
 
     span {
         display: block;
@@ -35,12 +37,26 @@
     margin: 0 0 40px;
 
     @media (max-width: 750px) {
-        font-size: 80px;
+        font-size: 60px;
+        margin-bottom: 10px;
     }
 }
 
 .subtitle {
     text-align: left;
     width: 80%;
-    margin: 0;
+    margin: 5px 0;
+}
+
+.body {
+    width: '80%'; 
+    text-align: left;
+    margin-top: '5px';
+    margin-bottom: '5px';
+    line-height: '130%';
+    font-size: 30px;
+
+    @media (max-width: 750px) {
+        font-size: 20px;
+    }
 }

src/components/LinksPage/LinksPage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './LinksPage.scss'
+
+const LinksPage = () => (
+  <div className='links'>
+    <ul>
+      <li>Linkedin: <a href='https://linkedin.com/in/dotsenko-danylo' target="_blank">https://linkedin.com/in/dotsenko-danylo</a></li>
+      <li>Git: <a href='https://git.dotsenko.ca/dotsenkodanylo' target="_blank">https://git.dotsenko.ca/dotsenkodanylo</a></li>
+      <li>Github: <a href="https://github.com/dotsenkodanylo" target="_blank">https://github.com/dotsenkodanylo</a></li>
+      <li>Email: <a target="_blank">dotsenkdanylo@gmail.com</a></li>
+    </ul>
+  </div>
+);
+
+//LinksPage.propTypes = {};
+
+//LinksPage.defaultProps = {};
+
+export default LinksPage;

src/components/LinksPage/LinksPage.scss

@@ -0,0 +1,18 @@
+.links {
+    ul {
+        line-height: 120%;
+        overflow-wrap: normal;
+
+        li a {
+            color: white;
+        }
+
+        @media (max-width: 750px) { 
+            font-size: 15px;
+
+            li {
+                margin: 4px 0;
+            }
+        }
+    }
+}

src/components/NavBar/NavBar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './NavBar.scss';
+
+const NavBar = () => {
+  return (
+    <nav className="navbar">
+      <ul className="navbar-links">
+        <li><Link to="/">About</Link></li>
+        <li><Link to="/projects">Projects</Link></li>
+        <li hidden><Link to="/writing">Writing</Link></li>
+        <li hidden><Link to="/contact">Contact</Link></li>
+        <li><Link to="/links">Links</Link></li>
+      </ul>
+    </nav>
+  )
+};
+
+//NavbarComponent.propTypes = {};
+
+//NavbarComponent.defaultProps = {};
+
+export default NavBar;

src/components/NavBar/NavBar.scss

@@ -0,0 +1,36 @@
+.navbar {
+    color: #fff;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+
+    a {
+        text-decoration: none;
+        color: white;
+        font-family: 'Menlo', 'Helvetica', 'Futura';
+        font-weight: 700;
+    }
+
+    ul {
+        list-style-type: none;
+        display: flex;
+        justify-content: center;
+        padding: 0;
+        width: 100%;
+
+        li {
+            margin: 0 2%;
+            font-size: 25px;
+
+            @media (max-width: 750px) {
+                font-size: medium;
+            }
+        }
+
+
+    }
+
+
+}

src/components/ProjectsPage/ProjectsPage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ProjectsPage.scss'
+
+
+const ProjectsPage = () => (
+  <div className='placeholder' style={{ textAlign: 'center' }}>
+    <span >Currently migrating to on-prem "cloud"...</span>
+  </div>
+);
+
+//ProjectsPage.propTypes = {};
+
+//ProjectsPage.defaultProps = {};
+
+export default ProjectsPage;

src/components/ProjectsPage/ProjectsPage.scss

@@ -0,0 +1,8 @@
+.placeholder {
+    text-align: center;
+    font-weight: 500;
+
+    @media (max-width: 750px) {
+        font-size: large;
+    }
+}

src/index.js

@@ -3,12 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   //<React.StrictMode>
+  <BrowserRouter>
     <App />
+  </BrowserRouter>
   //</React.StrictMode>
 );