feat: embed twitter

assets/css/main.css

@@ -19,7 +19,6 @@ body {
 	-moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
   min-height: 100%;
-  height: 100%;
 }
 
 @-webkit-keyframes Gradient {

components/ContactCard.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="sm:flex sm:items-center px-6 py-4">
+  <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">
     <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 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>

components/ProjectList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sm:flex sm:items-center px-6 py-4">
+  <div class="sm:flex items-center px-6 py-4">
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
         <p class="text-xl font-bold leading-tight border-b border-2px py-4">Recent Projects</p>
@@ -35,7 +35,14 @@ export default {
   },
   data () {
     return {
-      posts: []
+      posts: [
+        {
+          id: 0,
+          title: {
+            rendered: "Loading..."
+          }
+        }
+      ]
     }
   },
 

components/TwitterEmbed.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="h-64 overflow-y-scroll">
+        <a class="twitter-timeline" data-link-color="#2B7BB9" data-chrome="nofooter noborders noheader transparent" href="https://twitter.com/rhnvrm?ref_src=twsrc%5Etfw">Tweets by rhnvrm</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+    </div>
+</template>

pages/index.vue

@@ -4,9 +4,12 @@
       <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-4">
         <contact-card></contact-card>
       </div>
-      <div class="bg-white shadow-lg rounded-lg overflow-hidden">
+      <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-4">
         <profile-list></profile-list>
       </div>
+      <div class="bg-white shadow-lg 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">
@@ -21,6 +24,7 @@
 import ContactCard from '~/components/ContactCard'
 import ProfileList from '~/components/ProfileList'
 import ProjectList from '~/components/ProjectList'
+import TwitterEmbed from '~/components/TwitterEmbed'
 
 export default {
   head: {
@@ -31,7 +35,8 @@ export default {
   components:{
     ContactCard,
     ProfileList,
-    ProjectList
+    ProjectList,
+    TwitterEmbed
   },
   data(){
     return {