From d3d73a6b5ca28535ff80fd1c46553ebdf1a2f5bd Mon Sep 17 00:00:00 2001
From: Rohan Verma <hello@rohanverma.net>
Date: Sun, 10 Feb 2019 20:04:11 +0530
Subject: [PATCH] feat: embed twitter

---
 assets/css/main.css         |  1 -
 components/ContactCard.vue  |  4 ++--
 components/ProjectList.vue  | 11 +++++++++--
 components/TwitterEmbed.vue |  5 +++++
 pages/index.vue             |  9 +++++++--
 5 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 components/TwitterEmbed.vue

diff --git a/assets/css/main.css b/assets/css/main.css
index 8029d70..36ca5fc 100644
--- a/assets/css/main.css
+++ b/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 {
diff --git a/components/ContactCard.vue b/components/ContactCard.vue
index dee0e71..8c8768e 100644
--- a/components/ContactCard.vue
+++ b/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>
diff --git a/components/ProjectList.vue b/components/ProjectList.vue
index 08ae25e..b19b596 100644
--- a/components/ProjectList.vue
+++ b/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..."
+          }
+        }
+      ]
     }
   },
 
diff --git a/components/TwitterEmbed.vue b/components/TwitterEmbed.vue
new file mode 100644
index 0000000..dd9f33b
--- /dev/null
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 0fbf52b..6143c48 100755
--- a/pages/index.vue
+++ b/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 {