diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index 219cadb..7bb2d64 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -1,6 +1,6 @@
 // loading bootstrap
 // TODO: Refactor to use bootstrap sass variable for theming.
-@import 'bootstrap/scss/bootstrap.scss';
+@import 'bootstrap/scss/bootstrap';
 
 // The Mulish font, we use font-weight 300 - 700
 @import '@fontsource/mulish/300';
@@ -12,9 +12,25 @@
 // layouts
 @import './layouts/main';
 
+// sections
+@import './sections/home';
+@import './sections/about';
+@import './sections/skills';
+@import './sections/experiences';
+@import './sections/education';
+@import './sections/projects';
+@import './sections/recent-posts';
+@import './sections/achievements';
+@import './sections/accomplishments';
+@import './sections/publications';
+
+
 // navigators
 @import './navigators/navbar';
 
+// override
+@import './override';
+
 // features and services, only imported if enabled.
 {{ range $feature, $featureDef := site.Params.features }}
   {{ with $featureDef }}
diff --git a/assets/styles/override.scss b/assets/styles/override.scss
new file mode 100644
index 0000000..7772f02
--- /dev/null
+++ b/assets/styles/override.scss
@@ -0,0 +1,15 @@
+/* override this file for custom css */
+
+/* you can import boostrap mixins */
+// @import 'bootstrap/scss/mixins';
+// Example usage
+// .some-class {
+//   @include media-breakpoint-up(sm) {
+//     // Larger than sm: 576px
+//     display: inline;
+//   }
+//   @include media-breakpoint-down(md) {
+//     // Smaller than md: 768px
+//     display: block;
+//   }
+// }
\ No newline at end of file
diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss
new file mode 100644
index 0000000..ee29245
--- /dev/null
+++ b/assets/styles/sections/about.scss
@@ -0,0 +1,387 @@
+#about {
+  .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;
+    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;
+    transform-origin: center right;
+    animation: circular-loading-1 1.8s linear forwards;
+  }
+  
+  .circular-progress .circular-progress-value {
+    width: 90%;
+    height: 90%;
+    padding: 1rem;
+    border-radius: 50%;
+    background: #3c4858;
+    font-size: 1rem;
+    color: #f9fafc;
+    line-height: initial;
+    text-align: center;
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .circular-progress.blue .circular-progress-bar {
+    border-color: #048dff;
+  }
+  
+  .circular-progress.yellow .circular-progress-bar {
+    border-color: #eebb4d;
+  }
+  
+  .circular-progress.pink .circular-progress-bar {
+    border-color: #ed63d2;
+  }
+  
+  .circular-progress.green .circular-progress-bar {
+    border-color: #2dca73;
+  }
+  
+  .circular-progress.sky .circular-progress-bar {
+    border-color: #00c9e3;
+  }
+  
+  .circular-progress.orange .circular-progress-bar {
+    border-color: #ff7c7c;
+  }
+  
+  .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% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  
+  @keyframes circular-loading-55 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(18deg);
+    }
+  }
+  
+  @keyframes circular-loading-60 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(36deg);
+    }
+  }
+  
+  @keyframes circular-loading-65 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(54deg);
+    }
+  }
+  
+  @keyframes circular-loading-70 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(72deg);
+    }
+  }
+  
+  @keyframes circular-loading-75 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(90deg);
+    }
+  }
+  
+  @keyframes circular-loading-80 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(108deg);
+    }
+  }
+  
+  @keyframes circular-loading-85 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(126deg);
+    }
+  }
+  
+  @keyframes circular-loading-90 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(144deg);
+    }
+  }
+  
+  @keyframes circular-loading-95 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(162deg);
+    }
+  }
+  
+  @keyframes circular-loading-100 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
+  }
+  
+  @keyframes circular-loading-1 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
+  }
+  
+  @keyframes circular-loading-2 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(144deg);
+    }
+  }
+  
+  @keyframes circular-loading-3 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(90deg);
+    }
+  }
+  
+  @keyframes circular-loading-4 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(36deg);
+    }
+  }
+  
+  @keyframes circular-loading-5 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(126deg);
+    }
+  }
+  
+  @media only screen and (max-width: 990px) {
+    .circular-progress {
+      margin-bottom: 20px;
+    }
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    .about-section.container {
+      max-width: 100%;
+    }
+    
+    .circular-progress {
+      width: 135px;
+      height: 135px;
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+    .circular-progress {
+      width: 150px;
+      height: 150px;
+    }
+  
+    .circular-progress .circular-progress-value {
+      font-size: 1rem;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+    .col-6 {
+      flex: auto;
+      max-width: 100%;
+    }
+  
+    .social-link {
+      flex-wrap: wrap;
+    }
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss
new file mode 100644
index 0000000..77449f7
--- /dev/null
+++ b/assets/styles/sections/accomplishments.scss
@@ -0,0 +1,97 @@
+.accomplishments-section {
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px; 
+    display: block; 
+  }
+  
+  .card {
+    background: #fff;
+    border-top: 2px solid #248aaa;
+    height: 100%;
+  }
+  .card .card-header {
+    background: none;
+    border: none;
+  }
+  
+  .card .card-header .sub-title {
+    color: #8392a5;
+    margin-top: 0.4rem;
+  }
+  
+  .card .sub-title :nth-child(2) {
+    float: none !important;
+  }
+  
+  .card .card-body {
+    padding: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  .card .card-footer {
+    background: #fff;
+    border: none;
+    padding: 0;
+    padding-left: 0.7rem;
+    padding-bottom: 0.3rem;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+    width: 100%;
+    padding: 0;
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+
+    .container {
+      max-width: 100%;
+    }
+  }
+  
+  /*  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) {
+    flex: 100%;
+    max-width: 100%;
+    margin-top: 2rem;
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss
new file mode 100644
index 0000000..c82ca10
--- /dev/null
+++ b/assets/styles/sections/achievements.scss
@@ -0,0 +1,180 @@
+.achievements-section {
+  .container {
+    padding-top: 0.5rem;
+  }
+  
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px; 
+    display: block; 
+  }
+  
+  #gallery .achievement-entry {
+    cursor: pointer;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 7px;
+    margin-right: 7px;
+    z-index: 1;
+    background-color: #e5e9f2;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease-out;
+  }
+  
+  #gallery .achievement-entry:hover {
+    cursor: pointer;
+    z-index: 1;
+    transform: scale(1.1);
+    transition: all 0.3s ease-out;
+    z-index: 20000;
+  }
+  
+  #gallery .achievement-details {
+    cursor: pointer;
+    z-index: 1;
+    opacity: 1 !important;
+    transition: none !important;
+    transform: none !important;
+  }
+  
+  #gallery .img-type-1 {
+    height: 300px;
+  }
+  #gallery .img-type-2 {
+    height: 146px;
+    margin-bottom: 8px;
+  }
+  
+  #gallery .svg-inline--fa {
+    color: #8392a5;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 10px;
+    font-size: 0rem;
+    opacity: 0;
+  }
+  
+  #gallery .achievement-entry:hover .svg-inline--fa {
+    opacity: 1;
+    font-size: 1rem;
+    transition: all 0.3s ease-out;
+  }
+  
+  #gallery .img-type-1 .svg-inline--fa {
+    margin-top: 135px;
+  }
+  #gallery .img-type-2 .svg-inline--fa {
+    margin-top: 50px;
+  }
+  
+  #gallery .achievement-details.img-type-1 .svg-inline--fa,
+  .achievement-details.img-type-2 .svg-inline--fa {
+    margin-top: 0px !important;
+    transition: none !important;
+    float: right;
+  }
+  
+  #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 h4 {
+    color: #e5e9f2;
+  }
+  
+  #gallery .caption p {
+    font-size: 16px;
+    font-weight: 300;
+    color: #e5e9f2;
+  }
+  
+  .hidden {
+    display: none !important;
+  }
+  
+  #gallery .achievement-details {
+    height: 75vh !important;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    .container {
+      max-width: 100%;
+    }
+    .col-md-6 {
+      flex: 50%;
+      width: 50%;
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+    #gallery .achievement-entry:hover {
+      transform: scale(1.05);
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss
new file mode 100644
index 0000000..93596f0
--- /dev/null
+++ b/assets/styles/sections/education.scss
@@ -0,0 +1,199 @@
+.education-section {
+  .education-info-table {
+    width: 100%;
+    border: none;
+    background: none;
+  }
+  
+  .education-info-table tr:hover {
+    background: none;
+  }
+  
+  .education-info-table tr,
+  .education-info-table th,
+  .education-info-table td {
+    border: none;
+    padding: 0;
+    background: none;
+  }
+  
+  .timeframe {
+    color: #8392a5;
+    text-align: right;
+  }
+  
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px;
+    display: block;
+  }
+  
+  .icon {
+    width: 2rem;
+    padding-left: 0;
+    padding-right: 0;
+    position: relative;
+  }
+  
+  .icon .hline {
+    position: absolute;
+    left: 1rem;
+    top: 0;
+    background-color: #248aaa;
+    height: 100%;
+    width: 2px;
+  }
+  
+  .education-info-table tr:first-child .hline {
+    height: 65%;
+    top: auto;
+  }
+  
+  .education-info-table tr:last-child .hline {
+    height: 50%;
+  }
+  
+  .icon-holder {
+    background-color: #248aaa;
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+    padding: 0.2rem;
+    text-align: center;
+    color: #e5e9f2;
+    position: relative;
+  }
+  
+  .line {
+    width: 5%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  
+  .line div {
+    height: 2px;
+    /* width: 100%; */
+    margin-right: -1px;
+    background-color: #248aaa;
+  }
+  
+  .degree-info {
+    padding: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-left: 2px solid #248aaa;
+    border-top: 1px solid #c0ccda;
+    border-bottom: 1px solid #c0ccda;
+    border-right: 1px solid #c0ccda;
+    border-radius: 5px;
+  }
+  
+  .degree-info h5 {
+    margin-bottom: 0.3rem;
+  }
+  
+  .taken-courses table {
+    margin-left: 1rem;
+    width: 100%;
+    transition: all 0.3s ease-out;
+    background: none;
+    border: none;
+  }
+  
+  .taken-courses tr {
+    height: auto !important;
+  }
+  
+  .taken-courses tr,
+  .taken-courses td,
+  .taken-courses th {
+    background: none;
+    border: none;
+    color: #212529;
+  }
+  .taken-courses th.course-name-header{
+    width: 50%;
+  }
+  .taken-courses .hidden-course {
+    display: none;
+    transition: all 1s ease-out;
+  }
+  
+  .taken-courses ul {
+    margin-bottom: 0;
+  }
+  
+  /*============ Education Alter Template =============*/
+  .education-alt .degree-info {
+    border-right: 2px solid #248aaa;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  
+  @media (max-width: 1024px) {
+    .container {
+      padding-left: 0;
+    }
+  }
+  
+  /*  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) {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    .container {
+      padding-right: 0;
+    }
+  
+    .icon {
+      display: none;
+    }
+    .line {
+      display: none;
+    }
+    .timeframe {
+      text-align: left;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss
new file mode 100644
index 0000000..1d1afef
--- /dev/null
+++ b/assets/styles/sections/experiences.scss
@@ -0,0 +1,171 @@
+.experiences-section {
+  padding-bottom: 1rem;
+
+  .timeline {
+    margin-top: 1.5rem !important;
+  }
+  
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px; 
+    display: block; 
+  }
+  
+  ul {
+    padding-left: 1rem;
+  }
+  
+  ul > li {
+    margin-left: 0;
+    color: #3c4858;
+  }
+  
+  .designation {
+    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%;
+  }
+  
+  .timeline .vertical-line:nth-child(even)::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;
+  }
+  
+  .timeline .row:nth-child(2n) div:nth-child(1) .corner {
+    left: 50%;
+    top: -50%;
+  }
+  
+  .timeline .row:nth-child(2n) div:nth-child(3) .corner {
+    left: -50%;
+    top: calc(50% - 3px);
+  }
+  
+  .timeline .row:nth-child(4n) div:nth-child(1) .corner {
+    left: 50%;
+    top: calc(50% - 3px);
+  }
+  
+  .timeline .row:nth-child(4n) div:nth-child(3) .corner {
+    left: -50%;
+    top: -50%;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    .container {
+      max-width: 100%;
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+    .timeline .row:nth-child(4n) div:nth-child(3) .corner {
+      left: -55%;
+      top: -50%;
+    }
+
+    .timeline .row:nth-child(2n) div:nth-child(1) .corner {
+      left: 55%;
+      top: -50%;
+    }
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+    .timeline .row:nth-child(4n) div:nth-child(3) .corner {
+      left: -60%;
+      top: -50%;
+    }
+
+    .timeline .row:nth-child(2n) div:nth-child(1) .corner {
+      left: 60%;
+      top: -50%;
+    }
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+    .timeline .row:nth-child(4n) div:nth-child(3) .corner {
+      left: -64%;
+      top: -50%;
+    }
+
+    .timeline .row:nth-child(2n) div:nth-child(1) .corner {
+      left: 64%;
+      top: -50%;
+    }
+  }  
+}
diff --git a/assets/styles/sections/home.scss b/assets/styles/sections/home.scss
new file mode 100644
index 0000000..b5eeb0a
--- /dev/null
+++ b/assets/styles/sections/home.scss
@@ -0,0 +1,151 @@
+.home {
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  color: #f9fafc;
+  overflow: hidden;
+
+  .background {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    background-attachment: fixed;
+    background-position: center;
+    transform: scale(1.1);
+    filter: blur(3px);
+    background-size: cover;
+  }
+  
+  .arrow-center {
+    display: flex;
+    justify-content: center;
+  }
+  
+  /*
+    Resolves https://github.com/hugo-toha/toha/issues/70
+  
+    fixed attached images use the whole <body> size. On mobile this can get really
+    tall which blows your image out. Setting the attachment back to scroll allows
+    your cover image to stretch within its own container
+  */
+  @supports (-webkit-touch-callout: none) {
+    .background {
+      background-attachment: scroll;
+    }
+  }
+  
+  .content {
+    position: relative;
+    top: -65%;
+    height: 60%;
+  }
+  
+  img {
+    width: 148px;
+    height: 148px;
+    background-color: #e7e7ef;
+    padding: 5px;
+    margin-bottom: 10px;
+  }
+  
+  .greeting, .greeting-subtitle {
+    color: #f9fafc;
+  }
+  
+  .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);
+    }
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+  
+  /*  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) {
+    .content {
+      position: relative;
+      top: -75%;
+      height: 65%;
+    }
+  
+    img {
+      width: 140px;
+      max-width: 50%;
+      height: auto;
+    }
+  
+    .greeting {
+      font-size: 24pt;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss
new file mode 100644
index 0000000..de5a614
--- /dev/null
+++ b/assets/styles/sections/projects.scss
@@ -0,0 +1,134 @@
+.projects-section {
+  .card .card-header {
+    background-color: #f9fafc;
+    padding: 0.7rem;
+    padding-bottom: 0rem;
+    text-decoration: none;
+  }
+  
+  .card .card-img-xs {
+    margin-right: 0.5rem;
+  }
+  
+  .card .card-header .sub-title span:nth-child(1) {
+    float: left;
+  }
+  .card .card-header .sub-title span:nth-child(2) {
+    float: right;
+  }
+  
+  .card .card-body {
+    padding: 0.7rem;
+  }
+  
+  .card .card-header .sub-title {
+    color: #8392a5;
+    margin-top: 0.4rem;
+  }
+  
+  .filtr-projects {
+    padding: 1rem !important;
+  }
+  
+  .project-card-footer {
+    display: flex;
+  }
+  
+  .project-tags-holder {
+    width: 70%;
+  }
+  
+  .project-btn-holder {
+    width: 30%;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+  }
+  
+  .project-btn-holder span {
+    justify-content: flex-end;
+    display: flex;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+
+    .container {
+      max-width: 100%;
+    }
+    .filtr-projects {
+      padding: 0;
+    }
+    .filtr-item {
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+    }
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+
+    .container {
+      max-width: 100%;
+    }
+    .filtr-projects {
+      padding: 0;
+    }
+    .filtr-item {
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+      flex: 50%;
+      max-width: calc(100% / 2 - 0.2rem);
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+    .btn {
+      margin-top: 0.3125rem;
+    }
+    .filtr-item {
+      flex: 100%;
+      max-width: 100%;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss
new file mode 100644
index 0000000..85baedc
--- /dev/null
+++ b/assets/styles/sections/publications.scss
@@ -0,0 +1,149 @@
+.publications-section {
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px; 
+    display: block; 
+  }
+  
+  .card {
+    background: #fff;
+    border-top: 2px solid #248aaa;
+  }
+  .card .card-header {
+    background: none;
+    border: none;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .card .card-header .sub-title {
+    color: #8392a5;
+    margin-top: 0.4rem;
+  }
+  
+  .card .sub-title :nth-child(2) {
+    float: right !important;
+  }
+  
+  .card .card-body {
+    padding: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  .card .card-footer {
+    background: #fff;
+    border: none;
+    padding: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 0.3rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  
+  .card .card-footer .tags {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .card .card-footer .tags .badge {
+    cursor: auto;
+  }
+  
+  .filtr-publications {
+    padding: 1rem !important;
+  }
+  
+  .btn-group{
+    justify-content: center;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+
+    .container {
+      max-width: 100%;
+    }
+    
+    .filtr-publications {
+      padding: 0;
+    }
+    
+    .pub-filtr-item {
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+    }
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+
+    .container {
+      max-width: 100%;
+    }
+    .filtr-publications {
+      padding: 0;
+    }
+    .pub-filtr-item {
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+      flex: 100%;
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+    .btn {
+      margin-top: 0.3125rem;
+    }
+    .pub-filtr-item {
+      flex: 100%;
+      max-width: 100%;
+    }
+    .card .card-footer .tags {
+      flex: 100%;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
new file mode 100644
index 0000000..7ff1704
--- /dev/null
+++ b/assets/styles/sections/recent-posts.scss
@@ -0,0 +1,95 @@
+.recent-posts-section {
+  .container {
+    padding-top: 1rem;
+  }
+  
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px; 
+    display: block; 
+  }
+  
+  .card {
+    height: 100%;
+    min-height: 100%;
+  }
+  
+  .card .card-footer span {
+    font-size: 10pt;
+    color: #6c757d !important;
+    padding-top: 5px;
+  }
+  
+  .card .card-footer {
+    background: #fff;
+    margin-top: auto;
+  }
+  
+  .post-card-link {
+    text-decoration: none;
+  }
+  
+  .post-summary {
+    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;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    .container {
+      max-width: 100%;
+    }
+    .post-card {
+      width: 50%;
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+    .post-card {
+      width: 100%;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss
new file mode 100644
index 0000000..98e59c9
--- /dev/null
+++ b/assets/styles/sections/skills.scss
@@ -0,0 +1,86 @@
+.skills-section {
+  .card .card-head {
+    background-color: #f9fafc;
+    height: -moz-fit-content;
+    height: fit-content;
+    padding: 0.7rem;
+    padding-bottom: 0rem;
+    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
+  }
+  
+  h1 > span{
+    margin-top: -55px;  /* Size of fixed header */
+    padding-bottom:55px; 
+    display: block; 
+  }
+  
+  .skill-card-link {
+    text-decoration: none;
+  }
+  
+  .card .card-img-xs {
+    margin-right: 0.5rem;
+  }
+  
+  .card {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    height: 100%;
+  }
+  
+  .card .card-body {
+    padding-top: 0.2rem;
+    padding-left: 0.7rem;
+  }
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    padding-left: 0;
+    padding-right: 0;
+    
+    .container {
+      max-width: 95%;
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }  
+}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index c54653f..77b7e19 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -14,21 +14,6 @@
     <!-- import common headers -->
     {{- partial "header.html" . -}}
     {{- partial "opengraph.html" . -}}
-
-    <!-- import index page specific headers -->
-    <link rel="stylesheet" href="{{ "/css/sections/home.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/about.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/skills.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/experiences.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/education.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/projects.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
-    <link rel="stylesheet" href="{{ "/css/sections/publications.css" | relURL }}"/>
-
-    <!--================= custom style overrides =========================-->
-    <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
     
     <!--================= add analytics if enabled =========================-->
     {{- partial "analytics.html" . -}}
diff --git a/static/css/sections/about.css b/static/css/sections/about.css
deleted file mode 100644
index 1cb12f6..0000000
--- a/static/css/sections/about.css
+++ /dev/null
@@ -1,385 +0,0 @@
-.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;
-  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;
-  transform-origin: center right;
-  animation: circular-loading-1 1.8s linear forwards;
-}
-
-.circular-progress .circular-progress-value {
-  width: 90%;
-  height: 90%;
-  padding: 1rem;
-  border-radius: 50%;
-  background: #3c4858;
-  font-size: 1rem;
-  color: #f9fafc;
-  line-height: initial;
-  text-align: center;
-  position: absolute;
-  top: 5%;
-  left: 5%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.circular-progress.blue .circular-progress-bar {
-  border-color: #048dff;
-}
-
-.circular-progress.yellow .circular-progress-bar {
-  border-color: #eebb4d;
-}
-
-.circular-progress.pink .circular-progress-bar {
-  border-color: #ed63d2;
-}
-
-.circular-progress.green .circular-progress-bar {
-  border-color: #2dca73;
-}
-
-.circular-progress.sky .circular-progress-bar {
-  border-color: #00c9e3;
-}
-
-.circular-progress.orange .circular-progress-bar {
-  border-color: #ff7c7c;
-}
-
-.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% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes circular-loading-55 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(18deg);
-  }
-}
-
-@keyframes circular-loading-60 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(36deg);
-  }
-}
-
-@keyframes circular-loading-65 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(54deg);
-  }
-}
-
-@keyframes circular-loading-70 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(72deg);
-  }
-}
-
-@keyframes circular-loading-75 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-@keyframes circular-loading-80 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(108deg);
-  }
-}
-
-@keyframes circular-loading-85 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(126deg);
-  }
-}
-
-@keyframes circular-loading-90 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(144deg);
-  }
-}
-
-@keyframes circular-loading-95 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(162deg);
-  }
-}
-
-@keyframes circular-loading-100 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-
-@keyframes circular-loading-1 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-
-@keyframes circular-loading-2 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(144deg);
-  }
-}
-
-@keyframes circular-loading-3 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-@keyframes circular-loading-4 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(36deg);
-  }
-}
-
-@keyframes circular-loading-5 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(126deg);
-  }
-}
-
-@media only screen and (max-width: 990px) {
-  .circular-progress {
-    margin-bottom: 20px;
-  }
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .about-section.container {
-    max-width: 100%;
-  }
-  
-  .circular-progress {
-    width: 135px;
-    height: 135px;
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  .circular-progress {
-    width: 150px;
-    height: 150px;
-  }
-
-  .circular-progress .circular-progress-value {
-    font-size: 1rem;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-  .col-6 {
-    flex: auto;
-    max-width: 100%;
-  }
-
-  .social-link {
-    flex-wrap: wrap;
-  }
-}
diff --git a/static/css/sections/accomplishments.css b/static/css/sections/accomplishments.css
deleted file mode 100644
index 6e0df28..0000000
--- a/static/css/sections/accomplishments.css
+++ /dev/null
@@ -1,104 +0,0 @@
-.accomplishments-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
-}
-
-.accomplishments-section .card {
-  background: #fff;
-  border-top: 2px solid #248aaa;
-  height: 100%;
-}
-.accomplishments-section .card .card-header {
-  background: none;
-  border: none;
-}
-
-.accomplishments-section .card .card-header .sub-title {
-  color: #8392a5;
-  margin-top: 0.4rem;
-}
-
-.accomplishments-section .card .sub-title :nth-child(2) {
-  float: none !important;
-}
-
-.accomplishments-section .card .card-body {
-  padding: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.accomplishments-section .card .card-footer {
-  background: #fff;
-  border: none;
-  padding: 0;
-  padding-left: 0.7rem;
-  padding-bottom: 0.3rem;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-  .accomplishments-section {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
-  .accomplishments-section .container {
-    max-width: 100%;
-  }
-  .accomplishments-section {
-    padding: 0;
-  }
-  .accomplishments-section {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-  }
-}
-
-/*  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) {
-  .accomplishments-section {
-    flex: 100%;
-    max-width: 100%;
-    margin-top: 2rem;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/achievements.css b/static/css/sections/achievements.css
deleted file mode 100644
index 01b1d43..0000000
--- a/static/css/sections/achievements.css
+++ /dev/null
@@ -1,178 +0,0 @@
-.achievements-section .container {
-  padding-top: 0.5rem;
-}
-
-.achievements-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
-}
-
-#gallery .achievement-entry {
-  cursor: pointer;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  margin-left: 7px;
-  margin-right: 7px;
-  z-index: 1;
-  background-color: #e5e9f2;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease-out;
-}
-
-#gallery .achievement-entry:hover {
-  cursor: pointer;
-  z-index: 1;
-  transform: scale(1.1);
-  transition: all 0.3s ease-out;
-  z-index: 20000;
-}
-
-#gallery .achievement-details {
-  cursor: pointer;
-  z-index: 1;
-  opacity: 1 !important;
-  transition: none !important;
-  transform: none !important;
-}
-
-#gallery .img-type-1 {
-  height: 300px;
-}
-#gallery .img-type-2 {
-  height: 146px;
-  margin-bottom: 8px;
-}
-
-#gallery .svg-inline--fa {
-  color: #8392a5;
-  background-color: rgba(0, 0, 0, 0.7);
-  padding: 10px;
-  font-size: 0rem;
-  opacity: 0;
-}
-
-#gallery .achievement-entry:hover .svg-inline--fa {
-  opacity: 1;
-  font-size: 1rem;
-  transition: all 0.3s ease-out;
-}
-
-#gallery .img-type-1 .svg-inline--fa {
-  margin-top: 135px;
-}
-#gallery .img-type-2 .svg-inline--fa {
-  margin-top: 50px;
-}
-
-#gallery .achievement-details.img-type-1 .svg-inline--fa,
-.achievement-details.img-type-2 .svg-inline--fa {
-  margin-top: 0px !important;
-  transition: none !important;
-  float: right;
-}
-
-#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 h4 {
-  color: #e5e9f2;
-}
-
-#gallery .caption p {
-  font-size: 16px;
-  font-weight: 300;
-  color: #e5e9f2;
-}
-
-.hidden {
-  display: none !important;
-}
-
-#gallery .achievement-details {
-  height: 75vh !important;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .achievements-section .container {
-    max-width: 100%;
-  }
-  .achievements-section .col-md-6 {
-    flex: 50%;
-    width: 50%;
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  #gallery .achievement-entry:hover {
-    transform: scale(1.05);
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/education.css b/static/css/sections/education.css
deleted file mode 100644
index 0c163ba..0000000
--- a/static/css/sections/education.css
+++ /dev/null
@@ -1,198 +0,0 @@
-.education-section .education-info-table {
-  width: 100%;
-  border: none;
-  background: none;
-}
-
-.education-section .education-info-table tr:hover {
-  background: none;
-}
-
-.education-section .education-info-table tr,
-.education-section .education-info-table th,
-.education-section .education-info-table td {
-  border: none;
-  padding: 0;
-  background: none;
-}
-
-.education-section .timeframe {
-  color: #8392a5;
-  text-align: right;
-}
-
-.education-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px;
-  display: block;
-}
-
-.education-section .icon {
-  width: 2rem;
-  padding-left: 0;
-  padding-right: 0;
-  position: relative;
-}
-
-.education-section .icon .hline {
-  position: absolute;
-  left: 1rem;
-  top: 0;
-  background-color: #248aaa;
-  height: 100%;
-  width: 2px;
-}
-
-.education-section .education-info-table tr:first-child .hline {
-  height: 65%;
-  top: auto;
-}
-
-.education-section .education-info-table tr:last-child .hline {
-  height: 50%;
-}
-
-.education-section .icon-holder {
-  background-color: #248aaa;
-  border-radius: 50%;
-  height: 2rem;
-  width: 2rem;
-  padding: 0.2rem;
-  text-align: center;
-  color: #e5e9f2;
-  position: relative;
-}
-
-.education-section .line {
-  width: 5%;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.education-section .line div {
-  height: 2px;
-  /* width: 100%; */
-  margin-right: -1px;
-  background-color: #248aaa;
-}
-
-.education-section .degree-info {
-  padding: 1rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-left: 2px solid #248aaa;
-  border-top: 1px solid #c0ccda;
-  border-bottom: 1px solid #c0ccda;
-  border-right: 1px solid #c0ccda;
-  border-radius: 5px;
-}
-
-.education-section .degree-info h5 {
-  margin-bottom: 0.3rem;
-}
-
-.education-section .taken-courses table {
-  margin-left: 1rem;
-  width: 100%;
-  transition: all 0.3s ease-out;
-  background: none;
-  border: none;
-}
-
-.education-section .taken-courses tr {
-  height: auto !important;
-}
-
-.education-section .taken-courses tr,
-.education-section .taken-courses td,
-.education-section .taken-courses th {
-  background: none;
-  border: none;
-  color: #212529;
-}
-.education-section .taken-courses th.course-name-header{
-  width: 50%;
-}
-.education-section .taken-courses .hidden-course {
-  display: none;
-  transition: all 1s ease-out;
-}
-
-.education-section .taken-courses ul {
-  margin-bottom: 0;
-}
-
-/*============ Education Alter Template =============*/
-.education-alt .degree-info {
-  border-right: 2px solid #248aaa;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-
-@media (max-width: 1024px) {
-  .education-section .container {
-    padding-left: 0;
-  }
-}
-
-/*  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) {
-  .education-section {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-  .education-section .container {
-    padding-right: 0;
-  }
-
-  .education-section .icon {
-    display: none;
-  }
-  .education-section .line {
-    display: none;
-  }
-  .education-section .timeframe {
-    text-align: left;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/experiences.css b/static/css/sections/experiences.css
deleted file mode 100644
index cab7fbd..0000000
--- a/static/css/sections/experiences.css
+++ /dev/null
@@ -1,171 +0,0 @@
-.experiences-section {
-  padding-bottom: 1rem;
-}
-
-.experiences-section .timeline {
-  margin-top: 1.5rem !important;
-}
-
-.experiences-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
-}
-
-.experiences-section ul {
-  padding-left: 1rem;
-}
-
-.experiences-section ul > li {
-  margin-left: 0;
-  color: #3c4858;
-}
-
-.experiences-section .designation {
-  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%;
-}
-
-.timeline .vertical-line:nth-child(even)::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;
-}
-
-.timeline .row:nth-child(2n) div:nth-child(1) .corner {
-  left: 50%;
-  top: -50%;
-}
-
-.timeline .row:nth-child(2n) div:nth-child(3) .corner {
-  left: -50%;
-  top: calc(50% - 3px);
-}
-
-.timeline .row:nth-child(4n) div:nth-child(1) .corner {
-  left: 50%;
-  top: calc(50% - 3px);
-}
-
-.timeline .row:nth-child(4n) div:nth-child(3) .corner {
-  left: -50%;
-  top: -50%;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .experiences-section .container {
-    max-width: 100%;
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-  .top-left {
-    left: -52%;
-    top: -50%;
-  }
-
-  .top-right {
-    left: 52%;
-    top: -50%;
-  }
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-  .top-left {
-    left: -56%;
-    top: -50%;
-  }
-
-  .top-right {
-    left: 56%;
-    top: -50%;
-  }
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-  .top-left {
-    left: -64%;
-    top: -50%;
-  }
-
-  .top-right {
-    left: 64%;
-    top: -50%;
-  }
-}
diff --git a/static/css/sections/home.css b/static/css/sections/home.css
deleted file mode 100644
index e3edea8..0000000
--- a/static/css/sections/home.css
+++ /dev/null
@@ -1,151 +0,0 @@
-.home {
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-  color: #f9fafc;
-  overflow: hidden;
-}
-
-.background {
-  height: 100%;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  background-attachment: fixed;
-  background-position: center;
-  transform: scale(1.1);
-  filter: blur(3px);
-  background-size: cover;
-}
-
-.arrow-center {
-  display: flex;
-  justify-content: center;
-}
-
-/*
-  Resolves https://github.com/hugo-toha/toha/issues/70
-
-  fixed attached images use the whole <body> size. On mobile this can get really
-  tall which blows your image out. Setting the attachment back to scroll allows
-  your cover image to stretch within its own container
-*/
-@supports (-webkit-touch-callout: none) {
-  .background {
-    background-attachment: scroll;
-  }
-}
-
-.content {
-  position: relative;
-  top: -65%;
-  height: 60%;
-}
-
-.home img {
-  width: 148px;
-  height: 148px;
-  background-color: #e7e7ef;
-  padding: 5px;
-  margin-bottom: 10px;
-}
-
-.home .greeting, .home .greeting-subtitle {
-  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);
-  }
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-}
-
-/*  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) {
-  .content {
-    position: relative;
-    top: -75%;
-    height: 65%;
-  }
-
-  .home img {
-    width: 140px;
-    max-width: 50%;
-    height: auto;
-  }
-
-  .home .greeting {
-    font-size: 24pt;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/projects.css b/static/css/sections/projects.css
deleted file mode 100644
index 1855b27..0000000
--- a/static/css/sections/projects.css
+++ /dev/null
@@ -1,134 +0,0 @@
-.projects-section .card .card-header {
-  background-color: #f9fafc;
-  padding: 0.7rem;
-  padding-bottom: 0rem;
-  text-decoration: none;
-}
-
-.projects-section .card .card-img-xs {
-  margin-right: 0.5rem;
-}
-
-.card .card-header .sub-title span:nth-child(1) {
-  float: left;
-}
-.card .card-header .sub-title span:nth-child(2) {
-  float: right;
-}
-
-.projects-section .card .card-body {
-  padding: 0.7rem;
-}
-
-.projects-section .card .card-header .sub-title {
-  color: #8392a5;
-  margin-top: 0.4rem;
-}
-
-.filtr-projects {
-  padding: 1rem !important;
-}
-
-.project-card-footer {
-  display: flex;
-}
-
-.project-tags-holder {
-  width: 70%;
-}
-
-.project-btn-holder {
-  width: 30%;
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: column;
-}
-
-.project-btn-holder span {
-  justify-content: flex-end;
-  display: flex;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-  .projects-section {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
-  .projects-section .container {
-    max-width: 100%;
-  }
-  .projects-section .filtr-projects {
-    padding: 0;
-  }
-  .projects-section .filtr-item {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-  }
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .projects-section {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
-  .projects-section .container {
-    max-width: 100%;
-  }
-  .projects-section .filtr-projects {
-    padding: 0;
-  }
-  .projects-section .filtr-item {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-    flex: 50%;
-    max-width: calc(100% / 2 - 0.2rem);
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  .projects-section .btn {
-    margin-top: 0.3125rem;
-  }
-  .projects-section .filtr-item {
-    flex: 100%;
-    max-width: 100%;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/publications.css b/static/css/sections/publications.css
deleted file mode 100644
index f4dcd73..0000000
--- a/static/css/sections/publications.css
+++ /dev/null
@@ -1,147 +0,0 @@
-.publications-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
-}
-
-.publications-section .card {
-  background: #fff;
-  border-top: 2px solid #248aaa;
-}
-.publications-section .card .card-header {
-  background: none;
-  border: none;
-  display: flex;
-  flex-direction: column;
-}
-
-.publications-section .card .card-header .sub-title {
-  color: #8392a5;
-  margin-top: 0.4rem;
-}
-
-.publications-section .card .sub-title :nth-child(2) {
-  float: right !important;
-}
-
-.publications-section .card .card-body {
-  padding: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.publications-section .card .card-footer {
-  background: #fff;
-  border: none;
-  padding: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 0.3rem;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.publications-section .card .card-footer .tags {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.publications-section .card .card-footer .tags .badge {
-  cursor: auto;
-}
-
-.filtr-publications {
-  padding: 1rem !important;
-}
-
-.publications-section .btn-group{
-  justify-content: center;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-  .publications-section {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
-  .publications-section .container {
-    max-width: 100%;
-  }
-  .publicationss-section .filtr-publications {
-    padding: 0;
-  }
-  .publicationss-section .pub-filtr-item {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-  }
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .publications-section {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
-  .publications-section .container {
-    max-width: 100%;
-  }
-  .publications-section .filtr-publications {
-    padding: 0;
-  }
-  .publications-section .pub-filtr-item {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-    flex: 100%;
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  .publications-section .btn {
-    margin-top: 0.3125rem;
-  }
-  .publications-section .pub-filtr-item {
-    flex: 100%;
-    max-width: 100%;
-  }
-  .publications-section .card .card-footer .tags {
-    flex: 100%;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/recent-posts.css b/static/css/sections/recent-posts.css
deleted file mode 100644
index 4b4366e..0000000
--- a/static/css/sections/recent-posts.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.recent-posts-section .container {
-  padding-top: 1rem;
-}
-
-.recent-posts-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
-}
-
-.recent-posts-section .card {
-  height: 100%;
-  min-height: 100%;
-}
-
-.recent-posts-section .card .card-footer span {
-  font-size: 10pt;
-  color: #6c757d !important;
-  padding-top: 5px;
-}
-
-.recent-posts-section .card .card-footer {
-  background: #fff;
-  margin-top: auto;
-}
-
-.recent-posts-section .post-card-link {
-  text-decoration: none;
-}
-
-.post-summary {
-  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;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .recent-posts-section .container {
-    max-width: 100%;
-  }
-  .recent-posts-section .post-card {
-    width: 50%;
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  .recent-posts-section .post-card {
-    width: 100%;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}
diff --git a/static/css/sections/skills.css b/static/css/sections/skills.css
deleted file mode 100644
index 57fc985..0000000
--- a/static/css/sections/skills.css
+++ /dev/null
@@ -1,85 +0,0 @@
-.skills-section .card .card-head {
-  background-color: #f9fafc;
-  height: -moz-fit-content;
-  height: fit-content;
-  padding: 0.7rem;
-  padding-bottom: 0rem;
-  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
-}
-
-.skills-section h1 > span{
-  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
-}
-
-.skills-section .skill-card-link {
-  text-decoration: none;
-}
-
-.skills-section .card .card-img-xs {
-  margin-right: 0.5rem;
-}
-
-.skills-section .card {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  height: 100%;
-}
-
-.skills-section .card .card-body {
-  padding-top: 0.2rem;
-  padding-left: 0.7rem;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Large screens such as TV */
-@media only screen and (min-width: 1824px) {
-}
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/* IPad Pro */
-@media (max-width: 1024px) {
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-  .skills-section {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .skills-section .container {
-    max-width: 95%;
-  }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-}