diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..cfc6295
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,853 @@
+/*--------------------------------------------------------------
+# General
+--------------------------------------------------------------*/
+body {
+  font-family: "Open Sans", sans-serif;
+  background-color: #040404;
+  color: #fff;
+  position: relative;
+  background: transparent;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  background: #040404 url("../img/bg.jpg") top right no-repeat;
+  background-size: cover;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 100vh;
+  z-index: -1;
+}
+
+@media (min-width: 1024px) {
+  body::before {
+    background-attachment: fixed;
+  }
+}
+
+a {
+  color: #18d26e;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #35e888;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Raleway", sans-serif;
+}
+
+/*--------------------------------------------------------------
+# Header
+--------------------------------------------------------------*/
+#header {
+  transition: ease-in-out 0.3s;
+  position: relative;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  z-index: 997;
+  overflow-y: auto;
+}
+
+#header * {
+  transition: ease-in-out 0.3s;
+}
+
+#header h1 {
+  font-size: 48px;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  font-weight: 700;
+  font-family: "Poppins", sans-serif;
+}
+
+#header h1 a,
+#header h1 a:hover {
+  color: #fff;
+  line-height: 1;
+  display: inline-block;
+}
+
+#header h2 {
+  font-size: 24px;
+  margin-top: 20px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+#header h2 span {
+  color: #fff;
+  border-bottom: 2px solid #18d26e;
+  padding-bottom: 6px;
+}
+
+#header img {
+  padding: 0;
+  margin: 0;
+}
+
+#header .social-links {
+  margin-top: 40px;
+  display: flex;
+}
+
+#header .social-links a {
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  line-height: 1;
+  margin-right: 8px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+#header .social-links a:hover {
+  background: #18d26e;
+}
+
+@media (max-width: 992px) {
+  #header h1 {
+    font-size: 36px;
+  }
+
+  #header h2 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  #header .social-links {
+    margin-top: 15px;
+  }
+
+  #header .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+/* Header Top */
+#header.header-top {
+  height: 80px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+}
+
+#header.header-top .social-links,
+#header.header-top h2 {
+  display: none;
+}
+
+#header.header-top h1 {
+  margin-right: auto;
+  font-size: 36px;
+}
+
+#header.header-top .container {
+  display: flex;
+  align-items: center;
+}
+
+#header.header-top .navbar {
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  #header.header-top {
+    height: 60px;
+  }
+
+  #header.header-top h1 {
+    font-size: 26px;
+  }
+}
+
+/*--------------------------------------------------------------
+# Navigation Menu
+--------------------------------------------------------------*/
+/**
+* Desktop Navigation 
+*/
+.navbar {
+  padding: 0;
+  margin-top: 35px;
+}
+
+.navbar ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+}
+
+.navbar li {
+  position: relative;
+}
+
+.navbar li+li {
+  margin-left: 30px;
+}
+
+.navbar a,
+.navbar a:focus {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  font-family: "Poppins", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+  transition: 0.3s;
+}
+
+.navbar a i,
+.navbar a:focus i {
+  font-size: 12px;
+  line-height: 0;
+  margin-left: 5px;
+}
+
+.navbar a:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -4px;
+  left: 0;
+  background-color: #18d26e;
+  visibility: hidden;
+  width: 0px;
+  transition: all 0.3s ease-in-out 0s;
+}
+
+.navbar a:hover:before,
+.navbar li:hover>a:before,
+.navbar .active:before {
+  visibility: visible;
+  width: 25px;
+}
+
+.navbar a:hover,
+.navbar .active,
+.navbar .active:focus,
+.navbar li:hover>a {
+  color: #fff;
+}
+
+/**
+* Mobile Navigation 
+*/
+.mobile-nav-toggle {
+  color: #fff;
+  font-size: 28px;
+  cursor: pointer;
+  display: none;
+  line-height: 0;
+  transition: 0.5s;
+  position: fixed;
+  right: 15px;
+  top: 15px;
+}
+
+@media (max-width: 991px) {
+  .mobile-nav-toggle {
+    display: block;
+  }
+
+  .navbar ul {
+    display: none;
+  }
+}
+
+.navbar-mobile {
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  transition: 0.3s;
+  z-index: 999;
+  margin-top: 0;
+}
+
+.navbar-mobile .mobile-nav-toggle {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.navbar-mobile ul {
+  display: block;
+  position: absolute;
+  top: 55px;
+  right: 15px;
+  bottom: 45px;
+  left: 15px;
+  padding: 10px 0;
+  overflow-y: auto;
+  transition: 0.3s;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.navbar-mobile li {
+  padding: 12px 20px;
+}
+
+.navbar-mobile li+li {
+  margin: 0;
+}
+
+.navbar-mobile a,
+.navbar-mobile a:focus {
+  font-size: 16px;
+  position: relative;
+}
+
+/*--------------------------------------------------------------
+# Sections General
+--------------------------------------------------------------*/
+section {
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  top: 140px;
+  bottom: 100%;
+  opacity: 0;
+  transition: ease-in-out 0.4s;
+  z-index: 2;
+}
+
+section.section-show {
+  top: 100px;
+  bottom: auto;
+  opacity: 1;
+  padding-bottom: 45px;
+}
+
+section .container {
+  background: rgba(0, 0, 0, 0.9);
+  padding: 30px;
+}
+
+@media (max-width: 768px) {
+  section {
+    top: 120px;
+  }
+
+  section.section-show {
+    top: 80px;
+  }
+}
+
+.section-title h2 {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0;
+  line-height: 1px;
+  margin: 0 0 20px 0;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #aaaaaa;
+  font-family: "Poppins", sans-serif;
+}
+
+.section-title h2::after {
+  content: "";
+  width: 120px;
+  height: 1px;
+  display: inline-block;
+  background: #4ceb95;
+  margin: 4px 10px;
+}
+
+.section-title p {
+  margin: 0;
+  margin: -15px 0 15px 0;
+  font-size: 36px;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: "Poppins", sans-serif;
+  color: #fff;
+}
+
+/*--------------------------------------------------------------
+# About
+--------------------------------------------------------------*/
+.about-me .content h3 {
+  font-weight: 700;
+  font-size: 26px;
+  color: #18d26e;
+}
+
+.about-me .content ul {
+  list-style: none;
+  padding: 0;
+}
+
+.about-me .content ul li {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.about-me .content ul strong {
+  margin-right: 10px;
+}
+
+.about-me .content ul i {
+  font-size: 16px;
+  margin-right: 5px;
+  color: #18d26e;
+  line-height: 0;
+}
+
+.about-me .content p:last-child {
+  margin-bottom: 0;
+}
+
+/*--------------------------------------------------------------
+# Skills
+--------------------------------------------------------------*/
+.skills .progress {
+  height: 60px;
+  display: block;
+  background: none;
+  border-radius: 0;
+}
+
+.skills .progress .skill {
+  padding: 10px 0;
+  margin: 0;
+  text-transform: uppercase;
+  display: block;
+  font-weight: 600;
+  font-family: "Poppins", sans-serif;
+  color: #fff;
+}
+
+.skills .progress .skill .val {
+  float: right;
+  font-style: normal;
+}
+
+.skills .progress-bar-wrap {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.skills .progress-bar {
+  width: 1px;
+  height: 10px;
+  transition: 0.9s;
+  background-color: #18d26e;
+}
+
+/*--------------------------------------------------------------
+# Resume
+--------------------------------------------------------------*/
+.resume .resume-title {
+  font-size: 26px;
+  font-weight: 700;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  color: #fff;
+}
+
+.resume .resume-item {
+  padding: 0 0 20px 20px;
+  margin-top: -2px;
+  border-left: 2px solid rgba(255, 255, 255, 0.2);
+  position: relative;
+}
+
+.resume .resume-item h4 {
+  line-height: 18px;
+  font-size: 18px;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-family: "Poppins", sans-serif;
+  color: #18d26e;
+  margin-bottom: 10px;
+}
+
+.resume .resume-item h5 {
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 5px 15px;
+  display: inline-block;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.resume .resume-item ul {
+  padding-left: 20px;
+}
+
+.resume .resume-item ul li {
+  padding-bottom: 10px;
+}
+
+.resume .resume-item:last-child {
+  padding-bottom: 0;
+}
+
+.resume .resume-item::before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50px;
+  left: -9px;
+  top: 0;
+  background: #18d26e;
+  border: 2px solid #18d26e;
+}
+
+/*--------------------------------------------------------------
+# Portfolio
+--------------------------------------------------------------*/
+.portfolio .portfolio-item {
+  margin-bottom: 30px;
+}
+
+.portfolio #portfolio-flters {
+  padding: 0;
+  margin: 0 auto 15px auto;
+  list-style: none;
+  text-align: center;
+  border-radius: 50px;
+  padding: 2px 15px;
+}
+
+.portfolio #portfolio-flters li {
+  cursor: pointer;
+  display: inline-block;
+  padding: 8px 16px 10px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 0 3px 10px 3px;
+  transition: all 0.3s ease-in-out;
+  border-radius: 4px;
+}
+
+.portfolio #portfolio-flters li:hover,
+.portfolio #portfolio-flters li.filter-active {
+  background: #18d26e;
+}
+
+.portfolio #portfolio-flters li:last-child {
+  margin-right: 0;
+}
+
+.portfolio .portfolio-wrap {
+  transition: 0.3s;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.portfolio .portfolio-wrap::before {
+  content: "";
+  background: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  left: 30px;
+  right: 30px;
+  top: 30px;
+  bottom: 30px;
+  transition: all ease-in-out 0.3s;
+  z-index: 2;
+  opacity: 0;
+}
+
+.portfolio .portfolio-wrap .portfolio-info {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  z-index: 3;
+  transition: all ease-in-out 0.3s;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.portfolio .portfolio-wrap .portfolio-info::before {
+  display: block;
+  content: "";
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: 35px;
+  left: 35px;
+  border-top: 3px solid #fff;
+  border-left: 3px solid #fff;
+  transition: all 0.5s ease 0s;
+  z-index: 9994;
+}
+
+.portfolio .portfolio-wrap .portfolio-info::after {
+  display: block;
+  content: "";
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  bottom: 35px;
+  right: 35px;
+  border-bottom: 3px solid #fff;
+  border-right: 3px solid #fff;
+  transition: all 0.5s ease 0s;
+  z-index: 9994;
+}
+
+.portfolio .portfolio-wrap .portfolio-info h4 {
+  font-size: 20px;
+  color: #fff;
+  font-weight: 600;
+}
+
+.portfolio .portfolio-wrap .portfolio-info p {
+  color: #ffffff;
+  font-size: 14px;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 0;
+}
+
+.portfolio .portfolio-wrap .portfolio-links {
+  text-align: center;
+  z-index: 4;
+}
+
+.portfolio .portfolio-wrap .portfolio-links a {
+  color: #fff;
+  margin: 0 2px;
+  font-size: 28px;
+  display: inline-block;
+  transition: 0.3s;
+}
+
+.portfolio .portfolio-wrap .portfolio-links a:hover {
+  color: #63eda3;
+}
+
+.portfolio .portfolio-wrap:hover::before {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+}
+
+.portfolio .portfolio-wrap:hover .portfolio-info {
+  opacity: 1;
+}
+
+.portfolio .portfolio-wrap:hover .portfolio-info::before {
+  top: 15px;
+  left: 15px;
+}
+
+.portfolio .portfolio-wrap:hover .portfolio-info::after {
+  bottom: 15px;
+  right: 15px;
+}
+
+/*--------------------------------------------------------------
+# Portfolio Details
+--------------------------------------------------------------*/
+.portfolio-details {
+  padding-top: 40px;
+  background: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+
+.portfolio-details .container {
+  padding-top: 20px;
+  padding-bottom: 40px;
+}
+
+.portfolio-details .portfolio-info {
+  padding-top: 45px;
+}
+
+.portfolio-details .portfolio-info h3 {
+  font-size: 22px;
+  font-weight: 400;
+  margin-bottom: 20px;
+}
+
+.portfolio-details .portfolio-info ul {
+  list-style: none;
+  padding: 0;
+  font-size: 15px;
+}
+
+.portfolio-details .portfolio-info ul li+li {
+  margin-top: 10px;
+}
+
+.portfolio-details .portfolio-info p {
+  font-size: 15px;
+  padding: 15px 0 0 0;
+}
+
+@media (max-width: 992px) {
+  .portfolio-details .portfolio-info {
+    padding-top: 20px;
+  }
+}
+
+.portfolio-details .swiper-pagination {
+  margin-top: 20px;
+  position: relative;
+}
+
+.portfolio-details .swiper-pagination .swiper-pagination-bullet {
+  width: 12px;
+  height: 12px;
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
+  background-color: #18d26e;
+}
+
+/*--------------------------------------------------------------
+# Contact
+--------------------------------------------------------------*/
+.contact .info-box {
+  color: #444444;
+  padding: 20px;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.contact .info-box i.bx {
+  font-size: 24px;
+  color: #18d26e;
+  border-radius: 50%;
+  padding: 14px;
+  float: left;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.contact .info-box h3 {
+  font-size: 20px;
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 700;
+  margin: 10px 0 8px 68px;
+}
+
+.contact .info-box p {
+  padding: 0;
+  color: #fff;
+  line-height: 24px;
+  font-size: 14px;
+  margin: 0 0 0 68px;
+}
+
+.contact .info-box .social-links {
+  margin: 5px 0 0 68px;
+  display: flex;
+}
+
+.contact .info-box .social-links a {
+  font-size: 18px;
+  display: inline-block;
+  color: #fff;
+  line-height: 1;
+  margin-right: 12px;
+  transition: 0.3s;
+}
+
+.contact .info-box .social-links a:hover {
+  color: #18d26e;
+}
+
+@-webkit-keyframes animate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes animate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*--------------------------------------------------------------
+# Credits
+--------------------------------------------------------------*/
+.credits {
+  position: fixed;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  padding: 15px;
+  text-align: right;
+  font-size: 13px;
+  color: #fff;
+  z-index: 999999;
+}
+
+@media (max-width: 992px) {
+  .credits {
+    text-align: center;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.8);
+  }
+}
+
+.credits a {
+  color: #18d26e;
+  transition: 0.3s;
+}
+
+.credits a:hover {
+  color: #fff;
+}
\ No newline at end of file
diff --git a/external/waypoints/noframework.waypoints.js b/external/waypoints/noframework.waypoints.js
new file mode 100644
index 0000000..537b127
--- /dev/null
+++ b/external/waypoints/noframework.waypoints.js
@@ -0,0 +1,768 @@
+/*!
+Waypoints - 4.0.1
+Copyright © 2011-2016 Caleb Troughton
+Licensed under the MIT license.
+https://github.com/imakewebthings/waypoints/blob/master/licenses.txt
+*/
+(
+  function () {
+    'use strict'
+
+    var keyCounter = 0
+    var allWaypoints = {}
+
+    /* http://imakewebthings.com/waypoints/api/waypoint */
+    function Waypoint(options) {
+      if (!options) {
+        throw new Error('No options passed to Waypoint constructor')
+      }
+      if (!options.element) {
+        throw new Error('No element option passed to Waypoint constructor')
+      }
+      if (!options.handler) {
+        throw new Error('No handler option passed to Waypoint constructor')
+      }
+
+      this.key = 'waypoint-' + keyCounter
+      this.options = Waypoint.Adapter.extend({}, Waypoint.defaults, options)
+      this.element = this.options.element
+      this.adapter = new Waypoint.Adapter(this.element)
+      this.callback = options.handler
+      this.axis = this.options.horizontal ? 'horizontal' : 'vertical'
+      this.enabled = this.options.enabled
+      this.triggerPoint = null
+      this.group = Waypoint.Group.findOrCreate({
+        name: this.options.group,
+        axis: this.axis
+      })
+      this.context = Waypoint.Context.findOrCreateByElement(this.options.context)
+
+      if (Waypoint.offsetAliases[this.options.offset]) {
+        this.options.offset = Waypoint.offsetAliases[this.options.offset]
+      }
+      this.group.add(this)
+      this.context.add(this)
+      allWaypoints[this.key] = this
+      keyCounter += 1
+    }
+
+    /* Private */
+    Waypoint.prototype.queueTrigger = function (direction) {
+      this.group.queueTrigger(this, direction)
+    }
+
+    /* Private */
+    Waypoint.prototype.trigger = function (args) {
+      if (!this.enabled) {
+        return
+      }
+      if (this.callback) {
+        this.callback.apply(this, args)
+      }
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/destroy */
+    Waypoint.prototype.destroy = function () {
+      this.context.remove(this)
+      this.group.remove(this)
+      delete allWaypoints[this.key]
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/disable */
+    Waypoint.prototype.disable = function () {
+      this.enabled = false
+      return this
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/enable */
+    Waypoint.prototype.enable = function () {
+      this.context.refresh()
+      this.enabled = true
+      return this
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/next */
+    Waypoint.prototype.next = function () {
+      return this.group.next(this)
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/previous */
+    Waypoint.prototype.previous = function () {
+      return this.group.previous(this)
+    }
+
+    /* Private */
+    Waypoint.invokeAll = function (method) {
+      var allWaypointsArray = []
+      for (var waypointKey in allWaypoints) {
+        allWaypointsArray.push(allWaypoints[waypointKey])
+      }
+      for (var i = 0, end = allWaypointsArray.length; i < end; i++) {
+        allWaypointsArray[i][method]()
+      }
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/destroy-all */
+    Waypoint.destroyAll = function () {
+      Waypoint.invokeAll('destroy')
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/disable-all */
+    Waypoint.disableAll = function () {
+      Waypoint.invokeAll('disable')
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/enable-all */
+    Waypoint.enableAll = function () {
+      Waypoint.Context.refreshAll()
+      for (var waypointKey in allWaypoints) {
+        allWaypoints[waypointKey].enabled = true
+      }
+      return this
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/refresh-all */
+    Waypoint.refreshAll = function () {
+      Waypoint.Context.refreshAll()
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/viewport-height */
+    Waypoint.viewportHeight = function () {
+      return window.innerHeight || document.documentElement.clientHeight
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/viewport-width */
+    Waypoint.viewportWidth = function () {
+      return document.documentElement.clientWidth
+    }
+
+    Waypoint.adapters = []
+
+    Waypoint.defaults = {
+      context: window,
+      continuous: true,
+      enabled: true,
+      group: 'default',
+      horizontal: false,
+      offset: 0
+    }
+
+    Waypoint.offsetAliases = {
+      'bottom-in-view': function () {
+        return this.context.innerHeight() - this.adapter.outerHeight()
+      },
+      'right-in-view': function () {
+        return this.context.innerWidth() - this.adapter.outerWidth()
+      }
+    }
+
+    window.Waypoint = Waypoint
+  }()
+);
+
+(
+  function () {
+    'use strict'
+
+    function requestAnimationFrameShim(callback) {
+      window.setTimeout(callback, 1000 / 60)
+    }
+
+    var keyCounter = 0
+    var contexts = {}
+    var Waypoint = window.Waypoint
+    var oldWindowLoad = window.onload
+
+    /* http://imakewebthings.com/waypoints/api/context */
+    function Context(element) {
+      this.element = element
+      this.Adapter = Waypoint.Adapter
+      this.adapter = new this.Adapter(element)
+      this.key = 'waypoint-context-' + keyCounter
+      this.didScroll = false
+      this.didResize = false
+      this.oldScroll = {
+        x: this.adapter.scrollLeft(),
+        y: this.adapter.scrollTop()
+      }
+      this.waypoints = {
+        vertical: {},
+        horizontal: {}
+      }
+
+      element.waypointContextKey = this.key
+      contexts[element.waypointContextKey] = this
+      keyCounter += 1
+      if (!Waypoint.windowContext) {
+        Waypoint.windowContext = true
+        Waypoint.windowContext = new Context(window)
+      }
+
+      this.createThrottledScrollHandler()
+      this.createThrottledResizeHandler()
+    }
+
+    /* Private */
+    Context.prototype.add = function (waypoint) {
+      var axis = waypoint.options.horizontal ? 'horizontal' : 'vertical'
+      this.waypoints[axis][waypoint.key] = waypoint
+      this.refresh()
+    }
+
+    /* Private */
+    Context.prototype.checkEmpty = function () {
+      var horizontalEmpty = this.Adapter.isEmptyObject(this.waypoints.horizontal)
+      var verticalEmpty = this.Adapter.isEmptyObject(this.waypoints.vertical)
+      var isWindow = this.element == this.element.window
+      if (horizontalEmpty && verticalEmpty && !isWindow) {
+        this.adapter.off('.waypoints')
+        delete contexts[this.key]
+      }
+    }
+
+    /* Private */
+    Context.prototype.createThrottledResizeHandler = function () {
+      var self = this
+
+      function resizeHandler() {
+        self.handleResize()
+        self.didResize = false
+      }
+
+      this.adapter.on('resize.waypoints', function () {
+        if (!self.didResize) {
+          self.didResize = true
+          Waypoint.requestAnimationFrame(resizeHandler)
+        }
+      })
+    }
+
+    /* Private */
+    Context.prototype.createThrottledScrollHandler = function () {
+      var self = this
+      function scrollHandler() {
+        self.handleScroll()
+        self.didScroll = false
+      }
+
+      this.adapter.on('scroll.waypoints', function () {
+        if (!self.didScroll || Waypoint.isTouch) {
+          self.didScroll = true
+          Waypoint.requestAnimationFrame(scrollHandler)
+        }
+      })
+    }
+
+    /* Private */
+    Context.prototype.handleResize = function () {
+      Waypoint.Context.refreshAll()
+    }
+
+    /* Private */
+    Context.prototype.handleScroll = function () {
+      var triggeredGroups = {}
+      var axes = {
+        horizontal: {
+          newScroll: this.adapter.scrollLeft(),
+          oldScroll: this.oldScroll.x,
+          forward: 'right',
+          backward: 'left'
+        },
+        vertical: {
+          newScroll: this.adapter.scrollTop(),
+          oldScroll: this.oldScroll.y,
+          forward: 'down',
+          backward: 'up'
+        }
+      }
+
+      for (var axisKey in axes) {
+        var axis = axes[axisKey]
+        var isForward = axis.newScroll > axis.oldScroll
+        var direction = isForward ? axis.forward : axis.backward
+
+        for (var waypointKey in this.waypoints[axisKey]) {
+          var waypoint = this.waypoints[axisKey][waypointKey]
+          if (waypoint.triggerPoint === null) {
+            continue
+          }
+          var wasBeforeTriggerPoint = axis.oldScroll < waypoint.triggerPoint
+          var nowAfterTriggerPoint = axis.newScroll >= waypoint.triggerPoint
+          var crossedForward = wasBeforeTriggerPoint && nowAfterTriggerPoint
+          var crossedBackward = !wasBeforeTriggerPoint && !nowAfterTriggerPoint
+          if (crossedForward || crossedBackward) {
+            waypoint.queueTrigger(direction)
+            triggeredGroups[waypoint.group.id] = waypoint.group
+          }
+        }
+      }
+
+      for (var groupKey in triggeredGroups) {
+        triggeredGroups[groupKey].flushTriggers()
+      }
+
+      this.oldScroll = {
+        x: axes.horizontal.newScroll,
+        y: axes.vertical.newScroll
+      }
+    }
+
+    /* Private */
+    Context.prototype.innerHeight = function () {
+      /*eslint-disable eqeqeq */
+      if (this.element == this.element.window) {
+        return Waypoint.viewportHeight()
+      }
+      /*eslint-enable eqeqeq */
+      return this.adapter.innerHeight()
+    }
+
+    /* Private */
+    Context.prototype.remove = function (waypoint) {
+      delete this.waypoints[waypoint.axis][waypoint.key]
+      this.checkEmpty()
+    }
+
+    /* Private */
+    Context.prototype.innerWidth = function () {
+      /*eslint-disable eqeqeq */
+      if (this.element == this.element.window) {
+        return Waypoint.viewportWidth()
+      }
+      /*eslint-enable eqeqeq */
+      return this.adapter.innerWidth()
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/context-destroy */
+    Context.prototype.destroy = function () {
+      var allWaypoints = []
+      for (var axis in this.waypoints) {
+        for (var waypointKey in this.waypoints[axis]) {
+          allWaypoints.push(this.waypoints[axis][waypointKey])
+        }
+      }
+      for (var i = 0, end = allWaypoints.length; i < end; i++) {
+        allWaypoints[i].destroy()
+      }
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/context-refresh */
+    Context.prototype.refresh = function () {
+      /*eslint-disable eqeqeq */
+      var isWindow = this.element == this.element.window
+      /*eslint-enable eqeqeq */
+      var contextOffset = isWindow ? undefined : this.adapter.offset()
+      var triggeredGroups = {}
+      var axes
+
+      this.handleScroll()
+      axes = {
+        horizontal: {
+          contextOffset: isWindow ? 0 : contextOffset.left,
+          contextScroll: isWindow ? 0 : this.oldScroll.x,
+          contextDimension: this.innerWidth(),
+          oldScroll: this.oldScroll.x,
+          forward: 'right',
+          backward: 'left',
+          offsetProp: 'left'
+        },
+        vertical: {
+          contextOffset: isWindow ? 0 : contextOffset.top,
+          contextScroll: isWindow ? 0 : this.oldScroll.y,
+          contextDimension: this.innerHeight(),
+          oldScroll: this.oldScroll.y,
+          forward: 'down',
+          backward: 'up',
+          offsetProp: 'top'
+        }
+      }
+
+      for (var axisKey in axes) {
+        var axis = axes[axisKey]
+        for (var waypointKey in this.waypoints[axisKey]) {
+          var waypoint = this.waypoints[axisKey][waypointKey]
+          var adjustment = waypoint.options.offset
+          var oldTriggerPoint = waypoint.triggerPoint
+          var elementOffset = 0
+          var freshWaypoint = oldTriggerPoint == null
+          var contextModifier, wasBeforeScroll, nowAfterScroll
+          var triggeredBackward, triggeredForward
+
+          if (waypoint.element !== waypoint.element.window) {
+            elementOffset = waypoint.adapter.offset()[axis.offsetProp]
+          }
+
+          if (typeof adjustment === 'function') {
+            adjustment = adjustment.apply(waypoint)
+          }
+          else if (typeof adjustment === 'string') {
+            adjustment = parseFloat(adjustment)
+            if (waypoint.options.offset.indexOf('%') > - 1) {
+              adjustment = Math.ceil(axis.contextDimension * adjustment / 100)
+            }
+          }
+
+          contextModifier = axis.contextScroll - axis.contextOffset
+          waypoint.triggerPoint = Math.floor(elementOffset + contextModifier - adjustment)
+          wasBeforeScroll = oldTriggerPoint < axis.oldScroll
+          nowAfterScroll = waypoint.triggerPoint >= axis.oldScroll
+          triggeredBackward = wasBeforeScroll && nowAfterScroll
+          triggeredForward = !wasBeforeScroll && !nowAfterScroll
+
+          if (!freshWaypoint && triggeredBackward) {
+            waypoint.queueTrigger(axis.backward)
+            triggeredGroups[waypoint.group.id] = waypoint.group
+          }
+          else if (!freshWaypoint && triggeredForward) {
+            waypoint.queueTrigger(axis.forward)
+            triggeredGroups[waypoint.group.id] = waypoint.group
+          }
+          else if (freshWaypoint && axis.oldScroll >= waypoint.triggerPoint) {
+            waypoint.queueTrigger(axis.forward)
+            triggeredGroups[waypoint.group.id] = waypoint.group
+          }
+        }
+      }
+
+      Waypoint.requestAnimationFrame(function () {
+        for (var groupKey in triggeredGroups) {
+          triggeredGroups[groupKey].flushTriggers()
+        }
+      })
+
+      return this
+    }
+
+    /* Private */
+    Context.findOrCreateByElement = function (element) {
+      return Context.findByElement(element) || new Context(element)
+    }
+
+    /* Private */
+    Context.refreshAll = function () {
+      for (var contextId in contexts) {
+        contexts[contextId].refresh()
+      }
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/context-find-by-element */
+    Context.findByElement = function (element) {
+      return contexts[element.waypointContextKey]
+    }
+
+    window.onload = function () {
+      if (oldWindowLoad) {
+        oldWindowLoad()
+      }
+      Context.refreshAll()
+    }
+
+
+    Waypoint.requestAnimationFrame = function (callback) {
+      var requestFn = window.requestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        requestAnimationFrameShim
+      requestFn.call(window, callback)
+    }
+    Waypoint.Context = Context
+  }()
+);
+
+(
+  function () {
+    'use strict'
+
+    function byTriggerPoint(a, b) {
+      return a.triggerPoint - b.triggerPoint
+    }
+
+    function byReverseTriggerPoint(a, b) {
+      return b.triggerPoint - a.triggerPoint
+    }
+
+    var groups = {
+      vertical: {},
+      horizontal: {}
+    }
+    var Waypoint = window.Waypoint
+
+    /* http://imakewebthings.com/waypoints/api/group */
+    function Group(options) {
+      this.name = options.name
+      this.axis = options.axis
+      this.id = this.name + '-' + this.axis
+      this.waypoints = []
+      this.clearTriggerQueues()
+      groups[this.axis][this.name] = this
+    }
+
+    /* Private */
+    Group.prototype.add = function (waypoint) {
+      this.waypoints.push(waypoint)
+    }
+
+    /* Private */
+    Group.prototype.clearTriggerQueues = function () {
+      this.triggerQueues = {
+        up: [],
+        down: [],
+        left: [],
+        right: []
+      }
+    }
+
+    /* Private */
+    Group.prototype.flushTriggers = function () {
+      for (var direction in this.triggerQueues) {
+        var waypoints = this.triggerQueues[direction]
+        var reverse = direction === 'up' || direction === 'left'
+        waypoints.sort(reverse ? byReverseTriggerPoint : byTriggerPoint)
+        for (var i = 0, end = waypoints.length; i < end; i += 1) {
+          var waypoint = waypoints[i]
+          if (waypoint.options.continuous || i === waypoints.length - 1) {
+            waypoint.trigger([direction])
+          }
+        }
+      }
+      this.clearTriggerQueues()
+    }
+
+    /* Private */
+    Group.prototype.next = function (waypoint) {
+      this.waypoints.sort(byTriggerPoint)
+      var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
+      var isLast = index === this.waypoints.length - 1
+      return isLast ? null : this.waypoints[index + 1]
+    }
+
+    /* Private */
+    Group.prototype.previous = function (waypoint) {
+      this.waypoints.sort(byTriggerPoint)
+      var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
+      return index ? this.waypoints[index - 1] : null
+    }
+
+    /* Private */
+    Group.prototype.queueTrigger = function (waypoint, direction) {
+      this.triggerQueues[direction].push(waypoint)
+    }
+
+    /* Private */
+    Group.prototype.remove = function (waypoint) {
+      var index = Waypoint.Adapter.inArray(waypoint, this.waypoints)
+      if (index > -1) {
+        this.waypoints.splice(index, 1)
+      }
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/first */
+    Group.prototype.first = function () {
+      return this.waypoints[0]
+    }
+
+    /* Public */
+    /* http://imakewebthings.com/waypoints/api/last */
+    Group.prototype.last = function () {
+      return this.waypoints[this.waypoints.length - 1]
+    }
+
+    /* Private */
+    Group.findOrCreate = function (options) {
+      return groups[options.axis][options.name] || new Group(options)
+    }
+
+    Waypoint.Group = Group
+  }()
+);
+
+(
+  function () {
+    'use strict'
+
+    var Waypoint = window.Waypoint
+
+    function isWindow(element) {
+      return element === element.window
+    }
+
+    function getWindow(element) {
+      if (isWindow(element)) {
+        return element
+      }
+      return element.defaultView
+    }
+
+    function NoFrameworkAdapter(element) {
+      this.element = element
+      this.handlers = {}
+    }
+
+    NoFrameworkAdapter.prototype.innerHeight = function () {
+      var isWin = isWindow(this.element)
+      return isWin ? this.element.innerHeight : this.element.clientHeight
+    }
+
+    NoFrameworkAdapter.prototype.innerWidth = function () {
+      var isWin = isWindow(this.element)
+      return isWin ? this.element.innerWidth : this.element.clientWidth
+    }
+
+    NoFrameworkAdapter.prototype.off = function (event, handler) {
+      function removeListeners(element, listeners, handler) {
+        for (var i = 0, end = listeners.length - 1; i < end; i++) {
+          var listener = listeners[i]
+          if (!handler || handler === listener) {
+            element.removeEventListener(listener)
+          }
+        }
+      }
+
+      var eventParts = event.split('.')
+      var eventType = eventParts[0]
+      var namespace = eventParts[1]
+      var element = this.element
+
+      if (namespace && this.handlers[namespace] && eventType) {
+        removeListeners(element, this.handlers[namespace][eventType], handler)
+        this.handlers[namespace][eventType] = []
+      }
+      else if (eventType) {
+        for (var ns in this.handlers) {
+          removeListeners(element, this.handlers[ns][eventType] || [], handler)
+          this.handlers[ns][eventType] = []
+        }
+      }
+      else if (namespace && this.handlers[namespace]) {
+        for (var type in this.handlers[namespace]) {
+          removeListeners(element, this.handlers[namespace][type], handler)
+        }
+        this.handlers[namespace] = {}
+      }
+    }
+
+    /* Adapted from jQuery 1.x offset() */
+    NoFrameworkAdapter.prototype.offset = function () {
+      if (!this.element.ownerDocument) {
+        return null
+      }
+
+      var documentElement = this.element.ownerDocument.documentElement
+      var win = getWindow(this.element.ownerDocument)
+      var rect = {
+        top: 0,
+        left: 0
+      }
+
+      if (this.element.getBoundingClientRect) {
+        rect = this.element.getBoundingClientRect()
+      }
+
+      return {
+        top: rect.top + win.pageYOffset - documentElement.clientTop,
+        left: rect.left + win.pageXOffset - documentElement.clientLeft
+      }
+    }
+
+    NoFrameworkAdapter.prototype.on = function (event, handler) {
+      var eventParts = event.split('.')
+      var eventType = eventParts[0]
+      var namespace = eventParts[1] || '__default'
+      var nsHandlers = this.handlers[namespace] = this.handlers[namespace] || {}
+      var nsTypeList = nsHandlers[eventType] = nsHandlers[eventType] || []
+
+      nsTypeList.push(handler)
+      this.element.addEventListener(eventType, handler)
+    }
+
+    NoFrameworkAdapter.prototype.outerHeight = function (includeMargin) {
+      var height = this.innerHeight()
+      var computedStyle
+
+      if (includeMargin && !isWindow(this.element)) {
+        computedStyle = window.getComputedStyle(this.element)
+        height += parseInt(computedStyle.marginTop, 10)
+        height += parseInt(computedStyle.marginBottom, 10)
+      }
+
+      return height
+    }
+
+    NoFrameworkAdapter.prototype.outerWidth = function (includeMargin) {
+      var width = this.innerWidth()
+      var computedStyle
+
+      if (includeMargin && !isWindow(this.element)) {
+        computedStyle = window.getComputedStyle(this.element)
+        width += parseInt(computedStyle.marginLeft, 10)
+        width += parseInt(computedStyle.marginRight, 10)
+      }
+
+      return width
+    }
+
+    NoFrameworkAdapter.prototype.scrollLeft = function () {
+      var win = getWindow(this.element)
+      return win ? win.pageXOffset : this.element.scrollLeft
+    }
+
+    NoFrameworkAdapter.prototype.scrollTop = function () {
+      var win = getWindow(this.element)
+      return win ? win.pageYOffset : this.element.scrollTop
+    }
+
+    NoFrameworkAdapter.extend = function () {
+      var args = Array.prototype.slice.call(arguments)
+
+      function merge(target, obj) {
+        if (typeof target === 'object' && typeof obj === 'object') {
+          for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+              target[key] = obj[key]
+            }
+          }
+        }
+
+        return target
+      }
+
+      for (var i = 1, end = args.length; i < end; i++) {
+        merge(args[0], args[i])
+      }
+      return args[0]
+    }
+
+    NoFrameworkAdapter.inArray = function (element, array, i) {
+      return array == null ? -1 : array.indexOf(element, i)
+    }
+
+    NoFrameworkAdapter.isEmptyObject = function (obj) {
+      /* eslint no-unused-vars: 0 */
+      for (var name in obj) {
+        return false
+      }
+      return true
+    }
+
+    Waypoint.adapters.push({
+      name: 'noframework',
+      Adapter: NoFrameworkAdapter
+    })
+    Waypoint.Adapter = NoFrameworkAdapter
+  }()
+);
diff --git a/img/bg.jpg b/img/bg.jpg
new file mode 100644
index 0000000..2807d65
Binary files /dev/null and b/img/bg.jpg differ
diff --git a/img/favicon.png b/img/favicon.png
new file mode 100644
index 0000000..78545f7
Binary files /dev/null and b/img/favicon.png differ
diff --git a/img/me.gif b/img/me.gif
new file mode 100644
index 0000000..9b42503
Binary files /dev/null and b/img/me.gif differ
diff --git a/img/portfolio/portfolio-1.jpg b/img/portfolio/portfolio-1.jpg
new file mode 100644
index 0000000..abf636a
Binary files /dev/null and b/img/portfolio/portfolio-1.jpg differ
diff --git a/img/portfolio/portfolio-2.jpg b/img/portfolio/portfolio-2.jpg
new file mode 100644
index 0000000..c565dfa
Binary files /dev/null and b/img/portfolio/portfolio-2.jpg differ
diff --git a/img/portfolio/portfolio-3.jpg b/img/portfolio/portfolio-3.jpg
new file mode 100644
index 0000000..b23e376
Binary files /dev/null and b/img/portfolio/portfolio-3.jpg differ
diff --git a/img/portfolio/portfolio-4.jpg b/img/portfolio/portfolio-4.jpg
new file mode 100644
index 0000000..fe4651a
Binary files /dev/null and b/img/portfolio/portfolio-4.jpg differ
diff --git a/img/portfolio/portfolio-5.jpg b/img/portfolio/portfolio-5.jpg
new file mode 100644
index 0000000..00c4cb3
Binary files /dev/null and b/img/portfolio/portfolio-5.jpg differ
diff --git a/img/portfolio/portfolio-6.jpg b/img/portfolio/portfolio-6.jpg
new file mode 100644
index 0000000..f7f3e58
Binary files /dev/null and b/img/portfolio/portfolio-6.jpg differ
diff --git a/img/portfolio/portfolio-7.jpg b/img/portfolio/portfolio-7.jpg
new file mode 100644
index 0000000..4593685
Binary files /dev/null and b/img/portfolio/portfolio-7.jpg differ
diff --git a/img/portfolio/portfolio-8.jpg b/img/portfolio/portfolio-8.jpg
new file mode 100644
index 0000000..2182414
Binary files /dev/null and b/img/portfolio/portfolio-8.jpg differ
diff --git a/img/portfolio/portfolio-9.jpg b/img/portfolio/portfolio-9.jpg
new file mode 100644
index 0000000..8068f79
Binary files /dev/null and b/img/portfolio/portfolio-9.jpg differ
diff --git a/img/portfolio/portfolio-details-1.jpg b/img/portfolio/portfolio-details-1.jpg
new file mode 100644
index 0000000..28ea489
Binary files /dev/null and b/img/portfolio/portfolio-details-1.jpg differ
diff --git a/img/portfolio/portfolio-details-2.jpg b/img/portfolio/portfolio-details-2.jpg
new file mode 100644
index 0000000..bcb7293
Binary files /dev/null and b/img/portfolio/portfolio-details-2.jpg differ
diff --git a/img/portfolio/portfolio-details-3.jpg b/img/portfolio/portfolio-details-3.jpg
new file mode 100644
index 0000000..0defd13
Binary files /dev/null and b/img/portfolio/portfolio-details-3.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9a63e59
--- /dev/null
+++ b/index.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+  <title>Gaurav Agrawal - Developer</title>
+  <!-- Primary Meta Tags -->
+  <meta name="title" content="Gaurav Agrawal - Developer">
+  <meta name="description" content="">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://gauravagrwal.github.io/">
+  <meta property="og:title" content="Gaurav Agrawal - Developer">
+  <meta property="og:description" content="">
+  <meta property="og:image" content="">
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://gauravagrwal.github.io/">
+  <meta property="twitter:title" content="Gaurav Agrawal - Developer">
+  <meta property="twitter:description" content="">
+  <meta property="twitter:image" content="">
+
+  <!-- Favicons -->
+  <link href="img/favicon.png" rel="icon">
+
+  <!-- Google Fonts -->
+  <link
+    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
+    rel="stylesheet">
+
+  <!-- Vendor CSS Files -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet">
+  <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
+  <link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet">
+
+  <!-- Template Main CSS File -->
+  <link href="css/style.css" rel="stylesheet">
+</head>
+
+<body>
+  <!-- ======= Header ======= -->
+  <header id="header">
+    <div class="container">
+
+      <h1><a href=".">Gaurav Agrawal.</a></h1>
+      <h2>I'm a <span>software developer</span> from India.</h2>
+
+      <nav id="navbar" class="navbar">
+        <ul>
+          <li><a class="nav-link active" href="#header">Home</a></li>
+          <li><a class="nav-link" href="#about">About</a></li>
+          <li><a class="nav-link" href="#resume">Resume</a></li>
+          <li><a class="nav-link" href=".">Portfolio</a></li>
+          <li><a class="nav-link" href="#contact">Contact</a></li>
+        </ul>
+        <i class="bi bi-list mobile-nav-toggle"></i>
+      </nav>
+
+      <div class="social-links">
+        <a title="github" rel="noopener" target="_blank" href="https://www.github.com/gauravagrwal">
+          <i class="bi bi-github"></i>
+        </a>
+        <a title="linkedin" rel="noopener" target="_blank" href="https://www.linkedin.com/in/gauravagrwal">
+          <i class="bi bi-linkedin"></i>
+        </a>
+      </div>
+
+    </div>
+  </header>
+  <!-- End Header -->
+
+  <!-- ======= About Section ======= -->
+  <section id="about" class="about">
+
+    <!-- ======= About Me ======= -->
+    <div class="about-me container">
+
+      <div class="section-title">
+        <h2>About</h2>
+        <p>Learn more about me</p>
+      </div>
+
+      <div class="row">
+        <div class="col-lg-4" data-aos="fade-right">
+          <img src="img/me.gif" class="img-fluid" alt="">
+        </div>
+        <div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
+          <h3>Hi there!</h3>
+          <p>
+            I'm a Software Engineer with keen interest in anything related to
+            technologies. I also contribute to open-source projects. I enjoy
+            learning new things and sharing knowledge with others.
+          </p>
+          <p class="fst-italic">
+            “When patterns are broken, new worlds emerge.” ― Tuli Kupferberg
+          </p>
+        </div>
+      </div>
+
+    </div>
+    <!-- End About Me -->
+
+    <!-- ======= Skills  ======= -->
+    <div class="skills container">
+
+      <div class="section-title">
+        <h2>Skills</h2>
+      </div>
+
+      <div class="row skills-content">
+
+        <div class="col-lg-6">
+
+          <div class="progress">
+            <span class="skill">HTML/CSS/JavaScript <i class="val">60%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+          <div class="progress">
+            <span class="skill">C# <i class="val">70%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+          <div class="progress">
+            <span class="skill">Python <i class="val">55%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+          <div class="progress">
+            <span class="skill">Microsoft Azure <i class="val">60%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <div class="col-lg-6">
+
+          <div class="progress">
+            <span class="skill">ReactJs <i class="val">50%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+          <div class="progress">
+            <span class="skill">ASP.NET Core <i class="val">70%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+          <div class="progress">
+            <span class="skill">MySQL/MS SQL Server <i class="val">70%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+          <div class="progress">
+            <span class="skill">Xamarin.Forms<i class="val">50%</i></span>
+            <div class="progress-bar-wrap">
+              <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+    <!-- End Skills -->
+
+  </section>
+  <!-- End About Section -->
+
+  <!-- ======= Resume Section ======= -->
+  <section id="resume" class="resume">
+    <div class="container">
+
+      <div class="section-title">
+        <h2>Resume</h2>
+        <p>Check My Resume</p>
+      </div>
+
+      <div class="row">
+        <!-- ======= Experience ======= -->
+        <div class="col-lg-6">
+          <h3 class="resume-title">Professional Experience</h3>
+          <div class="resume-item">
+            <h4>Software Engineer</h4>
+            <p><em>Light & Wonder, Bengaluru, IN</em></p>
+            <h5>March, 2023 - Present</h5>
+          </div>
+          <div class="resume-item">
+            <h4>Senior Software Engineer</h4>
+            <p><em>Capgemini, Hyderabad, IN</em></p>
+            <h5>Jan, 2022 - March, 2023</h5>
+          </div>
+          <div class="resume-item">
+            <h4>Software Engineer</h4>
+            <p><em>Capgemini, Hyderabad, IN</em></p>
+            <h5>Oct, 2020 - Dec, 2021</h5>
+          </div>
+          <div class="resume-item">
+            <h4>Subject Matter Expert - Computer Science</h4>
+            <p><em>Chegg, Remote</em></p>
+            <h5>Nov, 2019 - Present</h5>
+          </div>
+        </div>
+
+        <!-- ======= Education ======= -->
+        <div class="col-lg-6">
+          <h3 class="resume-title">Education</h3>
+          <div class="resume-item">
+            <h4>Bachelor of Engineering, Computer Science</h4>
+            <p> <em>RSR Rungta College of Engineering & Technology, Bhilai, Chhattisgarh, IN</em> </p>
+            <h5>2016 - 2020</h5>
+          </div>
+          <div class="resume-item">
+            <h4>Senior Secondary</h4>
+            <p> <em>Shri Shankaracharya Vidyalaya, Bhilai, Chhattisgarh, IN</em> </p>
+            <h5>2014 - 2016</h5>
+          </div>
+          <div class="resume-item">
+            <h4>Higher Secondary</h4>
+            <p><em>Ambuja Vidya Peeth, Rawan, Chhattisgarh, IN</em></p>
+            <h5>2012 - 2014</h5>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+  <!-- End Resume Section -->
+
+  <!-- ======= Portfolio Section ======= -->
+  <section id="portfolio" class="portfolio">
+    <div class="container">
+
+      <div class="section-title">
+        <h2>Portfolio</h2>
+        <p>My Works</p>
+      </div>
+
+      <div class="row">
+        <div class="col-lg-12 d-flex justify-content-center">
+          <ul id="portfolio-flters">
+            <li data-filter="*" class="filter-active">All</li>
+            <li data-filter=".filter-app">App</li>
+            <li data-filter=".filter-card">Package</li>
+            <li data-filter=".filter-web">Web</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="row portfolio-container">
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>Drishti</h4>
+              <p>Android | iOS</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-1.jpg" data-gallery="portfolioDetailsGallery"
+                  data-glightbox="type: external" class="portfolio-details-lightbox" title="Portfolio Details">
+                  <i class="bx bx-link"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>Sharp Notes</h4>
+              <p>Android | iOS</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="Web 3"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>Weather 24x7</h4>
+              <p>Android | iOS</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="App 2"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>Echo</h4>
+              <p>Android</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="Card 2"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>Country Bulletin</h4>
+              <p>Android</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="Web 2"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-card">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>XUIDesignKit</h4>
+              <p>Package</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="App 3"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-web">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>infiCreations</h4>
+              <p>Web</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="Card 1"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-web">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>Azure Cognitive Services With Python</h4>
+              <p>Web</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="Card 3"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-4 col-md-6 portfolio-item filter-web">
+          <div class="portfolio-wrap">
+            <img src="img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
+            <div class="portfolio-info">
+              <h4>GigHub</h4>
+              <p>Web</p>
+              <div class="portfolio-links">
+                <a href="img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox"
+                  title="Web 3"><i class="bx bx-plus"></i></a>
+                <a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external"
+                  class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  </section>
+  <!-- End Portfolio Section -->
+
+  <!-- ======= Contact Section ======= -->
+  <section id="contact" class="contact">
+    <div class="container">
+
+      <div class="section-title">
+        <h2>Contact</h2>
+        <p>Contact Me</p>
+      </div>
+
+      <div class="row mt-2">
+
+        <div class="col-md-6 d-flex align-items-stretch">
+          <div class="info-box">
+            <i class="bx bx-map"></i>
+            <h3>My Address</h3>
+            <p>Bengaluru, Karnataka</p>
+          </div>
+        </div>
+
+        <div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
+          <div class="info-box">
+            <i class="bx bx-share-alt"></i>
+            <h3>Social Profiles</h3>
+            <div class="social-links">
+              <a title="facebook" rel="noopener" target="_blank" href="https://www.facebook.com/gaurav.ag05"
+                class="facebook">
+                <i class="bi bi-facebook"></i>
+              </a>
+              <a title="instagram" rel="noopener" target="_blank" href="https://www.instagram.com/__gauravagrawal"
+                class="instagram">
+                <i class="bi bi-instagram"></i>
+              </a>
+              <a title="reddit" rel="noopener" target="_blank" href="https://www.reddit.com/user/__gauravagrawal"
+                class="reddit">
+                <i class="bi bi-reddit"></i>
+              </a>
+              <a title="twitter" rel="noopener" target="_blank" href="https://twitter.com/__gauravagrwal"
+                class="twitter">
+                <i class="bi bi-twitter"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-md-6 mt-4 d-flex align-items-stretch">
+          <div class="info-box">
+            <i class="bx bx-envelope"></i>
+            <h3><a id="mail" href="">Email Me</a> </h3>
+          </div>
+        </div>
+        <div class="col-md-6 mt-4 d-flex align-items-stretch">
+          <div class="info-box">
+            <i class="bx bx-phone-call"></i>
+            <h3><a id="tel" href="">Call Me</a></h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- End Contact Section -->
+
+  <!-- ===== Footer ===== -->
+  <div class="credits">© Copyright 2023 - <a href=".">Gaurav Agrawal</a></div>
+  <!-- === End Footer === -->
+
+  <!-- Vendor JS Files -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
+  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
+  <script src="external/waypoints/noframework.waypoints.js"></script>
+
+  <!-- Template Main JS File -->
+  <script src="js/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..a6d885b
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,215 @@
+(function () {
+  "use strict";
+
+  /**
+   * Easy selector helper function
+   */
+  const select = (el, all = false) => {
+    el = el.trim()
+    if (all) {
+      return [...document.querySelectorAll(el)]
+    } else {
+      return document.querySelector(el)
+    }
+  }
+
+  /**
+   * Easy event listener function
+   */
+  const on = (type, el, listener, all = false) => {
+    let selectEl = select(el, all)
+
+    if (selectEl) {
+      if (all) {
+        selectEl.forEach(e => e.addEventListener(type, listener))
+      } else {
+        selectEl.addEventListener(type, listener)
+      }
+    }
+  }
+
+  /**
+   * Scrolls to an element with header offset
+   */
+  const scrollto = (el) => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  /**
+   * Mobile nav toggle
+   */
+  on('click', '.mobile-nav-toggle', function (e) {
+    select('#navbar').classList.toggle('navbar-mobile')
+    this.classList.toggle('bi-list')
+    this.classList.toggle('bi-x')
+  })
+
+  /**
+   * Scrool with ofset on links with a class name .scrollto
+   */
+  on('click', '#navbar .nav-link', function (e) {
+    let section = select(this.hash)
+    if (section) {
+      e.preventDefault()
+
+      let navbar = select('#navbar')
+      let header = select('#header')
+      let sections = select('section', true)
+      let navlinks = select('#navbar .nav-link', true)
+
+      navlinks.forEach((item) => {
+        item.classList.remove('active')
+      })
+
+      this.classList.add('active')
+
+      if (navbar.classList.contains('navbar-mobile')) {
+        navbar.classList.remove('navbar-mobile')
+        let navbarToggle = select('.mobile-nav-toggle')
+        navbarToggle.classList.toggle('bi-list')
+        navbarToggle.classList.toggle('bi-x')
+      }
+
+      if (this.hash == '#header') {
+        header.classList.remove('header-top')
+        sections.forEach((item) => {
+          item.classList.remove('section-show')
+        })
+        return;
+      }
+
+      if (!header.classList.contains('header-top')) {
+        header.classList.add('header-top')
+        setTimeout(function () {
+          sections.forEach((item) => {
+            item.classList.remove('section-show')
+          })
+          section.classList.add('section-show')
+
+        }, 350);
+      } else {
+        sections.forEach((item) => {
+          item.classList.remove('section-show')
+        })
+        section.classList.add('section-show')
+      }
+
+      scrollto(this.hash)
+    }
+  }, true)
+
+  /**
+   * Activate/show sections on load with hash links
+   */
+  window.addEventListener('load', () => {
+    if (window.location.hash) {
+      let initial_nav = select(window.location.hash)
+
+      if (initial_nav) {
+        let header = select('#header')
+        let navlinks = select('#navbar .nav-link', true)
+
+        header.classList.add('header-top')
+
+        navlinks.forEach((item) => {
+          if (item.getAttribute('href') == window.location.hash) {
+            item.classList.add('active')
+          } else {
+            item.classList.remove('active')
+          }
+        })
+
+        setTimeout(function () {
+          initial_nav.classList.add('section-show')
+        }, 350);
+
+        scrollto(window.location.hash)
+      }
+    }
+  });
+
+  /**
+   * Skills animation
+   */
+  let skilsContent = select('.skills-content');
+  if (skilsContent) {
+    new Waypoint({
+      element: skilsContent,
+      offset: '80%',
+      handler: function (direction) {
+        let progress = select('.progress .progress-bar', true);
+        progress.forEach((el) => {
+          el.style.width = el.getAttribute('aria-valuenow') + '%'
+        });
+      }
+    })
+  }
+
+  /**
+   * Porfolio isotope and filter
+   */
+  window.addEventListener('load', () => {
+    let portfolioContainer = select('.portfolio-container');
+    if (portfolioContainer) {
+      let portfolioIsotope = new Isotope(portfolioContainer, {
+        itemSelector: '.portfolio-item',
+        layoutMode: 'fitRows'
+      });
+
+      let portfolioFilters = select('#portfolio-flters li', true);
+
+      on('click', '#portfolio-flters li', function (e) {
+        e.preventDefault();
+        portfolioFilters.forEach(function (el) {
+          el.classList.remove('filter-active');
+        });
+        this.classList.add('filter-active');
+
+        portfolioIsotope.arrange({
+          filter: this.getAttribute('data-filter')
+        });
+      }, true);
+    }
+
+  });
+
+  /**
+   * Initiate portfolio lightbox 
+   */
+  const portfolioLightbox = GLightbox({
+    selector: '.portfolio-lightbox'
+  });
+
+  /**
+   * Initiate portfolio details lightbox 
+   */
+  const portfolioDetailsLightbox = GLightbox({
+    selector: '.portfolio-details-lightbox',
+    width: '90%',
+    height: '90vh'
+  });
+
+  /**
+   * Portfolio details slider
+   */
+  new Swiper('.portfolio-details-slider', {
+    speed: 400,
+    loop: true,
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false
+    },
+    pagination: {
+      el: '.swiper-pagination',
+      type: 'bullets',
+      clickable: true
+    }
+  });
+  const mailElement = document.getElementById("mail");
+  mailElement.setAttribute("href", "mailto:".concat(atob("Z2F1cmF2YWcuMTAwNUBnbWFpbC5jb20=")));
+  const telElement = document.getElementById("tel");
+  telElement.setAttribute("href", "tel:".concat(atob("KzkxNzAwMDI1NTI0")));
+})()