Update release-drafter

* Project card header is now can be clicked

* skill is card now having url to add on it's header

* urls added to some skills

* div class synced with original

* guthub button text synced with original

* text decoration removed

* remove next line in card header for text

* whole Skill Card now is under hyperlink

* hyperlink class separated from card

* removed text-decoration from .card class

* ProjectCard header hyperlink decoration removed

* call adjustSkillCardsHeight after page is loaded

* Add "#" in href field when respective URL is not provided

Co-authored-by: hossainemruz <emruz@appscode.com>

.github/release-drafter.yml

@@ -0,0 +1,33 @@
+name-template: 'v$RESOLVED_VERSION'
+tag-template: 'v$RESOLVED_VERSION'
+template: |
+  I am very excited to announce [Hugo](https://gohugo.io/) theme [Toha](https://themes.gohugo.io/toha/) **v$RESOLVED_VERSION**. This release incorporates some improvements and fixes. Please, read the release note and update your theme to enjoy the new changes.
+  
+  Thanks to $CONTRIBUTORS	for their valuable contribution in this release.
+  $CHANGES
+
+  This release note has been generated automatically by [Release Drafter](https://github.com/marketplace/actions/release-drafter).
+categories:
+  - title: 'Breaking Changes'
+    label: 'breaking-change'
+  - title: 'New Features & Enhancements'
+    labels:
+    - 'feature'
+    - 'enhancement'
+  - title: 'Bug Fixes'
+    labels:
+      - 'bug'
+      - 'bug-fix'
+
+version-resolver:
+  major:
+    labels:
+      - 'breaking'
+  minor:
+    labels:
+      - 'feature'
+      - 'enhancement'
+  patch:
+    labels:
+      - 'bug'
+      - 'bug-fix'

.github/workflows/draft-release.yml

@@ -0,0 +1,14 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -59,21 +59,69 @@ markup:
   goldmark:
     renderer:
       unsafe: true
+  tableOfContents:
+    startLevel: 2
+    endLevel: 6
+    ordered: false
 
 # Enable Google Analytics
-googleAnalytics: <your google analytics id>
+googleAnalytics: UA-XXXXXXXXX-X
 
 # Enable Disqus forum
-# optional
-disqusShortname: <your disqus short code>
+disqusShortname: does-not-exist
 
 # Enable global emoji support
 enableEmoji: true
 
 # Custom parameters
 params:
-  # Github Repo URL. This is used to add "Improve This Page" button
-  gitRepo: <your site's Github repo URL>
+  # copyright
+  copyright: © 2020 Copyright.
+
+  # background image of the landing page
+  background: "images/background.jpg"
+
+  # Provide logos for your site. The inverted logo will be used in the initial
+  # transparent navbar and the main logo will be used in the non-transparent navbar.
+  # It will be default to the theme logos if not provided.
+  logo:
+    main: /assets/images/main-logo.png
+    inverted: /assets/images/inverted-logo.png
+
+  # GitHub repo URL of your site
+  gitRepo: https://github.com/hossainemruz/toha-example-site
+
+  # 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:
+  - name: Notes
+    url: https://hossainnotes.netlify.app/docs/example/
+
+  # Provide newsletter configuration. This feature hasn't been implemented yet.
+  # Currently, you can just hide it from the footer.
+  newsletter:
+    enable: true
+
+  # 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:
+      email: "janedoe@example.com"
+      phone: "+0123456789"
+    # a summary of what you do
+    summary:
+    - I am a Developer
+    - I work with Go
+    - I love to work with some fun projects
 ```
 
 You can just copy the content for `config.yaml` files from `theme/toha/exampleSite/config.yaml`.
@@ -88,7 +136,7 @@ hugo server -w
 
 Don't panic if the generated site does not look like what have you seen in the demo. Now, you have to provide some data in `data` folder of your site.
 
-Follow the posts giving step by step instructions for configuring your data folder from [here](https://toha.netlify.app/posts/configuration/home-section/home-section/).
+Follow the posts giving step by step instructions for configuring your data folder from [here](https://toha.netlify.app/posts/configuration/home-section/).
 
 You can also follow the sample format given in `themes/toha/exampleSite/data` directory.
 
@@ -99,17 +147,108 @@ Here, are some handy shortcodes you can use with this theme.
 - [img](https://toha.netlify.app/posts/short-codes/img/)
 - [split](https://toha.netlify.app/posts/short-codes/split/)
 - [vs](https://toha.netlify.app/posts/short-codes/vs/)
+- [alert](https://toha.netlify.app/posts/short-codes/alert/)
+
+## Project Roadmap
+
+Here, are the current plan and progress of various components of this theme. The components will be prioritized based on users requests.
+
+### Sections
+
+- [x] **Home**
+  - [x] Configurable Background
+  - [x] Author Image
+  - [x] Greeting
+  - [x] Typing Carousel
+
+- [x] **About**
+  - [x] Name and Designation
+  - [x] Summary
+    - [x] Markdown Support
+  - [x] Social Links
+    - [x] Font Awesome Support
+  - [x] Resume Link
+  - [x] Soft Skills Indicator
+
+- [x] **Skills**
+  - [x] Skill Cards
+  - [x] Markdown Support
+
+- [x] **Experiences**
+  - [x] Designation
+  - [x] Timeline
+  - [x] Company Overview
+  - [x] Responsibilities
+
+- [ ] **Projects**
+  - [x] Category Filter
+  - [ ] Project Card
+    - [x] Overview
+      - [x] Markdown Support
+    - [x] Github Stars
+    - [x] External URL Support
+    - [ ] Technology Tags
+
+- [x] **Recent Posts**
+
+- [ ] **Publications**
+  - [ ] Category Filter
+  - [ ] Card
+  - [ ] Abstract
+  - [ ] Authors
+  - [ ] Tags
+  - [ ] Links
+  - [ ] Gallery
+
+- [ ] **Accomplishment / Courses**
+  - [ ] Overview
+  - [ ] Certificate
+
+- [x] **Achievements Gallery**
+  - [x] Image
+  - [x] Summary
+
+### List Page
+
+- [x] Post Cards
+- [x] Sidebar
+- [x] Pagination
+
+### Reading Page
+
+- [x] Hero Image
+- [x] Author Information
+- [x] Next & Previous Page Navigation
+- [x] `Improve This Page` Button
+- [x] Disqus Comment
+- [x] Option to navigate to list page
+
+### Tracking and Comments
+
+- [x] Google Analytics
+- [x] Disqus Comment
+
+### Shortcodes
+
+- [x] Image
+- [x] Split Page into Multiple Column
+- [x] Vertical space between two sections
+- [x] Alert
+- [ ] Figure & sub-figure
+- [ ] Tabs
 
 ## Contributing
 
-Contributions are welcomed and I will be happy to review. Just follow the following principles:
+You can contribute to this theme in various way. You can report a bug, file an feature request, send a PR, share your thoughts etc.
+
+Pull requests are most welcomed and I will be happy to review. Just follow the following principles:
 
 - Keep it simple.
 - Keep it consistent with the design.
 - Use as little dependency as possible.
 - Have patient.
 
-I am not a web developer. I just created this theme for my personal needs. So, it is reasonable to have some flaws in the codes. Feel free to open issues and PR acknowledging the problems.
+>I am not a web developer. I just created this theme for my personal needs. So, it is reasonable to have some flaws in the codes. Feel free to open issues and PR acknowledging the problems.
 
 ## Attribution
 

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
@@ -20,5 +24,50 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # Github Repo URL. This is used to add "Improve This Page" button
+  # copyright
+  copyright: © 2020 Copyright.
+
+  # background image of the landing page
+  background: "images/background.jpg"
+
+  # Provide logos for your site. The inverted logo will be used in the initial
+  # transparent navbar and the main logo will be used in the non-transparent navbar.
+  # It will be default to the theme logos if not provided.
+  logo:
+    main: /assets/images/main-logo.png
+    inverted: /assets/images/inverted-logo.png
+
+  # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
+
+  # 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:
+  - name: Notes
+    url: https://hossainnotes.netlify.app/docs/example/
+
+  # Provide newsletter configuration. This feature hasn't been implemented yet.
+  # Currently, you can just hide it from the footer.
+  newsletter:
+    enable: true
+
+  # 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:
+      email: "janedoe@example.com"
+      phone: "+0123456789"
+    # a summary of what you do
+    summary:
+    - I am a Developer
+    - I work with Go
+    - I love to work with some fun projects

exampleSite/data/achievements.yaml

@@ -1,14 +0,0 @@
-# Your achievements achievements
-achievements:
-  - title: Best Presenter
-    image: images/achievements/presenter.jpg
-    summary: Best presenter in 2020 XYZ conference.
-  - title: Champion
-    image: images/achievements/sport.jpg
-    summary: Champion in cycling inter-city cycling championship 2020.
-  - title: Graduation
-    image: images/achievements/graduation-cap.jpg
-    summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University.
-  - title: Award Winner
-    image: images/achievements/woman-winner.jpg
-    summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?

exampleSite/data/experiences.yaml

@@ -1,43 +0,0 @@
-# Your experiences
-experiences:
-  - designation: Software Engineer
-    company:
-      name: Example Co.
-      url: "https://www.example.com"
-      location: Dhaka Branch
-      # company overview
-      overview: Example Co. is a widely recognized company for cloud native development. It build tools for Kubernetes.
-    start: Nov 2017
-    # don't provide end date if you are currently working there. It will be replaced by "Present"
-    # end: Dec 2020
-    # give some points about what was your responsibilities at the company.
-    responsibilities:
-      - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases and cluster's resource definition.
-      - My another responsibilities.
-      - My more responsibilities.
-
-  - designation: Software Engineer
-    company:
-      name: PreExample Co.
-      url: "https://www.preexample.com"
-      location: Nowhere
-      overview: PreExample Co. is gateway company to enter into Example co. So, nothing special here.
-    start: March 2016
-    end: May 2017
-    responsibilities:
-      - Write lots of example codes.
-      - Read lots of examples.
-      - See lots of example videos.
-
-  - designation: Intern
-    company:
-      name: Intern Counting Company (ICC).
-      url: "https://www.intern.com"
-      location: Intern Land
-      overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineer.
-    start: Jun 2015
-    end: Jan 2016
-    responsibilities:
-      - Count lost of interns.
-      - Count more interns.
-      - Count myself as intern.

exampleSite/data/projects.yaml

@@ -1,54 +0,0 @@
-# filter buttons
-buttons:
-  - name: All
-    filter: "all"
-  - name: Professional
-    filter: "professional"
-  - name: Academic
-    filter: "academic"
-  - name: Hobby
-    filter: "hobby"
-
-# your projects
-projects:
-  - name: Kubernetes
-    logo: images/projects/kubernetes.png
-    role: Contributor
-    timeline: "March 2018 - Present"
-    repo: https://github.com/kubernetes/kubernetes # if your project is public repo on github, then provide this link. it will show star count.
-    #url: ""  # if your project is not a public repo but it has a website, or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
-    summary: Production-Grade Container Scheduling and Management .
-    tags: ["professional", "kubernetes", "cloud"]
-
-  - name: Tensorflow
-    logo: images/projects/tensorflow.png
-    role: Developer
-    timeline: "Jun 2018 - Present"
-    repo: https://github.com/tensorflow/tensorflow
-    #url: ""
-    summary: An Open Source Machine Learning Framework for Everyone.
-    tags: ["professional", "machine-learning","academic"]
-
-  - name: A sample academic paper
-    role: Team Lead
-    timeline: "Jan 2017 - Nov 2017"
-    url: "https://www.example.com"
-    summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
-    tags: ["academic","iot"]
-
-  - name: Nocode
-    logo: images/projects/no-code.png
-    role: Nothing
-    timeline: "Oct 2019 - Dec 2019"
-    repo: https://github.com/kelseyhightower/nocode
-    #url: ""
-    summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere.
-    tags: ["hobby", "fun"]
-
-  - name: Toha
-    logo: images/projects/toha.png
-    role: Owner
-    timeline: "Jun 2019 - Present"
-    repo: https://github.com/hossainemruz/toha
-    summary: A Hugo theme for personal portfolio.
-    tags: ["hobby","hugo","theme","professional"]

exampleSite/data/sections/about.yaml

@@ -1,3 +1,10 @@
+# section information
+section:
+  name: About
+  enable: true
+  weight: 1
+  showOnNavbar: true
+
 # your designation
 designation: Software Engineer
 # your company information
@@ -40,7 +47,7 @@ socialLinks:
 
 # your soft skills
 # give the percentage between 50 to 100 with 5 intervals.
-# currently supported color: blue, yellow, pink, green
+# currently supported colors: blue, yellow, pink, green, sky, orange
 softSkills:
 - name: Leadership
   percentage: 85
@@ -54,3 +61,16 @@ softSkills:
 - name: Hard Working
   percentage: 85
   color: green
+- name: Fast Learner
+  percentage: 85
+  color: sky
+- name: Problem Solving
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"

exampleSite/data/sections/achievements.yaml

@@ -0,0 +1,23 @@
+# section information
+section:
+  name: Achievements
+  enable: true
+  weight: 6
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your achievements achievements
+achievements:
+- title: Best Presenter
+  image: images/achievements/presenter.jpg
+  summary: Best presenter in the 2020 XYZ conference.
+- title: Champion
+  image: images/achievements/sport.jpg
+  summary: Champion in cycling inter-city cycling championship 2020.
+- title: Graduation
+  image: images/achievements/graduation-cap.jpg
+  summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University.
+- title: Award Winner
+  image: images/achievements/woman-winner.jpg
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?

exampleSite/data/sections/experiences.yaml

@@ -0,0 +1,63 @@
+# section information
+section:
+  name: Experiences
+  enable: true
+  weight: 3
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true 
+
+# Your experiences
+experiences:
+- company:
+    name: Example Co.
+    url: "https://www.example.com"
+    location: Dhaka Branch
+    # company overview
+    overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes.
+  positions:
+  - designation: Senior Software Engineer
+    start: Nov 2019
+    # don't provide end date if you are currently working there. It will be replaced by "Present"
+    # end: Dec 2020
+    # give some points about what was your responsibilities at the company.
+    responsibilities:
+    - Design and develop XYZ tool for ABC task
+    - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition.
+    - Lead backend team.
+
+  - designation: Junior Software Engineer
+    start: Nov 2017
+    end: Oct 2019
+    responsibilities:
+    - Implement and test xyz feature for abc tool.
+    - Support client for abc tool.
+    - Learn k,d,w technology for xyz.
+
+- company:
+    name: PreExample Co.
+    url: "https://www.preexample.com"
+    location: Nowhere
+    overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here.
+  positions:
+  - designation: Software Engineer
+    start: March 2016
+    end: May 2017
+    responsibilities:
+    - Write lots of example codes.
+    - Read lots of examples.
+    - See lots of example videos.
+
+- company:
+    name: Intern Counting Company (ICC).
+    url: "https://www.intern.com"
+    location: Intern Land
+    overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineers.
+  positions:
+  - designation: Intern
+    start: Jun 2015
+    end: Jan 2016
+    responsibilities:
+    - Count lost of interns.
+    - Count more interns.
+    - Count me as an intern.

exampleSite/data/sections/projects.yaml

@@ -0,0 +1,63 @@
+# section information
+section:
+  name: Projects
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# filter buttons
+buttons:
+- name: All
+  filter: "all"
+- name: Professional
+  filter: "professional"
+- name: Academic
+  filter: "academic"
+- name: Hobby
+  filter: "hobby"
+
+# your projects
+projects:
+- name: Kubernetes
+  logo: images/projects/kubernetes.png
+  role: Contributor
+  timeline: "March 2018 - Present"
+  repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count.
+  #url: ""  # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
+  summary: Production-Grade Container Scheduling and Management.
+  tags: ["professional", "kubernetes", "cloud"]
+
+- name: Tensorflow
+  logo: images/projects/tensorflow.png
+  role: Developer
+  timeline: "Jun 2018 - Present"
+  repo: https://github.com/tensorflow/tensorflow
+  #url: ""
+  summary: An Open Source Machine Learning Framework for Everyone.
+  tags: ["professional", "machine-learning","academic"]
+
+- name: A sample academic paper
+  role: Team Lead
+  timeline: "Jan 2017 - Nov 2017"
+  url: "https://www.example.com"
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
+  tags: ["academic","iot"]
+
+- name: Nocode
+  logo: images/projects/no-code.png
+  role: Nothing
+  timeline: "Oct 2019 - Dec 2019"
+  repo: https://github.com/kelseyhightower/nocode
+  #url: ""
+  summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere.
+  tags: ["hobby", "fun"]
+
+- name: Toha
+  logo: images/projects/toha.png
+  role: Owner
+  timeline: "Jun 2019 - Present"
+  repo: https://github.com/hossainemruz/toha
+  summary: A Hugo theme for personal portfolio.
+  tags: ["hobby","hugo","theme","professional"]

exampleSite/data/sections/recent-posts.yaml

@@ -0,0 +1,10 @@
+# section information
+section:
+  name: Recent Posts
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required

exampleSite/data/sections/skills.yaml

@@ -1,13 +1,24 @@
+# section information
+section:
+  name: Skills
+  enable: true
+  weight: 2
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
 # Your Skills.
-# Give a summary of you each skill in summary section.
+# Give a summary of you each skill in the summary section.
 skills:
 - name: Kubernetes
   icon: "images/skills/kubernetes.png"
   summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs."
+  url: "https://kubernetes.io/"
 
 - name: Go Development
   icon: "images/skills/go.png"
-  summary: "Using as main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  url: "https://golang.org/"
 
 - name: Cloud Computing
   icon: "images/skills/cloud.png"
@@ -16,18 +27,21 @@ skills:
 - name: Docker
   icon: "images/skills/docker.svg"
   summary: "Write most of the programs as dockerized container. Experienced with multi-stage, multi-arch build process."
+  url: "https://www.docker.com/"
 
 - name: Prometheus
   icon: "images/skills/prometheus.png"
   summary: "Capable of setup, configure Prometheus metrics. Experienced with PromQL, AlertManager. Also, experienced with writing metric exporters."
+  url: "https://prometheus.io/"
 
 - name: Linux
   icon: "images/skills/linux.png"
-  summary: "Using as main operating system. Capable of writing bash/shell scripts."
+  summary: "Using as the main operating system. Capable of writing bash/shell scripts."
 
 - name: Git
   icon: "images/skills/git.png"
-  summary: "Experienced with git based development. Mostly, use Github. Also have experience in working with GitLab."
+  summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab."
+  url: "https://git-scm.com/"
 
 - name: C++
   icon: "images/skills/c++.png"

exampleSite/data/site.yaml

@@ -1,40 +0,0 @@
-# background image of the landing page
-background: "images/background.jpg"
-
-# some information about you
-author:
-  name: "Jane Doe"
-  image: "images/avatar.png"
-  # give your some contact information. they will be used in the footer
-  contactInfo:
-    email: "janedoe@example.com"
-    phone: "+0123456789"
-  # a summary of what you do
-  summary:
-  - I am a Developer
-  - I work with Go
-  - I love to work with some fun projects
-
-# Menus of the home page
-menus:
-- name: Home
-  url: "#home"
-  weight: 1
-- name: About
-  url: "#about"
-  weight: 2
-- name: Skills
-  url: "#skills"
-  weight: 3
-- name: Experiences
-  url: "#experiences"
-  weight: 4
-- name: Projects
-  url: "#projects"
-  weight: 5
-- name: Recent Posts
-  url: "#recent-posts"
-  weight: 6
-- name: Achievements
-  url: "#achievements"
-  weight: 7

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" }}

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 ------------>

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) }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ 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 }}
 
 {{ 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 }}
-        </div>
-      </ul>
-    </div>
-  </div>
+<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" }}

layouts/_default/single.html

@@ -4,79 +4,92 @@
   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) }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ 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 }}
 
 {{ define "content" }}
-<div class="container p-0 read-area">
-  <!--Hero Area-->
-  <div class="hero-area col-sm-12" style='background-image: url({{ 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>
+<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>
-    {{ end }}
-
-    <!---Next and Previous Navigator -->
-  <hr />
-  <div class="row next-prev-navigator">
-    {{ $currentPage := . }}
-    {{ range .Site.RegularPages.ByDate }}
-      {{ if eq .RelPermalink  $currentPage.RelPermalink }}
-        {{ if .Next }}
-        <div class="col-md-6 previous-article">
-          <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
-            <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
-            <br />
-            <span>{{ .Next.Title }}</span>
-          </a>
+  
+      <!--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>
-        {{ end }}
-        {{ if .Prev }}
-        <div class="{{ if .Next }}col-md-6{{ else }}col-md-12{{ end }} next-article">
-          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
-            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
-            <br />
-            <span>{{ .Prev.Title }}</span>
-          </a>
+  
+        <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 }}
-    {{ end }}
+      </div>
+    </div>
   </div>
-  <hr />
-  <!-- Add Disqus forum  -->
-  {{ if .Site.DisqusShortname }}
-      {{ partial "disqus.html" . }}
-  {{ end }}
-</div>
+</section>
 {{ end }}
 
+{{ 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 }}
+  </section>
+{{ end }}
 
 {{ define "scripts" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

layouts/index.html

@@ -6,43 +6,48 @@
     {{- 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 }}
         {{ template "_internal/google_analytics_async.html" . }}
     {{ end }}
   </head>
-  <body data-spy="scroll" data-target="#top-navbar" data-offset="50">
+  <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 ABOUT SECTION --------------->
-    {{- partial "about.html" . -}}
-
-    <!--- ADD SKILLS SECTION -------------->
-    {{- partial "skills.html" . -}}
-
-    <!--- ADD EXPERIENCE SECTION ----------->
-    {{- partial "experiences.html" . -}}
-
-    <!--- ADD PROJECT SECTION -------------->
-    {{- partial "projects.html" . -}}
-
-    <!--- ADD RECENT-POSTS SECTION --------->
-    {{- partial "recent-posts.html" . -}}
-
-    <!--- ADD ACHIEVEMENT SECTION ---------->
-    {{- partial "achievements.html" . -}}
+    <!--- ADD OPTIONAL SECTIONS ----------->
+    {{ if .Site.Data.sections }}
+      {{ $background:= "bg-white"}}
+      {{ range sort .Site.Data.sections "section.weight" }}
+        {{ if .section.enable }}
+          <div class="container-fluid section-holder d-flex {{ $background }}">
+            {{ if .section.template }}
+              {{- partial .section.template . -}}
+            {{ else }}
+              {{- partial (printf "sections/%s.html" (replace (lower .section.name) " " "-")) . -}}
+            {{ end }}
+          </div>
+          <!--- alter background color for next section --->
+          {{ if eq $background "bg-white" }}
+            {{ $background = "bg-dimmed" }}
+          {{ else }}
+            {{ $background = "bg-white" }}
+          {{end}}
+        {{ end }}
+      {{ end }}
+    {{ end }}
 
     <!--- ADD FOOTER ----------------------->
     {{- partial "footer.html" . -}}
@@ -54,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>

layouts/partials/about.html

@@ -1,41 +0,0 @@
-<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
-  <div class="container">
-    <div class="row pt-sm-2 pt-md-4 align-self-center">
-      {{ if .Site.Data.about }}
-        <!-- summery -->
-        <div class="col-md-6">
-          <h3 class="p-1">{{ .Site.Data.site.author.name }}</h3>
-          <h5 class="p-1">
-            {{ .Site.Data.about.designation }} at
-            <a href="{{ .Site.Data.about.company.url }}"
-              >{{ .Site.Data.about.company.name }}</a
-            >
-          </h5>
-          <p class="p-1 text-justify">
-            {{ .Site.Data.about.summary | markdownify }}
-          </p>
-          <div class="text-container ml-auto">
-            <ul class="social-link d-flex">
-              {{ range .Site.Data.about.socialLinks }}
-              <li>
-                <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-              </li>
-              {{ end }}
-            </ul>
-          </div>
-          <a href="{{ .Site.Data.about.resume }}" target="#"
-            ><button class="btn btn-dark">My Resume</button></a
-          >
-        </div>
-        <!-- soft skills circular-progressbar -->
-        <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
-          <div class="row">
-            {{ range .Site.Data.about.softSkills }}
-              {{ partial "progress/soft-skills" . }}
-            {{ end }}
-          </div>
-        </div>
-      {{ end }}
-    </div>
-  </div>
-</div>

layouts/partials/achievements.html

@@ -1,16 +0,0 @@
-<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
-  {{ if .Site.Data.achievements }}
-    <h1 class="text-center">Achievements</h1>
-
-    <div class="container">
-      <div class="row" id="gallery">
-      </div>
-    </div>
-    <!-- achievements-holder holds achievement-entry -->
-    <div class="d-none" id="achievements-holder">
-      {{ range .Site.Data.achievements.achievements }}
-        {{ partial "misc/achievement.html" . }}
-      {{ end }}
-    </div>
-  {{ end }}
-</div>

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">
@@ -6,7 +6,7 @@
       </div>
       <div class="card-body">
         <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summery">{{ .Summary }}</p>
+        <p class="card-text post-summary">{{ .Summary }}</p>
       </div>
       <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>

layouts/partials/cards/project.html

@@ -1,21 +1,23 @@
 <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">
     <div class="card">
-      <div class="card-header">
-        <div class="d-flex">
-          {{ if .logo }}
-          <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
-          {{ end }}
-          <h5 class="card-title mb-0">{{ .name }}</h5>
+      <a class="card-header" href="{{ if .repo }}{{ .repo }}{{ else if .url }}{{ .url }}{{ else }}#{{ end }}">
+        <div>
+          <div class="d-flex">
+            {{ if .logo }}
+            <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
+            {{ end }}
+            <h5 class="card-title mb-0">{{ .name }}</h5>
+          </div>
+          <div class="sub-title">
+            <span>{{ .role }}</span>
+            <span>{{ .timeline }}</span>
+          </div>
         </div>
-        <div class="sub-title">
-          <span>{{ .role }}</span>
-          <span>{{ .timeline }}</span>
-        </div>
-      </div>
+      </a>
       <div class="card-body text-justify pt-1 pb-1">
         <p>{{ .summary | markdownify }}</p>
         <span class="float-right">

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">
@@ -8,7 +8,7 @@
       </div>
       <div class="card-body">
         <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summery"> {{ .Summary }}</p>
+        <p class="card-text post-summary"> {{ .Summary }}</p>
       </div>
       <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>

layouts/partials/cards/skill.html

@@ -1,15 +1,15 @@
-<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
-  <div class="card">
-    <div class="card-head d-flex">
-      {{ if .icon }}
-      <img class="card-img-sm" src="{{ .icon }}" alt="{{ .name }}" />
-      {{ else }}
-      <i class="fas fas fa-tools"></i>
-      {{ end }}
-      <h4 class="card-title">{{ .name }}</h4>
+<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
+  <a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}#{{ end }}">
+    <div class="card">
+      <div class="card-head d-flex">
+        {{ if .icon }}
+        <img class="card-img-xs" src="{{ .icon }}" alt="{{ .name }}" />
+        {{ end }}
+        <h5 class="card-title">{{ .name }}</h5>
+      </div>
+      <div class="card-body">
+        <p class="card-text">{{ .summary | markdownify }}</p>
+      </div>
     </div>
-    <div class="card-body">
-      <p class="card-text">{{ .summary | markdownify }}</p>
-    </div>
-  </div>
+  </a>
 </div>

layouts/partials/experiences.html

@@ -1,28 +0,0 @@
-<div class="container-fluid experiences bg-white anchor" id="experiences">
-  {{ if .Site.Data.experiences }}
-    <h1 class="text-center">Experiences</h1>
-
-    <div class="container timeline text-justify">
-      {{ $total:= len .Site.Data.experiences.experiences }}
-      {{ range $idx,$val:= .Site.Data.experiences.experiences }}
-        {{ if eq (mod $idx 2) 0 }}
-          <div class="row align-items-center  d-flex">
-            {{ partial "experiences/left-v-line.html" $idx }}
-            {{ partial "experiences/experience-info.html" $val }}
-          </div>
-          {{ if lt $idx (sub $total 1) }}
-            {{ partial "experiences/left-to-right-h-line.html" $idx }}
-          {{ end }}
-        {{else}}
-          <div class="row align-items-center justify-content-end d-flex">
-            {{ partial "experiences/experience-info.html" $val }}
-            {{ partial "experiences/right-v-line.html" $idx }}
-          </div>
-          {{ if lt $idx (sub $total 1) }}
-            {{ partial "experiences/right-to-left-h-line.html" $idx }}
-          {{ end }}
-        {{ end }}
-      {{ end }}
-    </div>
-  {{ end }}
-</div>

layouts/partials/experiences/experience-info.html

@@ -1,14 +0,0 @@
-<div class="col-10 col-lg-8">
-  <div class="experience-entry-heading">
-    <h5>{{ .designation }}</h5>
-    <h6><a href="{{ .company.url }}">{{ .company.name }}</a></h6>
-    <p class="text-muted">{{ .start }} - {{ if .end }} {{ .end }} {{ else }}Present{{ end }}, {{ .company.location }}</p>
-  </div>
-  <p>{{ .company.overview | markdownify }}</p>
-  <h6 class="text-muted">Responsibilities:</h6>
-  <ul class="justify-content-around">
-      {{ range .responsibilities }}
-        <li>{{ . | markdownify }}</li>
-      {{ end }}
-  </ul>
-</div>

layouts/partials/experiences/right-to-left-h-line.html

@@ -1,11 +0,0 @@
-<div class="row horizontal-line">
-  <div class="col-1 col-lg-2 timeline-side-div">
-    <div class="corner"></div>
-  </div>
-  <div class="col-10 col-lg-8">
-    <hr />
-  </div>
-  <div class="col-1 col-lg-2 timeline-side-div">
-    <div class="corner"></div>
-  </div>
-</div>

layouts/partials/experiences/right-v-line.html

@@ -1,3 +0,0 @@
-<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
-  <div class="circle font-weight-bold">{{ add . 1 }}</div>
-</div>

layouts/partials/footer.html

@@ -3,24 +3,28 @@
     <div class="row text-left">
       <div class="col-md-4 col-sm-12">
         <h5>Navigation</h5>
-        {{ if .Site.Data.site }}
-          <ul>
-            {{ range .Site.Data.site.menus }}
+        {{ if .Site.Data.sections }}
+        <ul>
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if and (.section.enable) (.section.showOnNavbar)}}
             <li class="nav-item">
-              <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+              <a class="smooth-scroll" href="/#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
             </li>
             {{ end }}
-          </ul>
+          {{- end }}
+        </ul>
         {{ end }}
+
       </div>
       <div class="col-md-4 col-sm-12">
         <h5>Contact Me</h5>
         <ul>
-          {{ range $key,$value:=.Site.Data.site.author.contactInfo }}
+          {{ range $key,$value:=.Site.Params.author.contactInfo }}
           <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
           {{ end }}
         </ul>
       </div>
+      {{ if .Site.Params.newsletter.enable }}
       <div class="col-md-4 col-sm-12">
         <!-- <h5>Newsletter</h5> -->
         <p>Stay up to date with email notification</p>
@@ -40,6 +44,7 @@
           <button type="submit" class="btn btn-info">Submit</button>
         </form>
       </div>
+      {{ end }}
     </div>
   </div>
   <hr />
@@ -47,13 +52,13 @@
     <div class="row text-left">
       <div class="col-md-4">
         <a id="theme" href="https://github.com/hossainemruz/toha" target="#">
-          <img src="/assets/images/logo-inverted.png">
+          <img src="/assets/images/inverted-logo.png">
           Toha
         </a>
       </div>
-      <div class="col-md-4">© 2019 Copyright.</div>
-      <div class="col-md-4">
-        Powered by <a href="https://gohugo.io/">Hugo
+      <div class="col-md-4 text-center">{{ if .Site.Params.copyright }}{{ .Site.Params.copyright }}{{ else }}© 2020 Copyright.{{ end }}</div>
+      <div class="col-md-4 text-right">
+        <a id="hugo" href="https://gohugo.io/">Powered by Hugo
         <img
           src="/assets/images/hugo-logo-wide.svg"
           alt="Hugo Logo"

layouts/partials/header.html

@@ -4,13 +4,16 @@
 
 <!-- ============ 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/style.css" />
-<link rel="stylesheet" href="/assets/css/navbar.css" />
+<link rel="stylesheet" href="/assets/css/navigators/navbar.css" />
 
 <!--=================== cdn ==============================-->
-<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->
 <link rel="icon" type="image/png" href="/assets/images/favicon.png" />
 
+<!--================= custom style overrides =========================-->
+<link rel="stylesheet" href="/assets/css/style.css" />

layouts/partials/helpers/get-author-image.html

@@ -1,4 +1,7 @@
 {{ $authorImage:= "/assets/images/default-avatar.png"}}
+{{ if .Site.Data.site.author}}
+    {{ $authorImage = .Site.Data.site.author.image | relURL }}
+{{ end}}
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
     {{ with .Params.author }}
         {{ if .image }}

layouts/partials/helpers/get-author-name.html

@@ -1,4 +1,7 @@
 {{ $authorName:= "John Doe"}}
+{{ if .Site.Data.site.author}}
+    {{ $authorName = .Site.Data.site.author.name }}
+{{ end}}
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
     {{ with .Params.author }}
         {{ if .name }}

layouts/partials/helpers/get-categories.html

@@ -1,5 +0,0 @@
-{{ $categories:= ""}}
-{{ if  .Params.categories }}
-    {{ $categories = delimit .Params.categories "," }}
-{{ end }}
-{{ return $categories }}

layouts/partials/home.html

@@ -1,23 +0,0 @@
-<div class="container-fluid home" id="home">
-  <div
-    class="background container-fluid"
-    style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
-  ></div>
-  <div class="container content text-center">
-    <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
-      class="rounded-circle mx-auto d-block img-fluid"
-    />
-    <h1 class="greeting">Hi, I am {{ if .Site.Data.site.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }}
-    </h1>
-    <div class="typing-carousel">
-      <span id="ityped" class="ityped"></span>
-      <span class="ityped-cursor"></span>
-    </div>
-    <ul id="typing-carousel-data">
-      {{ range .Site.Data.site.author.summary }}
-      <li>{{ . }}</li>
-      {{ end }}
-    </ul>
-    <a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
-  </div>
-</div>

layouts/partials/misc/soft-skills.html

@@ -0,0 +1,25 @@
+<div class="col-6 col-lg-4 p-2">
+  {{ $predefinedColor:= true}}
+  {{ if hasPrefix .color "#"}}
+    {{ $predefinedColor = false }}
+  {{ end }}
+  <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
+    <span class="circular-progress-left">
+      <span
+        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+        {{ end }}
+      ></span>
+    </span>
+    <span class="circular-progress-right">
+      <span
+      class="circular-progress-bar"
+      {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+      {{ end }}
+      ></span>
+    </span>
+    <div class="circular-progress-value">{{ .name }}</div>
+  </div>
+</div>

layouts/partials/navbar-2.html

@@ -1,17 +0,0 @@
-<nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
-    <div class="container">
-      <a class="navbar-brand" href="{{ .baseURL }}">
-        <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>
-        </ul>
-      </div>
-    </div>
-</nav>

layouts/partials/navbar.html

@@ -1,31 +0,0 @@
-<nav class="navbar navbar-expand-lg 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">
-      {{- .Site.Title -}}
-    </a>
-    <button
-      class="navbar-toggler navbar-dark"
-      id="navbar-toggler"
-      ,type="button"
-      data-toggle="collapse"
-      data-target="#top-nav-items"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="top-nav-items">
-      <ul class="navbar-nav ml-auto">
-        {{ range .Site.Data.site.menus }}
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="{{ .url }}">{{ .name }}</a>
-        </li>
-        {{ end }}
-        <div class="dropdown-divider" id="top-navbar-divider"></div>
-        <li class="nav-item">
-          <a class="nav-link" id="blog-link" href="/posts">Blog</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>

layouts/partials/navigators/navbar-2.html

@@ -0,0 +1,30 @@
+<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
+  <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
+      <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="{{ $mainLogo }}">
+      {{- 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>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+</nav>

layouts/partials/navigators/navbar.html

@@ -0,0 +1,64 @@
+<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
+  <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
+    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
+      <img src="{{ $invertedLogo }}" id="logo">
+      {{- .Site.Title -}}
+    </a>
+    <button
+      class="navbar-toggler navbar-dark"
+      id="navbar-toggler"
+      type="button"
+      data-toggle="collapse"
+      data-target="#top-nav-items"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="top-nav-items">
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item">
+          <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" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+              </li>
+            {{ end }}
+          {{- end }}
+        {{- end }}
+        {{ $hasCustomMenus:= false }}
+        {{ if and site.Params.customMenus }}
+          {{ if gt (len site.Params.customMenus) 0 }}
+            {{ $hasCustomMenus = true }}
+          {{ end }}
+        {{ end }}
+        {{ if (or site.Params.enableBlogPost $hasCustomMenus) }}
+          <div class="dropdown-divider" id="top-navbar-divider"></div>
+        {{ end }}
+        {{ if site.Params.enableBlogPost }}
+          <li class="nav-item">
+            <a class="nav-link" id="blog-link" href="/posts">Posts</a>
+          </li>
+        {{ end }}
+        {{ range site.Params.customMenus }}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+</nav>

layouts/partials/navigators/next-prev-navigator.html

@@ -0,0 +1,35 @@
+<div class="row next-prev-navigator">
+{{ $currentPage := . }}
+{{ range (where site.RegularPages.ByDate "Type" "in" site.Params.mainSections )}}
+  {{ if eq .RelPermalink  $currentPage.RelPermalink }}
+    {{ if .Next }}
+      {{ if (in site.Params.mainSections .Next.Type) }}
+      <div class="col-md-6 previous-article">
+        <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
+          <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
+          <br />
+          <span>{{ .Next.Title }}</span>
+        </a>
+      </div>
+      {{ end }}
+    {{ end }}
+    {{ if .Prev }}
+      {{ if (in site.Params.mainSections .Prev.Type)  }}
+        {{ $columnWidth:="col-md-12" }}
+        {{ if .Next }}
+          {{ if (in site.Params.mainSections .Next.Type) }}
+              {{ $columnWidth = "col-md-6" }}
+          {{ end }}
+        {{ end}}
+        <div class="{{ $columnWidth }} next-article">
+          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
+            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
+            <br />
+            <span>{{ .Prev.Title }}</span>
+          </a>
+        </div>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+</div>

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 }}

layouts/partials/progress/soft-skills.html

@@ -1,13 +0,0 @@
-<div class="col-6 col-lg-4 p-2">
-  <div class="circular-progress {{ .color }}">
-    <span class="circular-progress-left">
-      <span
-        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
-      ></span>
-    </span>
-    <span class="circular-progress-right">
-      <span class="circular-progress-bar"></span>
-    </span>
-    <div class="circular-progress-value">{{ .name }}</div>
-  </div>
-</div>

layouts/partials/projects.html

@@ -1,21 +0,0 @@
-<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
-  {{ if .Site.Data.projects }}
-    <h1 class="text-center">Projects</h1>
-    <div class="container ml-auto text-center">
-      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
-        {{ range .Site.Data.projects.buttons }}
-        <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
-          {{ .name }}
-        </button>
-        {{ end }}
-      </div>
-    </div>
-    <div class="container filtr-projects">
-      <div class="row" id="project-card-holder">
-        {{ range .Site.Data.projects.projects }}
-          {{ partial "cards/project" . }}
-        {{ end }}
-      </div>
-    </div>
-  {{ end }}
-</div>

layouts/partials/recent-posts.html

@@ -1,10 +0,0 @@
-<div class="container-fluid recent-posts bg-white anchor pb-5" id="recent-posts">
-  <h1 class="text-center">Recent Posts</h1>
-  <div class="container">
-    <div class="row" id="recent-post-cards">
-      {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
-        {{ partial "cards/recent-post.html" . }}
-      {{ end }}
-    </div>
-  </div>
-</div>

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>

layouts/partials/sections.html

@@ -1,11 +0,0 @@
-{{ range . }}
-{{ if .Sections }}
-    <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a>
-    <ul>
-        {{ partial "sections.html" .Sections }}
-    </ul>
-    </li>
-    {{ else }}
-        <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
-    {{ end }}
-{{ end }}

layouts/partials/sections/about.html

@@ -0,0 +1,45 @@
+<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-sm-6">
+    <h3 class="p-1">{{ site.Params.author.name }}</h3>
+      {{ if .designation }}
+      <h5 class="p-1">
+        {{ .designation }}
+        {{ if .company }}
+          at <a href="{{ .company.url }}">{{ .company.name }}</a>
+        {{ end }}
+      </h5>
+      {{ end }}
+      <p class="p-1 text-justify">
+        {{ .summary | markdownify }}
+      </p>
+      <div class="text-container ml-auto">
+        <ul class="social-link d-flex">
+          {{ range .socialLinks }}
+          <li>
+            {{ if eq .name "Email" }}
+              <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ else }}
+              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ end }}
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+      {{ if .resume }}
+      <a href="{{ .resume }}" target="#"
+        ><button class="btn btn-dark">My Resume</button></a
+      >
+      {{ end }}
+    </div>
+    <!-- soft skills circular-progressbar -->
+    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
+      <div class="row">
+        {{ range .softSkills }}
+          {{ partial "misc/soft-skills.html" . }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/sections/achievements.html

@@ -0,0 +1,15 @@
+<div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+  <div class="container">
+    <div class="row" id="gallery">
+    </div>
+  </div>
+  <!-- achievements-holder holds achievement-entry -->
+  <div class="d-none" id="achievements-holder">
+    {{ range .achievements }}
+      {{ partial "sections/achievements/entry.html" . }}
+    {{ end }}
+  </div>
+</div>

layouts/partials/sections/achievements/entry.html

@@ -6,6 +6,6 @@
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
   <div class="caption hidden col-lg-6 text-left" id="caption">
     <h4>{{ .title }}</h4>
-    <p>{{ .summary }}</p>
+    <p>{{ .summary | markdownify }}</p>
   </div>
 </div>

layouts/partials/sections/experiences.html

@@ -0,0 +1,25 @@
+<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+
+  <div class="container timeline text-justify">
+   {{ $totalExperiences:= len .experiences }}
+   {{ range $index,$experience:= .experiences }}
+     {{ if eq (mod $index 2) 0 }}
+       <div class="row align-items-center  d-flex">
+         {{ 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 "sections/experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/vertical-line.html" $index }}
+       </div>
+     {{ end }}
+     {{ if lt $index (sub $totalExperiences 1) }}
+       {{ partial "sections/experiences/horizontal-line.html" $index }}
+     {{ end }}
+   {{ end }}
+  </div>
+</div>

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 }}

layouts/partials/sections/experiences/multiple-positions.html

@@ -0,0 +1,29 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        <!-- For multiple positions, give emphasis on the company name-->
+        <h5>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
+
+        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
+        {{ $oldestPosition := index (last 1 .positions) 0}}
+        {{ $mostRecentPosition := index (first 1 .positions) 0}}
+        <p class="text-muted">
+            {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+        <!-- Add company overview -->
+        <p>{{ .company.overview | markdownify }}</p>
+    </div>
+    <!-- Add the positions information -->
+    <div class="positions">
+    {{ range $index,$position:= .positions }}
+        <h6 class="designation">{{ $position.designation }}</h6>
+        <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p>
+        <!-- Add the responsibilities handled at this position -->
+        <ul class="justify-content-around">
+        {{ range $position.responsibilities }}
+            <li>{{ . | markdownify }}</li>
+        {{ end }}
+        </ul>
+    {{ end }}
+    </div>
+</div>

layouts/partials/sections/experiences/single-position.html

@@ -0,0 +1,21 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        {{ $position:= index .positions 0 }}
+        <!-- For single position, give emphasis on the designation-->
+        <h5>{{ $position.designation }}</h5>
+        <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
+        <!-- Add experience duration info -->
+        <p class="text-muted">{{ $position.start }} - {{ if $position.end }}{{ $position.end }}{{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+    </div>
+    <!-- Add company overview -->
+    <p>{{ .company.overview | markdownify }}</p>
+    <!-- Add the responsibilities handled at this position -->
+    <h6 class="text-muted">Responsibilities:</h6>
+    <ul class="justify-content-around">
+    {{ range $position.responsibilities }}
+        <li>{{ . | markdownify }}</li>
+    {{ end }}
+    </ul>
+</div>

layouts/partials/sections/home.html

@@ -0,0 +1,34 @@
+<div class="container-fluid home" id="home">
+  <div
+    class="background container-fluid"
+    style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
+  ></div>
+  <div class="container content text-center">
+    <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
+      class="rounded-circle mx-auto d-block img-fluid"
+    />
+    <h1 class="greeting">Hi, I am
+      {{ if .Site.Params.author.nickname }}
+        {{ .Site.Params.author.nickname }}
+      {{ else if .Site.Params.author.name }}
+        {{ .Site.Params.author.name }}
+      {{ else }}
+        Jane Doe
+      {{ end }}
+    </h1>
+    <div class="typing-carousel">
+      <span id="ityped" class="ityped"></span>
+      <span class="ityped-cursor"></span>
+    </div>
+    <ul id="typing-carousel-data">
+      {{ range .Site.Params.author.summary }}
+      <li>{{ . }}</li>
+      {{ end }}
+    </ul>
+    {{ if .Site.Data.sections }}
+      {{ range first 1 (where (sort .Site.Data.sections "section.weight") ".section.enable" true) }}
+        <a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
+      {{ end }}
+    {{ end }}
+  </div>
+</div>

layouts/partials/sections/projects.html

@@ -0,0 +1,21 @@
+<div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+  <div class="container ml-auto text-center">
+    <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
+    </div>
+  </div>
+  <div class="container filtr-projects">
+    <div class="row" id="project-card-holder">
+      {{ range .projects }}
+        {{ partial "cards/project" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

layouts/partials/sections/recent-posts.html

@@ -0,0 +1,12 @@
+<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+  <div class="container">
+    <div class="row" id="recent-post-cards">
+      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+        {{ partial "cards/recent-post.html" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

layouts/partials/sections/skills.html

@@ -0,0 +1,12 @@
+<div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+  <div class="container d-flex-block">
+    <div class="row" id="primary-skills">
+      {{ range .skills }}
+        {{ partial "cards/skill.html" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

layouts/partials/skills.html

@@ -1,13 +0,0 @@
-<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
-  {{ if .Site.Data.skills }}
-    <h1 class="text-center">Skills</h1>
-
-    <div class="container d-flex-block">
-      <div class="row" id="primary-skills">
-        {{ range .Site.Data.skills.skills }}
-          {{ partial "cards/skill.html" . }}
-        {{ end }}
-      </div>
-    </div>
-  {{ end }}
-</div>

layouts/shortcodes/alert.html

@@ -0,0 +1,3 @@
+<div class="alert alert-{{ .Get "type"}}">
+    <strong>{{.Inner | markdownify }}</strong>
+</div>

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) {
+}

static/assets/css/list.css

@@ -3,199 +3,55 @@
   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;
-  font-weight: 700;
-  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-card-holder {
+  margin-top: 32px;
+  margin-left: auto;
+  padding: 0;
+  display: flex;
+  flex-flow: wrap;
 }
 
-.post-cards {
-  margin: 32px;
+.post-card-holder .post-card {
+  width: calc(100% / 3);
+  display: inline-flex;
 }
 
-.post-cards .filtr-item {
-  width: 23rem !important;
-}
-
-.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;
 }
 
-.post-summery {
+.post-summary {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -206,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;
 }
@@ -228,60 +84,71 @@ 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%;
+    max-width: 85%;
   }
-  .content-cards {
-    padding-left: 0px;
-  }
-  .post-cards {
-    margin-left: 15px;
-  }
-  .post-cards .filtr-item {
-    width: 22rem !important;
-    padding: 3px;
+  .post-card-holder .post-card {
+    width: calc(100% / 5);
   }
 }
 
-@media only screen and (max-width: 768px) {
-  .content {
-    width: 100vw;
-    padding-left: 15px;
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+  .content-cards {
+    padding-left: 0px;
   }
-  .content.overley {
-    width: 60vw;
-    padding-left: 3px;
+  .post-card-holder {
+    margin-left: 0px;
+  }
+  .post-card-holder .post-card {
+    width: calc(100% / 3);
+  }
+}
+
+@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 {
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
   }
   .navbar-toggler {
     display: block;
   }
 
-  .sidebar {
-    width: 0;
-  }
-  .sidebar nav {
-    display: none;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
-  }
-  .sidebar.hide {
-    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;
-  }
-
-  .sidebar.hide .sidebar-tree {
-    margin-left: 1.5rem;
-    transition: all 0.3s ease-out;
+  #toc-toggler {
+    visibility: hidden;
   }
 
   .content-cards {
@@ -290,85 +157,154 @@ 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: calc(100% / 3);
   }
 
-  .post-cards .card {
-    max-width: 47vw !important;
-  }
-
-  .content.overley .post-cards .filtr-item {
-    margin: 10px;
-    width: 55vw !important;
-  }
-
-  .content.overley .post-cards .card {
-    max-width: 55vw !important;
+  .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;
+  }
+
+  #toc-toggler {
+    visibility: hidden;
+  }
+
+  .content-cards {
+    padding-top: 20px;
+    width: 100%;
+    padding-left: 0px;
+  }
+
+  .post-card-holder {
+    margin: 0;
+    margin-top: 1.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    position: relative;
+  }
+
+  .post-card-holder .post-card {
+    width: 50%;
+  }
+
+  .content-section.hide .post-card-holder .post-card {
+    width: 100%;
+  }
+}
+
+/* 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;
+    padding-bottom: 0.5rem;
+  }
+
+  .content {
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
+  }
+  .navbar-toggler {
+    display: block;
+  }
+
+  #toc-toggler {
+    visibility: hidden;
+  }
+
+  .content-cards {
+    padding-top: 20px;
+    width: 100%;
+    padding-left: 0px;
+  }
+
+  .post-card-holder {
+    margin: 0;
+    margin-top: 1.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    position: relative;
+  }
+
+  .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 {
-    display: block;
+    padding-left: 0px;
+    padding-right: 0px;
+    flex-flow: column;
+    overflow: hidden;
+  }
+  .content-section {
+    flex: 100%;
+    max-width: 100%;
+    padding-left: 0;
+    width: 100%;
   }
 
-  #search-box {
-    width: 85vw;
-    height: 35px;
-    padding-left: 5px;
-    margin-top: 30px;
-  }
   .content {
-    width: 100vw;
-    left: 0;
-    display: block;
-    padding-left: 2vw;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
   }
 
-  .content.overley {
-    width: 100vw;
-    left: 0;
-    padding-left: 2vw;
+  .content-section.hide .content {
+    margin-top: 0;
+    padding-top: 0;
   }
 
-  .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;
-  }
-
-  .sidebar-tree {
-    position: relative;
-  }
-
-  .sidebar.hide {
-    position: relative;
-    z-index: 1001;
-    width: 100vw;
-    max-height: 100vh;
-    overflow: hidden;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .sidebar-tree {
-    margin-left: 1.5rem;
-  }
-
-  .sidebar.hide .sidebar-tree {
-    margin-left: 1.5rem;
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
+  #toc-toggler {
+    visibility: hidden;
   }
 
   .content-cards {
@@ -378,41 +314,34 @@ a.focused {
     -webkit-transition: all ease-out 0.5s;
   }
 
-  .content.overley .content-cards {
-    padding-top: 0px;
-    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-cards .card {
-    max-width: 90vw !important;
-  }
-
-  .content.overley .post-cards .filtr-item {
-    margin: 0px;
-    width: 95vw !important;
-  }
-
-  .content.overley .post-cards .card {
-    max-width: 95vw !important;
+  .post-card-holder .post-card {
+    margin-left: 1%;
+    margin-right: 1%;
+    width: 98%;
   }
 }
+
+/* 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) {
+}

static/assets/css/main.css

@@ -0,0 +1,295 @@
+/* ========= Colors ============
+Heading:     #1C2D41
+Paragraph:   #3C4858
+Iconography: #8392A5
+Secondary:   #C0CCDA
+Dirty Snow:  #E5E9F2
+Snow:        #F9FAFC
+
+Magenta: #7551E9
+Orange:  #FF7D51
+Pink:    #ED63D2
+Green:   #2DCA73
+Yellow:  #FFC212
+*/
+
+body {
+  background-color: #f9fafc;
+  font-family: "Muli";
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #1c2d41;
+}
+
+strong {
+  color: #1c2d41 !important;
+}
+
+p {
+  color: #3c4858;
+}
+
+a {
+  color: #248aaa;
+}
+
+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;
+  color: #e5e9f2;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.btn-dark:hover,
+.btn-dark:focus {
+  background-color: #248aaa;
+  border-color: #248aaa;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+}
+
+.btn-outline-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.bg-white {
+  background-color: #f9fafc !important;
+}
+
+.bg-dimmed {
+  background-color: #e5e9f2;
+}
+
+.anchor {
+  padding-top: 3.5rem;
+}
+
+img.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.left {
+  display: block;
+  margin-right: auto;
+}
+
+img.right {
+  display: block;
+  margin-left: auto;
+}
+
+.card {
+  box-shadow: none;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  overflow: hidden;
+}
+
+.card-img-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.card-img-xs {
+  width: 24px;
+  height: 24px;
+}
+
+.card:hover,
+.card:focus {
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  border: 1px solid #fff;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.card .card-head {
+  height: 172px;
+  object-fit: cover;
+  overflow: hidden;
+}
+
+.card-img-top {
+  transition: all 0.3s ease-out !important;
+  -webkit-transition: all 0.3s ease-out !important;
+}
+
+.card:hover .card-head .card-img-top,
+.card:focus .card-head .card-img-top {
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+}
+
+.card-body {
+  text-align: justify;
+}
+
+.sub-title {
+  color: #c0ccda;
+  font-size: 10pt;
+}
+
+/* --- FOOTER START --- */
+
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+}
+
+.footer h5 {
+  color: #c0ccda;
+}
+.footer a {
+  color: #8392a5;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.footer a:hover {
+  margin-left: 5px;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+.footer ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer li {
+  margin-top: 5px;
+}
+
+.footer hr {
+  background-color: #8392a5;
+}
+
+.footer p:first-child {
+  color: #c0ccda;
+}
+
+.footer input {
+  background-color: #c0ccda;
+}
+
+.footer input:focus {
+  background-color: #e5e9f2;
+}
+
+.footer #theme {
+  color: #c0ccda;
+}
+
+.footer #theme img {
+  width: 32px;
+}
+
+.footer #hugo:hover {
+  margin-right: 5px;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+}
+
+/* --- FOOTER END ---- */
+
+/* ============= 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) {
+  .skills-section .container,
+  .projects-section .container {
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
+
+  .section-holder {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .skills-section,
+  .projects-section,
+  .recent-posts-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) {
+}

static/assets/css/navigators/navbar.css

@@ -20,7 +20,7 @@
 
 .initial-navbar .navbar-brand {
   color: #c0ccda;
-  font-weight: 800;
+  font-weight: 600;
 }
 
 .initial-navbar li a {
@@ -57,7 +57,7 @@
 
 .final-navbar .navbar-brand {
   color: #1c2d41;
-  font-weight: 800;
+  font-weight: 600;
 }
 
 .final-navbar li a {
@@ -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,19 +136,92 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .top-navbar .container {
+    max-width: 100%;
+  }
+
+  .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) {
+  .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) */
 
 @media only screen and (max-width: 768px) {
-  .top-navbar .container {
-    max-width: 100%;
-    padding: 0;
-  }
-
   .initial-navbar .navbar-nav .active,
   .initial-navbar li a:hover {
     color: #2098d1;
@@ -190,3 +263,15 @@
 
 @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) {
+}

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) {
+}

static/assets/css/projects.css

@@ -1,62 +0,0 @@
-.projects .card .card-header {
-  padding: 10px;
-}
-
-.projects .card .card-img-xs {
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-bottom: 5px;
-  margin-right: 10px;
-}
-
-.card .card-header .sub-title span:nth-child(1) {
-  float: left;
-}
-.card .card-header .sub-title span:nth-child(2) {
-  float: right;
-}
-
-.projects .card .card-header {
-  background-color: #f9fafc;
-}
-
-.projects .card .card-header .sub-title {
-  color: #8392a5;
-  margin-top: 5px;
-}
-
-.filtr-projects {
-  padding: 15px !important;
-}
-
-/* ============= 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 .btn {
-    margin-top: 5px;
-  }
-}

static/assets/css/recent-posts.css

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

static/assets/css/sections/about.css

@@ -100,7 +100,7 @@
 }
 
 .circular-progress.yellow .circular-progress-bar {
-  border-color: #ffc212;
+  border-color: #eebb4d;
 }
 
 .circular-progress.pink .circular-progress-bar {
@@ -111,6 +111,14 @@
   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;
 }
@@ -339,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) */
 
@@ -351,6 +359,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -359,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) {
+}

static/assets/css/sections/achievements.css

@@ -1,4 +1,4 @@
-.achievements .container {
+.achievements-section .container {
   padding-top: 0.5rem;
 }
 
@@ -123,3 +123,58 @@
 #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) {
+}

static/assets/css/sections/experiences.css

@@ -1,25 +1,21 @@
-.experiences {
+.experiences-section {
   padding-bottom: 1rem;
 }
 
-.experiences .timeline {
+.experiences-section .timeline {
   margin-top: 1.5rem !important;
 }
 
-.text-muted {
-  color: #e5e9f2;
-}
-
-.experiences ul {
+.experiences-section ul {
   padding-left: 1rem;
 }
 
-.experiences ul > li {
+.experiences-section ul > li {
   margin-left: 0;
   color: #3c4858;
 }
 
-.experience-entry-heading h5 {
+.experiences-section .designation {
   font-weight: 600;
 }
 
@@ -95,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) */
 
@@ -107,6 +103,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -115,9 +115,51 @@
 /* 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%;
+  }
+}

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) {
+}

static/assets/css/sections/projects.css

@@ -0,0 +1,114 @@
+.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;
+}
+
+/* ============= 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) {
+}

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) {
+}

static/assets/css/sections/skills.css

@@ -0,0 +1,77 @@
+.skills-section .card .card-head {
+  background-color: #f9fafc;
+  height: fit-content;
+  padding: 0.7rem;
+  padding-bottom: 0rem;
+  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
+}
+
+.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;
+}
+
+.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: 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) {
+}

static/assets/css/single.css

@@ -1,12 +1,94 @@
 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%;
+  max-width: 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 +214,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 +240,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 +308,243 @@ mark {
   padding: 10px;
 }
 
-.btn-improve-page{
+.btn-improve-page {
   text-align: right;
 }
 
-@media only screen and (max-width: 768px) {
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .content-section {
+    flex: 65%;
+    max-width: 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%;
+    max-width: 100%;
+    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%;
+    max-width: 100%;
+    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%;
+    max-width: 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 +573,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) {
+}

static/assets/css/skills.css

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

static/assets/css/style.css

@@ -1,228 +1,10 @@
-/* ========= Colors ============
-Heading:     #1C2D41
-Paragraph:   #3C4858
-Iconography: #8392A5
-Secondary:   #C0CCDA
-Dirty Snow:  #E5E9F2
-Snow:        #F9FAFC
-
-Magenta: #7551E9
-Orange:  #FF7D51
-Pink:    #ED63D2
-Green:   #2DCA73
-Yellow:  #FFC212
-*/
-
-body {
-  background-color: #f9fafc;
-  font-family: "Muli";
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  color: #1c2d41;
-}
-
-p {
-  color: #3c4858;
-}
-
-a {
-  color: #248aaa;
-}
-
-a:hover {
-  color: #207089;
-}
-
-.btn-dark {
-  background-color: #3c4858;
-  border-color: #3c4858;
-  color: #e5e9f2;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.btn-dark:hover,
-.btn-dark:focus {
-  background-color: #248aaa;
-  border-color: #248aaa;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.btn-outline-info {
-  color: #2098d1 !important;
-  border-color: #2098d1 !important;
-}
-
-.btn-outline-info:hover {
-  background-color: #2098d1 !important;
-  color: #e5e9f2 !important;
-}
-
-.btn-info {
-  background-color: #248aaa !important;
-  color: #e5e9f2 !important;
-}
-
-.btn-info:hover {
-  background-color: #2098d1 !important;
-  color: #e5e9f2 !important;
-}
-
-.bg-white {
-  background-color: #f9fafc !important;
-}
-
-.bg-dimmed {
-  background-color: #e5e9f2;
-}
-
-.anchor {
-  padding-top: 3.5rem;
-}
-
-img.center{
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-img.left{
-  display: block;
-  margin-right: auto;
-}
-
-img.right{
-  display: block;
-  margin-left: auto;
-}
-
-.card {
-  box-shadow: none;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-  overflow: hidden;
-}
-
-.card-img-sm {
-  width: 32px;
-  height: 32px;
-}
-
-.card-img-xs {
-  width: 24px;
-  height: 24px;
-}
-
-.card:hover,
-.card:focus {
-  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-  border: 1px solid #fff;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.card .card-head {
-  height: 172px;
-  object-fit: cover;
-  overflow: hidden;
-}
-
-.card-img-top {
-  transition: all 0.3s ease-out !important;
-  -webkit-transition: all 0.3s ease-out !important;
-}
-
-.card:hover .card-head .card-img-top,
-.card:focus .card-head .card-img-top {
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-  transform: scale(1.2);
-  -webkit-transform: scale(1.2);
-}
-
-.card-title {
-  font-weight: 600;
-}
-
-.card-body {
-  text-align: justify;
-}
-
-.sub-title {
-  color: #c0ccda;
-  font-size: 10pt;
-}
-
-/* --- FOOTER START --- */
-
-.footer {
-  color: #8392a5 !important;
-  background-color: #1c2d41;
-  position: relative;
-  z-index: 9999;
-}
-
-.footer h5 {
-  color: #c0ccda;
-}
-.footer a {
-  color: #8392a5;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.footer a:hover {
-  margin-left: 5px;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.footer ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-.footer li {
-  margin-top: 5px;
-}
-
-.footer hr {
-  background-color: #8392a5;
-}
-
-.footer p:first-child {
-  color: #c0ccda;
-}
-
-.footer input {
-  background-color: #c0ccda;
-}
-
-.footer input:focus {
-  background-color: #e5e9f2;
-}
-
-.footer #theme {
-  color: #c0ccda;
-}
-
-.footer #theme img {
-  width: 32px;
-}
-
-/* --- FOOTER END ---- */
+/* This is empty CSS file intended to be overwritten by user's custom CSS file */
 
 /* ============= 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 +14,10 @@ img.right{
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -245,12 +31,16 @@ img.right{
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  .container-fluid.about,
-  .container-fluid.skills,
-  .container-fluid.projects,
-  .container-fluid.recent-posts,
-  .container-fluid.achievements {
-    padding-left: 5px;
-    padding-right: 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) {
 }

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++) {
@@ -93,20 +69,22 @@ var projectCards;
         // primary skills
         var skillCards = document.getElementById("primary-skills");
         if (skillCards != null) {
-          var el = skillCards.children;
+          var cardElems = skillCards.getElementsByClassName("card");
           var maxHeight = 0;
-          for (let i = 0; i < el.length; i++) {
-            if (el[i].children[0].clientHeight > maxHeight) {
-              maxHeight = el[i].children[0].clientHeight;
+          for (let i = 0; i < cardElems.length; i++) {
+            if (cardElems.item(i).clientHeight > maxHeight) {
+              maxHeight = cardElems.item(i).clientHeight;
             }
           }
-          for (let i = 0; i < el.length; i++) {
-            el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+          for (let i = 0; i < cardElems.length; i++) {
+            cardElems.item(i).setAttribute("style", "min-height: " + maxHeight + "px;");
           }
         }
       }
     }
-    adjustSkillCardsHeight();
+    $(window).on("load", function () {
+      adjustSkillCardsHeight();
+    });
 
     // ================== Project cards =====================
     // Add click action on project category selector buttons
@@ -145,15 +123,18 @@ var projectCards;
 
     function adjustRecentPostsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("recent-post-cards").children;
-        let maxHeight = 0;
-        for (let i = 0; i < el.length; i++) {
-          if (el[i].children[1].clientHeight > maxHeight) {
-            maxHeight = el[i].children[1].clientHeight;
+        let recentPostCards = document.getElementById("recent-post-cards")
+        if (recentPostCards != null) {
+          let el = recentPostCards.children;
+          let maxHeight = 0;
+          for (let i = 0; i < el.length; i++) {
+            if (el[i].children[1].clientHeight > maxHeight) {
+              maxHeight = el[i].children[1].clientHeight;
+            }
+          }
+          for (let i = 0; i < el.length; i++) {
+            el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;")
           }
-        }
-        for (let i = 0; i < el.length; i++) {
-          el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;")
         }
       }
     }
@@ -260,14 +241,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);
@@ -276,7 +257,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);

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);
-}

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");
+  }
+}
+

static/assets/js/navbar.js

@@ -15,7 +15,9 @@
         $('#navbar-toggler').removeClass('navbar-dark');
         $('#navbar-toggler').addClass('navbar-light');
 
-        $('#logo').attr("src","assets/images/logo.png");
+        // get the main logo from hidden img tag
+        let mainLogo = document.getElementById("main-logo").getAttribute("src");
+        $('#logo').attr("src", mainLogo);
       } else {
         $('#top-navbar').removeClass('final-navbar shadow');
         $('#top-navbar').addClass('initial-navbar');
@@ -23,7 +25,9 @@
         $('#navbar-toggler').removeClass('navbar-light');
         $('#navbar-toggler').addClass('navbar-dark');
 
-        $('#logo').attr("src","assets/images/logo-inverted.png");
+        // get the inverted logo from hidden img tag
+        let invertedLogo = document.getElementById("inverted-logo").getAttribute("src");
+        $('#logo').attr("src", invertedLogo);
       }
     });
   });

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);