profile area, some transitions there

src/App.vue

@@ -1,23 +1,30 @@
 <template>
   <div id="app">
     <app-nav></app-nav>
-    <div class="main"></div>
+    <div class="main">
+      <div class="profile-wrapper">
+        <transition name="slide-fade" appear>
+          <app-profile-pic></app-profile-pic>
+        </transition>
+        <app-profile-text></app-profile-text>
+      </div>
+    </div>
     <app-footer></app-footer>
   </div>
 </template>
 
 <script>
 import AppNav from './components/AppNav.vue';
 import AppFooter from './components/AppFooter.vue';
+import AppProfilePic from './components/AppProfilePic.vue';
+import AppProfileText from './components/AppProfileText.vue';
 export default {
   name: 'app',
-  data () {
-    return {
-    }
-  },
   components: {
     'app-nav': AppNav,
     'app-footer': AppFooter,
+    'app-profile-pic': AppProfilePic,
+    'app-profile-text': AppProfileText,
   }
 
 
@@ -46,10 +53,23 @@ ul {
 }
 .main {
   flex: 1 0 auto;
-  padding: 56px 200px 0;
+  padding: 58px 200px 0;
   .filler {
     font-size: 20px;
     padding: 50px 0;
   }
+  .slide-fade-enter-active {
+    transition: all 1s ease-out;
+  }
+  .slide-fade-enter {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  .profile-wrapper {
+    padding-top: 140px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 </style>

src/components/AppNavItem.vue

@@ -16,11 +16,12 @@ export default {
 <style lang="scss" scoped>
 .nav-item-wrapper {
   width: 100px;
+  padding: 0 32px;
   a {
     color: #1b1d1f;
     font-weight: bold;
     &:after {
-      transition: visibility 0.4s, opacity 0.4s ease-in;
+      transition: visibility 0.3s, opacity 0.3s ease-in-out;
       visibility: visible;
       opacity: 0;
       content: "";

src/components/AppProfilePic.vue

@@ -0,0 +1,15 @@
+<template>
+  <img class="profile-pic" src="../assets/joe-saraceno.jpg" alt="">
+</template>
+<script>
+export default {
+  name: 'AppProfilePic',
+}
+</script>
+<style lang="scss" scoped>
+  .profile-pic {
+    width: 256px;
+    height: 256px;
+    border-radius: 50%;
+  }
+</style>

src/components/AppProfileText.vue

@@ -0,0 +1,49 @@
+<template>
+  <ul class="profile-text-list">
+    <li class="profile-text-item" v-for="item in list" :key="item.id">
+      <h3 class="heading">{{ item.heading }}</h3>
+      <p class="content">{{ item.content }}</p>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'AppProfileText',
+  data() {
+    return {
+      list: [
+        {
+          id: 0,
+          heading: 'Joe Saraceno',
+          content: 'Web developer'
+        },
+        {
+          id: 1,
+          heading: 'Skills include',
+          content: 'New frameworks, full stack'
+        },
+        {
+          id: 2,
+          heading: 'Reach out',
+          content: 'I\'m available for hire' 
+        },  
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .profile-text-list {
+    margin-top: 0;
+    .profile-text-item {
+      .heading {
+        margin-top: 0;
+        padding-bottom: 8px;
+        border-bottom: 1px solid grey;
+      }
+      .content {
+        font-style: italic;
+      }
+    }
+  }
+</style>