fix folder structure

static/css/about.css

@@ -0,0 +1,367 @@
+.social-link {
+  list-style: none;
+  padding: 0.2rem;
+}
+
+.social-link a {
+  font-size: 1.5rem;
+  color: #3c4858;
+  padding: 0.5rem;
+}
+
+.social-link a:hover {
+  color: #248aaa;
+  transition: all 0.3s ease-in;
+}
+
+.circular-progress {
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+  background: none;
+  margin: 0 auto;
+  box-shadow: none;
+  position: relative;
+}
+
+.circular-progress:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 12px solid #f9fafc;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.circular-progress > span {
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.circular-progress .circular-progress-left {
+  left: 0;
+}
+
+.circular-progress .circular-progress-bar {
+  width: 100%;
+  height: 100%;
+  background: none;
+  border-width: 12px;
+  border-style: solid;
+  position: absolute;
+  top: 0;
+}
+
+.circular-progress .circular-progress-left .circular-progress-bar {
+  left: 100%;
+  border-top-right-radius: 80px;
+  border-bottom-right-radius: 80px;
+  border-left: 0;
+  -webkit-transform-origin: center left;
+  transform-origin: center left;
+}
+
+.circular-progress .circular-progress-right {
+  right: 0;
+}
+
+.circular-progress .circular-progress-right .circular-progress-bar {
+  left: -100%;
+  border-top-left-radius: 80px;
+  border-bottom-left-radius: 80px;
+  border-right: 0;
+  -webkit-transform-origin: center right;
+  transform-origin: center right;
+  animation: circular-loading-1 1.8s linear forwards;
+}
+
+.circular-progress .circular-progress-value {
+  width: 90%;
+  height: 90%;
+  border-radius: 50%;
+  background: #3c4858;
+  font-size: 1rem;
+  color: #f9fafc;
+  line-height: 135px;
+  text-align: center;
+  position: absolute;
+  top: 5%;
+  left: 5%;
+}
+
+.circular-progress.blue .circular-progress-bar {
+  border-color: #048dff;
+}
+
+.circular-progress.yellow .circular-progress-bar {
+  border-color: #ffc212;
+}
+
+.circular-progress.pink .circular-progress-bar {
+  border-color: #ed63d2;
+}
+
+.circular-progress.green .circular-progress-bar {
+  border-color: #2dca73;
+}
+
+.circular-progress-percentage-50 {
+  animation: circular-loading-50 0s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-55 {
+  animation: circular-loading-55 0.18s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-60 {
+  animation: circular-loading-60 0.36s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-65 {
+  animation: circular-loading-65 0.54s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-70 {
+  animation: circular-loading-70 0.72s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-75 {
+  animation: circular-loading-75 0.9s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-80 {
+  animation: circular-loading-80 1.08s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-85 {
+  animation: circular-loading-85 1.26s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-90 {
+  animation: circular-loading-90 1.44s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-95 {
+  animation: circular-loading-95 1.62s linear forwards 1.8s;
+}
+
+.circular-progress-percentage-100 {
+  animation: circular-loading-100 1.8s linear forwards 1.8s;
+}
+
+@keyframes circular-loading-50 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes circular-loading-55 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(18deg);
+    transform: rotate(18deg);
+  }
+}
+
+@keyframes circular-loading-60 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(36deg);
+    transform: rotate(36deg);
+  }
+}
+
+@keyframes circular-loading-65 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(54deg);
+    transform: rotate(54deg);
+  }
+}
+
+@keyframes circular-loading-70 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(72deg);
+    transform: rotate(72deg);
+  }
+}
+
+@keyframes circular-loading-75 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes circular-loading-80 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(108deg);
+    transform: rotate(108deg);
+  }
+}
+
+@keyframes circular-loading-85 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(126deg);
+    transform: rotate(126deg);
+  }
+}
+
+@keyframes circular-loading-90 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(144deg);
+    transform: rotate(144deg);
+  }
+}
+
+@keyframes circular-loading-95 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(162deg);
+    transform: rotate(162deg);
+  }
+}
+
+@keyframes circular-loading-100 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes circular-loading-1 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes circular-loading-2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(144deg);
+    transform: rotate(144deg);
+  }
+}
+
+@keyframes circular-loading-3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes circular-loading-4 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(36deg);
+    transform: rotate(36deg);
+  }
+}
+
+@keyframes circular-loading-5 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(126deg);
+    transform: rotate(126deg);
+  }
+}
+
+@media only screen and (max-width: 990px) {
+  .circular-progress {
+    margin-bottom: 20px;
+  }
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}

static/css/achievements.css

@@ -0,0 +1,112 @@
+#gallery .achievement-entry {
+  cursor: pointer;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 7px;
+  margin-right: 7px;
+  z-index: 1;
+  opacity: 1;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+  overflow: hidden;
+}
+
+#gallery .achievement-entry:hover {
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0.95;
+  transition: opacity 0.3s ease-out;
+}
+
+#gallery .achievement-details {
+  cursor: pointer;
+  z-index: 1;
+  opacity: 1 !important;
+  transition: none !important;
+}
+
+#gallery .img-type-1 {
+  height: 300px;
+}
+#gallery .img-type-2 {
+  height: 146px;
+  margin-bottom: 8px;
+}
+
+#gallery i {
+  color: #8392a5;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 10px;
+  font-size: 0rem;
+  opacity: 0;
+  position: absolute;
+}
+
+#gallery .achievement-entry:hover i {
+  opacity: 1;
+  font-size: 1rem;
+  transition: all 0.3s ease-out;
+  --webkit-transition: all 0.3s ease-out;
+}
+
+#gallery .img-type-1 i {
+  margin-top: 140px;
+}
+#gallery .img-type-2 i {
+  margin-top: 65px;
+}
+
+#gallery .achievement-details.img-type-1 i,
+.achievement-details.img-type-2 i {
+  right: 5px !important;
+  margin-top: 5px !important;
+  transition: none !important;
+}
+
+#gallery .achievement-entry .title {
+  color: #e5e9f2;
+  background-color: rgba(0, 0, 0, 0.7);
+  opacity: 0;
+  padding: 5px;
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  margin-bottom: 0px;
+  bottom: -5px;
+}
+
+#gallery .achievement-entry:hover .title {
+  opacity: 1;
+  bottom: 0px;
+  transition: bottom 0.3s ease-out;
+}
+
+#gallery .caption {
+  background-color: rgba(0, 0, 0, 0.7);
+  bottom: 1rem;
+  left: 1rem;
+  color: #e5e9f2;
+  padding: 15px;
+  position: absolute;
+  transition: all 0.3s ease-out;
+}
+
+#gallery .caption h3 {
+  color: #e5e9f2;
+}
+
+#gallery .caption p {
+  font-size: 16px;
+  font-weight: 300;
+  color: #e5e9f2;
+}
+
+.hidden {
+  display: none !important;
+}
+
+#gallery .achievement-details {
+  height: 75vh !important;
+}

static/css/blog.css

@@ -0,0 +1,352 @@
+.wrapper {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 400px;
+  background: #f9fafc;
+  min-height: 100vh;
+  overflow: auto;
+  transition: all ease-in-out 0.3s;
+}
+
+.sidebar.hide {
+  position: relative;
+  width: 0;
+  transition: all ease-in-out 0.3s;
+  z-index: -1001;
+}
+
+#search-box {
+  width: 250px;
+  height: 35px;
+  padding-left: 15px;
+  margin-top: 30px;
+  border-radius: 5px;
+  background-color: #e5e9f2;
+  transition: all 0.3s ease-out;
+  border: 1px solid #c0ccda;
+}
+
+#search-box:focus {
+  border: 1pt solid #248aaa;
+  outline: none;
+}
+
+.sidebar-tree {
+  margin-left: 2rem;
+  margin-top: 2.5rem;
+  position: fixed;
+}
+
+.tree,
+.tree ul {
+  margin: 0;
+  margin-top: 10px;
+  padding: 0;
+  list-style: none;
+}
+
+.tree ul {
+  margin-left: 1em;
+  position: relative;
+}
+
+.tree ul ul {
+  margin-left: 0.5em;
+}
+
+.tree ul:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: -17px;
+  left: -3px;
+  bottom: 16px;
+  border-left: 1px solid;
+}
+
+.tree li {
+  margin: 0;
+  padding: 0 1em;
+  line-height: 2em;
+  color: #3c4858;
+  font-weight: 700;
+  position: relative;
+}
+
+.tree ul li:before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 0;
+  border-top: 1px solid;
+  margin-top: -1px;
+  position: absolute;
+  top: 18px;
+  left: -3px;
+}
+
+.tree ul li:last-child:before {
+  background: #f9fafc;
+  height: auto;
+  top: 1em;
+  bottom: 0;
+}
+
+.tree li a {
+  text-decoration: none;
+  color: #131313;
+  transition: all 0.3s ease-out;
+}
+.tree li a:hover {
+  margin-left: 3px;
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+}
+
+.tree i {
+  color: #3c4858;
+  font-size: 12px;
+  margin-right: 5px;
+}
+
+.tree .shift-right {
+  margin-left: 5px;
+}
+
+.tree ul {
+  display: none;
+}
+
+.tree .expand,
+.tree .expand > ul {
+  display: block;
+}
+
+a.focused {
+  color: #2098d1 !important;
+}
+
+.content {
+  width: 100%;
+  background: #e5e9f2;
+  padding: 0;
+  position: relative;
+}
+
+.content-cards {
+  padding-top: 30px;
+  width: 100%;
+  padding-left: 28px;
+  padding-bottom: 20px;
+}
+
+.post-cards {
+  margin: 32px;
+}
+
+.post-cards .filtr-item {
+  width: 23rem !important;
+}
+
+.post-cards .card {
+  margin: 5px;
+  position: relative;
+}
+
+.post-cards .card .card-footer span {
+  font-size: 10pt;
+  color: #6c757d !important;
+  padding-top: 5px;
+}
+
+.post-cards .card .card-footer {
+  background: #fff;
+}
+
+.post-summery {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  max-height: 144px;
+  /* fallback */
+  -webkit-line-clamp: 5;
+  /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+/*-------------- Media Queries ---------- */
+
+@media (max-width: 1200px) {
+  .sidebar-tree {
+    margin-left: 1rem;
+  }
+  .content-cards {
+    padding-left: 0px;
+  }
+  .post-cards {
+    margin-left: 15px;
+  }
+  .post-cards .filtr-item {
+    width: 22rem !important;
+    padding: 3px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .content {
+    width: 100vw;
+    padding-left: 15px;
+  }
+  .content.overley {
+    width: 60vw;
+    padding-left: 3px;
+    /* margin-left: -50vw; */
+  }
+  .navbar-toggler {
+    display: block;
+  }
+
+  .sidebar {
+    width: 0;
+  }
+  .sidebar nav {
+    display: none;
+    transition: all ease-in-out 0.3s;
+  }
+  .sidebar.hide {
+    position: relative;
+    z-index: 1001;
+    width: 40vw;
+  }
+
+  .sidebar-tree {
+    margin-left: 1.5rem;
+  }
+
+  .content-cards {
+    padding-top: 20px;
+    width: 100%;
+    padding-left: 0px;
+  }
+
+  .post-cards {
+    margin: 0;
+    margin-top: 32px;
+  }
+
+  .post-cards .filtr-item {
+    margin: 10px;
+    width: 47vw !important;
+  }
+
+  .post-cards .card {
+    max-width: 47vw !important;
+  }
+
+  .content.overley .post-cards .filtr-item {
+    margin: 10px;
+    width: 55vw !important;
+  }
+
+  .content.overley .post-cards .card {
+    max-width: 55vw !important;
+  }
+}
+@media only screen and (max-width: 576px) {
+  .wrapper {
+    display: block;
+  }
+
+  #search-box {
+    width: 85vw;
+    height: 35px;
+    padding-left: 5px;
+    margin-top: 30px;
+  }
+  .content {
+    width: 100vw;
+    left: 0;
+    display: block;
+    padding-left: 2vw;
+  }
+
+  .content.overley {
+    width: 100vw;
+    left: 0;
+    padding-left: 2vw;
+  }
+
+  .sidebar {
+    position: relative;
+    max-height: 0;
+    width: 100vw;
+    min-height: 0;
+    overflow: hidden;
+    transition: all ease-in-out 0.5s;
+  }
+
+  .sidebar-tree {
+    position: relative;
+  }
+
+  .sidebar.hide {
+    position: relative;
+    z-index: 1001;
+    width: 100vw;
+    max-height: 100vh;
+    overflow: hidden;
+    transition: all ease-in-out 0.5s;
+  }
+
+  .content-cards {
+    padding-top: 20px;
+    padding-left: 0px;
+    transition: all ease-in-out 0.5s;
+  }
+
+  .content.overley .content-cards {
+    padding-top: 0px;
+    padding-left: 0px;
+    transition: all ease-in-out 0.5s;
+  }
+
+  .post-cards {
+    margin: 0;
+    margin-top: 32px;
+    transition: all ease-in-out 0.5s;
+  }
+
+  .content.overley .post-cards {
+    margin: 0;
+    transition: all ease-in-out 0.5s;
+  }
+
+  .post-cards .filtr-item {
+    margin: 10px;
+    width: 90vw !important;
+  }
+
+  .post-cards .card {
+    max-width: 90vw !important;
+  }
+
+  .content.overley .post-cards .filtr-item {
+    margin: 10px;
+    width: 90vw !important;
+  }
+
+  .content.overley .post-cards .card {
+    max-width: 90vw !important;
+  }
+}

static/css/experiences.css

@@ -0,0 +1,119 @@
+.experiences {
+  padding-bottom: 1rem;
+}
+
+.text-muted {
+  color: #e5e9f2;
+}
+
+.experiences ul {
+  padding-left: 1rem;
+}
+
+.experiences ul > li {
+  margin-left: 0;
+  color: #3c4858;
+}
+
+.experience-entry-heading h5 {
+  font-weight: 600;
+}
+
+.circle {
+  padding: 13px 20px;
+  border-radius: 50%;
+  background-color: #248aaa;
+  color: #f9fafc;
+  max-height: 50px;
+  z-index: 2;
+}
+
+.timeline .vertical-line {
+  align-self: stretch;
+}
+
+.timeline .vertical-line::after {
+  content: "";
+  position: absolute;
+  border-left: 3px solid #248aaa;
+  z-index: 1;
+  height: 100%;
+  left: 50%;
+}
+
+.vertical-line-left-adjustment::after {
+  left: calc(50% - 3px) !important;
+}
+
+.timeline .horizontal-line div {
+  padding: 0;
+  height: 40px;
+}
+
+.timeline .horizontal-line hr {
+  border-top: 3px solid #248aaa;
+  margin: 0;
+  top: 17px;
+  position: relative;
+}
+
+.timeline .horizontal-line .timeline-side-div {
+  display: flex;
+  overflow: hidden;
+}
+
+.timeline .horizontal-line .corner {
+  border: 3px solid #248aaa;
+  width: 100%;
+  position: relative;
+  border-radius: 15px;
+}
+
+.top-left {
+  left: -50%;
+  top: -50%;
+}
+
+.top-right {
+  left: 50%;
+  top: -50%;
+}
+
+.bottom-left {
+  left: -50%;
+  top: calc(50% - 3px);
+}
+
+.bottom-right {
+  left: 50%;
+  top: calc(50% - 3px);
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}

static/css/home.css

@@ -0,0 +1,72 @@
+.home {
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  color: #f9fafc;
+  overflow: hidden;
+}
+
+.background {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background-image: url("/assets/img/background/flower.jpg");
+  background-attachment: fixed;
+  transform: scale(1.1);
+  filter: blur(3px);
+  -webkit-filter: blur(3px);
+  background-size: cover;
+}
+
+.content {
+  position: relative;
+  top: -80%;
+  height: 75%;
+}
+
+.home img {
+  width: 160px;
+  max-width: 50%;
+  height: auto;
+}
+
+.home .greeting {
+  color: #f9fafc;
+}
+
+.home .typing-carousel {
+  font-size: 14pt;
+  color: #f0f0f0;
+}
+
+#typing-carousel-data {
+  display: none;
+}
+
+.arrow {
+  position: absolute;
+  color: #f9fafc;
+  font-size: 1.5rem;
+  bottom: 0;
+}
+
+.bounce {
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}

static/css/navbar.css

@@ -0,0 +1,186 @@
+.top-navbar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 99999;
+  -webkit-transition: all 0.4s ease-out;
+  transition: all 0.4s ease-out;
+  margin: 0;
+  padding-top: 0.1rem;
+  text-align: center;
+}
+
+/* --- initial state start ------ */
+
+.initial-navbar {
+  background-color: none;
+}
+
+.initial-navbar .navbar-brand {
+  color: #C0CCDA;
+  font-weight: 800;
+}
+
+.initial-navbar li a {
+  color: #C0CCDA;
+}
+
+.initial-navbar .navbar-nav .active,
+.initial-navbar li a:hover {
+  color: #F9FAFC;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.navbar-collapse.show,
+.navbar-collapse.collapsing {
+  background-color: #f9fafc;
+  padding-left: 1rem;
+}
+
+/* --- initial state end ------ */
+
+/* --- state after scroll start --- */
+
+.final-navbar {
+  background-color: #f9fafc;
+  color: #1C2D41;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.final-navbar .navbar-brand {
+  color: #1C2D41;
+  font-weight: 800;
+}
+
+.final-navbar li a {
+  color: #1C2D41;
+  font-weight: 500;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  border-bottom: 2px solid#F9FAFC;
+}
+
+.final-navbar .navbar-nav .active,
+.final-navbar li a:hover {
+  color: #2098d1;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  border-bottom: 2px solid #2098d1;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(34, 136, 168, 0.1) 0%
+  );
+}
+
+.navbar-collapse.show li a,
+.navbar-collapse.collapsing li a {
+  color: #1C2D41;
+  font-weight: 500;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.navbar-collapse.show .navbar-nav .active,
+.navbar-collapse.show .navbar-nav a:hover {
+  color: #2098d1;
+  /* -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; */
+}
+
+#top-navbar-divider {
+  margin-top: 10px;
+}
+
+/* --- state after scroll end --- */
+
+#top-navbar-divider {
+  background: rgba(192, 204, 218, 0.8);
+  height: 20px;
+  width: 2px;
+}
+.final-navbar #top-navbar-divider {
+  background: rgba(0, 0, 0, 0.6);
+  height: 20px;
+  width: 2px;
+}
+
+/*------ navbar on blog page start ----*/
+
+.final-navbar .navbar-toggler {
+  padding: 2px !important;
+}
+
+.blog-navbar .navbar-brand {
+  color: #1C2D41;
+  font-weight: 800;
+}
+
+.blog-navbar li a {
+  color: #1C2D41;
+  font-weight: 500;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.blog-navbar .navbar-nav .active,
+.blog-navbar li a:hover {
+  color: #2098d1;
+  /* -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; */
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .final-navbar .navbar-nav .active,
+  .final-navbar li a:hover {
+    color: #2098d1;
+    -webkit-transition: none;
+    transition: none;
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
+  }
+
+  .navbar-collapse.show {
+    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+    transition: all 0.3s ease-out;
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}

static/css/projects.css

@@ -0,0 +1,30 @@
+.projects .card .card-header {
+  padding: 10px;
+}
+
+.projects .card .card-img-xs {
+  margin-top: 0px;
+  margin-left: 0px;
+  margin-bottom: 5px;
+  margin-right: 10px;
+}
+
+.card .card-header .sub-title span:nth-child(1) {
+  float: left;
+}
+.card .card-header .sub-title span:nth-child(2) {
+  float: right;
+}
+
+.projects .card .card-header {
+  background-color: #f9fafc;
+}
+
+.projects .card .card-header .sub-title {
+  color: #8392a5;
+  margin-top: 5px;
+}
+
+.filtr-projects {
+  padding: 15px !important;
+}

static/css/read.css

@@ -0,0 +1,186 @@
+.read-area {
+  background-color: #f9fafc;
+}
+
+.hero-area {
+  margin-top: 50px;
+  width: 100%;
+  height: 400px;
+  background-image: url(/assets/img/bg.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.content {
+  width: 100%;
+  position: relative;
+  top: -60px;
+  padding: 5px;
+}
+
+.author-profile {
+  position: relative;
+  align-content: center;
+  text-align: center;
+}
+
+.author-profile img {
+  height: 120px;
+  width: 120px;
+}
+.author-profile p {
+  color: #8392a5;
+}
+
+.title {
+  text-align: center;
+}
+
+.post-content {
+  padding: 10px;
+}
+
+table {
+  border-radius: 20px;
+  background: #e5e9f2;
+  border: 1px solid #c0ccda;
+}
+
+table tr {
+  height: 40px !important;
+}
+
+table thead tr {
+  background: #248aaa;
+  color: #e5e9f2;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #e5e9f2;
+}
+
+tbody tr:hover {
+  background: #c0ccda;
+}
+
+figure {
+  border: 1px solid #c0ccda;
+  height: fit-content;
+  width: fit-content;
+  align-self: center;
+  margin: auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: #8392a5;
+}
+
+pre {
+  margin: 5px;
+}
+
+code {
+  padding: 10px !important;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+.next-prev-navigator {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.next-prev-navigator a {
+  color: #3c4858;
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator a:hover {
+  color: #2098d1;
+  transition: all 0.3 ease-out;
+}
+
+.next-prev-navigator .next-article {
+  text-align: right;
+}
+
+.next-prev-navigator .next-article a {
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .previous-article a {
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .btn-outline-info {
+  color: #3c4858 !important;
+  border-color: #e5e9f2 !important;
+  background-color: #e5e9f2 !important;
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .btn-outline-info:hover {
+  color: #f9fafc !important;
+  background-color: #248aaa !important;
+  transition: all 0.3s ease-out;
+}
+
+.disquss {
+  padding: 10px;
+}
+
+@media only screen and (max-width: 768px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
+  }
+  .container {
+    padding: 10px;
+  }
+}
+@media only screen and (max-width: 576px) {
+  .wrapper {
+    padding: 0px;
+  }
+
+  .hero-area {
+    height: 200px;
+  }
+
+  .content {
+    padding: 0px;
+  }
+
+  pre {
+    margin: 0px;
+  }
+  code {
+    padding: 0px;
+  }
+  .next-prev-navigator .previous-article {
+    text-align: center;
+    margin: 5px;
+  }
+  .next-prev-navigator .next-article {
+    text-align: center;
+    margin: 5px;
+  }
+  .previous-article a,
+  .next-article a {
+    width: 100%;
+  }
+}

static/css/recent-posts.css

@@ -0,0 +1,19 @@
+.recent-posts .card .card-footer span {
+  font-size: 10pt;
+  color: #6c757d !important;
+  padding-top: 5px;
+}
+
+.recent-posts .card .card-footer {
+  background: #fff;
+}
+
+.post-summery {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /* line-height: 24px;     fallback */
+  max-height: 144px; /* fallback */
+  -webkit-line-clamp: 5; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}

static/css/skills.css

@@ -0,0 +1,49 @@
+.skills .card .card-head img {
+  margin: 10px;
+}
+
+.skills .card {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.skills .card .card-body {
+  padding-top: 0;
+}
+
+.skills .card .card-head {
+  height: fit-content;
+}
+
+.skills .card .card-head h4 {
+  margin-top: 0.8rem;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}

static/css/style.css

@@ -0,0 +1,222 @@
+/* ========= Colors ============
+Heading:     #1C2D41
+Paragraph:   #3C4858
+Iconography: #8392A5
+Secondary:   #C0CCDA
+Dirty Snow:  #E5E9F2
+Snow:        #F9FAFC
+
+Magenta: #7551E9
+Orange:  #FF7D51
+Pink:    #ED63D2
+Green:   #2DCA73
+Yellow:  #FFC212
+*/
+
+body {
+  background-color: #f9fafc;
+  font-family: "Muli";
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #1c2d41;
+}
+
+p {
+  color: #3c4858;
+}
+
+a {
+  color: #248aaa;
+}
+
+a:hover {
+  color: #207089;
+}
+
+.btn-dark {
+  background-color: #3c4858;
+  border-color: #3c4858;
+  color: #e5e9f2;
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.btn-dark:hover,
+.btn-dark:focus {
+  background-color: #248aaa;
+  border-color: #248aaa;
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+}
+
+.btn-outline-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.bg-white {
+  background-color: #f9fafc !important;
+}
+
+.bg-dimmed {
+  background-color: #e5e9f2;
+}
+
+.anchor {
+  padding-top: 3rem;
+}
+
+.card {
+  box-shadow: none;
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  overflow: hidden;
+}
+
+.card-img-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.card-img-xs {
+  width: 24px;
+  height: 24px;
+}
+
+.card:hover,
+.card:focus {
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  border: 1px solid #fff;
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.card .card-head {
+  height: 172px;
+  object-fit: cover;
+  overflow: hidden;
+}
+
+.card:hover .card-head .card-img-top,
+.card:hover .card-head .card-img-top {
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  transform: scale(1.2);
+}
+
+.card-title {
+  font-weight: 600;
+}
+
+.card-body {
+  text-align: justify;
+}
+
+.sub-title {
+  color: #c0ccda;
+  font-size: 10pt;
+}
+
+/* --- FOOTER START --- */
+
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+}
+
+.footer h5 {
+  color: #c0ccda;
+}
+.footer a {
+  color: #8392a5;
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.footer a:hover {
+  margin-left: 5px;
+  transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.footer ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer li {
+  margin-top: 5px;
+}
+
+.footer hr {
+  background-color: #8392a5;
+}
+
+.footer p:first-child {
+  color: #c0ccda;
+}
+
+.footer input {
+  background-color: #c0ccda;
+}
+
+.footer input:focus {
+  background-color: #e5e9f2;
+}
+
+.footer #theme {
+  color: #c0ccda;
+}
+
+/* --- FOOTER END ---- */
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}

static/images/logos/hugo-logo-wide.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-width="27" aria-label="Logo" viewBox="0 0 1493 391">
+  <path fill="#ebb951" stroke="#fcd804" d="M1345.211 24.704l112.262 64.305a43 43 0 0 1 21.627 37.312v142.237a40 40 0 0 1-20.702 35.037l-120.886 66.584a42 42 0 0 1-41.216-.389l-106.242-61.155a57 57 0 0 1-28.564-49.4V138.71a64 64 0 0 1 31.172-54.939l98.01-58.564a54 54 0 0 1 54.54-.503z"/>
+  <path fill="#33ba91" stroke="#00a88a" d="M958.07 22.82l117.31 66.78a41 41 0 0 1 20.72 35.64v139.5a45 45 0 0 1-23.1 39.32L955.68 369.4a44 44 0 0 1-43.54-.41l-105.82-61.6a56 56 0 0 1-27.83-48.4V140.07a68 68 0 0 1 33.23-58.44l98.06-58.35a48 48 0 0 1 48.3-.46z"/>
+  <path fill="#0594cb" stroke="#0083c0" d="M575.26 20.97l117.23 68.9a40 40 0 0 1 19.73 34.27l.73 138.67a48 48 0 0 1-24.64 42.2l-115.13 64.11a45 45 0 0 1-44.53-.42l-105.83-61.6a55 55 0 0 1-27.33-47.53V136.52a63 63 0 0 1 29.87-53.59l99.3-61.4a49 49 0 0 1 50.6-.56z"/>
+  <path fill="#ff4088" stroke="#c9177e" d="M195.81 24.13l114.41 66.54a44 44 0 0 1 21.88 38.04v136.43a48 48 0 0 1-24.45 41.82L194.1 370.9a49 49 0 0 1-48.48-.23L41.05 310.48a53 53 0 0 1-26.56-45.93V135.08a55 55 0 0 1 26.1-46.8l102.8-63.46a51 51 0 0 1 52.42-.69z"/>
+  <path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/>
+</svg>

static/js/blog.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var filterizd;
+
+var isMobile = false, isTablet = false, isLaptop = false;
+(function ($) {
+  jQuery(document).ready(function () {
+    function detectDevice() {
+      if (window.innerWidth <= 425) {
+        isMobile = true;
+        isTablet = false;
+        isLaptop = false;
+      } else if (window.innerWidth <= 768) {
+        isMobile = false;
+        isTablet = true;
+        isLaptop = false;
+      } else {
+        isMobile = false;
+        isTablet = false;
+        isLaptop = true;
+      }
+    }
+    detectDevice();
+    console.log(isMobile);
+
+    // ======= Adjust height of the post cards =============
+    function adjustPostCardsHeight() {
+      if (!isMobile) { // no need to adjust height for mobile devices
+        let el = document.getElementById("post-cards").children;
+        let maxHeight = 0;
+        for (let i = 0; i < el.length; i++) {
+          if (el[i].children[0].clientHeight > maxHeight) {
+            maxHeight = el[i].children[0].clientHeight;
+          }
+        }
+        for (let i = 0; i < el.length; i++) {
+          el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+        }
+      }
+    }
+    adjustPostCardsHeight();
+
+    // ============= Sidebar Tre ================
+    function buildSidebarMenu() {
+      var openedClass = "fa-minus-circle";
+      var closedClass = "fa-plus-circle";
+      // initialize top level
+      var tree = $("#tree");
+      // add expand icon to those li who has ul as children
+      tree.find("li").has("ul").each(function () {
+        var branch = $(this);
+        branch.prepend('<i class="fas ' + closedClass + '"></i>');
+        branch.on('click', function (e) {
+          if (this.children[1] == e.target) {
+            // toggle "expand" class and icon
+            branch.toggleClass("expand");
+            var icon = $(this).children('i:first');
+            icon.toggleClass(openedClass + " " + closedClass);
+          }
+        });
+      });
+
+      // remove "expnad" class from siblings of the clicked item
+      tree.find("li").on("click", function () {
+        var item = $(this);
+        var shiblings = item.siblings().each(function () {
+          var sibling = $(this);
+          if (sibling.hasClass("expand")) {
+            sibling.removeClass("expand");
+            var icon = sibling.children('i:first');
+            icon.toggleClass(openedClass + " " + closedClass);
+          }
+        });
+      });
+
+      // focus the cliked item
+      tree.find("a").on("click", function () {
+        // clear other focused link
+        tree.find("a.focused").each(function () {
+          $(this).removeClass("focused");
+        });
+        // focus cliked link
+        $(this).addClass("focused");
+      });
+    }
+
+    buildSidebarMenu();
+    // initialize filterizr
+    filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
+  });
+})(jQuery);
+
+// toggle sidebar on click
+function toggleSidebar() {
+  document.getElementById("sidebar").classList.toggle("hide");
+  document.getElementById("content").classList.toggle("overley");
+
+  // if it is mobile device. then scroll to top.
+  if (isMobile && $("#sidebar").hasClass("hide")) {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+
+  setTimeout(function () {
+    filterizd.filterizr('sort');
+  }, 300);
+}

static/js/github-button.js

@@ -0,0 +1,286 @@
+function renderGithubButton() {
+    "use strict";
+    var e = window.document,
+        t = e.location,
+        o = window.Math,
+        r = window.HTMLElement,
+        n = window.XMLHttpRequest,
+        a = "https://buttons.github.io/buttons.html",
+        i = n && n.prototype && "withCredentials" in n.prototype,
+        l = i && r && r.prototype.attachShadow && !r.prototype.attachShadow.prototype,
+        c = function (e, t, o, r) {
+            null == t && (t = "&"), null == o && (o = "="), null == r && (r = window.decodeURIComponent);
+            for (var n = {}, a = e.split(t), i = 0, l = a.length; i < l; ++i) {
+                var c = a[i];
+                if ("" !== c) {
+                    var d = c.split(o);
+                    n[r(d[0])] = null != d[1] ? r(d.slice(1).join(o)) : void 0
+                }
+            }
+            return n
+        },
+        d = function (e, t, o) {
+            e.addEventListener ? e.addEventListener(t, o, !1) : e.attachEvent("on" + t, o)
+        },
+        s = function (e, t, o) {
+            e.removeEventListener ? e.removeEventListener(t, o, !1) : e.detachEvent("on" + t, o)
+        },
+        f = function (e, t, o) {
+            var r = function (n) {
+                return s(e, t, r), o(n)
+            };
+            d(e, t, r)
+        },
+        u = function (e, t, o) {
+            var r = function (n) {
+                if (t.test(e.readyState)) return s(e, "readystatechange", r), o(n)
+            };
+            d(e, "readystatechange", r)
+        },
+        h = function (e) {
+            return function (t, o, r) {
+                var n = e.createElement(t);
+                if (o)
+                    for (var a in o) {
+                        var i = o[a];
+                        null != i && (null != n[a] ? n[a] = i : n.setAttribute(a, i))
+                    }
+                if (r)
+                    for (var l = 0, c = r.length; l < c; l++) {
+                        var d = r[l];
+                        n.appendChild("string" == typeof d ? e.createTextNode(d) : d)
+                    }
+                return n
+            }
+        },
+        g = h(e),
+        p = function (e) {
+            var t;
+            return function () {
+                t || (t = 1, e.apply(this, arguments))
+            }
+        },
+        b = function (e, t) {
+            return {}.hasOwnProperty.call(e, t)
+        },
+        m = {
+            light: ".btn{color:#24292e;background-color:#eff3f6;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23fafbfc'/%3e%3cstop offset='90%25' stop-color='%23eff3f6'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\");background-image:-moz-linear-gradient(top, #fafbfc, #eff3f6 90%);background-image:linear-gradient(180deg, #fafbfc, #eff3f6 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFFAFBFC', endColorstr='#FFEEF2F5');border-color:#cdcfd1;border-color:rgba(27,31,35,.2)}:root .btn{filter:none}.btn:focus,.btn:hover{background-color:#e6ebf1;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f0f3f6'/%3e%3cstop offset='90%25' stop-color='%23e6ebf1'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\");background-image:-moz-linear-gradient(top, #f0f3f6, #e6ebf1 90%);background-image:linear-gradient(180deg, #f0f3f6, #e6ebf1 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF0F3F6', endColorstr='#FFE5EAF0');background-position:-0.5em;border-color:#acaeb0;border-color:rgba(27,31,35,.35)}:root .btn:focus,:root .btn:hover{filter:none}.btn:active{background-color:#e9ecef;background-image:none;border-color:#acaeb0;border-color:rgba(27,31,35,.35);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15);filter:none}.social-count{color:#24292e;background-color:#fff;border-color:#d1d2d3;border-color:rgba(27,31,35,.2)}.social-count:focus,.social-count:hover{color:#0366d6}.octicon-heart{color:#ea4aaa}",
+            dark: ".btn{color:#fafbfc;background-color:#202428;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%232f363d'/%3e%3cstop offset='90%25' stop-color='%23202428'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\");background-image:-moz-linear-gradient(top, #2f363d, #202428 90%);background-image:linear-gradient(180deg, #2f363d, #202428 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FF2F363D', endColorstr='#FF1E2226');border-color:#2b3138;border-color:rgba(27,31,35,.2)}:root .btn{filter:none}.btn:focus,.btn:hover{background-color:#1b1f23;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%232b3137'/%3e%3cstop offset='90%25' stop-color='%231b1f23'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e\");background-image:-moz-linear-gradient(top, #2b3137, #1b1f23 90%);background-image:linear-gradient(180deg, #2b3137, #1b1f23 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FF2B3137', endColorstr='#FF191D21');background-position:-0.5em;border-color:#252b30;border-color:rgba(27,31,35,.5)}:root .btn:focus,:root .btn:hover{filter:none}.btn:active{background-color:#181b1f;background-image:none;border-color:#252b30;border-color:rgba(27,31,35,.5);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15);filter:none}.social-count{color:#fafbfc;background-color:#1b1f23;border-color:#1b1f23;border-color:rgba(27,31,35,.2)}.social-count:focus,.social-count:hover{color:#2188ff}.octicon-heart{color:#ec6cb9}"
+        },
+        v = function (e, t) {
+            return "@media(prefers-color-scheme:" + e + "){" + m[b(m, t) ? t : e] + "}"
+        },
+        w = {
+            "mark-github": {
+                width: 16,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>'
+            },
+            heart: {
+                width: 12,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"/>'
+            },
+            eye: {
+                width: 16,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/>'
+            },
+            star: {
+                width: 14,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/>'
+            },
+            "repo-forked": {
+                width: 10,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/>'
+            },
+            "issue-opened": {
+                width: 14,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/>'
+            },
+            "cloud-download": {
+                width: 16,
+                height: 16,
+                path: '<path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"/>'
+            }
+        },
+        x = {},
+        y = function (e, t) {
+            var o = x[e] || (x[e] = []);
+            if (!(o.push(t) > 1)) {
+                var r = p((function () {
+                    for (delete x[e]; t = o.shift();) t.apply(null, arguments)
+                }));
+                if (i) {
+                    var a = new n;
+                    d(a, "abort", r), d(a, "error", r), d(a, "load", (function () {
+                        var e;
+                        try {
+                            e = JSON.parse(a.responseText)
+                        } catch (e) {
+                            return void r(e)
+                        }
+                        r(200 !== a.status, e)
+                    })), a.open("GET", e), a.send()
+                } else {
+                    var l = this || window;
+                    l._ = function (e) {
+                        l._ = null, r(200 !== e.meta.status, e.data)
+                    };
+                    var c = h(l.document)("script", {
+                        async: !0,
+                        src: e + (/\?/.test(e) ? "&" : "?") + "callback=_"
+                    }),
+                        s = function () {
+                            l._ && l._({
+                                meta: {}
+                            })
+                        };
+                    d(c, "load", s), d(c, "error", s), c.readyState && u(c, /de|m/, s), l.document.getElementsByTagName("head")[0].appendChild(c)
+                }
+            }
+        },
+        k = function (e, t, o) {
+            var r = h(e.ownerDocument),
+                n = e.appendChild(r("style", {
+                    type: "text/css"
+                })),
+                a = "body{margin:0}a{text-decoration:none;outline:0}.widget{display:inline-block;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:0;white-space:nowrap}.btn,.social-count{position:relative;display:inline-block;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid}.btn{border-radius:.25em}.btn:not(:last-child){border-radius:.25em 0 0 .25em}.social-count{border-left:0;border-radius:0 .25em .25em 0}.widget-lg .btn,.widget-lg .social-count{height:20px;padding:3px 10px;font-size:12px;line-height:20px}.octicon{display:inline-block;vertical-align:text-top;fill:currentColor}" + function (e) {
+                    if (null == e) return m.light;
+                    var t = c(e, ";", ":", (function (e) {
+                        return e.replace(/^[ \t\n\f\r]+|[ \t\n\f\r]+$/g, "")
+                    }));
+                    return m[b(m, t["no-preference"]) ? t["no-preference"] : "light"] + v("light", t.light) + v("dark", t.dark)
+                }(t["data-color-scheme"]);
+            n.styleSheet ? n.styleSheet.cssText = a : n.appendChild(e.ownerDocument.createTextNode(a));
+            var i, l, d = r("a", {
+                className: "btn",
+                href: t.href,
+                target: "_blank",
+                rel: "noopener",
+                innerHTML: (i = t["data-icon"], l = /^large$/i.test(t["data-size"]) ? 16 : 14, i = ("" + i).toLowerCase().replace(/^octicon-/, ""), b(w, i) || (i = "mark-github"), '<svg viewBox="0 0 ' + w[i].width + " " + w[i].height + '" class="octicon octicon-' + i + '" style="width: ' + l * w[i].width / w[i].height + "px; height: " + l + 'px;" aria-hidden="true">' + w[i].path + "</svg>"),
+                "aria-label": t["aria-label"] || void 0
+            }, [" ", r("span", {}, [t["data-text"] || ""])]),
+                s = e.appendChild(r("div", {
+                    className: "widget" + (/^large$/i.test(t["data-size"]) ? " widget-lg" : "")
+                }, [d])),
+                f = d.hostname.split(".").reverse();
+            if ("" === f[0] && f.shift(), "com" !== f[0] || "github" !== f[1]) return d.href = "#", d.target = "_self", void o(s);
+            var u = f.length,
+                g = (" /" + d.pathname).split(/\/+/);
+            if (((2 === u || 3 === u && "gist" === f[2]) && "archive" === g[3] || 2 === u && "releases" === g[3] && "download" === g[4] || 3 === u && "codeload" === f[2]) && (d.target = "_top"), /^true$/i.test(t["data-show-count"]) && 2 === u) {
+                var p, x;
+                if (!g[2] && g[1]) p = x = "followers";
+                else if (!g[3] && g[2]) x = "stargazers_count", p = "stargazers";
+                else if (g[4] || "subscription" !== g[3])
+                    if (g[4] || "fork" !== g[3]) {
+                        if ("issues" !== g[3]) return void o(s);
+                        x = "open_issues_count", p = "issues"
+                    } else x = "forks_count", p = "network/members";
+                else x = "subscribers_count", p = "watchers";
+                var k = g[2] ? "/repos/" + g[1] + "/" + g[2] : "/users/" + g[1];
+                y.call(this, "https://api.github.com" + k, (function (e, t) {
+                    if (!e) {
+                        var n = t[x];
+                        s.appendChild(r("a", {
+                            className: "social-count",
+                            href: t.html_url + "/" + p,
+                            target: "_blank",
+                            rel: "noopener",
+                            "aria-label": n + " " + x.replace(/_count$/, "").replace("_", " ").slice(0, n < 2 ? -1 : void 0) + " on GitHub"
+                        }, [("" + n).replace(/\B(?=(\d{3})+(?!\d))/g, ",")]))
+                    }
+                    o(s)
+                }))
+            } else o(s)
+        },
+        C = window.devicePixelRatio || 1,
+        z = function (e) {
+            return (C > 1 ? o.ceil(o.round(e * C) / C * 2) / 2 : o.ceil(e)) || 0
+        },
+        F = function (e, t) {
+            e.style.width = t[0] + "px", e.style.height = t[1] + "px"
+        },
+        M = function (t, r) {
+            if (null != t && null != r)
+                if (t.getAttribute && (t = function (e) {
+                    for (var t = {
+                        href: e.href,
+                        title: e.title,
+                        "aria-label": e.getAttribute("aria-label")
+                    }, o = ["icon", "color-scheme", "text", "size", "show-count"], r = 0, n = o.length; r < n; r++) {
+                        var a = "data-" + o[r];
+                        t[a] = e.getAttribute(a)
+                    }
+                    return null == t["data-text"] && (t["data-text"] = e.textContent || e.innerText), t
+                }(t)), l) {
+                    var n = g("span", {
+                        title: t.title || void 0
+                    });
+                    k(n.attachShadow({
+                        mode: "closed"
+                    }), t, (function () {
+                        r(n)
+                    }))
+                } else {
+                    var i = g("iframe", {
+                        src: "javascript:0",
+                        title: t.title || void 0,
+                        allowtransparency: !0,
+                        scrolling: "no",
+                        frameBorder: 0
+                    });
+                    F(i, [0, 0]), i.style.border = "none";
+                    var c = function () {
+                        var n, l = i.contentWindow;
+                        try {
+                            n = l.document.body
+                        } catch (t) {
+                            return void e.body.appendChild(i.parentNode.removeChild(i))
+                        }
+                        s(i, "load", c), k.call(l, n, t, (function (e) {
+                            var n = function (e) {
+                                var t = e.offsetWidth,
+                                    r = e.offsetHeight;
+                                if (e.getBoundingClientRect) {
+                                    var n = e.getBoundingClientRect();
+                                    t = o.max(t, z(n.width)), r = o.max(r, z(n.height))
+                                }
+                                return [t, r]
+                            }(e);
+                            i.parentNode.removeChild(i), f(i, "load", (function () {
+                                F(i, n)
+                            })), i.src = a + "#" + (i.name = function (e, t, o, r) {
+                                null == t && (t = "&"), null == o && (o = "="), null == r && (r = window.encodeURIComponent);
+                                var n = [];
+                                for (var a in e) {
+                                    var i = e[a];
+                                    null != i && n.push(r(a) + o + r(i))
+                                }
+                                return n.join(t)
+                            }(t)), r(i)
+                        }))
+                    };
+                    d(i, "load", c), e.body.appendChild(i)
+                }
+        };
+    t.protocol + "//" + t.host + t.pathname === a ? k(e.body, c(window.name || t.hash.replace(/^#/, "")), (function () { })) : function (t) {
+        if (/m/.test(e.readyState) || !/g/.test(e.readyState) && !e.documentElement.doScroll) setTimeout(t);
+        else if (e.addEventListener) {
+            var o = p(t);
+            f(e, "DOMContentLoaded", o), f(window, "load", o)
+        } else u(e, /m/, t)
+    }((function () {
+        for (var t = e.querySelectorAll ? e.querySelectorAll("a.github-button") : function () {
+            for (var t = [], o = e.getElementsByTagName("a"), r = 0, n = o.length; r < n; r++) ~(" " + o[r].className + " ").replace(/[ \t\n\f\r]+/g, " ").indexOf(" github-button ") && t.push(o[r]);
+            return t
+        }(), o = 0, r = t.length; o < r; o++) ! function (e) {
+            M(e, (function (t) {
+                e.parentNode.replaceChild(t, e)
+            }))
+        }(t[o])
+    }))
+}

static/js/home.js

@@ -0,0 +1,361 @@
+"use strict";
+
+var projectCards;
+
+(function ($) {
+  jQuery(document).ready(function () {
+
+    var isMobile = false, isTablet = false, isLaptop = false;
+
+    function detectDevice() {
+      if (window.innerWidth <= 425) {
+        isMobile = true;
+        isTablet = false;
+        isLaptop = false;
+      } else if (window.innerWidth <= 768) {
+        isMobile = false;
+        isTablet = true;
+        isLaptop = false;
+      } else {
+        isMobile = false;
+        isTablet = false;
+        isLaptop = true;
+      }
+    }
+    detectDevice();
+
+    // =========== Typing Carousel ================
+    // get data from hidden ul and set as typing data
+    if (document.getElementById('typing-carousel-data') != undefined) {
+      var ul = document.getElementById('typing-carousel-data').children;
+
+      var data = [];
+      Array.from(ul).forEach(el => {
+        data.push(el.textContent);
+      })
+
+      ityped.init('#ityped', {
+        strings: data,
+        startDelay: 200,
+        loop: true
+      });
+    }
+
+    // ================= Smooth Scroll ===================
+    // Add smooth scrolling to all links
+    $("a").on('click', function (event) {
+
+      // Make sure this.hash has a value before overriding default behavior
+      if (this.hash !== "") {
+        // Prevent default anchor click behavior
+        event.preventDefault();
+
+        // Store hash
+        var hash = this.hash;
+
+        // Using jQuery's animate() method to add smooth page scroll
+        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+        $('html, body').animate({
+          scrollTop: $(hash).offset().top
+        }, 800, function () {
+
+          // Add hash (#) to URL when done scrolling (default click behavior)
+          window.location.hash = hash;
+        });
+      } // End if
+    });
+
+    // ============== Fix Timelines Horizontal Lines =========
+    var hLines = document.getElementsByClassName("horizontal-line");
+    for (let i = 0; i < hLines.length; i++) {
+      if (i % 2) {
+        hLines[i].children[0].children[0].classList.add("bottom-right");
+        hLines[i].children[2].children[0].classList.add("top-left");
+      } else {
+        hLines[i].children[0].children[0].classList.add("top-right");
+        hLines[i].children[2].children[0].classList.add("bottom-left");
+      }
+    }
+
+    // ============== Fix Timelines Vertical lines =========
+    var vLines = document.getElementsByClassName("vertical-line");
+    for (let i = 0; i < vLines.length; i++) {
+      if (i % 2) {
+        vLines[i].classList.add("vertical-line-left-adjustment");
+      }
+    }
+
+    // ==================== Adjust height of the skills card =============
+    function adjustSkillCardsHeight() {
+      if (!isMobile) { // no need to adjust height for mobile devices
+        // primary skills
+        var el = document.getElementById("primary-skills").children;
+        var maxHeight = 0;
+        for (let i = 0; i < el.length; i++) {
+          if (el[i].children[0].clientHeight > maxHeight) {
+            maxHeight = el[i].children[0].clientHeight;
+          }
+        }
+        for (let i = 0; i < el.length; i++) {
+          el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+        }
+      }
+    }
+    adjustSkillCardsHeight();
+
+    // ================== Project cards =====================
+    // Add click action on project category selector buttons
+    var btns = document.getElementById("project-filter-buttons").children;
+
+    for (let i = 0; i < btns.length; i++) {
+      btns[i].onclick = function () {
+        showGithubStars(btns[i].id);
+      }
+    }
+
+    projectCards = $(".filtr-projects").filterizr({ layout: 'sameWidth' });
+
+    function showGithubStars() {
+      // fix the github button class
+      // we had set it to github-button-inactive in projects holder cards so that respective javascript
+      // don't render it and replace respective span with shadow root
+      let githubButtons = document.getElementsByClassName("github-button-inactive");
+      while (githubButtons.length > 0) {
+        if (githubButtons[0].classList != undefined) {
+          githubButtons[0].classList.replace("github-button-inactive", "github-button");
+        }
+      }
+      // now render github button. it will call the github API and fill the respective fields
+      renderGithubButton();
+    }
+    showGithubStars();
+
+    // ==================== Adjust height of the recent-posts card =============
+
+    function adjustRecentPostsHeight() {
+      if (!isMobile) { // no need to adjust height for mobile devices
+        let el = document.getElementById("recent-posts").children;
+        let maxHeight = 0;
+        for (let i = 0; i < el.length; i++) {
+          if (el[i].children[0].clientHeight > maxHeight) {
+            maxHeight = el[i].children[0].clientHeight;
+          }
+        }
+        for (let i = 0; i < el.length; i++) {
+          el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+        }
+      }
+    }
+    adjustRecentPostsHeight();
+
+    // =============== Achievements ===========
+
+    function fourColumRow(gallery, entries, i) {
+      let entry1 = document.createElement("div");
+      entry1.classList.add("col-lg-6", "m-0", "p-0");
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry1);
+      i++;
+
+      let entry2 = document.createElement("div");
+      entry2.classList.add("col-lg-3", "m-0", "p-0");
+      entry2.appendChild(entries[i].cloneNode(true));
+      entry2.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry2);
+      i++;
+
+      let entry3 = document.createElement("div");
+      entry3.classList.add("col-lg-3", "m-0", "p-0");
+      entry3.appendChild(entries[i].cloneNode(true));
+      entry3.children[0].classList.add("img-type-2");
+      i++;
+      entry3.appendChild(entries[i].cloneNode(true));
+      entry3.children[1].classList.add("img-type-2");
+      gallery.appendChild(entry3);
+      i++;
+    }
+
+    function fourColumnReversedRow(gallery, entries, i) {
+      let entry1 = document.createElement("div");
+      entry1.classList.add("col-lg-3", "m-0", "p-0");
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[0].classList.add("img-type-2");
+      i++;
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[1].classList.add("img-type-2");
+      gallery.appendChild(entry1);
+      i++;
+
+      let entry2 = document.createElement("div");
+      entry2.classList.add("col-lg-3", "m-0", "p-0");
+      entry2.appendChild(entries[i].cloneNode(true));
+      entry2.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry2);
+      i++;
+
+      let entry3 = document.createElement("div");
+      entry3.classList.add("col-lg-6", "m-0", "p-0");
+      entry3.appendChild(entries[i].cloneNode(true));
+      entry3.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry3);
+      i++;
+    }
+
+    function threeColumnRow(gallery, entries, i) {
+      console.log(i);
+      let entry1 = document.createElement("div");
+      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry1);
+      i++;
+
+      let entry2 = document.createElement("div");
+      entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
+      entry2.appendChild(entries[i].cloneNode(true));
+      entry2.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry2);
+      i++;
+
+      let entry3 = document.createElement("div");
+      entry3.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
+      entry3.appendChild(entries[i].cloneNode(true));
+      entry3.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry3);
+      i++;
+    }
+    function threeColumnReversedRow(gallery, entries, i) {
+      let entry1 = document.createElement("div");
+      entry1.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry1);
+      i++;
+
+      let entry2 = document.createElement("div");
+      entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
+      entry2.appendChild(entries[i].cloneNode(true));
+      entry2.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry2);
+      i++;
+
+      let entry3 = document.createElement("div");
+      entry3.classList.add("col-lg-6", "col-md-3", "m-0", "p-0");
+      entry3.appendChild(entries[i].cloneNode(true));
+      entry3.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry3);
+      i++;
+    }
+    function twoColumnRow(gallery, entries, i) {
+      let entry1 = document.createElement("div");
+      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry1);
+      i++;
+
+      let entry2 = document.createElement("div");
+      entry2.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry2.appendChild(entries[i].cloneNode(true));
+      entry2.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry2);
+      i++;
+    }
+
+    function singleColumnRow(gallery, entries, i) {
+      let entry1 = document.createElement("div");
+      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.appendChild(entries[i].cloneNode(true));
+      entry1.children[0].classList.add("img-type-1");
+      gallery.appendChild(entry1);
+      i++;
+    }
+
+    function showAchievements() {
+      // show achievements from achievements-holder div
+      let gallery = document.getElementById("gallery");
+      gallery.innerHTML = "";
+      const entries = document.getElementById("achievements-holder").children;
+      let len = entries.length;
+      let i = 0;
+      let rowNumber = 1;
+      while (i < len) {
+        if (isLaptop) {
+          if (i + 4 <= len) {
+            if (rowNumber % 2) {
+              fourColumRow(gallery, entries, i);
+            } else {
+              fourColumnReversedRow(gallery, entries, i);
+            }
+            i += 4;
+
+          } else if (i + 3 <= len) {
+            if (rowNumber % 2) {
+              threeColumnRow(gallery, entries, i);
+            } else {
+              threeColumnReversedRow(gallery, entries, i);
+            }
+            i += 3;
+          } else if (i + 2 <= len) {
+            twoColumnRow(gallery, entries, i);
+            i += 2;
+          } else {
+            singleColumnRow(gallery, entries, i);
+            i++;
+          }
+        } else if (isTablet) {
+          if (i + 2 <= len) {
+            twoColumnRow(gallery, entries, i);
+            i += 2;
+          } else {
+            singleColumnRow(gallery, entries, i);
+            i++;
+          }
+        } else {
+          singleColumnRow(gallery, entries, i);
+          i++;
+        }
+        rowNumber++;
+      }
+
+      // show full image on click
+      let elements = document.getElementsByClassName("achievement-entry");
+      len = elements.length;
+      for (let i = 0; i < len; i++) {
+        elements[i].onclick = function () {
+          let achievements = document.getElementsByClassName("achievement-entry");
+          let len2 = achievements.length;
+          for (let j = 0; j < len2; j++) {
+            achievements[j].classList.toggle("hidden");
+          }
+          this.classList.toggle("achievement-details");
+          this.classList.toggle("hidden");
+          this.parentElement.classList.toggle("col-lg-12");
+          this.parentElement.classList.toggle("col-md-12");
+          this.parentElement.classList.toggle("col-sm-12");
+          if (this.children["caption"] != undefined) {
+            this.children["caption"].classList.toggle("hidden");
+          }
+          if (this.children["enlarge-icon"] != undefined) {
+            this.children["enlarge-icon"].classList.toggle("fa-search-plus");
+            this.children["enlarge-icon"].classList.toggle("fa-times");
+          }
+          if (this.children["achievement-title"] != undefined) {
+            this.children["achievement-title"].classList.toggle("hidden");
+          }
+        }
+      }
+    }
+    showAchievements();
+
+    // re-render custom functions on window resize
+    window.onresize = function () {
+      detectDevice();
+      adjustSkillCardsHeight();
+      adjustRecentPostsHeight();
+      showAchievements();
+    };
+  });
+
+})(jQuery);

static/js/itype.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.ityped={})}(this,function(e){"use strict";e.init=function(e,t){var n=0,o=void 0,r=void 0,i=function(e,t){n===o&&t.loop&&(n=0),setTimeout(function(){a(e[n],t)},t.startDelay)},a=function(t,n){var o=0,r=t.length,i=setInterval(function(){if(n.placeholder?e.placeholder+=t[o]:e.textContent+=t[o],++o===r)return d(i,n)},n.typeSpeed)},d=function(e,t){return clearInterval(e),t.disableBackTyping&&n===o-1?t.onFinished():t.loop||n!==o-1?void setTimeout(function(){return c(t)},t.backDelay):t.onFinished()},c=function(t){var n=t.placeholder?e.placeholder:e.textContent,o=n.length,r=setInterval(function(){if(t.placeholder?e.placeholder=e.placeholder.substr(0,--o):e.textContent=n.substr(0,--o),0===o)return s(r,t)},t.backSpeed)},s=function(e,t){clearInterval(e),++n,i(r,t)};return function(t){var n=function(e){var t=e.strings,n=void 0===t?["Put your strings here...","and Enjoy!"]:t,o=e.typeSpeed,r=void 0===o?100:o,i=e.backSpeed,a=void 0===i?50:i,d=e.backDelay,c=void 0===d?500:d,s=e.startDelay,l=void 0===s?500:s,u=e.cursorChar,p=void 0===u?"|":u,f=e.placeholder,v=void 0!==f&&f,h=e.showCursor,y=void 0===h||h,b=e.disableBackTyping,g=void 0!==b&&b,C=e.onFinished,k=void 0===C?function(){}:C,m=e.loop;return{strings:n,typeSpeed:r,backSpeed:a,cursorChar:p,backDelay:c,placeholder:v,startDelay:l,showCursor:y,loop:void 0===m||m,disableBackTyping:g,onFinished:k}}(t||{}),a=n.strings;r=a,o=a.length,"string"==typeof e&&(e=document.querySelector(e)),n.showCursor&&function(e,t){var n=document.createElement("span");n.classList.add("ityped-cursor"),n.textContent="|",n.textContent=t.cursorChar,e.insertAdjacentElement("afterend",n)}(e,n),i(a,n)}(t)},Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=index.min.js.map

static/js/navbar.js

@@ -0,0 +1,27 @@
+"use strict";
+
+(function ($) {
+  jQuery(document).ready(function () {
+
+    // change navbar style on scroll
+    // ==================================================
+    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
+    // $.onscroll = function() {scrollFunction()};
+    $(document).scroll(function () {
+      if ($(document).scrollTop() > 40) {
+        $('#top-navbar').removeClass('initial-navbar');
+        $('#top-navbar').addClass('final-navbar shadow');
+
+        $('#navbar-toggler').removeClass('navbar-dark');
+        $('#navbar-toggler').addClass('navbar-light');
+      } else {
+        $('#top-navbar').removeClass('final-navbar shadow');
+        $('#top-navbar').addClass('initial-navbar');
+
+        $('#navbar-toggler').removeClass('navbar-light');
+        $('#navbar-toggler').addClass('navbar-dark');
+      }
+    });
+  });
+
+})(jQuery);