feat: new layout

src/App.vue

@@ -18,7 +18,7 @@ export default {
     return {
       title: 'Rohan Verma',
       bgc: {
-        backgroundColor: '#80DEEA'
+        backgroundColor: '#4833f4'
       }
     }
   }

src/components/ContactCard.vue

@@ -1,29 +1,29 @@
 <template>
-<v-flex xs12 sm6 md6 lg6>
-    <v-card width="384px" >
+    <v-card>
     <v-parallax
         class="white--text"
         src="background.jpg"
         height="164px"
     >
-        <v-container fill-height fluid>
-        <v-layout fill-height>
-            <v-flex xs12 align-end flexbox>
+        <v-container fill-height>
+        <v-spacer></v-spacer>
+        <!-- <v-layout column align-center > -->
+            <v-avatar
+                :tile= false
+                :size= 128
+            >
+                <img src="//avatars2.githubusercontent.com/u/952036?s=512" alt="Profile">
+            </v-avatar>
+        <!-- </v-layout> -->
+        <!-- <v-layout fill-height> -->
+            <v-flex xs12 align-end flexbox ml-3>
             <span class="headline" style="text-shadow: 1px 1px 10px #000;">Rohan Verma</span>
             <br/>
             <span style="text-shadow: 1px 1px 10px #000;">Software Developer</span>
             <br/>
             <span style="text-shadow: 1px 1px 10px #000;">@rhnvrm</span>
             </v-flex>
-        </v-layout>
-        <v-layout column align-center >
-        <v-avatar
-            :tile= false
-            :size= 128
-        >
-            <img src="//avatars2.githubusercontent.com/u/952036?s=512" alt="Profile">
-        </v-avatar>
-        </v-layout>
+        <!-- </v-layout> -->
         </v-container>
     </v-parallax>
 
@@ -39,5 +39,4 @@
         <v-btn flat color="blue">Share</v-btn>
     </v-card-actions>
     </v-card>
-</v-flex>
 </template>

src/components/MainPage.vue

@@ -1,21 +1,26 @@
 <template>
   <v-container fluid>
-    
-      <v-layout column align-center>
-        <contact-card>
-
-        </contact-card>
-      </v-layout>
-      <v-layout column align-center mt-3>
-        <profile-list>
-
-        </profile-list>
+    <v-layout>
+      <v-flex xs12 md3 sm3 lg3>
+      <v-layout>
+        <v-flex>
+          <v-flex>
+          <contact-card></contact-card>
+          </v-flex>
+          <v-flex mt-3>
+          <profile-list></profile-list>
+          </v-flex>
+        </v-flex>
       </v-layout>
-      <v-layout column align-center mt-3>
-        <project-list>
-
-        </project-list>
+      </v-flex>
+      <v-flex xs12 md9 sm9 lg9>
+      <v-layout ml-3>
+        <v-flex>
+        <project-list></project-list>
+        </v-flex>
       </v-layout>
+      </v-flex>
+    </v-layout>
   </v-container>
 </template>
 

src/components/ProfileList.vue

@@ -1,19 +1,12 @@
 <template>
-    <v-flex xs12 sm6 md6 lg6>
-
-    <v-card width="384px" >
-    <v-parallax
-        class="white--text"
-        src="background.jpg"
-        height="32px"
-    >
-        <v-container fill-height fluid>
+    <v-card>
+    <v-parallax class="white--text" src="background.jpg" height="32px">
+        <v-container fill-height>
         <v-layout fill-height>
             <v-flex xs12 align-end flexbox>
             <span class="headline" style="text-shadow: 1px 1px 10px #000;">My Profiles</span>
             </v-flex>
         </v-layout>
-
         </v-container>
     </v-parallax>
     <v-list>
@@ -51,7 +44,6 @@
         </v-list-tile>
     </v-list>
     </v-card>
-    </v-flex>
 </template>
 
 <script>

src/components/ProjectList.vue

@@ -1,13 +1,11 @@
 <template>
-    <v-flex xs12 sm6 md6 lg6>
-
-    <v-card width="384px" >
+    <v-card >
     <v-parallax
         class="white--text"
         src="background.jpg"
         height="32px"
     >
-        <v-container fill-height fluid>
+        <v-container fill-height>
         <v-layout fill-height>
             <v-flex xs12 align-end flexbox>
             <span class="headline" style="text-shadow: 1px 1px 10px #000;">My Projects</span>
@@ -20,6 +18,7 @@
         <v-list-tile @click ='redirect_url(project.link)'>
         <v-list-tile-content>
             <v-list-tile-title v-html="project.title.rendered"></v-list-tile-title>
+            <v-list-tile-sub-title v-html="project.date"></v-list-tile-sub-title>
         </v-list-tile-content>
         <v-list-tile-action>
             <v-icon>fas fa-arrow-circle-right</v-icon>
@@ -27,7 +26,6 @@
         </v-list-tile>
     </v-list>
     </v-card>
-    </v-flex>
 </template>
 
 <script>
@@ -39,8 +37,12 @@ export default {
         }
     },
     mounted:  function() {
-     this.getProjects().then(res => {
-       this.projects = res.data;
+    this.getProjects().then(res => {
+        for (var i = 0; i < res.data.length; i++) {
+            var dateObject = new Date(res.data[i].date);
+            res.data[i].date = dateObject.toDateString();
+        } 
+        this.projects = res.data;  
      });
   },
     methods: {