began work on profile page

17th Website/src/App.vue

@@ -17,8 +17,8 @@ body {
 
 #content-wrapper {
   display: block;
-  margin: 0 0 0 50px;
+  margin: 0 0 0 60px;
 
-  padding: 0px 100px;
+  padding: 0px 50px;
 }
 </style>

17th Website/src/assets/base.css

@@ -13,4 +13,12 @@ h1 {
   font-weight: 400;
   font-size: 60px;
   margin: 20px 0 20px 0px;
+}
+
+h2 {
+    color: var(--white);
+    font-weight: 300;
+    font-size: 40px;
+    margin: 0px 0 0px 0px;
+
 }

17th Website/src/components/ProfilePage/profile.vue

@@ -0,0 +1,33 @@
+<script>
+import profileHeader from './profileHeader.vue'
+
+export default {
+    name: 'ProfilePage',
+    components: {
+        profileHeader
+    }
+}
+
+</script>
+
+<template>
+    <div id="ProfileWrapper">
+        <profileHeader></profileHeader>
+        test words
+        <div id="profileContentWrapper">
+            <RouterView />
+        </div>
+    </div>
+</template>
+
+<style>
+#profileContentWrapper {
+    margin-left: 300px;
+    margin-top: 100px;
+}
+
+#ProfileWrapper {
+    display: flex;
+    flex-direction: row;
+}
+</style>

17th Website/src/components/ProfilePage/profileHeader.vue

@@ -11,17 +11,35 @@ export default {
 </script>
 
 <template>
-    <div>
+    <div id="wrapper">
         <div id="headerImages">
             <img id="rankImg" src="../icons/misc/test.png" />
-            <img id="rangerTab" src="#"/>
+            <img id="rangerTab" src="#" />
+        </div>
+        <div id="mainInfo">
+            <h1>Big Name</h1>
+            <h2>Rank</h2>
+            <h2>Unit</h2>
         </div>
-
-        <h1>Dis the header</h1>
     </div>
 </template>
 
 <style>
+#wrapper {
+    /* position: fixed; */
+    display: flex;
+    flex-direction: column-reverse;
+    margin-top: 50px;
+    max-width: 400px;
+    padding-right: 120px;
+    border-right: solid;
+    border-color: var(--background-secondary);
+}
+
+#mainInfo h1 {
+    margin: 20px 0 10px 0px;
+}
+
 #rankImg {
     max-width: 200px;
 }
@@ -31,4 +49,13 @@ export default {
     flex-direction: column;
     align-items: center;
 }
+
+@media screen and (max-width: 1300px) {
+  #wrapper {
+    flex-direction: row;
+    border: none;
+    margin-left: 25vw;
+  }
+}
+
 </style>

17th Website/src/components/ProfilePage/profileSubNav.vue

@@ -0,0 +1,18 @@
+<script>
+ import { stringLiteral } from '@babel/types';
+import { RouterLink } from 'vue-router'
+ 
+ export default {
+    name: 'subnav',
+    props: {
+        link: String,
+        active: Boolean
+    }
+ }
+</script>
+
+<template>
+    <RouterLink :to="link">
+        <p>{{ content }}</p>
+    </RouterLink>
+</template>

17th Website/src/router.js

@@ -12,7 +12,19 @@ export default createRouter({
     {
         path: '/profile',
         name: 'Profile',
-        component: () => import('./views/profile.vue'),
+        component: () => import('./components/ProfilePage/profile.vue'),
+        children: [
+          {
+            path: '',
+            name: 'personnel',
+            component: () => import('./components/ProfilePage/personnel.vue')
+          },
+          {
+            path: 'activityHistory',
+            name: 'activityHistory',
+            component: () => import('./components/ProfilePage/activityHistory.vue')
+          }
+        ]
     },
     {
         path: '/users',

17th Website/src/views/profile.vue

@@ -1,16 +0,0 @@
-<script>
-import profileHeader from '../components/ProfilePage/profileHeader.vue'
-
-export default {
-    name: 'ProfilePage',
-    components: {
-        profileHeader
-    }
-}
-
-</script>
-
-<template>
-    <profileHeader></profileHeader>
-    test words
-</template>