feat: redesign

.WP2Static/5c6fd60de0e6e

@@ -1 +0,0 @@
-WP2Static test upload

assets/css/main.css

@@ -12,60 +12,19 @@ html {
 }
 
 body {
-  background: linear-gradient(270deg, #00b7af, #3c67bd, #5d88df);
-	background-size: 600% 600%;
+  background-color: #fafafa;
 
-	-webkit-animation: Gradient 15s ease infinite;
-	-moz-animation: Gradient 15s ease infinite;
-  animation: Gradient 15s ease infinite;
   min-height: 100%;
 }
 
-@-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%
-	}
-}
-
-
 .btn {
-  @apply text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-indigo text-indigo;
+  @apply text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-black text-black;
 }
-.btn-indigo {
-  @apply bg-white text-indigo;
+.btn-black {
+  @apply bg-white text-black;
 }
-.btn-indigo:hover {
-  @apply bg-indigo text-white;
+.btn-black:hover {
+  @apply bg-black text-white;
 }
 
 /* Temporary fix for https://github.com/vaso2/nuxt-fontawesome/issues/9 */

components/ContactCard.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="sm:flex items-center px-6 py-4">
-    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="//avatars2.githubusercontent.com/u/952036?s=512" alt="profile photo">
+    <img class="border shadow-md border-black block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="//avatars2.githubusercontent.com/u/952036?s=512" alt="profile photo">
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
-        <p class="text-xl font-bold leading-tight">Rohan Verma</p>
+        <p class="text-xl font-bold font-serif leading-tight">Rohan Verma</p>
         <p class="text-sm leading-tight text-grey-dark">Software Developer at <a class="no-underline text-grey-dark" href="https://zerodha.com/">Zerodha</a></p>
       </div>
       <div>
-        <button @click="tweetHi" class="btn btn-indigo">
+        <button @click="tweetHi" class="btn btn-black">
           Tweet @rhnvrm
         </button>
       </div>

components/HomeMessage.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="items-center px-6 py-4 ">
+        <h1 class="p-2 font-serif">👋 Hello World</h1>
+
+        <div class="p-4 leading-normal">
+            Welcome to my homepage, 
+            <br>
+
+            I’m a Software Developer working at <a class="no-underline text-grey-dark" href="https://zerodha.com/">Zerodha</a> where
+            I write Golang, Python and Javascript to build things that are used at scale. 
+            <br>
+
+            I am also developing <a class="no-underline text-grey-dark" href="https://upi.link/">upi.link</a>, a small and nifty
+            programmable UPI shortlink generator. 
+            <br>
+
+            <br>
+            <br>
+            You can read my <a class="no-underline text-grey-dark" href="https://blog.rohanverma.net/">blog</a> where 
+            I try to write about what I am doing and things I find interesting.
+        </div>
+    </div>
+</template>

components/ProfileList.vue

@@ -3,37 +3,37 @@
         <div @click="redirect_href('blog')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
             <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
                 <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faWordpress" /></fa-layers> 
-                <span class="pl-2">Blog</span>
+                <span class="pl-2 font-serif">Blog</span>
             </div>
         </div>
         <div @click="redirect_href('twitter')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
             <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
                 <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faTwitter" /></fa-layers> 
-                <span class="pl-2">Twitter</span>
+                <span class="pl-2 font-serif">Twitter</span>
             </div>
         </div>
         <div @click="redirect_href('github')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
             <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
                 <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faGithub" /></fa-layers> 
-                <span class="pl-2">Github</span>
+                <span class="pl-2 font-serif">Github</span>
             </div>
         </div>
         <div @click="redirect_href('keybase')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
             <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
                 <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faKeybase" /></fa-layers> 
-                <span class="pl-2">Keybase</span>
+                <span class="pl-2 font-serif">Keybase</span>
             </div>
         </div>
         <div @click="redirect_href('linkedin')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
             <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
                 <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faLinkedin" /></fa-layers> 
-                <span class="pl-2">Linkedin</span>
+                <span class="pl-2 font-serif">Linkedin</span>
             </div>
         </div>
         <div @click="redirect_href('youtube')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
             <div class="text-lg mb-1 group-hover:text-white fix-fa-inlined">
                 <fa-layers full-width class="fa flex-none align-middle"><fa :icon="faYoutube" /></fa-layers> 
-                <span class="pl-2">Youtube</span>
+                <span class="pl-2 font-serif">Youtube</span>
             </div>
         </div>
     </div>

components/ProjectList.vue

@@ -3,7 +3,7 @@
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
         <p class="flex flex-col sm:flex-row border-b border-2px py-4">
-         <span class="flex-1 text-xl font-bold leading-tight ">Recent Projects</span>
+         <span class="flex-1 text-xl font-bold leading-tight font-serif">Recent Projects</span>
          <span class="flex-none text-sm leading-tight text-grey-dark">
            <span @click="changePage(-1)" :class="{'line-through': is_first_page, 'cursor-pointer': !is_first_page}">next</span>
             /
@@ -14,7 +14,7 @@
       <div>
         <!-- {{posts}} -->
         <div v-for="project in posts" v-bind:key="project.id" @click="redirect_href(project.link)" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
-            <p class="flex-1 text-lg mb-1 group-hover:text-white " v-html="project.title.rendered"></p>
+            <p class="flex-1 text-lg mb-1 group-hover:text-white font-serif" v-html="project.title.rendered"></p>
             <fa-layers full-width class="fa flex-none align-middle ml-2">
               <fa :icon="fas.faArrowCircleRight"/>
             </fa-layers>

nuxt.config.js

@@ -13,7 +13,8 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
+      { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Playfair+Display' }
     ]
   },
   /*

pages/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="container mx-auto p-4 min-h-screen md:flex">
     <div class="flex-none w-full md:max-w-xs p-2">
-      <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-4">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden mb-4">
         <contact-card></contact-card>
       </div>
-      <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-4">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden mb-4">
         <profile-list></profile-list>
       </div>
-      <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-4">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden mb-4">
         <twitter-embed></twitter-embed>
       </div>
     </div>
     <div class="flex-1 p-2">
-      <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-4">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden mb-4">
+        <home-message></home-message>
+      </div>
+      <div class="bg-white shadow-md rounded-lg overflow-hidden mb-4">
         <project-list></project-list>
       </div>
     </div>
@@ -25,6 +28,7 @@ import ContactCard from '~/components/ContactCard'
 import ProfileList from '~/components/ProfileList'
 import ProjectList from '~/components/ProjectList'
 import TwitterEmbed from '~/components/TwitterEmbed'
+import HomeMessage from '~/components/HomeMessage'
 
 export default {
   head: {
@@ -36,7 +40,8 @@ export default {
     ContactCard,
     ProfileList,
     ProjectList,
-    TwitterEmbed
+    TwitterEmbed,
+    HomeMessage
   },
   data(){
     return {

tailwind.config.js

@@ -205,6 +205,7 @@ module.exports = {
       'sans-serif'
     ],
     'serif': [
+      'Playfair Display',
       'Constantia',
       'Lucida Bright',
       'Lucidabright',