feat: new design, with flexitgrid

package-lock.json

@@ -5025,6 +5025,11 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
+    "flexitgrid": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/flexitgrid/-/flexitgrid-0.0.5.tgz",
+      "integrity": "sha512-J+kvy0yXGOFSQYgn3rU/3Ae6aBxds3ve73PPswskc9XBnem5Bg+s4b7u2YT3UKyrsgUHm+/56Idl8yXbLfzlHA=="
+    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
@@ -14024,9 +14029,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.1.4.tgz",
-      "integrity": "sha512-BJhkFv2pVDQTT4N8WhIwicyVFwA0fjsIV771+eoR0mLFtVk9beM5Ii0L4HcSQIIVepmWzuLsEbqmmqCdOkw5og=="
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.1.9.tgz",
+      "integrity": "sha512-CL6nOkSW1Px7aDeJ2mZrGC0sP6fCybxXZv66XP+X+sZw6lbZOedAfnzngTnUQ+qsy3eLYgr0enNT5D5b9qXY9A=="
     },
     "watchpack": {
       "version": "1.6.0",

package.json

@@ -13,11 +13,12 @@
     "@fortawesome/free-solid-svg-icons": "^5.1.0",
     "@fortawesome/vue-fontawesome": "^0.1.1",
     "axios": "^0.18.0",
+    "flexitgrid": "0.0.5",
     "i": "^0.3.6",
     "npm": "^6.2.0",
     "vue": "^2.5.16",
     "vue-axios": "^2.1.2",
-    "vuetify": "^1.1.4"
+    "vuetify": "^1.1.9"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.0.0-beta.49",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app v-bind:style="bgc">
+  <v-app>
     <v-content>
       <MainPage/>
     </v-content>
@@ -8,6 +8,8 @@
 
 <script>
 import MainPage from './components/MainPage'
+import 'flexitgrid/dist/flexit.css'
+import '@/assets/css/style.css'
 
 export default {
   name: 'App',
@@ -16,10 +18,7 @@ export default {
   },
   data () {
     return {
-      title: 'Rohan Verma',
-      bgc: {
-        backgroundColor: '#4833f4'
-      }
+      title: 'Rohan Verma'
     }
   }
 }

src/assets/css/style.css

@@ -0,0 +1,59 @@
+.v-card{
+    border-radius: 0px;
+}
+
+.card_heading{
+    padding: 10px;
+    background: #667db6;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, #667db6, #0082c8, #0082c8, #667db6);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, #667db6, #0082c8, #0082c8, #667db6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
+}
+
+.shadow{
+    text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.5);
+}
+
+#app{
+	background: linear-gradient(270deg, #00b7af, #3c67bd, #5d88df);
+	background-size: 600% 600%;
+
+	-webkit-animation: Gradient 15s ease infinite;
+	-moz-animation: Gradient 15s ease infinite;
+	animation: Gradient 15s ease infinite;
+}
+
+@-webkit-keyframes Gradient {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@-moz-keyframes Gradient {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@keyframes Gradient {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}

src/components/ContactCard.vue

@@ -1,31 +1,24 @@
 <template>
     <v-card>
-    <v-parallax
-        class="white--text"
-        src="background.jpg"
-        height="164px"
-    >
-        <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-container>
-    </v-parallax>
+    <div class="card_heading white--text">
+        <div class="row">
+            <div class="6 columns">
+                <div class="row end">
+                    <v-avatar
+                        :tile= false
+                        :size= 128
+                    >
+                        <img src="//avatars2.githubusercontent.com/u/952036?s=512" alt="Profile">
+                    </v-avatar>
+                </div>
+            </div>
+            <div class="6 columns">
+                <div class="headline shadow">Rohan Verma</div>
+                <div class="shadow">Software Developer</div>
+                <div class="shadow">@rhnvrm</div>
+            </div>
+        </div>
+    </div>
 
     <v-card-title primary-title >
         

src/components/MainPage.vue

@@ -1,27 +1,27 @@
 <template>
-  <v-container fluid>
-    <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-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>
+  <div class="container">
+    <div class="row">
+      <div class="five columns">
+        <div class="row">
+          <div class="columns">
+        <contact-card></contact-card>
+          </div>
+        </div>
+        <div class="row">
+          <div class="columns">
+            <profile-list></profile-list>
+          </div>
+        </div>
+      </div>
+      <div class="seven columns">
+        <div class="row">
+          <div class="columns">
+            <project-list></project-list>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

src/components/ProfileList.vue

@@ -1,14 +1,14 @@
 <template>
     <v-card>
-    <v-parallax class="white--text" src="background.jpg" height="32px">
+    <div class="card_heading white--text">
         <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>
+            <span class="headline shadow">Profiles</span>
             </v-flex>
         </v-layout>
         </v-container>
-    </v-parallax>
+    </div>
     <v-list>
         <v-list-tile @click="redirect_href('linkedin')">
         <v-list-tile-content>

src/components/ProjectList.vue

@@ -1,19 +1,15 @@
 <template>
     <v-card >
-    <v-parallax
-        class="white--text"
-        src="background.jpg"
-        height="32px"
-    >
+    <div class="card_heading white--text">
         <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>
+            <span class="headline shadow" >Projects</span>
             </v-flex>
         </v-layout>
 
         </v-container>
-    </v-parallax>
+    </div>
     <v-list v-for="project in projects" v-bind:key="project.id">
         <v-list-tile @click ='redirect_url(project.link)'>
         <v-list-tile-content>