added router

package.json

@@ -22,6 +22,7 @@
     "react-animate-on-scroll": "^2.1.5",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-router": "^5.2.1",
     "react-scripts": "4.0.3",
     "react-slick": "^0.28.1",
     "react-tabs": "^3.2.2",
@@ -52,5 +53,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/webpack": "^5.28.0",
+    "babel-loader": "^8.1.0",
+    "ts-node": "^10.2.1",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^4.8.0"
   }
 }

src/App.tsx

@@ -8,6 +8,12 @@ import Projects from "./components/projects/Projects";
 import Hobbies from "./components/hobbies/Hobbies";
 import Contact from "./components/contact/Contact";
 import Terminal from "./components/terminal/Terminal";
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Link
+  } from "react-router-dom";
 
 function App() {
 
@@ -15,20 +21,24 @@ function App() {
     const [isTerminalVisible, setIsTerminalVisible] = useState(showTerm);
 
     return (
-        <div className="App">
-            {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
-            {!isTerminalVisible &&
-                <div>
-                    <Hero/>
-                    <AboutMe/>
-                    <Jobs/>
-                    <Projects/>
-                    <Hobbies/>
-                    <Contact/>
-                    <Footer/>
+        <Router basename={'/~nickorlo'}>
+            <Route path='*'>
+                <div className="App">
+                    {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
+                    {!isTerminalVisible &&
+                        <div>
+                            <Hero/>
+                            <AboutMe/>
+                            <Jobs/>
+                            <Projects/>
+                            <Hobbies/>
+                            <Contact/>
+                            <Footer/>
+                        </div>
+                    }
                 </div>
-            }
-        </div>
+            </Route>
+        </Router>
       );
 }