Refactor sidebar logic + Add Table of Contents in reading page (#33)

* Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md
author: Md. Emruz Hossain <hossainemruz@gmail.com> 2020-07-22 01:14:08 +0300
committer: GitHub <noreply@github.com> 2020-07-22 01:14:08 +0300
commit: fa4d47497403491cff184d226a5b2a07ad5dc081 (patch)
tree: 9dd7afb7c54f83533361282e4ecd011d59cbecf2
parent: 647578e88be55c5cbb2eda157e17242f56ee5630 (diff)
59 files changed, 1704 insertions, 648 deletions
diff --git a/README.md b/README.md
index 5215263..5ea8696 100644
--- a/README.md
+++ b/README.md
@@ -59,9 +59,13 @@ markup:
   goldmark:
     renderer:
       unsafe: true
+  tableOfContents:
+    startLevel: 2
+    endLevel: 6
+    ordered: false
 
 # Enable Google Analytics
-googleAnalytics: UA-xxxxxxxx
+googleAnalytics: UA-XXXXXXXXX-X
 
 # Enable Disqus forum
 disqusShortname: does-not-exist
@@ -83,6 +87,9 @@ params:
   # specify whether you want to write blog post or not
   enableBlogPost: true
 
+  # specify whether you want to show Table of Contents in reading page
+  enableTOC: true
+
   # specify the list of custom menus that you want to show in the top navbar.
   # they will be separated by a divider from the main menus.
   customMenus:
@@ -92,6 +99,7 @@ params:
   # some information about you
   author:
     name: "Jane Doe"
+    nickname: "Jane"
     image: "images/avatar.png"
     # give your some contact information. they will be used in the footer
     contactInfo:
@@ -192,7 +200,7 @@ Here, are the current plan and progress of various components of this theme. The
 
 - [x] Post Cards
 - [x] Sidebar
-- [ ] Pagination
+- [x] Pagination
 
 ### Reading Page
 
@@ -201,7 +209,7 @@ Here, are the current plan and progress of various components of this theme. The
 - [x] Next & Previous Page Navigation
 - [x] `Improve This Page` Button
 - [x] Disqus Comment
-- [ ] Option to navigate to list page
+- [x] Option to navigate to list page
 
 ### Tracking and Comments
 
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 2cd6e1d..8af4441 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -8,9 +8,13 @@ markup:
   goldmark:
     renderer:
       unsafe: true
+  tableOfContents:
+    startLevel: 2
+    endLevel: 6
+    ordered: false
 
 # Enable Google Analytics
-googleAnalytics: UA-xxxxxxxx
+googleAnalytics: UA-XXXXXXXXX-X
 
 # Enable Disqus forum
 disqusShortname: does-not-exist
@@ -32,6 +36,9 @@ params:
   # specify whether you want to write blog post or not
   enableBlogPost: true
 
+  # specify whether you want to show Table of Contents in reading page
+  enableTOC: true
+
   # specify the list of custom menus that you want to show in the top navbar.
   # they will be separated by a divider from the main menus.
   customMenus:
diff --git a/exampleSite/data/sections/achievements.yaml b/exampleSite/data/sections/achievements.yaml
index eee213b..a4b6838 100644
--- a/exampleSite/data/sections/achievements.yaml
+++ b/exampleSite/data/sections/achievements.yaml
@@ -5,7 +5,7 @@ section:
   weight: 6
   showOnNavbar: true
   # Can optionally hide the title in sections
-  # hideTitle: true 
+  # hideTitle: true
 
 # Your achievements achievements
 achievements:
diff --git a/exampleSite/data/sections/projects.yaml b/exampleSite/data/sections/projects.yaml
index ea0c02e..618fa4e 100644
--- a/exampleSite/data/sections/projects.yaml
+++ b/exampleSite/data/sections/projects.yaml
@@ -5,7 +5,7 @@ section:
   weight: 4
   showOnNavbar: true
   # Can optionally hide the title in sections
-  # hideTitle: true 
+  # hideTitle: true
 
 # filter buttons
 buttons:
diff --git a/exampleSite/data/sections/recent-posts.yaml b/exampleSite/data/sections/recent-posts.yaml
index 77b8776..f2a1977 100644
--- a/exampleSite/data/sections/recent-posts.yaml
+++ b/exampleSite/data/sections/recent-posts.yaml
@@ -5,6 +5,6 @@ section:
   weight: 5
   showOnNavbar: true
   # Can optionally hide the title in sections
-  # hideTitle: true 
+  # hideTitle: true
 
 # no additional configuration is required
diff --git a/exampleSite/data/sections/skills.yaml b/exampleSite/data/sections/skills.yaml
index 8a8aaac..4113fd8 100644
--- a/exampleSite/data/sections/skills.yaml
+++ b/exampleSite/data/sections/skills.yaml
@@ -5,7 +5,7 @@ section:
   weight: 2
   showOnNavbar: true
   # Can optionally hide the title in sections
-  # hideTitle: true 
+  # hideTitle: true
 
 # Your Skills.
 # Give a summary of you each skill in the summary section.
diff --git a/layouts/404.html b/layouts/404.html
index 45b51d2..5c2c730 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+    {{ partial "navigators/navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
 {{ end }}
 
 {{ define "content" }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1ed13f1..e47c959 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -14,13 +14,19 @@
     {{ end }}
   </head>
 
-  <body>
+  <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
     <div class="container-fluid bg-dimmed wrapper">
       <!----- ADD NAVBAR --------------->
       {{ block "navbar" . }} {{ end }}
 
+      <!----- ADD SIDEBAR --------------->
+      {{ block "sidebar" . }} {{ end }}
+
       <!----- ADD PAGE CONTENT --------->
       {{ block "content" . }} {{ end }}
+
+      <!----- ADD TABLE OF CONTENTS ----------->
+      {{ block "toc" . }} {{ end }}
     </div>
 
     <!------- ADD FOOTER ------------>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 5f463ab..b7a05e5 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,39 +1,44 @@
 {{ define "header" }}
     <link rel="stylesheet" href="/assets/css/list.css">
+    <link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true "navBrandURL"  .Site.BaseURL ) }}
+    {{ partial "navigators/navbar-2.html" . }}
 {{ end }}
 
-{{ define "content" }}
-<div class="sidebar" id="sidebar">
-    <div class="sidebar-tree">
-      <input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
-      <ul class="tree" id="tree">
-        <li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
-        <div class="subtree">
-            {{ partial "sections.html" .Sections }}
+{{ define "sidebar" }}
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
         </div>
-      </ul>
+      </div>
     </div>
-  </div>
+  </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
   <div class="content container-fluid" id="content">
-    <div class="content-cards">
-      <div class="container-fluid filtr-container post-cards" id="post-cards">
-        {{ range (where site.RegularPages "Type" "in" site.Params.mainSections) }}
-          {{ partial "cards/post.html" . }}
-        {{ end }}
-        {{/*  {{ $paginator := .Paginate .Site.RegularPages 120 }}
-        {{ range $paginator.Pages }}
-          {{ partial "cards/post.html" . }}
-        {{ end }}  */}}
-      </div>
-      {{/*  <div class="paginator">
-        {{ template "_internal/pagination.html" . }}
-      </div>  */}}
+    <div class="container-fluid post-card-holder" id="post-card-holder">
+      {{ $paginator := .Paginate .RegularPagesRecursive 12 }}
+      {{ range $paginator.Pages }}
+        {{ partial "cards/post.html" . }}
+      {{ end }}
+    </div>
+    <div class="paginator">
+      {{ template "_internal/pagination.html" . }}
     </div>
   </div>
+</section>
 {{ end }}
 
 {{ define "scripts" }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8c2de23..bf1304b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,56 +4,93 @@
   href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
 />
 <link rel="stylesheet" href="/assets/css/single.css" />
+<link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false "navBrandURL"  "/posts") }}
+    {{ partial "navigators/navbar-2.html" . }}
 {{ end }}
 
-{{ define "content" }}
-<div class="container p-0 read-area">
-  <!--Hero Area-->
-  <div class="hero-area col-sm-12" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
-  </div>
-
-  <!--Content Start-->
-  <div class="page-content">
-    <div class="author-profile ml-auto align-self-lg-center">
-      <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
-      <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
-      <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
-    </div>
-
-    <div class="title">
-      <h1>{{ .Page.Title }}</h1>
+{{ define "sidebar" }}
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
+        </div>
+      </div>
     </div>
+  </section>
+{{ end }}
 
-    <div class="post-content" id="post-content">
-      {{ .Page.Content }}
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content">
+    <div class="container p-0 read-area">
+      <!--Hero Area-->
+      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
+      </div>
+  
+      <!--Content Start-->
+      <div class="page-content">
+        <div class="author-profile ml-auto align-self-lg-center">
+          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
+          <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
+          <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
+        </div>
+  
+        <div class="title">
+          <h1>{{ .Page.Title }}</h1>
+        </div>
+  
+        <div class="post-content" id="post-content">
+          {{ .Page.Content }}
+        </div>
+  
+        <!--- Improve this page button --->
+        {{ if .Site.Params.GitRepo }}
+          <div class="btn-improve-page">
+              <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
+                <i class="fas fa-code-branch"></i>
+                Improve This Page
+              </a>
+          </div>
+        {{ end }}
+  
+        <!---Next and Previous Navigator -->
+      <hr />
+        {{ partial "navigators/next-prev-navigator.html" . }}
+      <hr />
+      <!-- Add Disqus forum  -->
+      {{ if .Site.DisqusShortname }}
+          {{ partial "disqus.html" . }}
+      {{ end }}
+      </div>
     </div>
+  </div>
+</section>
+{{ end }}
 
-    <!--- Improve this page button --->
-    {{ if .Site.Params.GitRepo }}
-      <div class="btn-improve-page">
-          <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
-            <i class="fas fa-code-branch"></i>
-            Improve This Page
-          </a>
+{{ define "toc" }}
+  <section class="toc-section" id="toc-section">
+    {{ if site.Params.enableTOC }}
+    <div class="toc-holder">
+      <h5 class="text-center pl-3">Table of Contents</h5>
+      <hr>
+      <div class="toc">
+        {{ .TableOfContents }}
       </div>
+    </div>
     {{ end }}
-
-    <!---Next and Previous Navigator -->
-  <hr />
-    {{ partial "next-prev-navigator.html" . }}
-  <hr />
-  <!-- Add Disqus forum  -->
-  {{ if .Site.DisqusShortname }}
-      {{ partial "disqus.html" . }}
-  {{ end }}
-</div>
+  </section>
 {{ end }}
 
-
 {{ define "scripts" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
 <script src="/assets/js/single.js"></script>
diff --git a/layouts/index.html b/layouts/index.html
index a7f621c..dc93e8c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,13 +6,13 @@
     {{- partial "header.html" . -}}
 
     <!-- import index page specific headers -->
-    <link rel="stylesheet" href="/assets/css/home.css" />
-    <link rel="stylesheet" href="/assets/css/about.css" />
-    <link rel="stylesheet" href="/assets/css/skills.css" />
-    <link rel="stylesheet" href="/assets/css/experiences.css" />
-    <link rel="stylesheet" href="/assets/css/projects.css" />
-    <link rel="stylesheet" href="/assets/css/recent-posts.css" />
-    <link rel="stylesheet" href="/assets/css/achievements.css" />
+    <link rel="stylesheet" href="/assets/css/sections/home.css" />
+    <link rel="stylesheet" href="/assets/css/sections/about.css" />
+    <link rel="stylesheet" href="/assets/css/sections/skills.css" />
+    <link rel="stylesheet" href="/assets/css/sections/experiences.css" />
+    <link rel="stylesheet" href="/assets/css/sections/projects.css" />
+    <link rel="stylesheet" href="/assets/css/sections/recent-posts.css" />
+    <link rel="stylesheet" href="/assets/css/sections/achievements.css" />
 
     <!-- Add Google Analytics if enabled in configuration -->
     {{ if .Site.GoogleAnalytics }}
@@ -22,10 +22,10 @@
   <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
 
     <!--- NAVBAR ------------------------->
-    {{- partial "navbar.html" . -}}
+    {{- partial "navigators/navbar.html" . -}}
 
     <!--- ADD HOME SECTION ---------------->
-    {{- partial "home.html" . -}}
+    {{- partial "sections/home.html" . -}}
 
     <!--- ADD OPTIONAL SECTIONS ----------->
     {{ if .Site.Data.sections }}
@@ -36,7 +36,7 @@
             {{ if .section.template }}
               {{- partial .section.template . -}}
             {{ else }}
-              {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+              {{- partial (printf "sections/%s.html" (replace (lower .section.name) " " "-")) . -}}
             {{ end }}
           </div>
           <!--- alter background color for next section --->
@@ -59,5 +59,6 @@
     <script src="/assets/js/itype.min.js"></script>
     <script src="/assets/js/github-button.js"></script>
     <script src="/assets/js/home.js"></script>
+    <script src="/assets/js/jquery.filterizr.min.js"></script>
   </body>
 </html>
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index 6787e28..663510b 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -1,4 +1,4 @@
-<div class="filtr-item" data-category='{{ partial "helpers/get-categories.html" . }}'>
+<div class="post-card">
   <a href="{{ .RelPermalink }}" class="post-card-link">
     <div class="card">
       <div class="card-head">
diff --git a/layouts/partials/cards/project.html b/layouts/partials/cards/project.html
index dfd8918..17bf3b0 100644
--- a/layouts/partials/cards/project.html
+++ b/layouts/partials/cards/project.html
@@ -1,5 +1,5 @@
 <div
-  class="col-md-6 col-lg-4 p-2 filtr-item"
+  class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
   data-category='all, {{ delimit  .tags ","}}'
 >
   <div class="card mt-1">
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html
index 7295f86..5288b9f 100644
--- a/layouts/partials/cards/recent-post.html
+++ b/layouts/partials/cards/recent-post.html
@@ -1,4 +1,4 @@
-<div class="col-lg-4 col-md-6 pt-2">
+<div class="col-lg-4 col-md-6 pt-2 post-card">
   <a href="{{ .RelPermalink }}" class="post-card-link">
     <div class="card">
       <div class="card-head">
diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html
index d8e1732..0da4050 100644
--- a/layouts/partials/cards/skill.html
+++ b/layouts/partials/cards/skill.html
@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
+<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
   <div class="card">
     <div class="card-head d-flex">
       {{ if .icon }}
diff --git a/layouts/partials/experiences/experience-info.html b/layouts/partials/experiences/experience-info.html
deleted file mode 100644
index c4e1a92..0000000
--- a/layouts/partials/experiences/experience-info.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{ if gt (len .positions) 1 }}
-  {{ partial "experiences/multiple-positions" . }}
-{{ else }}
-  {{ partial "experiences/single-position.html" . }}
-{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b898b98..9ffdb2f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -5,7 +5,8 @@
 <!-- ============ import common css ========== -->
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
 <link rel="stylesheet" href="/assets/css/main.css" />
-<link rel="stylesheet" href="/assets/css/navbar.css" />
+<link rel="stylesheet" href="/assets/css/style.css" />
+<link rel="stylesheet" href="/assets/css/navigators/navbar.css" />
 
 <!--=================== cdn ==============================-->
 <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
diff --git a/layouts/partials/helpers/get-categories.html b/layouts/partials/helpers/get-categories.html
deleted file mode 100644
index f9d39b6..0000000
--- a/layouts/partials/helpers/get-categories.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{ $categories:= ""}}
-{{ if  .Params.categories }}
-    {{ $categories = delimit .Params.categories "," }}
-{{ end }}
-{{ return $categories }}
diff --git a/layouts/partials/progress/soft-skills.html b/layouts/partials/misc/soft-skills.html
index cbdc0ae..cbdc0ae 100644
--- a/layouts/partials/progress/soft-skills.html
+++ b/layouts/partials/misc/soft-skills.html
diff --git a/layouts/partials/navbar-2.html b/layouts/partials/navbar-2.html
deleted file mode 100644
index 03fb869..0000000
--- a/layouts/partials/navbar-2.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
-    <div class="container">
-      <a class="navbar-brand" href="{{ .navBrandURL }}">
-        <img src="/assets/images/logo.png">
-        {{- .title -}}
-      </a>
-      <button class="navbar-toggler navbar-light" type="button" {{ if .hasToggleButton }}onclick="toggleSidebar()"{{ end }}>
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <div class="collapse navbar-collapse" id="top-nav-items">
-        <ul class="navbar-nav ml-auto">
-        </ul>
-      </div>
-    </div>
-</nav>
diff --git a/layouts/partials/navigators/navbar-2.html b/layouts/partials/navigators/navbar-2.html
new file mode 100644
index 0000000..bca52a9
--- /dev/null
+++ b/layouts/partials/navigators/navbar-2.html
@@ -0,0 +1,19 @@
+<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
+    <div class="container">
+       <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <a class="navbar-brand" href="{{ site.BaseURL }}">
+        <img src="/assets/images/logo.png">
+        {{- site.Title -}}
+      </a>
+      <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="top-nav-items">
+        <ul class="navbar-nav ml-auto">
+        </ul>
+      </div>
+    </div>
+</nav>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navigators/navbar.html
index fba1b31..0873fa4 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg top-navbar initial-navbar" id="top-navbar">
+<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
     <a class="navbar-brand" href="{{ .Site.BaseURL }}">
       <img src="/assets/images/logo-inverted.png" id="logo">
@@ -7,7 +7,7 @@
     <button
       class="navbar-toggler navbar-dark"
       id="navbar-toggler"
-      ,type="button"
+      type="button"
       data-toggle="collapse"
       data-target="#top-nav-items"
     >
@@ -17,13 +17,13 @@
     <div class="collapse navbar-collapse" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#home">Home</a>
+          <a class="nav-link" href="#home">Home</a>
         </li>
         {{- if .Site.Data.sections }}
           {{- range sort .Site.Data.sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
               <li class="nav-item">
-                <a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+                <a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
               </li>
             {{ end }}
           {{- end }}
diff --git a/layouts/partials/next-prev-navigator.html b/layouts/partials/navigators/next-prev-navigator.html
index eca6632..eca6632 100644
--- a/layouts/partials/next-prev-navigator.html
+++ b/layouts/partials/navigators/next-prev-navigator.html
diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html
new file mode 100644
index 0000000..e2c4515
--- /dev/null
+++ b/layouts/partials/navigators/sidebar.html
@@ -0,0 +1,22 @@
+{{ range .menus }}
+  {{ $class:= "" }}
+  {{ $icon:= "fa-plus-circle" }}
+  <!-- If the current menu is the selected menu or it contain the selected menu, set expand icon and set "active" class -->
+  {{ if or ($.ctx.HasMenuCurrent "sidebar" .)  ($.ctx.IsMenuCurrent "sidebar" .)}}
+    {{ $icon = "fa-minus-circle"}}
+    {{ $class = "active" }}
+  {{end}}
+  {{ if .HasChildren }}
+    <!-- Add current entry -->
+    <li>
+      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a>
+      <!-- Add sub-tree -->
+      <ul class="{{ $class }}">
+        {{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
+      </ul>
+    </li>
+  {{ else }}
+    <!-- No sub-tree. So, only add current entry -->
+    <li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 0f8ff25..6c48ff5 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -2,4 +2,4 @@
 <script src="/assets/js/bootstrap.min.js"></script>
 
 <script src="/assets/js/navbar.js"></script>
-<script src="/assets/js/jquery.filterizr.min.js"></script>
+<script src="/assets/js/main.js"></script>
diff --git a/layouts/partials/sections.html b/layouts/partials/sections.html
deleted file mode 100644
index 09c9ab8..0000000
--- a/layouts/partials/sections.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{{ range . }}
-{{ if .Sections }}
-    <li><a href="#{{ .Params.id }}" data-filter="{{ .Params.id }}">{{ title .Title }}</a>
-    <ul>
-        {{ partial "sections.html" .Sections }}
-    </ul>
-    </li>
-    {{ else }}
-        <li><a href="#{{ .Params.id }}" data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
-    {{ end }}
-{{ end }}
diff --git a/layouts/partials/about.html b/layouts/partials/sections/about.html
index ccb3ab0..e2888b4 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/sections/about.html
@@ -1,7 +1,7 @@
-<div class="container anchor p-md-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
+<div class="container anchor p-lg-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
   <div class="row pt-sm-2 pt-md-4 align-self-center">
     <!-- summary -->
-    <div class="col-md-6">
+    <div class="col-sm-6">
     <h3 class="p-1">{{ site.Params.author.name }}</h3>
       {{ if .designation }}
       <h5 class="p-1">
@@ -34,10 +34,10 @@
       {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
-    <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
+    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
       <div class="row">
         {{ range .softSkills }}
-          {{ partial "progress/soft-skills" . }}
+          {{ partial "misc/soft-skills.html" . }}
         {{ end }}
       </div>
     </div>
diff --git a/layouts/partials/achievements.html b/layouts/partials/sections/achievements.html
index 75995a9..bd9a192 100644
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/sections/achievements.html
@@ -9,7 +9,7 @@
   <!-- achievements-holder holds achievement-entry -->
   <div class="d-none" id="achievements-holder">
     {{ range .achievements }}
-      {{ partial "misc/achievement.html" . }}
+      {{ partial "sections/achievements/entry.html" . }}
     {{ end }}
   </div>
 </div>
diff --git a/layouts/partials/misc/achievement.html b/layouts/partials/sections/achievements/entry.html
index 8548a1a..8548a1a 100644
--- a/layouts/partials/misc/achievement.html
+++ b/layouts/partials/sections/achievements/entry.html
diff --git a/layouts/partials/experiences.html b/layouts/partials/sections/experiences.html
index d63b319..8d6b72f 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/sections/experiences.html
@@ -8,17 +8,17 @@
    {{ range $index,$experience:= .experiences }}
      {{ if eq (mod $index 2) 0 }}
        <div class="row align-items-center  d-flex">
-         {{ partial "experiences/vertical-line.html" $index }}
-         {{ partial "experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/vertical-line.html" $index }}
+         {{ partial "sections/experiences/experience-info.html" $experience }}
        </div>
      {{else}}
        <div class="row align-items-center justify-content-end d-flex">
-         {{ partial "experiences/experience-info.html" $experience }}
-         {{ partial "experiences/vertical-line.html" $index }}
+         {{ partial "sections/experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/vertical-line.html" $index }}
        </div>
      {{ end }}
      {{ if lt $index (sub $totalExperiences 1) }}
-       {{ partial "experiences/horizontal-line.html" $index }}
+       {{ partial "sections/experiences/horizontal-line.html" $index }}
      {{ end }}
    {{ end }}
   </div>
diff --git a/layouts/partials/sections/experiences/experience-info.html b/layouts/partials/sections/experiences/experience-info.html
new file mode 100644
index 0000000..d49932c
--- /dev/null
+++ b/layouts/partials/sections/experiences/experience-info.html
@@ -0,0 +1,5 @@
+{{ if gt (len .positions) 1 }}
+  {{ partial "sections/experiences/multiple-positions" . }}
+{{ else }}
+  {{ partial "sections/experiences/single-position.html" . }}
+{{ end }}
diff --git a/layouts/partials/experiences/horizontal-line.html b/layouts/partials/sections/experiences/horizontal-line.html
index 95f13ae..95f13ae 100644
--- a/layouts/partials/experiences/horizontal-line.html
+++ b/layouts/partials/sections/experiences/horizontal-line.html
diff --git a/layouts/partials/experiences/multiple-positions.html b/layouts/partials/sections/experiences/multiple-positions.html
index aae5f3d..aae5f3d 100644
--- a/layouts/partials/experiences/multiple-positions.html
+++ b/layouts/partials/sections/experiences/multiple-positions.html
diff --git a/layouts/partials/experiences/single-position.html b/layouts/partials/sections/experiences/single-position.html
index dda35ef..dda35ef 100644
--- a/layouts/partials/experiences/single-position.html
+++ b/layouts/partials/sections/experiences/single-position.html
diff --git a/layouts/partials/experiences/vertical-line.html b/layouts/partials/sections/experiences/vertical-line.html
index 7d8b74b..7d8b74b 100644
--- a/layouts/partials/experiences/vertical-line.html
+++ b/layouts/partials/sections/experiences/vertical-line.html
diff --git a/layouts/partials/home.html b/layouts/partials/sections/home.html
index 2f825a7..2f825a7 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/sections/home.html
diff --git a/layouts/partials/projects.html b/layouts/partials/sections/projects.html
index fc23c72..fc23c72 100644
--- a/layouts/partials/projects.html
+++ b/layouts/partials/sections/projects.html
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/sections/recent-posts.html
index 2d0cc87..2d0cc87 100644
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/sections/recent-posts.html
diff --git a/layouts/partials/skills.html b/layouts/partials/sections/skills.html
index 8790be6..8790be6 100644
--- a/layouts/partials/skills.html
+++ b/layouts/partials/sections/skills.html
diff --git a/static/assets/css/404.css b/static/assets/css/404.css
index ce1dea0..4ccb97c 100644
--- a/static/assets/css/404.css
+++ b/static/assets/css/404.css
@@ -25,9 +25,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -41,6 +41,10 @@
   }
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -75,3 +79,15 @@
     left: 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/assets/css/list.css b/static/assets/css/list.css
index eba46fa..9a4fc50 100644
--- a/static/assets/css/list.css
+++ b/static/assets/css/list.css
@@ -3,193 +3,50 @@
   padding: 0;
   margin: 0;
   width: 100%;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 400px;
-  background: #f9fafc;
-  min-height: 100vh;
-  overflow: auto;
-  transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
-}
-
-.sidebar.hide {
-  position: relative;
-  width: 0;
-  transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
-  z-index: -1001;
-}
-
-#search-box {
-  width: 250px;
-  height: 35px;
-  padding-left: 15px;
-  margin-top: 30px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  background-color: #e5e9f2;
-  transition: all 0.3s ease-out;
-  -webkit-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;
-}
-
-#list-heading {
-  padding-left: 0px !important;
-}
-
-.tree,
-.tree ul {
-  margin: 0;
+.content-section {
+  flex: 80%;
+  order: 2;
+  /* background-color: lightseagreen; */
   padding: 0;
-  list-style: none;
-}
-
-.tree ul {
-  margin-left: 0.5rem;
   position: relative;
-}
-
-.tree ul ul {
-  margin-left: 0.5em;
-}
-
-.tree ul:before {
-  content: "";
-  display: block;
-  width: 0;
-  position: absolute;
-  top: -10px;
-  left: -3px;
-  bottom: 16px;
-  border-left: 1px solid;
-}
-
-.subtree {
-  padding-left: 0.7rem;
-}
-
-.subtree:before {
-  content: "";
-  display: block;
-  width: 0;
-  position: absolute;
-  top: 6.5rem;
-  left: 0.5rem;
-  bottom: 16px;
-  border-left: 1px solid;
-}
-
-.tree li {
-  margin: 0;
-  padding: 0 1em;
-  line-height: 2em;
-  color: #3c4858;
-  position: relative;
-}
-
-.subtree li:before {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 0;
-  border-top: 1px solid;
-  margin-top: -1px;
-  position: absolute;
-  top: 18px;
-  left: -3px;
-}
-
-.subtree 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;
-  -webkit-transition: all 0.3s ease-out;
-}
-.tree li a:hover {
-  margin-left: 3px;
-  color: #2098d1;
-  transition: all 0.3s ease-out;
-  -webkit-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;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .content {
-  width: 100%;
-  background: #e5e9f2;
   padding: 0;
   position: relative;
+  padding-top: 2rem;
+  min-height: 130vh;
 }
 
-.content-cards {
-  padding-top: 30px;
-  width: 100%;
-  padding-left: 28px;
-  padding-bottom: 20px;
-}
-
-.post-cards {
-  margin: 32px;
+.post-card-holder {
+  margin-top: 32px;
+  margin-left: auto;
+  padding: 0;
+  display: flex;
+  flex-flow: wrap;
 }
 
-.post-cards .filtr-item {
-  width: 23rem !important;
+.post-card-holder .post-card {
+  width: calc(100% / 3);
+  display: inline-flex;
 }
 
-.post-cards .card {
+.post-card-holder .card {
   margin: 5px;
   position: relative;
 }
 
-.post-cards .card .card-footer span {
+.post-card-holder .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;
   padding-top: 5px;
 }
 
-.post-cards .card .card-footer {
+.post-card-holder .card .card-footer {
   background: #fff;
   margin-top: auto;
 }
@@ -205,20 +62,20 @@ a.focused {
   -webkit-box-orient: vertical;
 }
 
-.post-cards .post-card-link{
+.post-card-holder .post-card-link {
   text-decoration: none;
 }
 
-.content-cards .paginator{
+.content-cards .paginator {
   width: fit-content;
   margin: auto;
 }
 
-.content-cards .paginator .page-item>a{
+.content-cards .paginator .page-item > a {
   color: #248aaa;
 }
 
-.content-cards .paginator .page-item.active>a{
+.content-cards .paginator .page-item.active > a {
   background-color: #248aaa;
   color: #f9fafc;
 }
@@ -227,60 +84,121 @@ a.focused {
   display: none;
 }
 
-/*-------------- Media Queries ---------- */
+.pagination {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  width: fit-content;
+}
 
-@media (max-width: 1200px) {
-  .sidebar-tree {
-    margin-left: 1rem;
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .content-section {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex: 85%;
   }
+  .post-card-holder .post-card {
+    width: calc(100% / 5);
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
   .content-cards {
     padding-left: 0px;
   }
-  .post-cards {
-    margin-left: 15px;
+  .post-card-holder {
+    margin-left: 0px;
   }
-  .post-cards .filtr-item {
-    width: 22rem !important;
-    padding: 3px;
+  .post-card-holder .post-card {
+    width: calc(100% / 3);
   }
 }
 
-@media only screen and (max-width: 768px) {
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+  .content-section {
+    padding: 0;
+    flex: 60%;
+    order: 2;
+    padding-bottom: 0.5rem;
+  }
+
   .content {
-    width: 100vw;
-    padding-left: 15px;
+    overflow: hidden;
   }
-  .content.overley {
-    width: 60vw;
-    padding-left: 3px;
+  .container {
+    max-width: 100%;
   }
   .navbar-toggler {
     display: block;
   }
 
-  .sidebar {
-    width: 0;
+  #toc-toggler {
+    visibility: hidden;
   }
-  .sidebar nav {
-    display: none;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
+
+  .content-cards {
+    padding-top: 20px;
+    width: 100%;
+    padding-left: 0px;
   }
-  .sidebar.hide {
+
+  .post-card-holder {
+    margin: 0;
+    margin-top: 1.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     position: relative;
-    z-index: 1001;
-    width: 40vw;
   }
 
-  .sidebar-tree {
-    margin-left: -20rem;
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
+  .post-card-holder .post-card {
+    width: calc(100% / 3);
+  }
+
+  .content-section.hide .post-card-holder .post-card {
+    width: 50%;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+  .content-section {
+    padding: 0;
+    flex: 60%;
+    order: 2;
+    padding-bottom: 0.5rem;
+  }
+
+  .content {
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
+  }
+  .navbar-toggler {
+    display: block;
   }
 
-  .sidebar.hide .sidebar-tree {
-    margin-left: 1.5rem;
-    transition: all 0.3s ease-out;
+  #toc-toggler {
+    visibility: hidden;
   }
 
   .content-cards {
@@ -289,129 +207,139 @@ a.focused {
     padding-left: 0px;
   }
 
-  .post-cards {
+  .post-card-holder {
     margin: 0;
-    margin-top: 32px;
+    margin-top: 1.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    position: relative;
   }
 
-  .post-cards .filtr-item {
-    margin: 10px;
-    width: 47vw !important;
+  .post-card-holder .post-card {
+    width: 50%;
   }
 
-  .post-cards .card {
-    max-width: 47vw !important;
+  .content-section.hide .post-card-holder .post-card {
+    width: 100%;
   }
+}
 
-  .content.overley .post-cards .filtr-item {
-    margin: 10px;
-    width: 55vw !important;
-  }
+/* Medium devices (tablets, 768px and up) */
 
-  .content.overley .post-cards .card {
-    max-width: 55vw !important;
-  }
-}
-@media only screen and (max-width: 576px) {
+@media only screen and (max-width: 768px) {
   .wrapper {
-    display: block;
+    padding-left: 0px;
+    padding-right: 0px;
   }
-
-  #search-box {
-    width: 85vw;
-    height: 35px;
-    padding-left: 5px;
-    margin-top: 30px;
+  .content-section {
+    padding: 0;
+    flex: 60%;
+    order: 2;
+    padding-bottom: 0.5rem;
   }
+
   .content {
-    width: 100vw;
-    left: 0;
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
+  }
+  .navbar-toggler {
     display: block;
-    padding-left: 2vw;
   }
 
-  .content.overley {
-    width: 100vw;
-    left: 0;
-    padding-left: 2vw;
+  #toc-toggler {
+    visibility: hidden;
   }
 
-  .sidebar {
-    position: relative;
-    max-height: 0;
-    width: 100vw;
-    min-height: 0;
-    overflow: hidden;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
+  .content-cards {
+    padding-top: 20px;
+    width: 100%;
+    padding-left: 0px;
   }
 
-  .sidebar-tree {
+  .post-card-holder {
+    margin: 0;
+    margin-top: 1.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     position: relative;
   }
 
-  .sidebar.hide {
-    position: relative;
-    z-index: 1001;
-    width: 100vw;
-    max-height: 100vh;
+  .post-card-holder .post-card {
+    width: 50%;
+  }
+
+  .content-section.hide .post-card-holder .post-card {
+    width: 100%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+    flex-flow: column;
     overflow: hidden;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
+  }
+  .content-section {
+    flex: 100%;
+    padding-left: 0;
+    width: 100%;
   }
 
-  .sidebar-tree {
-    margin-left: 1.5rem;
+  .content {
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
   }
 
-  .sidebar.hide .sidebar-tree {
-    margin-left: 1.5rem;
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
+  .content-section.hide .content {
+    margin-top: 0;
+    padding-top: 0;
   }
 
-  .content-cards {
-    padding-top: 20px;
-    padding-left: 0px;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
+  #toc-toggler {
+    visibility: hidden;
   }
 
-  .content.overley .content-cards {
-    padding-top: 0px;
+  .content-cards {
+    padding-top: 20px;
     padding-left: 0px;
     transition: all ease-out 0.5s;
     -webkit-transition: all ease-out 0.5s;
   }
 
-  .post-cards {
+  .post-card-holder {
     margin: 0;
-    margin-top: 32px;
+    margin-top: 1.5rem;
+    padding-right: 0;
+    padding-left: 0;
     transition: all ease-out 0.5s;
     -webkit-transition: all ease-out 0.5s;
   }
 
-  .content.overley .post-cards {
-    margin: 0;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
+  .post-card-holder.hide {
+    margin-top: 0;
   }
 
-  .post-cards .filtr-item {
-    margin: 0px;
-    width: 95vw !important;
+  .post-card-holder .post-card {
+    margin-left: 1%;
+    margin-right: 1%;
+    width: 98%;
   }
+}
 
-  .post-cards .card {
-    max-width: 90vw !important;
-  }
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
 
-  .content.overley .post-cards .filtr-item {
-    margin: 0px;
-    width: 95vw !important;
-  }
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
 
-  .content.overley .post-cards .card {
-    max-width: 95vw !important;
-  }
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
 }
diff --git a/static/assets/css/main.css b/static/assets/css/main.css
index e3fcd43..30ee2ee 100644
--- a/static/assets/css/main.css
+++ b/static/assets/css/main.css
@@ -26,8 +26,8 @@ h5 {
   color: #1c2d41;
 }
 
-strong{
-  color: #1c2d41!important;
+strong {
+  color: #1c2d41 !important;
 }
 
 p {
@@ -42,6 +42,13 @@ a:hover {
   color: #207089;
 }
 
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #8392a5;
+}
+
 .btn-dark {
   background-color: #3c4858;
   border-color: #3c4858;
@@ -90,18 +97,18 @@ a:hover {
   padding-top: 3.5rem;
 }
 
-img.center{
+img.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
-img.left{
+img.left {
   display: block;
   margin-right: auto;
 }
 
-img.right{
+img.right {
   display: block;
   margin-left: auto;
 }
@@ -220,9 +227,9 @@ img.right{
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -232,6 +239,10 @@ img.right{
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -245,6 +256,12 @@ img.right{
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .skills-section .container,
+  .projects-section .container {
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
+
   .section-holder {
     padding-left: 5px;
     padding-right: 5px;
@@ -253,8 +270,20 @@ img.right{
   .skills-section,
   .projects-section,
   .recent-posts-section,
-  .achievements-section{
+  .achievements-section {
     padding-left: 0;
     padding-right: 0;
   }
 }
+
+/* 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/assets/css/navbar.css b/static/assets/css/navigators/navbar.css
index 7894d22..5e58058 100644
--- a/static/assets/css/navbar.css
+++ b/static/assets/css/navigators/navbar.css
@@ -124,9 +124,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -136,9 +136,93 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .top-navbar .container {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .initial-navbar .navbar-nav .active,
+  .initial-navbar li a:hover {
+    color: #2098d1;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+  }
+
+  .final-navbar .navbar-nav .active,
+  .final-navbar li a:hover {
+    color: #2098d1;
+    transition: none;
+    -webkit-transition: none;
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
+  }
+
+  .final-navbar .navbar-collapse.show {
+    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+    height: auto;
+    width: auto;
+    margin-right: 15px;
+  }
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
+  .top-navbar .container {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .initial-navbar .navbar-nav .active,
+  .initial-navbar li a:hover {
+    color: #2098d1;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+  }
+
+  .final-navbar .navbar-nav .active,
+  .final-navbar li a:hover {
+    color: #2098d1;
+    transition: none;
+    -webkit-transition: none;
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
+  }
+
+  .final-navbar .navbar-collapse.show {
+    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+    height: auto;
+    width: auto;
+    margin-right: 15px;
+  }
 }
 
 /* Medium devices (tablets, 768px and up) */
@@ -189,4 +273,19 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .final-navbar {
+    padding: 0;
+  }
+}
+
+/* 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/assets/css/navigators/sidebar.css b/static/assets/css/navigators/sidebar.css
new file mode 100644
index 0000000..102c089
--- /dev/null
+++ b/static/assets/css/navigators/sidebar.css
@@ -0,0 +1,315 @@
+.sidebar-section {
+  order: 1;
+  flex: 20%;
+  max-width: 20%;
+  /* background-color: lightsalmon; */
+  transition: all ease-out 0.5s;
+  -webkit-transition: all ease-out 0.5s;
+}
+
+.sidebar-holder {
+  top: 2.5rem;
+  position: sticky;
+  background-color: #f9fafc;
+  height: 100vh;
+  overflow: auto;
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
+}
+
+.sidebar {
+  background: #f9fafc;
+  height: 100vh;
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
+}
+
+.sidebar-tree {
+  padding-left: 1rem;
+  position: relative;
+  width: max-content;
+}
+
+#search-box {
+  margin-left: 5%;
+  margin-right: 5%;
+  width: -webkit-fill-available;
+  height: 35px;
+  padding-left: 15px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  background-color: #e5e9f2;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  border: 1px solid #c0ccda;
+}
+
+#search-box:focus {
+  border: 1pt solid #248aaa;
+  outline: none;
+}
+
+#list-heading {
+  padding-left: 0px !important;
+}
+
+.tree,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree li {
+  margin: 0;
+  padding: 0 1em;
+  line-height: 2em;
+  color: #3c4858;
+  position: relative;
+}
+
+.tree li a {
+  text-decoration: none;
+  color: #131313;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.tree li a.active {
+  display: inline;
+  color: #2098d1;
+}
+
+.tree li a:hover {
+  margin-left: 3px;
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.tree i {
+  color: #3c4858;
+  font-size: 12px;
+  margin-right: 5px;
+}
+
+.tree .shift-right {
+  margin-left: 5px;
+}
+
+.tree .active,
+.tree .active > ul {
+  display: block;
+}
+
+.subtree {
+  padding-left: 0.7rem;
+}
+
+.subtree:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 2.5rem;
+  left: 1.5rem;
+  bottom: 0.9rem;
+  border-left: 1px solid;
+}
+
+.subtree ul,
+ul > ul {
+  position: relative;
+  padding-left: 0.5rem;
+  display: none;
+}
+
+.subtree ul:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: -10px;
+  left: 0.3rem;
+  bottom: 0.9rem;
+  border-left: 1px solid;
+}
+
+.subtree li:before {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 0;
+  border-top: 1px solid;
+  margin-top: -1px;
+  position: absolute;
+  top: 18px;
+  left: -3px;
+}
+
+.subtree li:last-child:before {
+  background: #f9fafc;
+  height: auto;
+  top: 1.1rem;
+  bottom: 0;
+}
+
+a.focused {
+  color: #2098d1 !important;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .sidebar-section {
+    flex: 15%;
+    max-width: 15%;
+  }
+  .sidebar-holder {
+    max-width: 100%;
+  }
+}
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+  .sidebar-holder {
+    max-width: 20rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .sidebar-tree {
+    margin-left: 1rem;
+  }
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .sidebar-section {
+    flex: 0%;
+    max-width: 0%;
+    min-height: 100vh;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+  .sidebar-holder {
+    position: sticky;
+    top: 2.5rem;
+    width: 100%;
+  }
+
+  .sidebar-section.hide {
+    flex: 30%;
+    max-width: 30%;
+    margin-right: 0.5rem;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .sidebar-section {
+    flex: 0%;
+    max-width: 0%;
+    min-height: 100vh;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+  .sidebar-holder {
+    position: sticky;
+    top: 2.5rem;
+    width: 100%;
+  }
+
+  .sidebar-section.hide {
+    flex: 40%;
+    max-width: 40%;
+    margin-right: 0.5rem;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .sidebar-section {
+    width: 100%;
+    min-height: 0;
+    max-height: 0;
+    max-width: 100%;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .sidebar-section.hide {
+    margin-top: 2rem;
+    position: relative;
+    height: fit-content;
+    flex: none;
+    max-height: 300vh;
+    max-width: 100%;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .sidebar-holder {
+    max-height: 0;
+    height: fit-content;
+    overflow: hidden;
+    max-width: 100%;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .sidebar-section.hide .sidebar-holder {
+    max-height: 200vh;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .sidebar {
+    position: relative;
+    height: fit-content;
+    max-height: fit-content;
+    width: 100vw;
+    min-height: 0;
+    overflow: hidden;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .sidebar-tree {
+    margin-left: 0rem;
+    max-height: 0;
+    transition: all 0.5s ease-out;
+    -webkit-transition: all 0.5s ease-out;
+  }
+  .sidebar-section.hide .sidebar-tree {
+    max-height: 200vh;
+    transition: all 0.5s ease-out;
+    -webkit-transition: all 0.5s ease-out;
+  }
+}
+
+/* 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/assets/css/projects.css b/static/assets/css/projects.css
deleted file mode 100644
index b9ae172..0000000
--- a/static/assets/css/projects.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.projects-section .card .card-header {
-  background-color: #f9fafc;
-  padding: 0.7rem;
-  padding-bottom: 0rem;
-}
-
-.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;
-}
-
-/* ============= 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) {
-  .projects-section .btn {
-    margin-top: 0.3125rem;
-  }
-}
diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css
deleted file mode 100644
index ee969d0..0000000
--- a/static/assets/css/recent-posts.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.recent-posts-section .container{
-  padding-top: 1rem;
-}
-
-.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;
-}
diff --git a/static/assets/css/about.css b/static/assets/css/sections/about.css
index 96ce207..1bcdcfa 100644
--- a/static/assets/css/about.css
+++ b/static/assets/css/sections/about.css
@@ -347,9 +347,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -359,6 +359,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -367,9 +371,24 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
+  .about-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) {
+}
+
+/* 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/assets/css/achievements.css b/static/assets/css/sections/achievements.css
index 083ea74..f0a5b76 100644
--- a/static/assets/css/achievements.css
+++ b/static/assets/css/sections/achievements.css
@@ -126,9 +126,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -138,6 +138,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -146,6 +150,13 @@
 /* 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) */
@@ -155,3 +166,15 @@
     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/assets/css/experiences.css b/static/assets/css/sections/experiences.css
index 977a28e..43b2e32 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/sections/experiences.css
@@ -15,8 +15,8 @@
   color: #3c4858;
 }
 
-.experiences-section .designation{
- font-weight: 600;
+.experiences-section .designation {
+  font-weight: 600;
 }
 
 .circle {
@@ -91,9 +91,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -103,6 +103,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -111,6 +115,9 @@
 /* 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) */
@@ -118,14 +125,13 @@
 @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%;
@@ -138,7 +144,7 @@
     left: -56%;
     top: -50%;
   }
-  
+
   .top-right {
     left: 56%;
     top: -50%;
@@ -151,7 +157,7 @@
     left: -64%;
     top: -50%;
   }
-  
+
   .top-right {
     left: 64%;
     top: -50%;
diff --git a/static/assets/css/home.css b/static/assets/css/sections/home.css
index 78c0373..5d3d5c0 100644
--- a/static/assets/css/home.css
+++ b/static/assets/css/sections/home.css
@@ -75,9 +75,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -87,6 +87,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -116,3 +120,15 @@
     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/assets/css/sections/projects.css b/static/assets/css/sections/projects.css
new file mode 100644
index 0000000..13359ba
--- /dev/null
+++ b/static/assets/css/sections/projects.css
@@ -0,0 +1,113 @@
+.projects-section .card .card-header {
+  background-color: #f9fafc;
+  padding: 0.7rem;
+  padding-bottom: 0rem;
+}
+
+.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;
+}
+
+/* ============= 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/assets/css/sections/recent-posts.css b/static/assets/css/sections/recent-posts.css
new file mode 100644
index 0000000..bd6faed
--- /dev/null
+++ b/static/assets/css/sections/recent-posts.css
@@ -0,0 +1,82 @@
+.recent-posts-section .container {
+  padding-top: 1rem;
+}
+
+.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/assets/css/skills.css b/static/assets/css/sections/skills.css
index 532d8ea..2e43d6c 100644
--- a/static/assets/css/skills.css
+++ b/static/assets/css/sections/skills.css
@@ -22,9 +22,9 @@
 
 /* ============= Device specific fixes ======= */
 
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
 
 /* Extra large devices (large desktops, 1200px and up) */
 
@@ -34,6 +34,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -42,9 +46,28 @@
 /* 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: 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) {
+}
+
+/* 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/assets/css/single.css b/static/assets/css/single.css
index 747684d..fce8afe 100644
--- a/static/assets/css/single.css
+++ b/static/assets/css/single.css
@@ -1,12 +1,93 @@
 body {
   background-color: #e5e9f2;
+  position: relative;
 }
 .read-area {
   background-color: #f9fafc;
 }
 
 .wrapper {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  justify-content: space-between;
+  position: relative;
+}
+
+.content-section {
+  flex: 60%;
+  order: 2;
+  /* background-color: lightseagreen; */
+  padding: 0;
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.content {
+  background: #e5e9f2;
+}
+.toc-section {
+  flex: 20%;
+  order: 3;
+  max-width: 20%;
+  /* background-color: lightpink; */
+  transition: all ease-out 0.5s;
+  -webkit-transition: all ease-out 0.5s;
+}
+
+.toc-holder {
+  position: sticky;
+  top: 4.5rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #f9fafc;
+  margin-right: 0.5rem;
+  max-height: 100vh;
+  /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
+}
+
+.toc {
+  position: relative;
+  padding-top: 0px;
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
+}
+
+.toc nav {
+  padding-top: 0px;
+  margin-top: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
+}
+
+.toc ul {
+  padding-left: 0.5rem;
+  width: 100%;
+}
+
+.toc .nav-link {
   padding: 0;
+  padding-left: 0.5rem;
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
+  color: #1c2d41;
+}
+
+.toc .nav-link:hover,
+.toc .nav-link:focus,
+.toc .nav-link.active {
+  padding-left: 1rem;
+  padding-right: 0.5rem;
+  background-color: #248aaa;
+  color: #f9f9f9;
+  transition: all ease-out 0.3s;
+  -webkit-transition: all ease-out 0.3s;
 }
 
 .hero-area {
@@ -132,25 +213,25 @@ pre {
   margin: 5px;
 }
 
-pre>code {
+pre > code {
   padding: 10px !important;
 }
 
-a.header-anchor{
+a.header-anchor {
   text-decoration: none;
   color: #1c2d41;
 }
 
-a.header-anchor i{
+a.header-anchor i {
   font-size: 10pt;
   color: #3c4858;
   display: none;
   margin-left: 0.5rem;
 }
-a.header-anchor:hover i{
+a.header-anchor:hover i {
   display: inline-block;
 }
-a.header-anchor code{
+a.header-anchor code {
   color: #e83e8c;
 }
 
@@ -158,13 +239,13 @@ a.header-anchor code{
   display: none;
 }
 
-ul > ol,
-ol > ul,
-ul > ul,
-ol > ol,
-li > ol,
-li > ul {
-  padding-inline-start: 25px;
+.content ul > ol,
+.content ol > ul,
+.content ul > ul,
+.content ol > ol,
+.content li > ol,
+.content li > ul {
+  padding-inline-start: 1rem;
 }
 
 kbd {
@@ -226,29 +307,239 @@ mark {
   padding: 10px;
 }
 
-.btn-improve-page{
+.btn-improve-page {
   text-align: right;
 }
 
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .content-section {
+    flex: 65%;
+  }
+  .content-section .container {
+    max-width: 100%;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .content-section {
+    padding: 0;
+    flex: 60%;
+    order: 2;
+    overflow: hidden;
+  }
+  .content {
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
+  }
+
+  .toc-section {
+    order: 3;
+    flex: 0%;
+    max-width: 0%;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+  .toc-section.hide {
+    flex: 40%;
+    max-width: 40%;
+    margin-left: 0.5rem;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+
+  .toc-holder {
+    top: 3rem;
+  }
+
+  .navbar-toggler {
+    display: block;
+  }
+
+  .hero-area {
+    height: 300px;
+    margin-top: 1rem;
+  }
+
+  .page-content {
+    padding: 0px;
+  }
+
+  pre {
+    margin: 0px;
+  }
+  code {
+    padding: 0px;
+  }
+
+  .btn-improve-page {
+    margin-right: 1rem;
+  }
+
+  #disqus_thread,
+  .dsq-brlink {
+    padding: 5px;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
 @media only screen and (max-width: 768px) {
   .wrapper {
     padding-left: 0px;
     padding-right: 0px;
+  }
+
+  .content-section {
+    padding: 0;
+    flex: 60%;
+    order: 2;
+    overflow: hidden;
+  }
+  .content {
     overflow: hidden;
   }
   .container {
     max-width: 100%;
   }
+
+  .toc-section {
+    order: 3;
+    flex: 0%;
+    max-width: 0%;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+  .toc-section.hide {
+    flex: 40%;
+    max-width: 40%;
+    margin-left: 0.5rem;
+    transition: all ease-out 0.3s;
+    -webkit-transition: all ease-out 0.3s;
+  }
+
+  .toc-holder {
+    top: 3rem;
+  }
+
+  .navbar-toggler {
+    display: block;
+  }
+
+  .hero-area {
+    height: 300px;
+    margin-top: 1rem;
+  }
+
+  .page-content {
+    padding: 0px;
+  }
+
+  pre {
+    margin: 0px;
+  }
+  code {
+    padding: 0px;
+  }
+
+  .btn-improve-page {
+    margin-right: 1rem;
+  }
+
+  #disqus_thread,
+  .dsq-brlink {
+    padding: 5px;
+  }
 }
+
+/* Small devices (landscape phones, 576px and up) */
+
 @media only screen and (max-width: 576px) {
   .wrapper {
     padding: 0px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .content-section {
+    padding: 0;
+    flex: 100%;
+    order: 3;
+  }
+
+  .toc-section {
+    order: 2;
+    width: 100%;
+    height: 0;
+    max-height: 0;
+    max-width: 100%;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .toc-section.hide {
+    margin-top: 2.5rem;
+    position: relative;
+    /* height: fit-content; */
+    flex: 100%;
+    height: fit-content;
+    max-height: 200vh;
+    max-width: 100%;
+    margin-left: 0;
+    padding-right: 0;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .toc-holder {
+    max-height: 0;
+    margin-right: 0;
+    overflow: hidden;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+  .toc-section.hide .toc-holder {
+    max-height: 200vh;
+    transition: all ease-out 0.5s;
+    -webkit-transition: all ease-out 0.5s;
+  }
+
+  .navbar-toggler {
+    display: block;
   }
 
   .hero-area {
     height: 200px;
+    margin-top: 1rem;
   }
 
+  .hero-area.hide {
+    margin-top: 1rem;
+  }
   .page-content {
     padding: 0px;
   }
@@ -277,3 +568,15 @@ mark {
     padding: 5px;
   }
 }
+
+/* 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/assets/css/style.css b/static/assets/css/style.css
index d9209ef..3776d67 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -1,2 +1,46 @@
-/* Add custom css styling here to override the theme */
-  
-\ No newline at end of file
+/* This is empty CSS file intended to be overwritten by user's custom CSS file */
+
+/* ============= 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) {
+}
+
+/* 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/assets/js/home.js b/static/assets/js/home.js
index cf800d2..5ad0bf2 100644
--- a/static/assets/js/home.js
+++ b/static/assets/js/home.js
@@ -43,30 +43,6 @@ var projectCards;
       }
     }
 
-    // ================= 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++) {
@@ -263,14 +239,14 @@ var projectCards;
     }
     function twoColumnRow(gallery, entries, i) {
       let entry1 = document.createElement("div");
-      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.classList.add("col-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.classList.add("col-6", "m-0", "p-0");
       entry2.appendChild(entries[i].cloneNode(true));
       entry2.children[0].classList.add("img-type-1");
       gallery.appendChild(entry2);
@@ -279,7 +255,7 @@ var projectCards;
 
     function singleColumnRow(gallery, entries, i) {
       let entry1 = document.createElement("div");
-      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.classList.add("col-12", "m-0", "p-0");
       entry1.appendChild(entries[i].cloneNode(true));
       entry1.children[0].classList.add("img-type-1");
       gallery.appendChild(entry1);
diff --git a/static/assets/js/list.js b/static/assets/js/list.js
index 5ca2b52..2cfafc3 100644
--- a/static/assets/js/list.js
+++ b/static/assets/js/list.js
@@ -1,7 +1,5 @@
 "use strict";
 
-var filterizd;
-
 var isMobile = false, isTablet = false, isLaptop = false;
 (function ($) {
   jQuery(document).ready(function () {
@@ -25,7 +23,7 @@ var isMobile = false, isTablet = false, isLaptop = false;
     // ======= Adjust height of the post cards =============
     function adjustPostCardsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let postCardHolder = document.getElementById("post-cards");
+        let postCardHolder = document.getElementById("post-card-holder");
         if (postCardHolder == null ){
           return
         }
@@ -42,69 +40,5 @@ var isMobile = false, isTablet = false, isLaptop = false;
       }
     }
     adjustPostCardsHeight();
-
-    // ============= Sidebar Tree ================
-    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);
-}
diff --git a/static/assets/js/main.js b/static/assets/js/main.js
new file mode 100644
index 0000000..d825d32
--- /dev/null
+++ b/static/assets/js/main.js
@@ -0,0 +1,122 @@
+"use strict";
+
+var projectCards;
+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();
+
+    // ================= Smooth Scroll ===================
+    function addSmoothScroll() {
+      // 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;
+
+          let offset = 60;
+          if (isMobile) {
+            offset = 760;
+          } else if (isTablet) {
+            offset = 60;
+          }
+          // 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 - offset
+          }, 800, function () {
+
+            // Add hash (#) to URL when done scrolling (default click behavior)
+            window.location.hash = hash - offset;
+          });
+        } // End if
+      });
+    }
+    addSmoothScroll();
+
+    // re-render custom functions on window resize
+    window.onresize = function () {
+      detectDevice();
+      addSmoothScroll();
+    };
+  });
+})(jQuery);
+
+
+// Toggle sidebar on click. Here, class "hide" open the sidebar
+function toggleSidebar() {
+  let sidebar = document.getElementById("sidebar-section");
+  if (sidebar == null) {
+    return
+  }
+  if (sidebar.classList.contains("hide")) {
+    sidebar.classList.remove("hide")
+  } else {
+    // if toc-section is open, then close it first
+    let toc = document.getElementById("toc-section");
+    if (toc != null && toc.classList.contains("hide")) {
+      toc.classList.remove("hide");
+    }
+    // add "hide" class
+    sidebar.classList.add("hide")
+    // if it is mobile device. then scroll to top.
+    if (isMobile && sidebar.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      if (document.getElementById("hero-area") != null) {
+        document.getElementById("hero-area").classList.toggle("hide");
+      }
+    }
+  }
+  if (document.getElementById("content-section") != null) {
+    document.getElementById("content-section").classList.toggle("hide");
+  }
+}
+
+// Toggle Table of Contents on click. Here, class "hide" open the toc
+function toggleTOC() {
+  let toc = document.getElementById("toc-section");
+  if (toc == null) {
+    return
+  }
+  if (toc.classList.contains("hide")) {
+    toc.classList.remove("hide");
+  } else {
+    // if sidebar-section is open, then close it first
+    let sidebar = document.getElementById("sidebar-section");
+    if (sidebar != null && sidebar.classList.contains("hide")) {
+      sidebar.classList.remove("hide");
+    }
+    // add "hide" class
+    toc.classList.add("hide")
+    // if it is mobile device. then scroll to top.
+    if (isMobile && toc.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
+  }
+  if (document.getElementById("hero-area") != null) {
+    document.getElementById("hero-area").classList.toggle("hide");
+  }
+}
+
diff --git a/static/assets/js/single.js b/static/assets/js/single.js
index 31c8ec2..0699dd2 100644
--- a/static/assets/js/single.js
+++ b/static/assets/js/single.js
@@ -36,5 +36,28 @@ var isMobile = false, isTablet = false, isLaptop = false;
       }
     }
 
+    // =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
+    // add "navbar" class to the "nav" element
+    let toc = document.getElementById("TableOfContents");
+    toc.classList.add("navbar");
+    // add "nav-pills" class to the "ul" elements
+    let elems = toc.getElementsByTagName("ul");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-pills");
+    }
+    // add "nav-item" class to the "li" elements
+    elems = toc.getElementsByTagName("li");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-item");
+      if (isMobile) {
+        elems[i].setAttribute("onclick", "toggleTOC()");
+      }
+    }
+    // add "nav-link" class to the "a" elements
+    elems = toc.getElementsByTagName("a");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-link");
+    }
+
   });
 })(jQuery);
author	Md. Emruz Hossain <hossainemruz@gmail.com>	2020-07-22 01:14:08 +0300
committer	GitHub <noreply@github.com>	2020-07-22 01:14:08 +0300
commit	fa4d47497403491cff184d226a5b2a07ad5dc081 (patch)
tree	9dd7afb7c54f83533361282e4ecd011d59cbecf2
parent	647578e88be55c5cbb2eda157e17242f56ee5630 (diff)