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,6 +21,8 @@ function App() {
     const [isTerminalVisible, setIsTerminalVisible] = useState(showTerm);
 
     return (
+        <Router basename={'/~nickorlo'}>
+            <Route path='*'>
                 <div className="App">
                     {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
                     {!isTerminalVisible &&
@@ -29,6 +37,8 @@ function App() {
                         </div>
                     }
                 </div>
+            </Route>
+        </Router>
       );
 }