Add the routes for MyProfile page and some css styles for the page

src/App.js

@@ -1,8 +1,11 @@
+import { Routes, Route } from 'react-router-dom';
+import MyProfile from './views/MyProfile';
+
 function App() {
   return (
-    <div className="App">
-      <h1>Space Travelers Hub</h1>
-    </div>
+    <Routes>
+      <Route path="my-profile" element={<MyProfile />} />
+    </Routes>
   );
 }
 

src/assets/styles/index.css

@@ -29,6 +29,18 @@ body {
   letter-spacing: normal;
 }
 
+ul {
+  list-style: none;
+}
+
+main {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 0;
+}
+
 .container {
   width: 100%;
   margin: 0 auto;

src/assets/styles/responsive.css

@@ -0,0 +1,28 @@
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+
+  .navbar {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}

src/index.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+import './assets/styles/index.css';
 import App from './App';
+import './assets/styles/responsive.css';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );