feat: add initial navbar and preliminary profile page (#38)

* feat: add skeleton navbar and routing capability

* style: add missing semicolon in index.tsx

* style: add missing semicolon in LandingPage.tsx

* feat: add styling for initial navbar

* feat: finalize preliminary profile page

frontend/src/components/Navbar/Navbar.css

@@ -0,0 +1,26 @@
+nav {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 2%;
+  box-sizing: border-box;
+  gap: 1.5rem;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:visited {
+  color: inherit;
+}
+
+/* 
+ * TODO: Update styling for hover and active links.
+ *       Just placeholders for now for differentiation.
+ */
+a:hover, a.active {
+  text-decoration: underline;
+}

frontend/src/components/Navbar/Navbar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import './Navbar.css';
+
 const Navbar: React.FC = () => {
   return (
     <nav>

frontend/src/components/ProfilePage/ProfilePage.css

@@ -1,6 +1,8 @@
 .info-container {
   margin: auto;
   width: 50%;
+  /* Border is just for visualization of the div dimensions */
+  padding: 2rem;
   border-style: solid;
-  border-color: black;
+  border-color: rgba(0,0,0,.4);
 }

frontend/src/components/ProfilePage/ProfilePage.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+
 import './ProfilePage.css';
 
 const ProfilePage: React.FC = () => {
   return (
     <div className="info-container">
+      <b>User Information</b>
       <p>Name: Mickey Mouse</p>
       <p>Email: [email protected]</p>
     </div>