began work on profile page

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>