diff --git a/package-lock.json b/package-lock.json
index 395e461..5c7235f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2092,6 +2092,37 @@
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
diff --git a/package.json b/package.json
index 2a4ff90..db30d77 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
new file mode 100644
index 0000000..228b4b3
Binary files /dev/null and b/public/android-icon-144x144.png differ
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
new file mode 100644
index 0000000..d1f4f99
Binary files /dev/null and b/public/android-icon-192x192.png differ
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
new file mode 100644
index 0000000..511b82f
Binary files /dev/null and b/public/android-icon-36x36.png differ
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
new file mode 100644
index 0000000..5aeaa50
Binary files /dev/null and b/public/android-icon-48x48.png differ
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
new file mode 100644
index 0000000..617c310
Binary files /dev/null and b/public/android-icon-72x72.png differ
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
new file mode 100644
index 0000000..e2e9ce1
Binary files /dev/null and b/public/android-icon-96x96.png differ
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
new file mode 100644
index 0000000..a75b689
Binary files /dev/null and b/public/apple-icon-114x114.png differ
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
new file mode 100644
index 0000000..de2cdae
Binary files /dev/null and b/public/apple-icon-120x120.png differ
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
new file mode 100644
index 0000000..228b4b3
Binary files /dev/null and b/public/apple-icon-144x144.png differ
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
new file mode 100644
index 0000000..75ec0a9
Binary files /dev/null and b/public/apple-icon-152x152.png differ
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
new file mode 100644
index 0000000..a5a645f
Binary files /dev/null and b/public/apple-icon-180x180.png differ
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
new file mode 100644
index 0000000..1f753ba
Binary files /dev/null and b/public/apple-icon-57x57.png differ
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
new file mode 100644
index 0000000..4f43295
Binary files /dev/null and b/public/apple-icon-60x60.png differ
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
new file mode 100644
index 0000000..617c310
Binary files /dev/null and b/public/apple-icon-72x72.png differ
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
new file mode 100644
index 0000000..b7ba22b
Binary files /dev/null and b/public/apple-icon-76x76.png differ
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
new file mode 100644
index 0000000..923ba6d
Binary files /dev/null and b/public/apple-icon-precomposed.png differ
diff --git a/public/apple-icon.png b/public/apple-icon.png
new file mode 100644
index 0000000..923ba6d
Binary files /dev/null and b/public/apple-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..c554148
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..34eab0b
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..e8651e2
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
new file mode 100644
index 0000000..e2e9ce1
Binary files /dev/null and b/public/favicon-96x96.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..b18bc38 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index a2a7345..8faedfc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,24 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Ayush Mukherjee</title>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet"> 
+
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= BASE_URL %>apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= BASE_URL %>apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= BASE_URL %>apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= BASE_URL %>apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= BASE_URL %>apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= BASE_URL %>apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= BASE_URL %>apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= BASE_URL %>apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="<%= BASE_URL %>android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="<%= BASE_URL %>favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#F6FAFF">
+    <meta name="msapplication-TileImage" content="<%= BASE_URL %>ms-icon-144x144.png">
+    <meta name="theme-color" content="#F6FAFF">
   </head>
   <body>
     <noscript>
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..013d4a6
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
\ No newline at end of file
diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png
new file mode 100644
index 0000000..228b4b3
Binary files /dev/null and b/public/ms-icon-144x144.png differ
diff --git a/public/ms-icon-150x150.png b/public/ms-icon-150x150.png
new file mode 100644
index 0000000..e7ce18e
Binary files /dev/null and b/public/ms-icon-150x150.png differ
diff --git a/public/ms-icon-310x310.png b/public/ms-icon-310x310.png
new file mode 100644
index 0000000..849882a
Binary files /dev/null and b/public/ms-icon-310x310.png differ
diff --git a/public/ms-icon-70x70.png b/public/ms-icon-70x70.png
new file mode 100644
index 0000000..01769f0
Binary files /dev/null and b/public/ms-icon-70x70.png differ
diff --git a/public/resume.pdf b/public/resume.pdf
new file mode 100644
index 0000000..ed8dbe9
Binary files /dev/null and b/public/resume.pdf differ
diff --git a/src/App.vue b/src/App.vue
index cf4e44a..b50eff9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,16 +2,19 @@
   <div id="app">
     <Header></Header>
     <router-view></router-view>
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
 import Header from '@/components/Header'
+import Footer from '@/components/Footer'
 
 export default {
   name: 'App',
   components: {
-    Header
+    Header,
+    Footer
   }
 }
 </script>
diff --git a/src/assets/advitya.png b/src/assets/advitya.png
new file mode 100644
index 0000000..44f0eb2
Binary files /dev/null and b/src/assets/advitya.png differ
diff --git a/src/assets/apl.png b/src/assets/apl.png
new file mode 100644
index 0000000..0973a2c
Binary files /dev/null and b/src/assets/apl.png differ
diff --git a/src/assets/cpgc.png b/src/assets/cpgc.png
new file mode 100644
index 0000000..42c9e36
Binary files /dev/null and b/src/assets/cpgc.png differ
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..353d550
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,6 @@
+<template>
+    <footer>
+        This website is open source. <a href="https://github.com/ayush123460/ayushm.com">Find me on Github!</a>
+        &copy; 2020 Ayush Mukherjee, all rights to content reserved.
+    </footer>
+</template>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 5660f66..116451b 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header>
-        <a href="https://ayushm.com" class="brand">
+        <router-link to="/" class="brand">
             <div class="logo">
                 <img src="@/assets/logo.png" alt="Ayush M. Logo" width="60px" height="60px">
             </div>
@@ -8,7 +8,7 @@
                 <span>Ayush</span>
                 <span>Mukherjee.</span>
             </div>
-        </a>
+        </router-link>
         <nav>
             <router-link to="#work">work</router-link>
             <router-link to="#about">about</router-link>
diff --git a/src/router/index.js b/src/router/index.js
index 711f9d9..650f97a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,21 +9,22 @@ Vue.use(VueRouter)
     path: '/',
     name: 'Home',
     component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
 ]
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes
+  routes,
+  scrollBehavior (to, from, savedPosition) {
+    if (to.hash) {
+      return { selector: to.hash }
+    } else if (savedPosition) {
+      return savedPosition
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }
 })
 
 export default router
diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss
index 36097f2..7410aed 100644
--- a/src/scss/base/_base.scss
+++ b/src/scss/base/_base.scss
@@ -11,6 +11,10 @@ body {
     box-sizing: inherit;
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 body {
     background: $bg;
     color: $fg;
@@ -26,5 +30,13 @@ p {
 }
 
 .container {
-    padding: 0 120px;
+    padding: 0 60px;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+@media only screen and (max-width: 768px) {
+    .container {
+        padding: 0 30px;
+    }
 }
\ No newline at end of file
diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
index a57a66d..2b323ea 100644
--- a/src/scss/base/_variables.scss
+++ b/src/scss/base/_variables.scss
@@ -16,7 +16,9 @@ $font-bold: 700;
 // font sizes
 $font-brand: 16pt;
 $font-nav: 12pt;
+$font-hero: 30pt;
 $font-section: 50pt;
 $font-section-sub: 16pt;
-$font-heading: 30pt;
-$font-regular: 16pt;
\ No newline at end of file
+$font-heading: 20pt;
+$font-regular: 16pt;
+$font-panel: 200pt;
\ No newline at end of file
diff --git a/src/scss/components/_btn.scss b/src/scss/components/_btn.scss
index 2bde855..4e069eb 100644
--- a/src/scss/components/_btn.scss
+++ b/src/scss/components/_btn.scss
@@ -1,10 +1,13 @@
 .btn {
-    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
     background: $primary;
     color: $bg;
     text-decoration: none;
-    padding: 23px 50px;
+    font-size: $font-nav;
+    padding: 20px 45px;
     margin-right: 40px;
+    border: none;
     border-radius: 5px;
     transition: 0.2s ease;
 
diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss
new file mode 100644
index 0000000..a447f08
--- /dev/null
+++ b/src/scss/components/_footer.scss
@@ -0,0 +1,17 @@
+footer {
+    background: white;
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: $font-nav;
+    padding: 0 30px;
+
+    a,
+    a:active,
+    a:visited {
+        text-decoration: none;
+        color: $primary;
+    }
+}
\ No newline at end of file
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 8408f4a..5f7eeb0 100644
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -1,5 +1,5 @@
 header {
-    padding: 40px 90px 40px 120px;
+    padding: 40px 60px 40px 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -7,7 +7,7 @@ header {
     .brand {
         display: flex;
         align-items: center;
-        padding: 20px 30px 20px 30px;
+        padding: 20px 30px;
         font-size: $font-brand;
         color: $fg;
         text-decoration: none;
@@ -57,4 +57,14 @@ header {
             }
         }
     }
+}
+
+@media only screen and (max-width: 960px) {
+    header {
+        justify-content: center;
+        
+        nav {
+            display: none;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
index e611cc6..279e659 100644
--- a/src/scss/components/_index.scss
+++ b/src/scss/components/_index.scss
@@ -1,2 +1,5 @@
 @import 'header',
-'btn';
\ No newline at end of file
+'btn',
+'title',
+'panel',
+'footer';
\ No newline at end of file
diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss
new file mode 100644
index 0000000..ce74ccf
--- /dev/null
+++ b/src/scss/components/_panel.scss
@@ -0,0 +1,92 @@
+.panel {
+    padding: 0 30px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .panel__image {
+        max-width: 640px;
+
+        img {
+            width: 90%;
+            border-radius: 50px;
+            border: 4px solid $quaternary;
+            box-shadow: 0 3px 10px rgba($secondary, 25%);
+        }
+    }
+
+    .panel__body {
+        margin-right: 10px;
+
+        .body__number {
+            position: absolute;
+            top: -90px;
+            left: -30px;
+            font-weight: $font-bold;
+            font-size: $font-panel;
+            color: $quaternary;
+            z-index: -1;
+        }
+
+        .body__title {
+            font-size: $font-heading;
+            font-weight: $font-bold;
+        }
+
+        .body__content {
+            margin: 40px 0;
+            max-width: 800px;
+        }
+    }
+}
+
+.panel-sec {
+    flex-direction: row-reverse;
+
+    .panel__body {
+        margin-right: 0;
+        margin-left: 10px;
+        .body__number {
+            left: 90%;
+        }
+    }
+}
+
+@media only screen and (max-width: 1100px) {
+    .panel, .panel-sec {
+        flex-direction: column-reverse;
+
+        .panel__image {
+            margin-bottom: 30px;
+        }
+
+        .panel__body {
+            .body__number {
+                display: none;
+            }
+
+            .body__cta {
+                display: flex;
+                justify-content: center;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .panel {
+        padding: 0;
+
+        .panel__body {
+            .body__cta {
+                flex-direction: column;
+                align-items: center;
+
+                a:first-child {
+                    margin-bottom: 20px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/scss/components/_title.scss b/src/scss/components/_title.scss
new file mode 100644
index 0000000..f0c5b5c
--- /dev/null
+++ b/src/scss/components/_title.scss
@@ -0,0 +1,13 @@
+.title {
+    margin-top: 180px;
+    padding-top: 20px;
+    font-size: $font-section;
+    font-weight: $font-bold;
+    color: $primary;
+
+    .sub {
+        color: rgba($secondary, 0.8);
+        font-size: $font-section-sub;
+        font-weight: $font-normal;
+    }
+}
\ No newline at end of file
diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss
index 0cc40df..ff9a78e 100644
--- a/src/scss/pages/_home.scss
+++ b/src/scss/pages/_home.scss
@@ -1,20 +1,282 @@
 main {
     position: relative;
-    padding: 60px 120px;
+    display: flex;
+    justify-content: space-between;
+    padding: 60px 60px;
 
-    .tag {
-        font-size: $font-heading;
-        margin-bottom: 60px;
+    .content {
+        margin-top: 60px;
+        margin-right: 50px;
+
+        .tag {
+            font-size: $font-hero;
+        }
+    
+        .para {
+            max-width: 600px;
+            margin: 40px 0;
+        }
+    }
+
+    .illustration {
+        img {
+            width: 100%;
+        }
+    }
+}
+
+.work {
+    padding: 150px 30px;
+
+    .panel:nth-child(2) {
+        margin: 150px 0;
     }
+}
 
-    .para {
+.about {
+    width: 100%;
+    margin-top: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .profile {
+        background: white;
+        max-width: 300px;
+        margin-right: 40px;
+        border: 4px solid $quaternary;
+        border-radius: 50%;
+        box-shadow: 0 3px 10px rgba($secondary, 20%);
+
+        img {
+            width: 100%;
+        }
+    }
+
+    .content {
         max-width: 600px;
-        margin-bottom: 60px;
+
+        .heading {
+            span {
+                color: $primary;
+                font-size: $font-heading;
+                font-weight: $font-bold;
+            }
+        }
+
+        .body {
+            margin: 30px 0;
+        }
     }
+}
 
-    .illustration {
-        position: absolute;
-        top: 0;
-        right: 120px;
+.skills {
+    margin-top: 120px;
+    padding-left: 30px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+
+    .list {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .list__heading {
+            font-size: $font-heading;
+            font-weight: $font-bold;
+        }
+
+        .list__body {
+            ul li {
+                padding-left: 2px;
+                list-style: none;
+                list-style-type: none;
+
+                &:before {
+                    content: "-";
+                }
+            }
+        }
+    }
+}
+
+.contact {
+    margin: 120px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .form {
+        margin-right: 30px;
+        padding: 15px 30px;
+        max-width: 500px;
+        width: 100%;
+        background: $quaternary;
+        border-radius: 5px;
+        box-shadow: 0 3px 15px rgba($secondary, 20%);
+
+        .input-group {
+            padding: 10px 0;
+
+            label {
+                display: block;
+                margin-bottom: 10px;
+            }
+
+            input {
+                display: block;
+                width: 100%;
+                padding: 12px 20px;
+                font-size: $font-nav;
+                border: none;
+                border-radius: 7px;
+            }
+
+            textarea {
+                display: block;
+                width: 100%;
+                height: 150px;
+                padding: 12px 20px;
+                font-size: $font-nav;
+                border: none;
+                border-radius: 7px;
+            }
+        }
+    }
+
+    .socials {
+        max-width: 500px;
+        width: 100%;
+        height: 500px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        span {
+            display: flex;
+            justify-content: center;
+            align-items: center;    .about {
+        
+            }
+            margin: 10px 0;
+
+            img {
+                margin-right: 10px;
+            }
+
+            a,
+            a:active,
+            a:visited {
+                color: $primary;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    main {
+        .content {
+            .cta {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                
+                a:first-child {
+                    margin-bottom: 10px;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 960px) {
+    main {
+        padding: 60px 30px;
+
+        .content {
+            width: 60%;
+        }
+
+        .illustration {
+            position: absolute;
+            width: 420px;
+            top: 120px;
+            right: -150px;
+            z-index: -1;
+        }
+    }
+
+    .about {
+        flex-direction: column;
+
+        .content {
+            .heading {
+                padding: 0 30px;
+            }
+
+            .body {
+                padding: 0 30px;
+            }
+
+            .cta {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+
+    .skills {
+        padding-left: 0;
+        padding-right: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .list {
+            .list__body {
+                ul {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .contact {
+        flex-direction: column;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    main {
+        padding: 30px 0;
+
+        .content {
+            width: 100%;
+        }
+
+        .illustration {
+            display: none;
+        }
+    }
+
+    .about {
+        .content {
+            .cta {
+                flex-direction: column;
+                
+                a:first-child {
+                    margin-bottom: 20px;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 00c7a81..9ab8652 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,28 +1,236 @@
 <template>
 <div class="container">
   <main>
-    <div class="tag">
-      I design and build
-      <br>
-      interfaces for Humans.
-    </div>
-    <div class="para">
-      <p>I make robust, easy to use systems and applications centered around humans. I believe simplicity is the way forward for modern systems and apps.</p>
-    </div>
-    <div class="cta">
-      <a href="#work" class="btn">See my work</a>
-      <a href="#contact" class="btn btn-secondary">Discuss a project</a>
+    <div class="content">
+      <div class="tag">
+        I design and build
+        <br>
+        interfaces for Humans.
+      </div>
+      <div class="para">
+        <p>I make robust, easy to use systems and applications centered around humans. I believe simplicity is the way forward for modern systems and apps.</p>
+      </div>
+      <div class="cta">
+        <a href="#work" class="btn">See my work</a>
+        <a href="#contact" class="btn btn-secondary">Discuss a project</a>
+      </div>
     </div>
     <div class="illustration">
       <img src="@/assets/illustration.png" alt="Illustration">
     </div>
   </main>
+
+  <div class="title" id="work">
+    <div class="sub">Here's some of my</div>
+    Work / Projects
+  </div>
+
+  <section class="work">
+    <div class="panel">
+      <div class="panel__body">
+        <div class="body__number">1</div>
+        <div class="body__title">APL Esports - Website, Overlays, CMS</div>
+        <div class="body__content">
+          <p>APL Esports is the premier tournament organizer for the SEA region for the game Rocket League with their latest addition being sponsored by Psyonix, the game’s developer, for a grand total of $45,500.</p>
+        </div>
+        <div class="body__cta">
+          <a href="https://aplesports.com" target="_blank" class="btn">Visit Website</a>
+        </div>
+      </div>
+      <div class="panel__image">
+        <img src="@/assets/apl.png" alt="">
+      </div>
+    </div>
+    <div class="panel panel-sec">
+      <div class="panel__body">
+        <div class="body__number">2</div>
+        <div class="body__title">Advitya 2020, VIT Bhopal - Fest Website</div>
+        <div class="body__content">
+          <p>Advita is VIT Bhopal University's premier tech and cultural fest. 2020's edition had a lot of special things planned but unfortunately shut down due to the global pandemic.</p>
+        </div>
+        <div class="body__cta">
+          <a href="https://advitya.net" target="_blank" class="btn">Visit Website</a>
+          <a href="https://github.com/ayush123460/advitya2020" target="_blank" class="btn btn-secondary">View on Github</a>
+        </div>
+      </div>
+      <div class="panel__image">
+        <img src="@/assets/advitya.png" alt="">
+      </div>
+    </div>
+    <div class="panel">
+      <div class="panel__body">
+        <div class="body__number">3</div>
+        <div class="body__title">CPGC - Cross Platform Git Client</div>
+        <div class="body__content">
+          <p>CPGC is aimed at beginners to start their git and version control journey. This application is still under development and it aims to be as end user friendly as possible while explaining how things run in the background.</p>
+        </div>
+        <div class="body__cta">
+          <a href="https://github.com/ayush123460/cpgc" target="_blank" class="btn btn-secondary">View on Github</a>
+        </div>
+      </div>
+      <div class="panel__image">
+        <img src="@/assets/cpgc.png" alt="">
+      </div>
+    </div>
+  </section>
+
+  <div class="title" id="about">
+    <div class="sub">Know some more</div>
+    About Me
+  </div>
+
+  <section class="about">
+    <div class="profile">
+      <img src="@/assets/logo.png" alt="Logo">
+    </div>
+    <div class="content">
+      <div class="heading">
+        <p>
+          Hello, I'm
+          <br>
+          <span>Ayush Mukherjee.</span>
+        </p>
+      </div>
+      <div class="body">
+        <p>I am a passionate and inquisitive software engineer with multiple years of experience building high performance web and mobile applications. I am a third year university student and am looking for internships to further develop my skills and explore what the industry continues to function on.</p>
+      </div>
+      <div class="cta">
+        <a href="/resume.pdf" class="btn">Download Resume</a>
+        <a href="#contact" class="btn btn-secondary">Contact Me</a>
+      </div>
+    </div>
+  </section>
+
+  <div class="title" id="skills">
+    <div class="sub">Here's what I know</div>
+    Skills
+  </div>
+
+  <section class="skills">
+    <div class="list">
+      <div class="list__heading">
+        Full Stack Web Developer &amp; Designer
+      </div>
+      <div class="list__body">
+        <p>
+          <ul>
+            <li>HTML5, CSS3, Javascript / ES6</li>
+            <li>Bootstrap 4</li>
+            <li>Vue JS, Vuetify</li>
+            <li>PHP 7, Laravel Framework</li>
+            <li>Node JS</li>
+            <li>Electron JS</li>
+            <li>Ionic Framework</li>
+            <li>MySQL, Postgres</li>
+            <li>Docker</li>
+          </ul>
+        </p>
+      </div>
+    </div>
+    <div class="list">
+      <div class="list__heading">
+        Software Engineering
+      </div>
+      <div class="list__body">
+        <p>
+          <ul>
+            <li>C / 98</li>
+            <li>C++ / 11</li>
+            <li>Java SE 8</li>
+            <li>Python 3</li>
+            <li>Linux SysAdmin</li>
+
+          </ul>
+        </p>
+      </div>
+    </div>
+    <div class="list">
+      <div class="list__heading">
+        Interests
+      </div>
+      <div class="list__body">
+        <p>
+          <ul>
+            <li>Virtualization</li>
+            <li>Systems Design</li>
+            <li>Web Assembly</li>
+          </ul>
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <div class="title" id="contact">
+    <div class="sub">Ways to</div>
+    Contact Me
+  </div>
+
+  <section class="contact">
+    <div class="form">
+      <form id="contact-form">
+        <div class="input-group">
+          <label for="name">Name:</label>
+          <input type="text" name="name" v-model="name" required autocomplete="off">
+        </div>
+        <div class="input-group">
+          <label for="email">Email:</label>
+          <input type="email" name="email" v-model="email" required autocomplete="off">
+        </div>
+        <div class="input-group">
+          <label for="message">Message:</label>
+          <textarea v-model="message"></textarea>
+        </div>
+
+        <div class="input-group">
+          <input type="submit" class="btn" value="Submit" @click="submitForm()">
+        </div>
+      </form>
+    </div>
+    <div class="socials">
+      <span>I'm also available via:</span>
+      <span><img width="25px" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIgNXYxNGgtMjB2LTE0aDIwem0yLTJoLTI0djE4aDI0di0xOHptLTIgMTZsLTYuNTI2LTYuNjE4LTMuNDQ1IDMuNDgzLTMuNDE4LTMuNTI1LTYuNjExIDYuNjYgNS4wNTEtOC01LjA1MS02IDEwLjAyOSA3LjQ0NiA5Ljk3MS03LjQ0Ni00Ljk5OCA2LjAxIDQuOTk4IDcuOTl6Ii8+PC9zdmc+"><a href="mailto:me@ayushm.com">me@ayushm.com</a></span>
+      <span><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMGgtMTRjLTIuNzYxIDAtNSAyLjIzOS01IDV2MTRjMCAyLjc2MSAyLjIzOSA1IDUgNWgxNGMyLjc2MiAwIDUtMi4yMzkgNS01di0xNGMwLTIuNzYxLTIuMjM4LTUtNS01em0tLjEzOSA5LjIzN2MuMjA5IDQuNjE3LTMuMjM0IDkuNzY1LTkuMzMgOS43NjUtMS44NTQgMC0zLjU3OS0uNTQzLTUuMDMyLTEuNDc1IDEuNzQyLjIwNSAzLjQ4LS4yNzggNC44Ni0xLjM1OS0xLjQzNy0uMDI3LTIuNjQ5LS45NzYtMy4wNjYtMi4yOC41MTUuMDk4IDEuMDIxLjA2OSAxLjQ4Mi0uMDU2LTEuNTc5LS4zMTctMi42NjgtMS43MzktMi42MzMtMy4yNi40NDIuMjQ2Ljk0OS4zOTQgMS40ODYuNDExLTEuNDYxLS45NzctMS44NzUtMi45MDctMS4wMTYtNC4zODMgMS42MTkgMS45ODYgNC4wMzggMy4yOTMgNi43NjYgMy40My0uNDc5LTIuMDUzIDEuMDgtNC4wMyAzLjE5OS00LjAzLjk0MyAwIDEuNzk3LjM5OCAyLjM5NSAxLjAzNy43NDgtLjE0NyAxLjQ1MS0uNDIgMi4wODYtLjc5Ni0uMjQ2Ljc2Ny0uNzY2IDEuNDEtMS40NDMgMS44MTYuNjY0LS4wOCAxLjI5Ny0uMjU2IDEuODg1LS41MTctLjQzOS42NTYtLjk5NiAxLjIzNC0xLjYzOSAxLjY5N3oiLz48L3N2Zz4="><a target="_blank" href="https://twitter.com/ayush123460">@ayush123460</a></span>
+      <span><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xOSAyNGgtMTRjLTIuNzYxIDAtNS0yLjIzOS01LTV2LTE0YzAtMi43NjEgMi4yMzktNSA1LTVoMTRjMi43NjIgMCA1IDIuMjM5IDUgNXYxNGMwIDIuNzYxLTIuMjM4IDUtNSA1em0tMy4yODgtNC44ODhsLS40MjQtMS40OCAxLjAyNC45NTIuOTY4Ljg5NiAxLjcyIDEuNTJ2LTE0LjM1MmMwLS45MTItLjczNi0xLjY0OC0xLjY0LTEuNjQ4aC0xMC43MmMtLjkwNCAwLTEuNjQuNzM2LTEuNjQgMS42NDh2MTAuODE2YzAgLjkxMi43MzYgMS42NDggMS42NCAxLjY0OGg5LjA3MnptLTEuNDQtMy42NjRjMS43NjgtLjA1NiAyLjQ0OC0xLjIxNiAyLjQ0OC0xLjIxNiAwLTIuNTc2LTEuMTUyLTQuNjY0LTEuMTUyLTQuNjY0LTEuMTUyLS44NjQtMi4yNDgtLjg0LTIuMjQ4LS44NGwtLjExMi4xMjhjMS4zNi40MTYgMS45OTIgMS4wMTYgMS45OTIgMS4wMTYtLjgzMi0uNDU2LTEuNjQ4LS42OC0yLjQwOC0uNzY4LS41NzYtLjA2NC0xLjEyOC0uMDQ4LTEuNjE2LjAxNmwtLjEzNi4wMTZjLS4yOC4wMjQtLjk2LjEyOC0xLjgxNi41MDRsLS40NzIuMjMycy42NjQtLjYzMiAyLjEwNC0xLjA0OGwtLjA4LS4wOTZzLTEuMDk2LS4wMjQtMi4yNDguODRjMCAwLTEuMTUyIDIuMDg4LTEuMTUyIDQuNjY0IDAgMCAuNjcyIDEuMTYgMi40NCAxLjIxNmwuNTM2LS42NjRjLTEuMDE2LS4zMDQtMS40LS45NDQtMS40LS45NDRsLjIyNC4xMzYuMDMyLjAyNC4wMzIuMDE4LjAwOS4wMDQuMDMxLjAxOGMuMi4xMTIuNC4yLjU4NC4yNzIuMzI4LjEyOC43Mi4yNTYgMS4xNzYuMzQ0LjYuMTEyIDEuMzA0LjE1MiAyLjA3Mi4wMDguMzc2LS4wNjQuNzYtLjE3NiAxLjE2LS4zNDQuMjgtLjEwNC41OTItLjI1Ni45Mi0uNDcyIDAgMC0uNC42NTYtMS40NDguOTUybC41MjguNjQ4em0tMy43Mi0zLjczNmMtLjQ1NiAwLS44MTYuNC0uODE2Ljg4OHMuMzY4Ljg4OC44MTYuODg4Yy40NTYgMCAuODE2LS40LjgxNi0uODg4LjAwOC0uNDg4LS4zNi0uODg4LS44MTYtLjg4OHptMi45MiAwYy0uNDU2IDAtLjgxNi40LS44MTYuODg4cy4zNjguODg4LjgxNi44ODhjLjQ1NiAwIC44MTYtLjQuODE2LS44ODhzLS4zNi0uODg4LS44MTYtLjg4OHoiLz48L3N2Zz4=">Ayush#4148</a></span>
+    </div>
+  </section>
 </div>
 </template>
 
 <script>
+import axios from 'axios'
 
 export default {
-  name: 'Home'
+  name: 'Home',
+  data: () => {
+    return {
+      name: null,
+      email: null,
+      message: null
+    }
+  },
+  methods: {
+    submitForm() {
+      event.preventDefault()
+      document.querySelector('input[type=text]').disabled = true
+      document.querySelector('input[type=email]').disabled = true
+      document.querySelector('textarea').disabled = true
+      document.querySelector('input.btn').disabled = true
+
+      axios.post('https://cms.aplesports.com/api/forms/submit/contact', {
+        form: {
+          name: this.name,
+          email: this.email,
+          message: this.message
+        }
+      }, {
+        headers: {
+          'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
+        }
+      })
+      .then(() => {
+        alert('Your message has been submitted.')
+      })
+    }
+  }
 }
 </script>