310 changed files with 5694 additions and 26547 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,3 +0,0 @@
-node_modules
-exampleSite/node_modules
-exampleSite/public
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -1,12 +0,0 @@
-env:
-  browser: true
-  es2021: true
-extends: 
-  - standard
-  - plugin:no-jquery/all
-  - prettier
-plugins:
-  - no-jquery
-parserOptions:
-  ecmaVersion: latest
-  sourceType: module
--- a/.github/.kodiak.toml
+++ b/.github/.kodiak.toml
@ -1,19 +0,0 @@
-
-# .kodiak.toml
-version = 1
-[merge]
-method = "squash" # default: "merge"
-delete_branch_on_merge = true # default: false
-optimistic_updates = true # default: true
-prioritize_ready_to_merge = true # default: false
-
-[merge.message]
-title = "pull_request_title" # default: "github_default"
-body = "github_default" # default: "github_default"
-strip_html_comments = true # default: false
-
-[update]
-always = true # default: false
-
-[approve]
-auto_approve_usernames = ["hossainemruz"]
--- a/.github/ISSUE_TEMPLATE/bug.md
+++ b/.github/ISSUE_TEMPLATE/bug.md
@ -1,37 +0,0 @@
---
-name: Bug
-about: File a bug report.
-title: 'bug'
---
-
-## Expected Behavior
-<!--- Tell us what should happen -->
-
-## Current Behavior
-<!--- Tell us what happens instead of the expected behavior -->
-
-## Possible Solution
-<!--- Not obligatory, but suggest a fix/reason for the bug, -->
-
-## Steps to Reproduce
-<!--- Provide a link to a live example, or an unambiguous set of steps to -->
-<!--- reproduce this bug. Include code to reproduce, if relevant -->
-1.
-2.
-3.
-4.
-
-### Screenshots
-<!--- Provide any screenshots or links to deployments -->
-
-### Browsers Affected
-<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Edge
- [ ] Safari 11
- [ ] Safari 10
- [ ] IE 11
-
-## Detailed Description
-<!--- Provide a detailed description of the change or addition you are proposing -->
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -1,30 +0,0 @@
---
-name: Feature Request
-about: File a Feature Request.
-title: 'Feature Request'
---
-
-<!---
-Before filing an issue, please review the following:
-  Existing Features: https://github.com/hugo-toha/toha#features
-  Project Roadmap: https://github.com/hugo-toha/toha#project-roadmap
-->
-
-### Describe the solution you'd like
-
-<!--
-  Provide a clear and concise description of what you want to happen.
-->
-
-### Describe alternatives you've considered
-
-<!--
-  Let us know about other solutions you've tried or researched.
-->
-
-### Additional context
-
-<!--
-  Is there anything else you can add about the proposal?
-  You might want to link to related issues here, if you haven't already.
-->
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@ -1,9 +0,0 @@
---
-name: Question
-about: Ask a general question.
---
-
-<!--- Use this template for general questions. For bug reports or feature requests, please use those templates -->
-
-### Question
-<!--- Insert your question here. Please provide as much detail as possible. -->
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,10 +0,0 @@
-### Issue
-<!--- Insert a link to the associated github issue here. -->
-
-### Description
-
-<!-- Insert details about what the changes being proposed are. -->
-
-### Test Evidence
-
-<!-- Provide screenshot evidence and/or testing steps to validate the proposed changes. -->
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,13 +0,0 @@
-# Update dependencies
-
-version: 2
-updates:
-# Update the Github Action  versions
- package-ecosystem: "github-actions"
-  directory: "/"
-  schedule:
-    interval: "daily"
-  labels:
-  - "dependencies"
-  - "automerge"
-  - "enhancement"
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@ -7,35 +7,27 @@ template: |
  $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: 'Translations'
-  label: 'translation'
-
- title: 'Bug Fixes'
-  labels:
-  - 'bug'
-  - 'bug-fix'
+  - 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-change'
-    - 'breaking'
+      - 'breaking'
  minor:
    labels:
-    - 'feature'
-    - 'enhancement'
-    - 'translation'
+      - 'feature'
+      - 'enhancement'
  patch:
    labels:
-    - 'bug'
-    - 'bug-fix'
+      - 'bug'
+      - 'bug-fix'
--- a/.github/workflows/autoprefixer.yml
+++ b/.github/workflows/autoprefixer.yml
@ -2,34 +2,34 @@ name: Autoprefixer
 on:
  push:
    branches:
-      - main
+      - master
 jobs:
  autoprefixer:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout to latest commit
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v2

      - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
        with:
-          node-version: "20.x"
+          node-version: "12.x"

      - name: Run autoprefixer
        run: |
-          npm install postcss postcss-cli autoprefixer --save-dev
+          npm install postcss-cli autoprefixer --save-dev
          npm run autoprefixer

      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@v3
        with:
          branch: autoprefixer
          branch-suffix: timestamp
          commit-message: add vendor specific css prefixes
-          title: "Update and run autoprefixer"
+          title: "Add vendor specific CSS prefixes"
          body: |
-            This PR runs [postcss/autoprefixer](https://github.com/postcss/autoprefixer) to update vendor specific CSS prefixes.
+            This PR adds vendor specific CSS prefixes using [postcss/autoprefixer](https://github.com/postcss/autoprefixer).

            >This PR has been created automatically by Github Action [peter-evans/create-pull-request](https://github.com/peter-evans/create-pull-request).
-          labels: "enhancement,automerge"
+          labels: enhancement
          reviewers: hossainemruz
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ main ]
-  schedule:
-    - cron: '19 16 * * 2'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4.2.2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v3
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
--- a/.github/workflows/draft-release.yml
+++ b/.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 }}
--- a/.github/workflows/enforce-lablel.yml
+++ b/.github/workflows/enforce-lablel.yml
@ -1,16 +0,0 @@
-name: Label Enforcer
-
-# Run action on pull request creation, reopening, or label changes
-on:
-  pull_request:
-    types: [opened, reopened, labeled, unlabeled]
-
-jobs:
-  # Ensure that PR has desired labels
-  enforce-label:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: yogevbd/enforce-label-action@2.2.2
-      with:
-        REQUIRED_LABELS_ANY: "automerge,breaking-change,bug-fix,enhancement,feature,translation"
-        REQUIRED_LABELS_ANY_DESCRIPTION: "The PR must have at least one these labels: ['automerge','breaking-change','bug-fix','enhancement','feature','translation']"
--- a/.github/workflows/merge-to-main.yml
+++ b/.github/workflows/merge-to-main.yml
@ -1,15 +0,0 @@
-name: Merge to main workflows
-# Run action on push in mater branch
-on:
-  push:
-    branches:
-    - main
-
-jobs:
-  update_release_draft:
-    runs-on: ubuntu-latest
-    steps:
-    # Create/Update release draft
-    - uses: release-drafter/release-drafter@v6.1.0
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@ -1,83 +0,0 @@
-name: PR Workflows
-
-# Run action on pull request event
-on: [pull_request]
-
-
-jobs:
-  # Build exampleSite
-  build:
-    runs-on: ubuntu-latest
-    steps:
-    # checkout to the commit that has been pushed
-    - uses: actions/checkout@v4.2.2
-
-    - name: Setup Node
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-
-    - name: Install node modules
-      run: npm install
-
-    - name: Setup Hugo
-      uses: peaceiris/actions-hugo@v3.0.0
-      with:
-        hugo-version: 'latest'
-        extended: true
-
-    - name: Build
-      run: |
-        cd exampleSite
-        hugo --minify
-
-  # Run linter
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4.2.2
-
-    - name: Setup Node
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-
-    - name: Install node modules
-      run: npm install
-
-    - name: Lint
-      run: |
-        npm run lint
-
-  lighthouse-check:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Waiting for Netlify Preview
-      uses: kamranayub/wait-for-netlify-action@v2.1.1
-      id: preview
-      with:
-        site_name: "toha-ci"
-        max_timeout: 300
-      env:
-        NETLIFY_TOKEN: ${{secrets.NETLIFY_TOKEN}}
-
-    - name: Run Lighthouse
-      uses: foo-software/lighthouse-check-action@v12.0.1
-      id: lighthouseCheck
-      with:
-        accessToken: ${{ secrets.LIGHTHOUSE_TOKEN }}
-        gitHubAccessToken: ${{secrets.GITHUB_TOKEN}}
-        emulatedFormFactor: 'all'
-        prCommentEnabled: true
-        prCommentSaveOld: false
-        timeout: 5
-        urls: "${{ steps.preview.outputs.url }},${{ steps.preview.outputs.url }}/posts/,${{ steps.preview.outputs.url }}/posts/markdown-sample/,${{ steps.preview.outputs.url }}/posts/shortcodes/"
-
-  # Check for any broken links
-  markdown-link-check:
-    runs-on: ubuntu-latest
-    steps:
-    # checkout to latest commit
-    - uses: actions/checkout@v4.2.2
-    # run markdown linter
-    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.17
--- a/.gitignore
+++ b/.gitignore
@ -1,7 +1,2 @@
 .vscode/
 node_modules/
-.DS_Store
-.history/
-resources/
-public/
-.hugo_build.lock
--- a/.prettierrc.yml
+++ b/.prettierrc.yml
@ -1,5 +0,0 @@
-printWidth: 100
-tabWidth: 2
-semi: false
-singleQuote: true
-trailingComma: "all"
--- a/.tool-versions
+++ b/.tool-versions
@ -1 +0,0 @@
-nodejs 18.12.1
--- a/README.md
+++ b/README.md
@ -1,282 +1,260 @@
-> [!IMPORTANT]
-> If you are migrating from v3 (`git submodule` based) theme to v4 (`hugo modules` based) theme, please read this [migration guide](https://toha-guides.netlify.app/posts/update-v3-to-v4/).
-
 # Toha

-[![Netlify Status](https://api.netlify.com/api/v1/badges/b1b93b02-f278-440b-ae1b-304e9f4c4ab5/deploy-status)](https://app.netlify.com/sites/toha/deploys)
-[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fhugo-toha%2Ftoha%2Fbadge%3Fref%3Dmain&style=flat)](https://actions-badge.atrox.dev/hugo-toha/toha/goto?ref=main)
-![Repository Size](https://img.shields.io/github/repo-size/hugo-toha/toha)
-![Lines of Codes](https://img.shields.io/tokei/lines/github.com/hugo-toha/toha)
-![Contributor](https://img.shields.io/github/contributors/hugo-toha/toha)
-![Latest Release](https://img.shields.io/github/v/release/hugo-toha/toha?include_prereleases)
-![Last Commit](https://img.shields.io/github/last-commit/hugo-toha/toha)
-![Open Issues](https://img.shields.io/github/issues/hugo-toha/toha?color=important)
-![Open Pull Requests](https://img.shields.io/github/issues-pr/hugo-toha/toha?color=yellowgreen)
-![License](https://img.shields.io/github/license/hugo-toha/toha)
-![Security Headers](https://img.shields.io/security-headers?url=https%3A%2F%2Fhugo-toha.github.io%2F)
-[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/b7cb60ab/hugo-toha.github.io)
-
 A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist design and responsiveness.

-![Thumbnail](https://raw.githubusercontent.com/hugo-toha/toha/main/images/screenshot.png)
+![Thumbnail](https://github.com/hossainemruz/toha/blob/master/images/tn.png)

- **Example Site:** [hugo-toha.github.io](https://hugo-toha.github.io)
- **Documentation:** [toha-guides.netlify.app](https://toha-guides.netlify.app/posts)
+Example Site: [Toha Example Site](https://toha.netlify.app)

 ## Features

 - Minimalist Design
 - Fully Responsive
- Multiple Language Support
- Carefully Designed Cards
- Experience Timeline
- Achievement Gallery
- Sidebar to Categorize the Posts
+- Carefully designed cards
+- Great Experience timeline
+- Achievement gallery
+- Sidebar to categorize posts
 - Short Codes
- Analytics Support
-  - GoatCounter
-  - counter.dev
-  - Google Analytics
-  - Matomo/Piwik
-  - [Umami](https://umami.is/)
- Comment Support
-  - [Disqus](https://disqus.com/)
-  - [Valine](https://valine.js.org/)
-  - [Uttarances](https://utteranc.es/)
-  - [Giscus](https://giscus.app/)
+- Google Analytics Support
+- Disqus Comment Support

-For more details about the features please visit [here](https://toha-guides.netlify.app/posts/features/).
-
-## Available Translations
-
- English
- বাংলা
- Français
- Indonesian
- Deutsch
- Español
- 简体中文
- 繁體中文
- हिन्दी
- Italiano
- 日本語
- 한국어
- русский
- suomi
- Tiếng Việt
- Azerbaijan
- Turkish
- Arabic (العربية)
- Português Europeu
- Català
- Português Brasileiro
- Nederlands
- Hebrew
-
-To know more about how to translate your site, please visit [here](https://toha-guides.netlify.app/posts/translation/). Follow, the data and post format from this [example site](https://hugo-toha.github.io).
-
-## Screenshots
-
-Here are few screenshots from the [example site](https://hugo-toha.github.io).
-
-##### Home Page Sections
-
-![Home Page Sections](https://raw.githubusercontent.com/hugo-toha/toha/main/images/about.png)
-
-##### List Page
-
-![List Page](https://raw.githubusercontent.com/hugo-toha/toha/main/images/list.png)
-
-##### Reading Page
-
-![Reading Page](https://raw.githubusercontent.com/hugo-toha/toha/main/images/single.png)
+For more details about the features please visit [here](https://toha.netlify.app/posts/features/features/).

 ## Requirements

- Hugo Version 0.128.0 (extended) or higher
- Go language 1.18 or higher (require for hugo modules)
- Node version v18.x or later and npm 8.x or later.
+- Hugo Version 0.68.0 or higher
+
+## Installation
+
+- Create your site if you haven't already
+
+```console
+hugo new site my-site -f=yaml
+cd my-site
+git init
+```
+
+- Add the theme as git sub-module
+
+```console
+git submodule add https://github.com/hossainemruz/toha.git themes/toha
+```
+
+>Don't use SSH URL of the theme during adding as git sub-module. Also, don't clone the theme in your `themes` directory using `git clone`. They don't work well with Github Action or Netlify.
+
+If you want to customize the theme templates, then fork it and use the fork as your theme.
+
+## Configuration
+
+Configure your `config.yaml` file of your site as below:
+
+```yaml
+baseURL: http://example.org/
+languageCode: en-us
+title: "Toha"
+theme: "toha"
+
+# Allow raw html in markdown file
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  tableOfContents:
+    startLevel: 2
+    endLevel: 6
+    ordered: false
+
+# Enable Google Analytics
+googleAnalytics: UA-XXXXXXXXX-X
+
+# Enable Disqus forum
+disqusShortname: does-not-exist
+
+# Enable global emoji support
+enableEmoji: true
+
+# Custom parameters
+params:
+  # Copyright Notice
+  copyright: © 2020 Copyright.
+
+  # Meta description for your site.  This will help the search engines to find your site.
+  description: Portfolio and personal blog of Jane Doe.
+
+  # 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"
+    # greeting message before your name. it will default to "Hi! I am" if not provided
+    greeting: "Hi, I am"
+    # 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`.
+
+If you want to customize the any of the CSS styles on your site, create a
+`static/assets/css/style.css` file and add any custom CSS there.

 ## Usage

-The easiest way to use this theme is to fork [hugo-toha.github.io](https://github.com/hugo-toha/hugo-toha.github.io) sample repo.Then change the configurations according to your need.
+Run your hugo site with this theme.

-If you want to start from scratch, then follow these steps:
-
-##### 1. Initialize Hugo module on you repo
-
-At first, initialize [Hugo modules](https://gohugo.io/hugo-modules/) in your repo. This will create a `go.mod` file.
-
-```bash
-hugo mod init github.com/<your username>/<your repo name>
-```
-
-##### 2. Add this theme as your module dependency
-
-Now, in your `hugo.yaml` file, add a `module` section.
-
-```yaml
-# Use Hugo modules to add theme
-module:
-  imports:
-  - path: github.com/hugo-toha/toha/v4
-```
-
-Check this sample [hugo.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/hugo.yaml) for further reference.
-
-##### 3. Update your module
-
-Now, run this command to load this theme as your module.
-
-```bash
-hugo mod tidy
-```
-
-#### Running Locally
-
-Now, you can run your hugo site locally with the following steps:
-
-##### 1. Generate node dependency configuration
-
-Now run the following command to generate node dependency configuration. This will create the a `package.json` file in you repo.
-
-```bash
-hugo mod npm pack
-```
-
-##### 2. Install dependencies
-
-Install the node dependencies using following command:
-```bash
-npm install
-```
-
-##### 3. Run your site
-
-Now, run you site locally using following command.
-
-```bash
+```console
 hugo server -w
 ```

-When you run your site for first time, it will start with the default parameters. It should look similar to the [example site](https://hugo-toha.github.io). However, it will not have any sections in the homepage as we haven't configured them yet. You can configure your site by following the guides from [here](https://toha-guides.netlify.app/posts/configuration/).
+When you first run your site, it will start with the default parameters. It should look similar to the [example site](https://toha.netlify.app) except it will not have any sections in the homepage. Those sections are added via some data files.
+
+You can configure your site by following the step by step guides from [here](https://toha.netlify.app/posts/configuration/).

 ## Shortcodes

 Here, are some handy shortcodes you can use with this theme.

- [Alert](https://toha-guides.netlify.app/posts/shortcodes/#alert)
- [Image](https://toha-guides.netlify.app/posts/shortcodes/#image)
- [Split](https://toha-guides.netlify.app/posts/shortcodes/#split)
- [Vertical Space](https://toha-guides.netlify.app/posts/shortcodes/#vertical-space)
- [Video](https://toha-guides.netlify.app/posts/shortcodes/#video)
- [Mermaid](https://hugo-toha.github.io/posts/shortcodes/#mermaid)
+- [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

-You can contribute to this theme in various ways. You can report a [bug](https://github.com/hugo-toha/toha/issues/new?template=bug.md), file an [feature request](https://github.com/hugo-toha/toha/issues/new?template=feature_request.md), send a PR, [share your thoughts](https://github.com/hugo-toha/toha/issues/new?template=question.md) etc.
+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 welcome and I will be happy to review. Just follow the following principles:
+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 few dependencies as possible.
- Have patience.
+- Use as little dependency as possible.
+- Have patient.

-> I am not a web developer. I have created this theme for my personal needs. So, it is reasonable to have some flaws in the codes. Feel free to open issues and PRs acknowledging the problems.
-
-## Local Development
-
-For local development, you can make changes in the theme submodule and test the changes against your own site or this [example site](https://github.com/hugo-toha/hugo-toha.github.io) locally.
-
-### Fork
-
-At first, fork [this repo](https://github.com/hugo-toha/toha). Then, follow the following steps to use the forked theme for local developments,
-
-#### Running the forked theme against the example site
-
-If your want to run your local development against this [example site](https://github.com/hugo-toha/hugo-toha.github.io), follow the following steps:
-
-```bash
-# go to exampleSite directory
-$ cd exampleSite
-# install hugo modules
-$ hugo mod tidy
-# install dependencies
-$ hugo mod npm pack
-$ npm install
-# run the example site locally
-$ hugo server -w
-```
-
-Now, you can make change in the theme and they will be reflected immediately on the running site. If you need to change any configuration, you can do that in the `hugo.yaml` file inside `exampleSite` folder. If you need to add any content or data, you can create the respective folder inside `exampleSite` directory and add your desired content or data there.
-
-#### Running the forked theme against your own site
-
-If you want to run your local development against your own site, follow the following steps:
-
-**Replace the theme module:**
-
-Open your site's `go.mod` file and replace the `github.com/hugo-toha/toha/v4` with your forked repo's path. For example, if your forked repo is `github.com/<your-github-user>/toha`, then replace the `github.com/hugo-toha/toha/v4` with `github.com/<your-github-user>/toha/v4`.
-
-```go
-module github.com/hugo-toha/hugo-toha.github.io
-
-go 1.19
-
-require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect
-
-replace(
-    github.com/hugo-toha/toha/v4 => github.com/<your-github-user>/toha/v4 <git branch>
-)
-```
-
-For interactive development, you can replace the theme with your locally cloned fork. For example, if you have cloned your fork in `/home/my-projects/toha`, then replace the `github.com/hugo-toha/toha/v4` with `/home/my-projects/toha`.
-
-```go
-module github.com/hugo-toha/hugo-toha.github.io
-
-go 1.19
-
-require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect
-
-replace(
-    github.com/hugo-toha/toha/v4 => /home/my-projects/toha
-)
-```
-
-**Update dependencies:**
-
-```bash
-# update hugo modules
-$ hugo mod tidy
-# install dependencies
-$ hugo mod npm pack
-$ npm install
-```
-
-**Run your site locally:**
-
-```bash
-$ hugo server -w
-```
-
-From there you can make changes to the source code of the theme while testing with your running Hugo site or the example site.
-
-### Open a PR
-
-When the changes look good, commit and push them to your fork.
-
-```bash
-# stage all the changes
-$ git add .
-# commit the changes with a meaning full commit message
-$ git commit -m "A meaningful commit message"
-# push the commit to your fork
-$ git push my-fork my-feature-branch
-```
-
-Then, open a PR against `main` branch of [hugo-toha/toha](https://github.com/hugo-toha/toha) from the `my-feature-branch` branch of your own fork.
+>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

--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -1,6 +1,6 @@
 ---
-hero: /images/background/sunrise.jpg
+hero: /assets/images/background/sunrise.jpg
 author:
    name: Md. Emruz Hossain
-    image: /images/profile-image.jpg
+    image: /assets/images/profile-image.jpg
 ---
--- a/assets/images/404.png
+++ b/assets/images/404.png
--- a/assets/images/404.svg
+++ b/assets/images/404.svg
--- a/assets/images/default-background.jpg
+++ b/assets/images/default-background.jpg
--- a/assets/images/default-hero.jpg
+++ b/assets/images/default-hero.jpg
--- a/assets/images/favicon.png
+++ b/assets/images/favicon.png
--- a/assets/images/hugo-logo.svg
+++ b/assets/images/hugo-logo.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-width="27" aria-label="Logo" viewBox="0 0 1493 391"><path fill="#ebb951" stroke="#fcd804" d="M1345.211 24.704l112.262 64.305a43 43 0 0 1 21.627 37.312v142.237a40 40 0 0 1-20.702 35.037l-120.886 66.584a42 42 0 0 1-41.216-.389l-106.242-61.155a57 57 0 0 1-28.564-49.4V138.71a64 64 0 0 1 31.172-54.939l98.01-58.564a54 54 0 0 1 54.54-.503z"/><path fill="#33ba91" stroke="#00a88a" d="M958.07 22.82l117.31 66.78a41 41 0 0 1 20.72 35.64v139.5a45 45 0 0 1-23.1 39.32L955.68 369.4a44 44 0 0 1-43.54-.41l-105.82-61.6a56 56 0 0 1-27.83-48.4V140.07a68 68 0 0 1 33.23-58.44l98.06-58.35a48 48 0 0 1 48.3-.46z"/><path fill="#0594cb" stroke="#0083c0" d="M575.26 20.97l117.23 68.9a40 40 0 0 1 19.73 34.27l.73 138.67a48 48 0 0 1-24.64 42.2l-115.13 64.11a45 45 0 0 1-44.53-.42l-105.83-61.6a55 55 0 0 1-27.33-47.53V136.52a63 63 0 0 1 29.87-53.59l99.3-61.4a49 49 0 0 1 50.6-.56z"/><path fill="#ff4088" stroke="#c9177e" d="M195.81 24.13l114.41 66.54a44 44 0 0 1 21.88 38.04v136.43a48 48 0 0 1-24.45 41.82L194.1 370.9a49 49 0 0 1-48.48-.23L41.05 310.48a53 53 0 0 1-26.56-45.93V135.08a55 55 0 0 1 26.1-46.8l102.8-63.46a51 51 0 0 1 52.42-.69z"/><path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/></svg>
--- a/assets/images/inverted-logo.png
+++ b/assets/images/inverted-logo.png
--- a/assets/images/main-logo.png
+++ b/assets/images/main-logo.png
--- a/assets/images/theme-logo.png
+++ b/assets/images/theme-logo.png
--- a/assets/jsconfig.json
+++ b/assets/jsconfig.json
@ -1,10 +0,0 @@
-{
- "compilerOptions": {
-  "baseUrl": ".",
-  "paths": {
-   "*": [
-    "*"
-   ]
-  }
- }
-}
--- a/assets/scripts/application.js
+++ b/assets/scripts/application.js
@ -1,11 +0,0 @@
-import 'popper.js'
-import 'bootstrap'
-import '@fortawesome/fontawesome-free/js/all'
-import feather from 'feather-icons'
-
-import './core'
-import './features'
-import './sections'
-import './pages'
-
-feather.replace();
--- a/assets/scripts/core/device.js
+++ b/assets/scripts/core/device.js
@ -1,36 +0,0 @@
-let deviceState = {
-  isMobile: false,
-  isTablet: false,
-  isLaptop: false
-}
-
-function detectDeviceState () {
-  if (window.innerWidth <= 425) {
-    deviceState = {
-      isMobile: true,
-      isTablet: false,
-      isLaptop: false
-    }
-  } else if (window.innerWidth <= 768) {
-    deviceState = {
-      isMobile: false,
-      isTablet: true,
-      isLaptop: false
-    }
-  } else {
-    deviceState = {
-      isMobile: false,
-      isTablet: false,
-      isLaptop: true
-    }
-  }
-}
-
-detectDeviceState()
-window.addEventListener('resize', detectDeviceState)
-
-// returns a copy of the device state
-// so other parts of code can't override this.
-export function getDeviceState () {
-  return { ...deviceState }
-}
--- a/assets/scripts/core/index.js
+++ b/assets/scripts/core/index.js
@ -1,2 +0,0 @@
-export * from './device'
-export * from './insertScript'
--- a/assets/scripts/core/insertScript.js
+++ b/assets/scripts/core/insertScript.js
@ -1,14 +0,0 @@
-export const insertScript = (id, src, onload) => {
-  // script is already inserted, do nothing
-  if (document.getElementById(id)) return
-
-  // insert script
-  const firstScriptTag = document.getElementsByTagName('script')[0]
-  const scriptTag = document.createElement('script')
-  scriptTag.id = id
-  scriptTag.onload = onload
-  scriptTag.src = src
-  scriptTag.defer = true
-  scriptTag.async = true
-  firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag)
-}
--- a/assets/scripts/core/theme-scheme.js
+++ b/assets/scripts/core/theme-scheme.js
@ -1,9 +0,0 @@
-let theme = localStorage.getItem('theme-scheme') || localStorage.getItem('darkmode:color-scheme') || 'light'
-if (theme === 'system') {
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    theme = 'dark'
-  } else {
-    theme = 'light'
-  }
-}
-document.documentElement.setAttribute('data-theme', theme)
--- a/assets/scripts/features/copyCode/copyCode.js
+++ b/assets/scripts/features/copyCode/copyCode.js
@ -1,22 +0,0 @@
-addCopyButtons(navigator.clipboard)
-
-function addCopyButtons(clipboard) {
-  document.querySelectorAll('pre > code').forEach(function (codeBlock) {
-    const button = document.createElement('button')
-    button.title = "Copy"
-    button.className = 'copy-code-button btn btn-sm'
-    button.innerHTML = "<i class='fa-regular fa-copy'></i>"
-
-    button.addEventListener('click', function () {
-      clipboard.writeText(codeBlock.innerText)
-    })
-
-    const pre = codeBlock.parentNode
-    if (pre.parentNode.classList.contains('highlight')) {
-      const highlight = pre.parentNode
-      highlight.parentNode.insertBefore(button, highlight)
-    } else {
-      pre.parentNode.insertBefore(button, pre)
-    }
-  })
-}
--- a/assets/scripts/features/copyCode/index.js
+++ b/assets/scripts/features/copyCode/index.js
@ -1 +0,0 @@
-import './copyCode'
--- a/assets/scripts/features/darkmode/index.js
+++ b/assets/scripts/features/darkmode/index.js
@ -1,70 +0,0 @@
-const PERSISTENCE_KEY = 'darkmode:color-scheme'
-
-window.addEventListener('load', async () => {
-  const menu = document.getElementById('themeMenu')
-  const $icon = document.getElementById('navbar-theme-icon-svg')
-  if (menu == null || $icon == null) return
-
-  const btns = menu.getElementsByTagName('a')
-  const iconMap = Array.from(btns).reduce((map, btn) => {
-    const $img = btn.getElementsByTagName('img')[0]
-    map[btn.dataset.scheme] = $img.src
-    return map
-  }, {})
-
-
-  function loadScheme() {
-    return localStorage.getItem(PERSISTENCE_KEY) || "system"
-  }
-
-  function saveScheme(scheme) {
-    localStorage.setItem(PERSISTENCE_KEY, scheme)
-  }
-
-  function getPreferredColorScheme() {
-    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    return isDarkMode ? "dark" : "light";
-  }
-
-  function setScheme(newScheme) {
-    let theme = newScheme
-    if (newScheme === 'system') {
-      theme = getPreferredColorScheme()
-    }
-    // set data-theme attribute on html tag
-    document.querySelector("html").dataset.theme = theme;
-
-    // update icon
-    $icon.src = iconMap[newScheme]
-
-    // save preference to local storage
-    saveScheme(newScheme)
-
-    setImages(theme)
-  }
-
-  setScheme(loadScheme())
-
-  Array.from(menu.getElementsByTagName('a')).forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const { scheme } = btn.dataset
-      setScheme(scheme)
-    })
-  })
-})
-
-function setImages(newScheme) {
-  const els = Array.from(document.getElementsByClassName('logo-holder'));
-  for (const el of els) {
-    const light = el.querySelector('.light-logo');
-    const dark = el.querySelector('.dark-logo');
-    if (newScheme === "dark" && dark !== null) {
-      if (light !== null) light.style.display = 'none'
-      dark.style.display = 'inline'
-    }
-    else {
-      if (light !== null) light.style.display = 'inline'
-      if (dark !== null) dark.style.display = 'none'
-    }
-  }
-}
--- a/assets/scripts/features/embedpdf/index.js
+++ b/assets/scripts/features/embedpdf/index.js
@ -1,165 +0,0 @@
-import { insertScript } from '../../core'
-
-const PDFJS_BUNDLE = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/build/pdf.min.js'
-const WORKER_BUNDLE = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/build/pdf.worker.min.js'
-
-class PDFViewer {
-  constructor (el) {
-    const {
-      url,
-      hidePaginator,
-      hideLoader,
-      scale,
-      pageNum
-    } = el.dataset
-
-    if (url == null) {
-      throw new Error('Cannot load PDF! Attribute `data-url` is not set.')
-    }
-
-    // props
-    this.url = url
-    this.hidePaginator = hidePaginator !== 'false'
-    this.hideLoader = hideLoader !== 'false'
-    this.scale = scale || 3
-
-    // initial state
-    this.pageNum = parseInt(pageNum, 10) || 1
-    this.loaded = false
-    this.pageRendering = false
-    this.pageNumPending = null
-
-    // DOM elements
-    this.canvas = el.getElementsByClassName('pdf-canvas')[0]
-    if (this.canvas == null) {
-      throw new Error('canvas element not found!')
-    };
-    this.paginator = el.getElementsByClassName('paginator')[0]
-    this.loadingWrapper = el.getElementsByClassName('loading-wrapper')[0]
-    this.next = el.getElementsByClassName('next')[0]
-    this.prev = el.getElementsByClassName('prev')[0]
-    this.curPage = el.getElementsByClassName('page-num')[0]
-    this.pageCount = el.getElementsByClassName('page-count')[0]
-
-    // context
-    this.ctx = this.canvas.getContext('2d')
-
-    // events
-    this.next.addEventListener('click', this.handleNextPage.bind(this))
-    this.prev.addEventListener('click', this.handlePrevPage.bind(this))
-
-    this.showPaginator()
-    this.showLoader()
-    this.loadPDF()
-  }
-
-  /**
-   * If we haven't disabled the loader, show loader and hide canvas
-   */
-  showLoader () {
-    if (this.hideLoader) return
-    this.loadingWrapper.style.display = 'flex'
-    this.canvas.style.display = 'none'
-  }
-
-  /**
-   * If we haven't disabled the paginator, show paginator
-   */
-  showPaginator () {
-    if (this.hidePaginator) return
-    this.paginator.style.display = 'block'
-  }
-
-  /**
-   * Hides loader and shows canvas
-   */
-  showContent () {
-    this.loadingWrapper.style.display = 'none'
-    this.canvas.style.display = 'block'
-  }
-
-  /**
-   * Asynchronously downloads PDF.
-   */
-  async loadPDF () {
-    this.pdfDoc = await window.pdfjsLib.getDocument(this.url).promise
-
-    this.pageCount.textContent = this.pdfDoc.numPages
-
-    // If the user passed in a number that is out of range, render the last page.
-    if (this.pageNum > this.pdfDoc.numPages) {
-      this.pageNum = this.pdfDoc.numPages
-    }
-
-    this.renderPage(this.pageNum)
-  }
-
-  /**
-   * Get page info from document, resize canvas accordingly, and render page.
-   * @param num Page number.
-   */
-  async renderPage (num) {
-    this.pageRendering = true
-
-    const page = await this.pdfDoc.getPage(num)
-    const viewport = page.getViewport({ scale: this.scale })
-    this.canvas.height = viewport.height
-    this.canvas.width = viewport.width
-
-    // Wait for rendering to finish
-    await page.render({
-      canvasContext: this.ctx,
-      viewport
-    }).promise
-
-    this.pageRendering = false
-    this.showContent()
-
-    if (this.pageNumPending !== null) {
-      // New page rendering is pending
-      this.renderPage(this.pageNumPending)
-      this.pageNumPending = null
-    }
-    // Update page counters
-    this.curPage.textContent = num
-  }
-
-  /**
-   * If another page rendering in progress, waits until the rendering is
-   * finished. Otherwise, executes rendering immediately.
-   */
-  queueRenderPage (num) {
-    if (this.pageRendering) {
-      this.pageNumPending = num
-    } else {
-      this.renderPage(num)
-    }
-  }
-
-  /**
-   * Displays previous page.
-   */
-  handlePrevPage () {
-    if (this.pageNum <= 1) {
-      return
-    }
-    this.pageNum--
-    this.queueRenderPage(this.pageNum)
-  }
-
-  /**
-   * Displays next page.
-   */
-  handleNextPage () {
-    if (this.pageNum >= this.pdfDoc.numPages) {
-      return
-    }
-    this.pageNum++
-    this.queueRenderPage(this.pageNum)
-  }
-}
-
-insertScript('pdfjs', PDFJS_BUNDLE, () => {
-  window.pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_BUNDLE
-  Array.from(document.getElementsByClassName('pdf-viewer')).forEach(el => new PDFViewer(el))
-})
--- a/assets/scripts/features/flowchart/index.js
+++ b/assets/scripts/features/flowchart/index.js
@ -1,3 +0,0 @@
-if (process.env.FEATURE_FLOWCHART_MERMAID === '1') {
-  import('./mermaid')
-}
--- a/assets/scripts/features/flowchart/mermaid.js
+++ b/assets/scripts/features/flowchart/mermaid.js
@ -1,7 +0,0 @@
-import mermaid from 'mermaid'
-import * as params from '@params'
-
-const mermaidOptions = params.flowchart?.mermaid || {}
-const options = Object.assign({}, mermaidOptions, { startOnLoad: true })
-
-mermaid.initialize(options)
--- a/assets/scripts/features/index.js
+++ b/assets/scripts/features/index.js
@ -1,35 +0,0 @@
-if (process.env.FEATURE_VIDEOPLAYER === '1') {
-  import('./videoplayer')
-}
-
-if (process.env.FEATURE_TOC === '1') {
-  import('./toc')
-}
-
-if (process.env.FEATURE_DARKMODE === '1') {
-  import('./darkmode')
-}
-
-if (process.env.FEATURE_THEME === '1') {
-  import('./theme')
-}
-
-if (process.env.FEATURE_FLOWCHART === '1') {
-  import('./flowchart')
-}
-
-if (process.env.FEATURE_SYNTAXHIGHLIGHT === '1') {
-  import('./syntaxhighlight')
-}
-
-if (process.env.FEATURE_MATH === '1') {
-  import('./math')
-}
-
-if (process.env.FEATURE_EMBEDPDF === '1') {
-  import('./embedpdf')
-}
-
-if (process.env.FEATURE_COPYCODEBUTTON === '1') {
-  import('./copyCode')
-}
--- a/assets/scripts/features/math/index.js
+++ b/assets/scripts/features/math/index.js
@ -1,3 +0,0 @@
-if (process.env.FEATURE_MATH_KATEX === '1') {
-  import('./katex')
-}
--- a/assets/scripts/features/math/katex.js
+++ b/assets/scripts/features/math/katex.js
@ -1,21 +0,0 @@
-import renderMathInElement from 'katex/contrib/auto-render'
-import * as params from '@params'
-
-const defaultOptions = {
-  delimiters: [
-    { left: '$$', right: '$$', display: true },
-    { left: '\\[', right: '\\]', display: true },
-    { left: '$', right: '$', display: false },
-    { left: '\\(', right: '\\)', display: false }
-  ]
-}
-
-window.addEventListener('DOMContentLoaded', () => {
-  renderMathInElement(
-    document.body,
-    {
-      ...defaultOptions,
-      ...(params.math?.katex || {})
-    }
-  )
-})
--- a/assets/scripts/features/syntaxhighlight/hljs.js
+++ b/assets/scripts/features/syntaxhighlight/hljs.js
@ -1,12 +0,0 @@
-import hljs from 'highlight.js'
-import * as params from '@params'
-
-const defaultOptions = {
-  ignoreUnescapedHTML: true
-}
-
-hljs.configure({
-    ...defaultOptions,
-    ...(params.syntaxhighlight?.hljs || {}),
-});
-hljs.highlightAll();
--- a/assets/scripts/features/syntaxhighlight/index.js
+++ b/assets/scripts/features/syntaxhighlight/index.js
@ -1,3 +0,0 @@
-if (process.env.FEATURE_SYNTAXHIGHLIGHT_HLJS === '1') {
-  import('./hljs')
-}
--- a/assets/scripts/features/theme/index.js
+++ b/assets/scripts/features/theme/index.js
@ -1,88 +0,0 @@
-import * as params from '@params';
-const PERSISTENCE_KEY = 'theme-scheme'
-
-const themeOptions = params.theme || {}
-const THEME_DARK = typeof themeOptions.dark === 'undefined' ? true : themeOptions.dark;
-const THEME_LIGHT = typeof themeOptions.light === 'undefined' ? true : themeOptions.light;
-const THEME_DEFAULT = typeof themeOptions.default === 'undefined' ? "system" : themeOptions.default;
-
-window.addEventListener('load', async () => {
-  const menu = document.getElementById('themeMenu')
-  const $icon = document.getElementById('navbar-theme-icon-svg')
-  if (menu == null || $icon == null) return
-
-  const btns = menu.getElementsByTagName('a')
-  const iconMap = Array.from(btns).reduce((map, btn) => {
-    const $img = btn.getElementsByTagName('img')[0]
-    map[btn.dataset.scheme] = $img.src
-    return map
-  }, {})
-
-
-  function checkScheme(scheme) {
-    if (THEME_LIGHT === false) return "dark"
-    if (THEME_DARK === false) return "light"
-    return scheme
-  }
-
-  function loadScheme() {
-    return localStorage.getItem(PERSISTENCE_KEY) || loadDefaultScheme()
-  }
-
-  function loadDefaultScheme() {
-    return THEME_DEFAULT || "system"
-  }
-
-  function saveScheme(scheme) {
-    localStorage.setItem(PERSISTENCE_KEY, scheme)
-  }
-
-  function getPreferredColorScheme() {
-    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    return isDarkMode ? "dark" : "light";
-  }
-
-  function setScheme(newScheme) {
-    let theme = newScheme
-    if (newScheme === 'system') {
-      theme = getPreferredColorScheme()
-    }
-    // set data-theme attribute on html tag
-    document.querySelector("html").dataset.theme = theme;
-
-    // update icon
-    $icon.src = iconMap[newScheme]
-
-    // save preference to local storage
-    saveScheme(newScheme)
-  
-    setImages(theme)
-  }
-
-  const checkedScheme = checkScheme(loadScheme())
-  setScheme(checkedScheme)
-
-  Array.from(menu.getElementsByTagName('a')).forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const { scheme } = btn.dataset
-      setScheme(scheme)
-    })
-  })
-})
-
-function setImages(newScheme) {
-  const els = Array.from(document.getElementsByClassName('logo-holder'));
-  for (const el of els) {
-    const light = el.querySelector('.light-logo');
-    const dark = el.querySelector('.dark-logo');
-
-    if (newScheme === "dark" && dark !== null) {
-      if (light !== null) light.style.display = 'none'
-      dark.style.display = 'inline'
-    }
-    else {
-      if (light !== null) light.style.display = 'inline'
-      if (dark !== null) dark.style.display = 'none'
-    }
-  }
-}
--- a/assets/scripts/features/toc/index.js
+++ b/assets/scripts/features/toc/index.js
@ -1,48 +0,0 @@
-import { getDeviceState } from '../../core'
-
-// Toggle Table of Contents on click. Here, class "hide" open the toc
-function toggleTOC () {
-  const 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
-    const 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.
-    const { isMobile } = getDeviceState()
-    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')
-  }
-}
-
-window.addEventListener('DOMContentLoaded', () => {
-  // bind click event to #toc-toggle in navbar-2.html
-  const toggle = document.getElementById('toc-toggler')
-  if (toggle) toggle.addEventListener('click', toggleTOC)
-
-  // hide TOC when user clicks on a TOC link.
-  // Only applies if it's mobile.
-  const toc = document.getElementById('TableOfContents')
-  if (toc) {
-    toc.addEventListener('click', (event) => {
-      const { isMobile } = getDeviceState()
-      if (isMobile && event.target.nodeName === 'A') {
-        toggleTOC()
-      }
-    })
-  }
-})
--- a/assets/scripts/features/videoplayer/index.js
+++ b/assets/scripts/features/videoplayer/index.js
@ -1,3 +0,0 @@
-if (process.env.FEATURE_VIDEOPLAYER_PLYR === '1') {
-  import('./plyr')
-}
--- a/assets/scripts/features/videoplayer/plyr.js
+++ b/assets/scripts/features/videoplayer/plyr.js
@ -1,5 +0,0 @@
-import Plyr from 'plyr'
-import * as params from '@params'
-
-const options = params.videoplayer?.plyr
-window.addEventListener('DOMContentLoaded', () => Plyr.setup('.video-player', options))
--- a/assets/scripts/pages/home.js
+++ b/assets/scripts/pages/home.js
@ -1,16 +0,0 @@
-import { init } from 'ityped'
-
-// =========== Typing Carousel ================
-// get data from hidden ul and set as typing data
-document.addEventListener('DOMContentLoaded', () => {
-  const $ul = document.getElementById('typing-carousel-data')?.children
-  if ($ul == null || $ul.length === 0) return
-
-  const strings = Array.from($ul).map($el => $el.textContent)
-
-  init('#ityped', {
-    strings,
-    startDelay: 200,
-    loop: true
-  })
-})
--- a/assets/scripts/pages/index.js
+++ b/assets/scripts/pages/index.js
@ -1,4 +0,0 @@
-import './note'
-import './search'
-import './single'
-import './home'
--- a/assets/scripts/pages/note.js
+++ b/assets/scripts/pages/note.js
@ -1,30 +0,0 @@
-import imagesLoaded from 'imagesloaded'
-
-document.addEventListener('DOMContentLoaded', function () {
-  function resizeGridItem (item) {
-    const grid = document.getElementsByClassName('note-card-holder')[0]
-    const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'))
-    const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'))
-    const rowSpan = Math.ceil((item.querySelector('.item').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap))
-    item.style.gridRowEnd = 'span ' + rowSpan
-  }
-
-  function resizeAllGridItems () {
-    const allItems = document.getElementsByClassName('note-card')
-    for (let x = 0; x < allItems.length; x++) {
-      resizeGridItem(allItems[x])
-    }
-  }
-
-  function resizeInstance (instance) {
-    const item = instance.elements[0]
-    resizeGridItem(item)
-  }
-
-  window.addEventListener('resize', resizeAllGridItems)
-
-  const allItems = document.getElementsByClassName('note-card')
-  for (let x = 0; x < allItems.length; x++) {
-    imagesLoaded(allItems[x], resizeInstance)
-  }
-})
--- a/assets/scripts/pages/search.js
+++ b/assets/scripts/pages/search.js
@ -1,140 +0,0 @@
-import Fuse from 'fuse.js'
-import Mark from 'mark.js'
-
-window.addEventListener('DOMContentLoaded', () => {
-  const summaryInclude = 60
-
-  const fuseOptions = {
-    shouldSort: true,
-    includeMatches: true,
-    threshold: 0.1,
-    tokenize: true,
-    location: 0,
-    distance: 100,
-    maxPatternLength: 32,
-    minMatchCharLength: 1,
-    keys: [
-      { name: 'title', weight: 0.8 },
-      { name: 'hero', weight: 0.7 },
-      { name: 'summary', weight: 0.6 },
-      { name: 'date', weight: 0.5 },
-      { name: 'contents', weight: 0.5 },
-      { name: 'tags', weight: 0.3 },
-      { name: 'categories', weight: 0.3 }
-    ]
-  }
-
-  const searchQuery = param('keyword')
-  if (searchQuery) {
-    document.getElementById('search-box').value = searchQuery
-    executeSearch(searchQuery)
-  } else {
-    const node = document.createElement('p')
-    node.textContent = 'Please enter a word or phrase above'
-    document.getElementById('search-results')?.append(node)
-  }
-
-  function executeSearch (searchQuery) {
-    const url = window.location.href.split('/search/')[0] + '/index.json'
-
-    fetch(url).then(response => response.json()).then(function (data) {
-      const pages = data
-      const fuse = new Fuse(pages, fuseOptions)
-      const results = fuse.search(searchQuery)
-
-      document.getElementById('search-box').value = searchQuery
-      if (results.length > 0) {
-        populateResults(results)
-      } else {
-        const node = document.createElement('p')
-        node.textContent = 'No matches found'
-        document.getElementById('search-results')?.append(node)
-      }
-    })
-  }
-
-  function populateResults (results) {
-    results.forEach(function (value, key) {
-      const contents = value.item.contents
-      let snippet = ''
-      const snippetHighlights = []
-      if (fuseOptions.tokenize) {
-        snippetHighlights.push(searchQuery)
-      } else {
-        value.matches.forEach(function (mvalue) {
-          if (mvalue.key === 'tags' || mvalue.key === 'categories') {
-            snippetHighlights.push(mvalue.value)
-          } else if (mvalue.key === 'contents') {
-            const start = mvalue.indices[0][0] - summaryInclude > 0 ? mvalue.indices[0][0] - summaryInclude : 0
-            const end = mvalue.indices[0][1] + summaryInclude < contents.length ? mvalue.indices[0][1] + summaryInclude : contents.length
-            snippet += contents.substring(start, end)
-            snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0], mvalue.indices[0][1] - mvalue.indices[0][0] + 1))
-          }
-        })
-      }
-
-      if (snippet.length < 1) {
-        snippet += contents.substring(0, summaryInclude * 2)
-      }
-      // pull template from hugo template definition
-      const templateDefinition = document.getElementById('search-result-template').innerHTML
-      // replace values
-      function adaptTags() {
-        const tags = value.item.tags;
-        let string = '';
-        if (tags) tags.forEach((t) => {string += '<li class="rounded"><a href="/tags/' + t.toLowerCase() + '/" class="btn btn-sm btn-info">' + t + "</a></li>"});
-        return string;
-      }
-
-      const output = render(templateDefinition, {
-        key,
-        title: value.item.title,
-        hero: value.item.hero,
-        date: value.item.date,
-        summary: value.item.summary,
-        link: value.item.permalink,
-        tags: adaptTags(),
-        categories: value.item.categories,
-        snippet
-      })
-
-      const dom = new DOMParser().parseFromString(output, 'text/html')
-      document.getElementById('search-results').append(dom.getElementsByClassName('post-card')[0])
-
-      snippetHighlights.forEach(function (snipvalue) {
-        const context = document.getElementById('#summary-' + key)
-        const instance = new Mark(context)
-        instance.mark(snipvalue)
-      })
-    })
-  }
-
-  function param (name) {
-    return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ')
-  }
-
-  function render (templateString, data) {
-    let conditionalMatches, copy
-    const conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g
-    // since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
-    copy = templateString
-    while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
-      if (data[conditionalMatches[1]]) {
-        // valid key, remove conditionals, leave contents.
-        copy = copy.replace(conditionalMatches[0], conditionalMatches[2])
-      } else {
-        // not valid, remove entire section
-        copy = copy.replace(conditionalMatches[0], '')
-      }
-    }
-    templateString = copy
-    // now any conditionals removed we can do simple substitution
-    let key, find, re
-    for (key in data) {
-      find = '\\$\\{\\s*' + key + '\\s*\\}'
-      re = new RegExp(find, 'g')
-      templateString = templateString.replace(re, data[key])
-    }
-    return templateString
-  }
-})
--- a/assets/scripts/pages/single.js
+++ b/assets/scripts/pages/single.js
@ -1,60 +0,0 @@
-window.addEventListener('DOMContentLoaded', () => {
-  // =========== Add anchor to the headers ================
-  function addAnchor (element) {
-    element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link fa-sm"></i></sup></a>`
-  }
-
-  const postContent = document.getElementById('post-content')
-  if (postContent != null) {
-    const headerTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
-    for (let i = 0; i < headerTypes.length; i++) {
-      const headers = postContent.querySelectorAll(headerTypes[i])
-      if (headers) {
-        headers.forEach(addAnchor)
-      }
-    }
-  }
-
-  // =============== Make TOC Compatible with Bootstrap Scroll Spy ========
-  // add "navbar" class to the "nav" element
-  const toc = document.getElementById('TableOfContents')
-  if (toc) {
-    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')
-    }
-    // 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')
-    }
-  }
-
-  // add scroll to top button
-  const btn = document.getElementById('scroll-to-top')
-
-  if(btn) {
-    window.addEventListener('scroll', function () {
-      if (window.scrollY > 300) {
-        btn.classList.add('show')
-      } else {
-        btn.classList.remove('show')
-      }
-    })
-  
-    btn.addEventListener('click', function (e) {
-      e.preventDefault()
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      })
-    })
-  }
-})
--- a/assets/scripts/process-shim.js
+++ b/assets/scripts/process-shim.js
@ -1,3 +0,0 @@
-export const process = {
-  env: {}
-}
--- a/assets/scripts/sections/achievements.js
+++ b/assets/scripts/sections/achievements.js
@ -1,220 +0,0 @@
-import { getDeviceState } from '../core'
-
-function fourColumnRow (gallery, entries, i) {
-  const entry1 = document.createElement('div')
-  entry1.classList.add('col-lg-6', 'm-0', 'p-0')
-  entry1.appendChild(entries[i].cloneNode(true))
-  entry1.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry1)
-  i++
-
-  const entry2 = document.createElement('div')
-  entry2.classList.add('col-lg-3', 'm-0', 'p-0')
-  entry2.appendChild(entries[i].cloneNode(true))
-  entry2.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry2)
-  i++
-
-  const entry3 = document.createElement('div')
-  entry3.classList.add('col-lg-3', 'm-0', 'p-0')
-  entry3.appendChild(entries[i].cloneNode(true))
-  entry3.children[0].classList.add('img-type-2')
-  i++
-  entry3.appendChild(entries[i].cloneNode(true))
-  entry3.children[1].classList.add('img-type-2')
-  gallery.appendChild(entry3)
-  i++
-}
-
-function fourColumnReversedRow (gallery, entries, i) {
-  const entry1 = document.createElement('div')
-  entry1.classList.add('col-lg-3', 'm-0', 'p-0')
-  entry1.appendChild(entries[i].cloneNode(true))
-  entry1.children[0].classList.add('img-type-2')
-  i++
-  entry1.appendChild(entries[i].cloneNode(true))
-  entry1.children[1].classList.add('img-type-2')
-  gallery.appendChild(entry1)
-  i++
-
-  const entry2 = document.createElement('div')
-  entry2.classList.add('col-lg-3', 'm-0', 'p-0')
-  entry2.appendChild(entries[i].cloneNode(true))
-  entry2.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry2)
-  i++
-
-  const entry3 = document.createElement('div')
-  entry3.classList.add('col-lg-6', 'm-0', 'p-0')
-  entry3.appendChild(entries[i].cloneNode(true))
-  entry3.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry3)
-  i++
-}
-
-function threeColumnRow (gallery, entries, i) {
-  console.log(i)
-  const entry1 = document.createElement('div')
-  entry1.classList.add('col-lg-6', 'col-md-6', 'm-0', 'p-0')
-  entry1.appendChild(entries[i].cloneNode(true))
-  entry1.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry1)
-  i++
-
-  const entry2 = document.createElement('div')
-  entry2.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
-  entry2.appendChild(entries[i].cloneNode(true))
-  entry2.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry2)
-  i++
-
-  const entry3 = document.createElement('div')
-  entry3.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
-  entry3.appendChild(entries[i].cloneNode(true))
-  entry3.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry3)
-  i++
-}
-
-function threeColumnReversedRow (gallery, entries, i) {
-  const entry1 = document.createElement('div')
-  entry1.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
-  entry1.appendChild(entries[i].cloneNode(true))
-  entry1.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry1)
-  i++
-
-  const entry2 = document.createElement('div')
-  entry2.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
-  entry2.appendChild(entries[i].cloneNode(true))
-  entry2.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry2)
-  i++
-
-  const entry3 = document.createElement('div')
-  entry3.classList.add('col-lg-6', 'col-md-3', 'm-0', 'p-0')
-  entry3.appendChild(entries[i].cloneNode(true))
-  entry3.children[0].classList.add('img-type-1')
-  gallery.appendChild(entry3)
-  i++
-}
-
-function twoColumnRow (gallery, entries, i) {
-  const entry1 = document.createElement('div')
-  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++
-
-  const entry2 = document.createElement('div')
-  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)
-  i++
-}
-
-function singleColumnRow (gallery, entries, i) {
-  const entry1 = document.createElement('div')
-  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)
-  i++
-}
-
-function showAchievements () {
-  const { isLaptop, isTablet } = getDeviceState()
-  // show achievements from achievements-holder div
-  const gallery = document.getElementById('gallery')
-  if (gallery == null) {
-    return
-  }
-  gallery.innerHTML = ''
-  const entries = document.getElementById('achievements-holder').children
-  let len = entries.length
-  let i = 0
-  let rowNumber = 1
-  while (i < len) {
-    if (isLaptop) {
-      if (i + 4 <= len) {
-        if (rowNumber % 2) {
-          fourColumnRow(gallery, entries, i)
-        } else {
-          fourColumnReversedRow(gallery, entries, i)
-        }
-        i += 4
-      } else if (i + 3 <= len) {
-        if (rowNumber % 2) {
-          threeColumnRow(gallery, entries, i)
-        } else {
-          threeColumnReversedRow(gallery, entries, i)
-        }
-        i += 3
-      } else if (i + 2 <= len) {
-        twoColumnRow(gallery, entries, i)
-        i += 2
-      } else {
-        singleColumnRow(gallery, entries, i)
-        i++
-      }
-    } else if (isTablet) {
-      if (i + 2 <= len) {
-        twoColumnRow(gallery, entries, i)
-        i += 2
-      } else {
-        singleColumnRow(gallery, entries, i)
-        i++
-      }
-    } else {
-      singleColumnRow(gallery, entries, i)
-      i++
-    }
-    rowNumber++
-  }
-
-  // show full image on click
-  const elements = document.getElementsByClassName('achievement-entry')
-  len = elements.length
-  for (let i = 0; i < len; i++) {
-    elements[i].onclick = function () {
-      const achievements = document.getElementsByClassName('achievement-entry')
-      const len2 = achievements.length
-      for (let j = 0; j < len2; j++) {
-        achievements[j].classList.toggle('hidden')
-      }
-      this.classList.toggle('achievement-details')
-      this.classList.toggle('hidden')
-      this.parentElement.classList.toggle('col-lg-12')
-      this.parentElement.classList.toggle('col-md-12')
-      this.parentElement.classList.toggle('col-sm-12')
-      if (this.children.SmallImage.hasAttribute('active')) {
-        const mainLogo = this.children.LargeImage.getAttribute('Style')
-        this.children.LargeImage.setAttribute('active', true)
-        this.children.SmallImage.removeAttribute('active')
-
-        this.setAttribute('Style', mainLogo)
-      } else {
-        const mainLogo = this.children.SmallImage.getAttribute('Style')
-        this.children.SmallImage.setAttribute('active', true)
-        this.children.LargeImage.removeAttribute('active')
-        this.setAttribute('Style', mainLogo)
-      }
-
-      if (this.children.caption !== undefined) {
-        this.children.caption.classList.toggle('hidden')
-      }
-      if (this.children['enlarge-icon'] !== undefined) {
-        this.getElementsByClassName('fa-xmark')[0].classList.toggle('hidden')
-        this.getElementsByClassName('fa-magnifying-glass-plus')[0].classList.toggle('hidden')
-      }
-      if (this.children['achievement-title'] !== undefined) {
-        this.children['achievement-title'].classList.toggle('hidden')
-      }
-    }
-  }
-}
-
-['DOMContentLoaded', 'resize'].forEach((event) =>
-  document.addEventListener(event, showAchievements))
--- a/assets/scripts/sections/education.js
+++ b/assets/scripts/sections/education.js
@ -1,30 +0,0 @@
-// Show more rows in the taken courses table
-function toggleCourseVisibility (elem) {
-  // find the courses
-  const courses = elem.parentNode.getElementsByClassName('course')
-  if (courses == null) {
-    return
-  }
-
-  // toggle hidden-course class from the third elements
-  for (const course of courses) {
-    if (course.classList.contains('hidden-course') || course.classList.contains('toggled-hidden-course')) {
-      course.classList.toggle('hidden-course')
-      course.classList.add('toggled-hidden-course')
-    }
-  }
-
-  // toggle the buttons visibility
-  const buttonsToToggle = elem.parentNode.getElementsByClassName('show-more-btn')
-  for (const buttonToToggle of buttonsToToggle) {
-    buttonToToggle.classList.toggle('hidden')
-  }
-}
-
-window.addEventListener('DOMContentLoaded', () => {
-  const els = Array.from(document.getElementsByClassName('btn'));
-
-  els.filter((el) => el != null && (el.id === 'show-more-btn' || el.id === 'show-less-btn')).forEach((el) =>
-    el.addEventListener('click', ({ target }) =>
-      toggleCourseVisibility(target)))
-})
--- a/assets/scripts/sections/index.js
+++ b/assets/scripts/sections/index.js
@ -1,8 +0,0 @@
-import './navbar'
-import './sidebar'
-
-import './education'
-import './achievements'
-import './projects'
-import './skills'
-import './publications'
--- a/assets/scripts/sections/navbar.js
+++ b/assets/scripts/sections/navbar.js
@ -1,63 +0,0 @@
-const updateNavBar = () => {
-  const topNavbar = document.getElementById('top-navbar')
-  const navbarToggler = document.getElementById('navbar-toggler')
-  const themeIcon = document.getElementById('navbar-theme-icon-svg')
-
-  if (window.scrollY > 40) {
-    topNavbar?.classList.remove('transparent-navbar')
-    topNavbar?.classList.add('shadow')
-
-    navbarToggler?.classList.remove('navbar-dark')
-    navbarToggler?.classList.add('navbar-light')
-
-    // color theme selector a.k.a. dark mode
-    themeIcon?.classList.remove('svg-inverted')
-
-    // get the main logo from hidden img tag
-    const mainLogo = document.getElementById('main-logo')
-    if (mainLogo) {
-      const logoURL = mainLogo.getAttribute('src')
-      document.getElementById('logo')?.setAttribute('src', logoURL)
-    }
-  } else {
-    topNavbar?.classList.remove('shadow')
-    topNavbar?.classList.add('transparent-navbar')
-
-    navbarToggler?.classList.remove('navbar-light')
-    navbarToggler?.classList.add('navbar-dark')
-
-    // color theme selector a.k.a. dark mode
-    themeIcon?.classList.add('svg-inverted')
-
-    // get the inverted logo from hidden img tag
-    const invertedLogo = document.getElementById('inverted-logo')
-    if (invertedLogo) {
-      const logoURL = invertedLogo.getAttribute('src')
-      document.getElementById('logo')?.setAttribute('src', logoURL)
-    }
-  }
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-  // change navbar style on scroll
-  // ==================================================
-  // When the user scrolls down 80px from the top of the document,
-  // resize the navbar's padding and the logo's font size
-  const topNavbar = document.getElementById('top-navbar')
-  if (topNavbar?.classList.contains('homepage')) {
-    document.addEventListener('scroll', updateNavBar)
-    updateNavBar()
-  }
-
-  // Creates a click handler to collapse the navigation when
-  // anchors in the mobile nav pop up are clicked
-  const navMain = document.getElementsByClassName('navbar-collapse')
-  Array.from(navMain).forEach(function (el) {
-    el.addEventListener('click', function (e) {
-      if (e.target.tagName === 'A' && !e.target.classList.contains("dropdown-toggle")) {
-        el.classList.add('collapse')
-        el.classList.remove('show')
-      }
-    })
-  })
-})
--- a/assets/scripts/sections/projects.js
+++ b/assets/scripts/sections/projects.js
@ -1,19 +0,0 @@
-import Filterizr from 'filterizr'
-import { insertScript } from '../core'
-
-document.addEventListener('DOMContentLoaded', () => {
-  // ================== Project cards =====================
-
-  // setup project filter buttons
-  const projectCardHolder = document.getElementById('project-card-holder')
-  if (projectCardHolder != null && projectCardHolder.children.length !== 0) {
-    // eslint-disable-next-line no-new
-    new Filterizr('.filtr-projects', {
-      layout: 'sameWidth',
-      controlsSelector: '.project-filtr-control'
-    })
-  }
-})
-
-// dynamically insert github buttons script.
-insertScript('github-buttons', 'https://buttons.github.io/buttons.js')
--- a/assets/scripts/sections/publications.js
+++ b/assets/scripts/sections/publications.js
@ -1,13 +0,0 @@
-import Filterizr from 'filterizr'
-
-document.addEventListener('DOMContentLoaded', () => {
-  const publicationCardHolder = document.getElementById('publication-card-holder')
-  if (publicationCardHolder != null && publicationCardHolder.children.length !== 0) {
-    // eslint-disable-next-line no-new
-    new Filterizr('.filtr-publications', {
-      layout: 'sameWidth',
-      gridItemsSelector: '.pub-filtr-item',
-      controlsSelector: '.pub-filtr-control'
-    })
-  }
-})
--- a/assets/scripts/sections/sidebar.js
+++ b/assets/scripts/sections/sidebar.js
@ -1,38 +0,0 @@
-import { getDeviceState } from '../core/device'
-
-// Toggle sidebar on click. Here, class "hide" open the sidebar
-function toggleSidebar () {
-  const sidebar = document.getElementById('sidebar-section')
-  if (sidebar == null) {
-    return
-  }
-  if (sidebar.classList.contains('expanded')) {
-    sidebar.classList.remove('expanded')
-  } else {
-    // if toc-section is open, then close it first
-    const toc = document.getElementById('toc-section')
-    if (toc != null && toc.classList.contains('hide')) {
-      toc.classList.remove('hide')
-    }
-    // add "expanded" class
-    sidebar.classList.add('expanded')
-    // if it is mobile device. then scroll to top.
-    const { isMobile } = getDeviceState()
-    if (isMobile && sidebar.classList.contains('expanded')) {
-      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')
-  }
-}
-
-window.addEventListener('DOMContentLoaded', () => {
-  // bind click event to #sidebar-toggler in navbar-2.html
-  const toggle = document.getElementById('sidebar-toggler')
-  if (toggle) toggle.addEventListener('click', toggleSidebar)
-})
--- a/assets/scripts/sections/skills.js
+++ b/assets/scripts/sections/skills.js
@ -1,15 +0,0 @@
-import Filterizr from 'filterizr'
-
-document.addEventListener('DOMContentLoaded', () => {
-  // ================== Skill cards =====================
-
-  // setup skill filter buttons
-  const skillCardHolder = document.getElementById('skill-card-holder')
-  if (skillCardHolder != null && skillCardHolder.children.length !== 0) {
-    // eslint-disable-next-line no-new
-    new Filterizr('.filtr-skills', {
-      layout: 'sameWidth',
-      controlsSelector: '.skill-filtr-control'
-    })
-  }
-})
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@ -1,80 +0,0 @@
-// loading bootstrap
-// TODO: Refactor to use bootstrap sass variable for theming.
-@import 'bootstrap/scss/bootstrap';
-
-@import 'include-media/dist/_include-media';
-
-// The Mulish font, we use font-weight 300 - 700
-@import '@fontsource/mulish/300';
-@import '@fontsource/mulish/index'; // 400
-@import '@fontsource/mulish/500';
-@import '@fontsource/mulish/600';
-@import '@fontsource/mulish/700';
-
-@import './variables';
-@import './mixins';
-
-// components
-@import './components/cards';
-@import './components/buttons';
-@import './components/links';
-@import './components/texts';
-@import './components/images';
-@import './components/tables';
-@import './components/misc';
-
-// layouts
-@import './layouts/main';
-@import './layouts/list';
-@import './layouts/single';
-@import './layouts/notes';
-@import './layouts/404';
-
-// navigators
-@import './navigators/navbar';
-@import './navigators/sidebar';
-
-
-// sections
-@import './sections/home';
-@import './sections/about';
-@import './sections/skills';
-@import './sections/experiences';
-@import './sections/education';
-@import './sections/projects';
-@import './sections/recent-posts';
-@import './sections/achievements';
-@import './sections/accomplishments';
-@import './sections/publications';
-@import './sections/footer';
-
-
-
-// override
-@import './override';
-
-// features and services, only imported if enabled.
-{{ range $feature, $featureDef := site.Params.features }}
-  {{ with $featureDef }}
-    {{ $featureEnabled := or (not (isset . "enable")) .enable }}
-    {{ if $featureEnabled }}
-      {{ with (index site.Data.toha.styles $feature) }}
-        {{ range .styles }}
-        @import '{{.}}';
-        {{ end }}
-      {{ end }}
-
-      {{ range $service, $config := .services }}
-        {{ with (index site.Data.toha.styles $feature) }}
-          {{ with .services }}
-            {{ with (index . $service) }}
-              {{ range .styles }}
-              @import '{{ . }}';
-              {{ end }}
-            {{ end }}
-          {{ end }}
-        {{ end }}
-      {{ end }}
-    {{ end }}
-  {{ end }}
-{{ end }}
--- a/assets/styles/components/buttons.scss
+++ b/assets/styles/components/buttons.scss
@ -1,217 +0,0 @@
-.btn-dark {
-  background-color: get-light-color('text-color') !important;
-  border-color: get-light-color('text-color') !important;
-  color: get-light-color('text-over-accent-color') !important;
-  @include transition();
-
-  &:hover,
-  &:focus {
-    background-color: get-light-color('accent-color') !important;
-    border-color: get-light-color('accent-color') !important;
-    @include transition();
-  }
-}
-
-.btn-info {
-  background-color: get-light-color('accent-color') !important;
-  color: get-light-color('text-over-accent-color') !important;
-
-  &:hover,
-  &:focus {
-    background-color: get-light-color('hover-over-accent-color') !important;
-  }
-}
-
-.btn-outline-info {
-  color: get-light-color('accent-color') !important;
-  border-color: get-light-color('accent-color') !important;
-
-  &:hover,
-  &:focus {
-    background-color: get-light-color('accent-color') !important;
-    color: get-light-color('text-over-accent-color') !important;
-  }
-}
-
-.btn-link {
-  color: get-light-color('accent-color');
-
-  &:hover,
-  &:focus {
-    color: get-light-color('hover-over-accent-color');
-  }
-}
-
-.nav-button {
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-  color: get-light-color('muted-text-color');
-}
-
-.navbar-toggler {
-  border: none;
-  &:focus {
-    border: none;
-    outline: none !important;
-    box-shadow: none;
-  }
-}
-
-.tags {
-  text-align: left;
-  padding-top: 0.5em;
-  li {
-    font-size: 0.5em;
-    list-style-type: none;
-    display: inline-block;
-    margin-left: 0.2em;
-    margin-right: 0.2em;
-    margin-top: 0.6em;
-    margin-bottom: 0.6em;
-  }
-  a {
-    text-decoration: none !important;
-  }
-}
-
-.icon-button {
-  background-color: get-light-color('text-color');
-  color: get-light-color('text-over-accent-color') !important;
-  padding: 0.25rem 0.5rem;
-  line-height: 1.5;
-  border-radius: 0.2rem;
-  border: none;
-
-  &:hover,
-  &:focus {
-    background-color: get-light-color('accent-color') !important;
-    @include transition();
-  }
-}
-
-.filled-button {
-  background-color: get-light-color('accent-color') !important;
-  color: get-light-color('text-over-accent-color') !important;
-  @include transition();
-
-  &:hover,
-  &:active {
-    background-color: get-light-color('hover-over-accent-color') !important;
-    @include transition();
-  }
-}
-
-.copy-code-button {
-  float: right;
-  margin-top: 0.5em;
-  margin-left: -2.6em;
-  margin-right: 3em;
-
-  background-color: get-light-color('text-color') !important;
-  color: get-light-color('inverse-text-color') !important;
-  padding: 0.25rem 0.5rem;
-  line-height: 1.5;
-  border-radius: 0.2rem;
-  border: none;
-
-  &:hover,
-  &:focus {
-    background-color: get-light-color('accent-color') !important;
-    color: get-light-color('text-over-accent-color') !important;
-    @include transition();
-  }
-  &:focus {
-    &::before {
-      content: 'Copied!';
-      position: absolute;
-      padding: 0.3em;
-      border-radius: 0.2em;
-      margin-left: -5em;
-      margin-top: -0.2em;
-      background-color: get-light-color('accent-color') !important;
-      color: get-light-color('text-over-accent-color') !important;
-      @include transition();
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .btn-dark {
-    background-color: get-dark-color('accent-color') !important;
-    border-color: get-dark-color('accent-color') !important;
-    color: get-dark-color('text-over-accent-color') !important;
-
-    &:hover,
-    &:focus {
-      background-color: get-dark-color('hover-over-accent-color') !important;
-      border-color: get-dark-color('hover-over-accent-color') !important;
-    }
-  }
-
-  .btn-info {
-    background-color: get-dark-color('bg-card') !important;
-    color: get-dark-color('text-color') !important;
-    border: 1px solid get-dark-color('muted-text-color') !important;
-
-    &:hover,
-    &:focus {
-      background-color: get-dark-color('hover-over-accent-color') !important;
-    }
-  }
-
-  .btn-outline-info {
-    color: get-dark-color('accent-color') !important;
-    border-color: get-dark-color('accent-color') !important;
-
-    &:hover,
-    &:focus {
-      background-color: get-dark-color('accent-color') !important;
-      color: get-dark-color('text-over-accent-color') !important;
-    }
-  }
-
-  .btn-link {
-    color: get-dark-color('accent-color');
-
-    &:hover,
-    &:focus {
-      color: get-dark-color('hover-over-accent-color');
-    }
-  }
-
-  .nav-button {
-    color: get-dark-color('muted-text-color');
-  }
-
-  .icon-button {
-    background-color: get-dark-color('muted-text-color');
-    color: get-dark-color('text-over-accent-color') !important;
-
-    &:hover,
-    &:focus {
-      background-color: get-dark-color('accent-color') !important;
-    }
-  }
-
-  .filled-button {
-    background-color: get-dark-color('accent-color') !important;
-    color: get-dark-color('text-over-accent-color') !important;
-
-    &:hover,
-    &:active {
-      background-color: get-dark-color('hover-over-accent-color') !important;
-    }
-  }
-  .copy-code-button {
-    background-color: get-dark-color('bg-primary') !important;
-    color: get-dark-color('muted-text-color') !important;
-
-    &:hover,
-    &:focus,
-    &::before {
-      background-color: get-dark-color('accent-color') !important;
-      color: get-dark-color('text-over-accent-color') !important;
-    }
-  }
-}
--- a/assets/styles/components/cards.scss
+++ b/assets/styles/components/cards.scss
@ -1,129 +0,0 @@
-.card {
-  box-shadow: none;
-  @include transition();
-  overflow: hidden;
-  background: get-light-color('bg-card');
-
-  &:hover,
-  &:focus {
-    box-shadow: $box-shadow;
-    border: 1px solid get-light-color('bg-primary');
-    @include transition();
-    .card-img-top {
-      transform: scale(1.2);
-      object-fit: cover;
-      @include transition();
-    }
-  }
-
-  .card-head {
-    height: 172px;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .card-title {
-    font-size: large;
-  }
-
-  .card-body {
-    text-align: left;
-  }
-
-  .card-img-top {
-    -o-object-fit: cover;
-       object-fit: cover;
-    @include transition();
-  }
-
-  .card-img-sm {
-    width: 32px;
-    height: 32px;
-  }
-
-  .card-img-xs {
-    width: 24px;
-    height: 24px;
-  }
-
-  .card-footer {
-    background: get-light-color('bg-card') !important;
-    a.btn {
-      text-decoration: none !important;
-    }
-  }
-}
-
-.post-card {
-  width: 24rem;
-  display: inline-flex;
-
-  .post-card-link {
-    text-decoration: none !important;
-    color: get-light-color('text-color');
-  }
-
-  .card {
-    margin: 5px;
-    position: relative;
-
-    &:hover,
-    &:focus {
-      .card-img-top {
-        transform: scale(1.2);
-        -o-object-fit: cover;
-           object-fit: cover;
-        @include transition();
-      }
-    }
-
-    .card-body {
-      padding: 1.25rem !important;
-      padding-bottom: 0 !important;
-
-      .post-summary {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        max-height: 144px;
-        /* fallback */
-        -webkit-line-clamp: 5;
-        /* number of lines to show */
-        -webkit-box-orient: vertical;
-      }
-    }
-    .card-footer {
-      margin-top: auto;
-
-      span {
-        font-size: 10pt;
-        color: get-light-color('muted-text-color') !important;
-        padding-top: 5px;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .card {
-    background: get-dark-color('bg-card');
-
-    &:hover,
-    &:focus {
-      border: 1px solid rgba(get-dark-color('accent-color'), 0.2);
-    }
-    .card-footer {
-      background: get-dark-color('bg-card') !important;
-    }
-  }
-
-  .post-card {
-    .card {
-      .card-footer {
-        span {
-          color: get-dark-color('muted-text-color') !important;
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/components/images.scss
+++ b/assets/styles/components/images.scss
@ -1,76 +0,0 @@
-img {
-  display: block;
-  max-width: 100%;
-
-  &.center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &.left {
-    margin-right: auto;
-  }
-
-  &.right {
-    margin-left: auto;
-  }
-}
-
-figure {
-  border: 1px solid rgba(get-light-color('accent-color'), 0.1);
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-self: center;
-  margin: auto;
-}
-
-caption,
-figcaption {
-  caption-side: bottom;
-  text-align: center;
-  color: get-light-color('muted-text-color');
-}
-
-html[data-theme='dark'] {
-  figure {
-    border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
-  }
-  caption,
-  figcaption {
-    color: get-dark-color('muted-text-color');
-  }
-}
-
-.svg-inverted {
-  filter: invert(1);
-}
-
-.logo-holder {
-  height: 64px;
-  margin-bottom: 1em;
-}
-
-.company-logo {
-  max-height: 100%;
-  width: auto;
-}
-
-.light-logo {
-  display: inline;
-}
-
-.dark-logo {
-  display: none;
-}
-
-html[data-theme='dark'] {
-  .light-logo {
-    display: none;
-  }
-
-  .dark-logo {
-    display: inline;
-  }
-}
--- a/assets/styles/components/links.scss
+++ b/assets/styles/components/links.scss
@ -1,97 +0,0 @@
-a {
-  color: get-light-color('accent-color');
-  @include transition();
-
-  &:link {
-    text-decoration: none;
-  }
-
-  &:hover,
-  &:focus {
-    -webkit-text-decoration: get-light-color('hover-over-accent-color') underline;
-            text-decoration: get-light-color('hover-over-accent-color') underline;
-    color: get-light-color('hover-over-accent-color');
-    @include transition();
-  }
-}
-
-.list-link, .taxonomy-term {
-  text-decoration: none !important;
-  color: get-light-color('text-color');
-  @include transition();
-
-  &.active {
-    display: inline;
-    color: get-light-color('accent-color');
-  }
-
-  &:hover {
-    margin-left: 3px;
-    color: get-light-color('accent-color');
-    @include transition();
-  }
-}
-
-a.header-anchor {
-  text-decoration: none;
-  color: get-light-color('heading-color');
-
-  i,
-  svg {
-    font-size: 10pt;
-    color: get-light-color('text-color');
-    display: none;
-    margin-left: 0.5rem;
-  }
-
-  &:hover {
-
-    i,
-    svg {
-      display: inline-block;
-    }
-  }
-
-  code {
-    color: get-light-color('inline-code-color');
-  }
-}
-
-.anchor {
-  padding-top: 3.5rem;
-}
-
-html[data-theme='dark'] {
-  a {
-    color: get-dark-color('accent-color');
-
-    &:hover,
-    &:focus {
-      -webkit-text-decoration: get-dark-color('hover-over-accent-color') underline;
-              text-decoration: get-dark-color('hover-over-accent-color') underline;
-      color: get-dark-color('hover-over-accent-color');
-    }
-  }
-
-  .list-link, .taxonomy-term {
-    color: get-dark-color('text-color');
-
-    &:hover,
-    &.active {
-      color: get-dark-color('accent-color');
-    }
-  }
-
-  a.header-anchor {
-    color: get-dark-color('heading-color');
-
-    i,
-    svg {
-      color: get-dark-color('text-color');
-    }
-
-    code {
-      color: get-dark-color('inline-code-color');
-    }
-  }
-}
--- a/assets/styles/components/misc.scss
+++ b/assets/styles/components/misc.scss
@ -1,79 +0,0 @@
-.paginator {
-  width: -moz-fit-content;
-  width: fit-content;
-  margin: auto;
-  vertical-align: bottom;
-
-  .page-item {
-    & > a {
-      color: get-light-color('accent-color');
-    }
-    &.active,
-    &:hover > a {
-      background-color: get-light-color('accent-color') !important;
-      color: get-light-color('text-over-accent-color') !important;
-    }
-  }
-}
-
-pre {
-  margin: 5px;
-  & > code {
-    padding: 10px !important;
-  }
-}
-
-@include media('<=large') {
-  pre {
-    margin: 0px;
-    & > code {
-      padding: 0px !important;
-    }
-  }
-}
- $alert-types: ('success', 'info', 'warning', 'danger');
-
-.alert {
-  @each $type in $alert-types {
-    &.#{$type} {
-      background: get-alert-bg-color($type, 'light');
-      svg {
-        width: 1.25rem;
-        height: 1.25rem;
-        color: get-alert-text-color($type, 'light') !important;
-      }
-      strong {
-        padding-left: 0.5rem;
-        color: get-alert-text-color($type, 'light') !important;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .paginator {
-    .page-item {
-      & > a {
-        color: get-dark-color('accent-color');
-      }
-      &.active,
-      &:hover > a {
-        background-color: get-dark-color('accent-color') !important;
-        color: get-dark-color('text-over-accent-color') !important;
-      }
-    }
-  }
-  .alert {
-    @each $type in $alert-types {
-      &.#{$type} {
-        background: get-alert-bg-color($type, 'dark');
-        svg {
-          color: get-alert-text-color($type, 'dark') !important;
-        }
-        strong {
-          color: get-alert-text-color($type, 'dark') !important;
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/components/tables.scss
+++ b/assets/styles/components/tables.scss
@ -1,114 +0,0 @@
-table {
-  border-radius: 0.1rem;
-  border: 1px solid rgba(get-light-color('accent-color'), 0.1);
-  min-width: 10rem;
-  padding: 0.1rem;
-  thead {
-    tr {
-      background: get-light-color('accent-color');
-      color: get-light-color('text-over-accent-color');
-    }
-  }
-
-  tbody {
-    tr {
-      height: 40px !important;
-      color: get-light-color('text-color');
-      &:nth-child(odd) {
-        background-color: get-light-color('bg-primary');
-      }
-      &:nth-child(even) {
-        background-color: rgba(get-light-color('accent-color'), 0.05);
-      }
-    }
-  }
-  th,
-  td {
-    padding-top: 0.2rem;
-    padding-bottom: 0.2rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-}
-
-.gist {
-  table {
-    border-radius: unset !important;
-    background: unset !important;
-    border: unset !important;
-    padding: unset !important;
-
-    tr {
-      height: unset !important;
-    }
-
-    th,
-    td {
-      padding: unset !important;
-      border-left: unset !important;
-      border-bottom: unset !important;
-    }
-    td,
-    tc {
-      border-right: 1px solid rgba(get-light-color('accent-color'), 0.1);
-    }
-
-    thead {
-      tr {
-        background: unset !important;
-        color: unset !important;
-      }
-    }
-
-    tbody {
-      tr {
-        &:nth-child(odd) {
-          background-color: unset !important;
-        }
-        &:hover {
-          background: unset !important;
-        }
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  table {
-    border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
-    thead {
-      tr {
-        background: get-dark-color('accent-color');
-        color: get-dark-color('text-over-accent-color');
-      }
-    }
-
-    tbody {
-      tr {
-        color: get-dark-color('text-color');
-        &:nth-child(odd) {
-          background-color: get-dark-color('bg-primary');
-        }
-        &:nth-child(even) {
-          background-color: rgba(get-dark-color('accent-color'), 0.05);
-        }
-      }
-    }
-  }
-  .gist {
-    &::-moz-selection{
-      background: get-dark-color('text-color');
-      color: get-dark-color('inverse-text-color');
-    }
-    &::selection{
-      background: get-dark-color('text-color');
-      color: get-dark-color('inverse-text-color');
-    }
-    table {
-      td,
-      tc {
-        border-right: 1px solid rgba(get-dark-color('accent-color'), 0.1);
-      }
-    }
-  }
-}
--- a/assets/styles/components/texts.scss
+++ b/assets/styles/components/texts.scss
@ -1,124 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  color: get-light-color('heading-color');
-}
-
-strong {
-  color: get-light-color('heading-color') !important;
-}
-
-p {
-  color: get-light-color('text-color');
-  text-align: left;
-  text-justify: inter-word;
-}
-
-input {
-  color: get-light-color('text-color');
-}
-
-blockquote {
-  border-left: 4px solid get-light-color('accent-color');
-  background-color: rgba(get-light-color('accent-color'), 0.05);
-  padding: 0.3rem;
-  padding-left: 1rem;
-
-  & > p {
-    color: get-light-color('text-color');
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-.text-muted {
-  color: get-light-color('muted-text-color') !important;
-}
-
-.text-heading {
-  font-weight: bold;
-  color: get-light-color('muted-text-color');
-}
-
-.sub-title {
-  color: get-light-color('muted-text-color');
-  font-size: 10pt;
-}
-
-::-moz-selection {
-  @include selection-color();
-}
-
-::selection {
-  @include selection-color();
-}
-
-@include media('<=small') {
-  h1 {
-    font-size: 2.2rem;
-  }
-}
-
-@include media('<=tiny') {
-  h1 {
-    font-size: 1.5rem;
-  }
-}
-
-html[data-theme='dark'] {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: get-dark-color('heading-color');
-  }
-
-  strong {
-    color: get-dark-color('heading-color') !important;
-  }
-
-  p {
-    color: get-dark-color('text-color');
-  }
-
-  input {
-    color: get-dark-color('text-color');
-  }
-
-  blockquote {
-    border-left: 4px solid get-dark-color('accent-color');
-    background-color: rgba(get-dark-color('accent-color'), 0.05);
-    color: get-dark-color('text-color');
-  }
-
-  .text-muted {
-    color: get-dark-color('muted-text-color') !important;
-  }
-
-  .text-heading {
-    color: get-dark-color('muted-text-color');
-  }
-
-  .sub-title {
-    color: get-dark-color('muted-text-color');
-  }
-  ::-moz-selection {
-    @include selection-color($theme: 'dark');
-  }
-
-  ::selection {
-    @include selection-color($theme: 'dark');
-  }
-  li,
-  ul {
-    color: get-dark-color('text-color');
-  }
-}
--- a/assets/styles/layouts/404.scss
+++ b/assets/styles/layouts/404.scss
@ -1,64 +0,0 @@
-body.kind-404 {
-  #sidebar-toggler {
-    display: none;
-  }
-
-  .notFound {
-    padding-top: 5rem;
-    text-align: center;
-    padding-bottom: 8rem;
-
-    img {
-      height: 500px;
-    }
-
-    h1 {
-      font-style: italic;
-    }
-
-    .message {
-      position: absolute;
-      max-width: 20rem;
-      top: 40%;
-      left: 30%;
-    }
-  }
-
-  @include media('<=very-large') {
-    .notFound .message {
-      top: 50%;
-      left: 25%;
-    }
-  }
-
-  @include media('<=large') {
-    .notFound .message {
-      top: 46%;
-      left: 25%;
-    }
-  }
-
-  @include media('<=medium') {
-    .notFound {
-      img {
-        height: 400px;
-      }
-      .message {
-        top: 20rem;
-        left: 4rem;
-      }
-    }
-  }
-
-  @include media('<=small') {
-    .notFound {
-      img {
-        height: 250px;
-      }
-      .message {
-        top: 20rem;
-        left: 2rem;
-      }
-    }
-  }
-}
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@ -1,207 +0,0 @@
-/* in Hugo, Page kind can be either "section" or "page".*/
-/* if it is section, then it's a page with a list of items, for example /posts*/
-/* if it is page, then it is a single page.*/
-body.kind-section,
-body.kind-term,
-body.kind-page {
-  .wrapper {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-
-    .content-section {
-      flex: 80%;
-      order: 2;
-      /* background-color: lightseagreen; */
-      padding: 0;
-      position: relative;
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-
-      .content {
-        padding: 0;
-        position: relative;
-        padding-top: 2rem;
-        min-height: 130vh;
-
-        .post-card-holder {
-          margin-top: 32px;
-          margin-left: auto;
-          padding: 0;
-          display: flex;
-          flex-flow: wrap;
-        }
-
-        .paginator {
-          width: -moz-fit-content;
-          width: fit-content;
-          margin: auto;
-
-          .pagination {
-            margin-left: auto;
-            margin-right: auto;
-            margin-top: 0.5rem;
-            margin-bottom: 0.5rem;
-            width: -moz-fit-content;
-            width: fit-content;
-          }
-
-          .page-item {
-            & > a {
-              color: get-light-color('accent-color');
-            }
-
-            &.active > a {
-              background-color: get-light-color('accent-color');
-              color: get-light-color('text-over-accent-color');
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @include media('<medium') {
-    .post-card {
-      margin-left: 1%;
-      margin-right: 1%;
-      width: 98%;
-    }
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-      flex-flow: column;
-      overflow: hidden;
-
-      .content-section {
-        flex: 100%;
-        max-width: 100%;
-        padding-left: 0;
-        width: 100%;
-
-        .content {
-          width: 100%;
-          padding-left: 0;
-          padding-right: 0;
-          @include transition();
-        }
-
-        &.hide {
-          .content {
-            margin-top: 0;
-            padding-top: 0;
-            @include transition();
-          }
-          .post-card-holder {
-            margin-top: 0.5rem;
-            @include transition();
-          }
-        }
-      }
-    }
-  }
-
-  @include media('>=medium', '<large') {
-    .post-card {
-      width: calc(100% / 2);
-    }
-    .content-section.hide {
-      .post-card {
-        width: 100%;
-      }
-    }
-  }
-
-  @include media('>=large', '<very-large') {
-    .post-card {
-      width: calc(100% / 3);
-    }
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-
-      .content-section {
-        padding: 0;
-        flex: 60%;
-        order: 2;
-        padding-bottom: 0.5rem;
-
-        .content {
-          overflow: hidden;
-
-          .post-card-holder {
-            margin: 0;
-            margin-top: 1.5rem;
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
-            position: relative;
-            @include transition();
-          }
-        }
-        .container {
-          max-width: 100%;
-        }
-        &.hide {
-          .post-card {
-            width: calc(100% / 2);
-          }
-        }
-      }
-    }
-  }
-
-  @include media('>=very-large', '<extra-large') {
-    .post-card {
-      width: calc(100% / 4);
-    }
-    .post-card-holder {
-      margin-left: 0px;
-    }
-  }
-
-  @include media('>=extra-large') {
-    .post-card {
-      width: calc(100% / 5);
-    }
-    .content-section {
-      padding-left: 1rem;
-      padding-right: 1rem;
-      flex: 85%;
-      max-width: 85%;
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  body.kind-section,
-  body.kind-term,
-  body.kind-page {
-    .wrapper {
-      .content-section {
-        .content {
-          .paginator {
-            .page-item {
-              & > a {
-                background-color: get-dark-color('bg-card') !important;
-                color: get-dark-color('text-color') !important;
-                border: 1px solid get-dark-color('muted-text-color') !important;
-                text-decoration: none !important;
-
-                &:hover {
-                  background-color: get-dark-color('hover-over-accent-color') !important;
-                  color: get-dark-color('text-over-accent-color') !important;
-                }
-              }
-
-              &.active > a {
-                background-color: get-dark-color('accent-color') !important;
-                color: get-dark-color('text-over-accent-color') !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@ -1,114 +0,0 @@
-/* 
-  Removed smooth scrolling implementation in main.js in favor of
-  simpler css approach.
-  See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
-*/
-*,
-html {
-  scroll-behavior: smooth !important;
-}
-
-body {
-  position: relative;
-}
-
-/*
-  Fixes anchor overlapping with header.
-  See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors 
-  */
-:target::before {
-  content: '';
-  display: block;
-  height: 2em; /* fixed header height*/
-  margin: -2em 0 0; /* negative fixed header height */
-}
-
-body {
-  background-color: get-light-color('bg-primary');
-  font-family: 'Mulish';
-}
-
-.bg-primary {
-  background-color: get-light-color('bg-primary') !important;
-}
-
-.bg-secondary {
-  background-color: get-light-color('bg-secondary') !important;
-}
-
-.flag-icon {
-  width: 16px !important;
-  margin-top: 3px;
-  margin-right: 3px;
-}
-
-.hidden {
-  display: none !important;
-}
-
-.content {
-  ul > ol,
-  ol > ul,
-  ul > ul,
-  ol > ol,
-  li > ol,
-  li > ul {
-    padding-inline-start: 1rem;
-  }
-}
-
-kbd {
-  background-color: get-light-color('accent-color');
-  color: get-light-color('text-over-accent-color');
-}
-
-mark {
-  background-color: get-light-color('highlight-color');
-  border-radius: 0.25rem;
-}
-
-@include media('<=small') {
-  .skills-section,
-  .projects-section,
-  .publications-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,
-  .publications-section {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-html[data-theme='dark'] {
-  body {
-    background-color: get-dark-color('bg-primary');
-    color: get-dark-color('text-color');
-  }
-
-  .bg-primary {
-    background-color: get-dark-color('bg-primary') !important;
-  }
-  .bg-secondary {
-    background-color: get-dark-color('bg-secondary') !important;
-  }
-  kbd {
-    background-color: get-dark-color('accent-color');
-    color: get-dark-color('text-over-accent-color');
-  }
-  mark {
-    background-color: get-dark-color('highlight-color');
-  }
-}
--- a/assets/styles/layouts/notes.scss
+++ b/assets/styles/layouts/notes.scss
@ -1,199 +0,0 @@
-body.type-notes {
-  .wrapper {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-
-    .content-section {
-      flex: 80%;
-      max-width: 80%;
-      order: 2;
-      /* background-color: lightseagreen; */
-      padding: 0;
-      position: relative;
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-
-      .content {
-        padding: 0;
-        position: relative;
-        padding-top: 2rem;
-        min-height: 130vh;
-
-        .note-card-holder {
-          margin-top: 2rem;
-          display: flex;
-          flex-flow: wrap;
-          margin-left: auto;
-          padding: 0;
-
-          .note-card {
-            align-self: flex-start;
-            flex: auto;
-
-            .card {
-              margin: 0.5rem;
-
-              .card-body {
-                padding: 1rem;
-
-                pre {
-                  margin: 0;
-                  border-radius: 3px;
-                }
-              }
-            }
-          }
-
-          .note-title {
-            padding-left: 1rem;
-            color: get-light-color('accent-color');
-
-            &:before {
-              content: '';
-              display: inline-block;
-              width: 98%;
-              height: 100%;
-              margin-bottom: -26px;
-              border-bottom: 1px solid get-light-color('accent-color');
-            }
-
-            span {
-              background: get-light-color('bg-secondary');
-              padding-right: 5px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @include media('<=extra-large') {
-    .note-card-holder {
-      .note-card {
-        flex: 30%;
-      }
-    }
-  }
-
-  @include media('<=large') {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-      .content-section {
-        padding: 0;
-        max-width: 100%;
-        order: 2;
-        padding-bottom: 0.5rem;
-        @include transition();
-
-        .content {
-          overflow: hidden;
-
-          .note-card-holder {
-            margin: 0;
-            margin-top: 1.5rem;
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
-            position: relative;
-            @include transition();
-            .note-card {
-              flex: 50%;
-            }
-          }
-        }
-        .container {
-          max-width: 100%;
-        }
-
-        &.hide {
-          max-width: 60%;
-          @include transition();
-        }
-      }
-    }
-  }
-
-  @include media('<=medium') {
-    .note-card-holder .note-card {
-      max-width: 50%;
-      min-width: 50%;
-      @include transition();
-    }
-
-    .content-section.hide .note-card-holder .note-card {
-      max-width: 100%;
-      min-width: 100%;
-      @include transition();
-    }
-  }
-
-  @include media('<=small') {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-      flex-flow: column;
-      overflow: hidden;
-
-      .content-section {
-        .content {
-          width: 100%;
-          padding-left: 0;
-          padding-right: 0;
-          @include transition();
-
-          .note-card-holder {
-            margin-top: 0.5rem;
-            @include transition();
-
-            .note-card {
-              flex: 100%;
-              max-width: 100%;
-              @include transition();
-            }
-          }
-        }
-        &.hide {
-          flex: 100%;
-          max-width: 100%;
-          padding-left: 0;
-          width: 100%;
-          @include transition();
-
-          .content {
-            .note-card-holder {
-              margin-top: 0;
-              padding-top: 0;
-              @include transition();
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  body.type-notes {
-    .wrapper {
-      .content-section {
-        .content {
-          .note-card-holder {
-            .note-title {
-              color: get-dark-color('accent-color');
-              &:before {
-                border-bottom: 1px solid get-dark-color('accent-color');
-              }
-
-              span {
-                background: get-dark-color('bg-secondary');
-                padding-right: 5px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/layouts/single.scss
+++ b/assets/styles/layouts/single.scss
@ -1,389 +0,0 @@
-body.kind-page {
-  background-color: get-light-color('bg-secondary');
-  position: relative;
-
-  .wrapper {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    justify-content: space-between;
-    position: relative;
-
-    .content-section {
-      flex: 60%;
-      max-width: 60%;
-      order: 2;
-      padding: 0;
-      position: relative;
-      padding-left: 1rem;
-      padding-right: 1rem;
-
-      .content {
-        padding-top: 1.5rem;
-
-        .read-area {
-          background-color: get-light-color('bg-primary');
-
-          .hero-area {
-            margin-top: 3rem;
-            width: 100%;
-            height: 400px;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-
-          .page-content {
-            width: 100%;
-            position: relative;
-            top: -4.5rem;
-            padding: 15px;
-
-            .author-profile {
-              position: relative;
-              align-content: center;
-              text-align: center;
-
-              .author-name {
-                margin-top: 0px;
-              }
-
-              p {
-                text-align: center;
-              }
-
-              img {
-                height: 120px;
-                width: 120px;
-                margin-left: auto;
-                margin-right: auto;
-                -o-object-fit: cover;
-                object-fit: cover;
-                background-color: get-light-color('bg-primary');
-                padding: 5px;
-              }
-            }
-
-            .title {
-              text-align: center;
-            }
-            .tags {
-              text-align: center;
-            }
-
-            .post-content {
-              padding: 15px;
-
-              h1,
-              h2 {
-                margin-top: 1.4rem;
-              }
-
-              h3,
-              h4,
-              h5,
-              h6 {
-                margin-top: 1.3rem;
-              }
-            }
-
-            .next-prev-navigator {
-              padding-left: 1rem !important;
-              padding-right: 1rem !important;
-
-              .next-article {
-                text-align: right;
-              }
-
-              .next-prev-text {
-                white-space: break-spaces;
-              }
-              a {
-                text-decoration: none !important;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .toc-section {
-      flex: 20%;
-      order: 3;
-      max-width: 20%;
-      @include transition();
-
-      .toc-holder {
-        position: sticky;
-        top: 4.5rem;
-        padding-top: 1rem;
-        overflow-x: hidden;
-        overflow-y: auto;
-        background-color: get-light-color('bg-primary');
-        margin-right: 0.5rem;
-        @include transition();
-
-        .toc {
-          position: relative;
-          padding-top: 0px;
-          @include transition();
-
-          nav {
-            padding-top: 0px;
-            margin-top: 0px;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            @include transition();
-
-            ul {
-              list-style: none;
-              padding-left: 0.5rem;
-              margin-bottom: 0rem;
-              width: 100%;
-            }
-
-            .nav-link {
-              padding: 0;
-              padding-left: 0.5rem;
-              text-decoration: none !important;
-              @include transition();
-              color: get-light-color('text-color');
-
-              &:hover,
-              &:focus,
-              &.active {
-                padding-left: 1rem;
-                padding-right: 0.5rem;
-                background-color: get-light-color('accent-color');
-                color: get-light-color('text-over-accent-color');
-                @include transition();
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .disquss {
-      padding: 10px;
-    }
-
-    .share-buttons {
-      @include brand-background();
-      .btn {
-        border: none !important;
-      }
-    }
-  }
-
-  .btn-improve-page {
-    text-align: right;
-  }
-
-  #scroll-to-top {
-    position: fixed;
-    border: none;
-    bottom: 0rem;
-    right: 1rem;
-    color: get-light-color('accent-color');
-    font-size: 24pt;
-    z-index: 900000;
-    visibility: hidden;
-
-    &:hover {
-      color: get-light-color('hover-over-accent-color');
-    }
-    &.show {
-      visibility: visible;
-    }
-
-    i {
-      box-shadow: $box-shadow;
-      background-color: get-light-color('bg-primary');
-      border-radius: 50%;
-    }
-  }
-
-  @include media('<=ultra-large') {
-    .content-section {
-      flex: 65%;
-      max-width: 65%;
-    }
-    .content-section .container {
-      max-width: 100%;
-    }
-  }
-
-  @include media('<very-large') {
-    .container {
-      max-width: 100%;
-    }
-
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-
-      .content-section {
-        padding: 0;
-        flex: 60%;
-        max-width: 100%;
-        order: 2;
-        overflow: hidden;
-
-        .content {
-          overflow: hidden;
-
-          .read-area {
-            .hero-area {
-              height: 300px;
-              margin-top: 1rem;
-            }
-
-            .page-content {
-              padding: 0px;
-            }
-          }
-        }
-      }
-      .toc-section {
-        display: none;
-      }
-
-      .share-buttons {
-        max-width: 48%;
-      }
-
-      .btn-improve-page {
-        margin-right: 1rem;
-        max-width: 48%;
-      }
-
-      #disqus_thread,
-      .dsq-brlink {
-        padding: 5px;
-      }
-    }
-  }
-
-  @include media('<=small') {
-    .wrapper {
-      padding: 0px;
-      display: flex;
-      flex-direction: column;
-
-      .content-section {
-        padding: 0;
-        flex: 100%;
-        max-width: 100%;
-        order: 3;
-
-        .content {
-          .read-area {
-            .hero-area {
-              height: 200px;
-              margin-top: 1rem;
-            }
-
-            .page-content {
-              padding: 0px;
-              .next-prev-navigator {
-                .previous-article {
-                  text-align: center;
-                  margin: 5px;
-
-                  a {
-                    width: 100%;
-                  }
-                }
-                .next-article {
-                  text-align: center;
-                  margin: 5px;
-                  a {
-                    width: 100%;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      .share-buttons {
-        max-width: 100%;
-      }
-
-      .btn-improve-page {
-        text-align: start;
-        max-width: 100%;
-      }
-
-      #scroll-to-top {
-        right: 0.5rem;
-      }
-
-      #disqus_thread,
-      .dsq-brlink {
-        padding: 5px;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  body.kind-page {
-    background-color: get-dark-color('bg-secondary');
-
-    .wrapper {
-      .content-section {
-        .content {
-          .read-area {
-            background-color: get-dark-color('bg-primary');
-
-            .page-content {
-              .author-profile {
-                img {
-                  background-color: get-dark-color('bg-primary');
-                }
-              }
-            }
-          }
-        }
-      }
-      .toc-section {
-        .toc-holder {
-          background-color: get-dark-color('bg-primary');
-          hr {
-            background-color: get-dark-color('muted-text-color');
-          }
-
-          .toc {
-            nav {
-              .nav-link {
-                color: get-dark-color('text-color');
-
-                &:hover,
-                &:focus,
-                &.active {
-                  background-color: get-dark-color('accent-color');
-                  color: get-dark-color('text-over-accent-color');
-                }
-              }
-            }
-          }
-        }
-      }
-
-      #scroll-to-top {
-        color: get-dark-color('accent-color');
-        &:hover {
-          color: get-dark-color('hover-over-accent-color');
-        }
-
-        i {
-          background-color: get-dark-color('bg-primary');
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/mixins.scss
+++ b/assets/styles/mixins.scss
@ -1,72 +0,0 @@
-@function get-color($mode, $key) {
-  @if map-has-key($themes, $mode) {
-    $theme: map-get($themes, $mode);
-    @if map-has-key($theme, $key) {
-      @return map-get($theme, $key);
-    }
-  }
-  @return red; // default color for debugging purpose
-}
-
-@function get-light-color($key) {
-  @return get-color('light', $key);
-}
-
-@function get-dark-color($key) {
-  @return get-color('dark', $key);
-}
-
-@mixin reset-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-@mixin section-title-adjustment() {
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
-}
-
-@mixin brand-background() {
-  @each $brand, $color in $brand-colors {
-    .bg-#{$brand} {
-      background-color: $color;
-    }
-  }
-}
-
-@mixin transition() {
-  transition: all $transition-type $transition-duration;
-}
-
-@mixin selection-color($theme: 'light') {
-  background: get-light-color('accent-color');
-  color: get-light-color('text-over-accent-color');
-  @if $theme == 'dark' {
-    background: get-dark-color('accent-color');
-    color: get-dark-color('text-over-accent-color');
-  }
-}
-
-@function get-alert-bg-color($type, $mode) {
-  $colors: map-get($alerts, $type);
-  @if $mode == 'light' {
-    @return map-get($colors, 'bg-color');
-  } @else {
-    @return map-get($colors, 'text-color');
-  }
-  @return red;
-}
-
-@function get-alert-text-color($type, $mode) {
-  $colors: map-get($alerts, $type);
-  @if $mode == 'light' {
-    @return map-get($colors, 'text-color');
-  } @else {
-    @return map-get($colors, 'bg-color');
-  }
-  @return red;
-}
--- a/assets/styles/navigators/navbar.scss
+++ b/assets/styles/navigators/navbar.scss
@ -1,286 +0,0 @@
-@mixin nav-item-hover-effect($theme: 'light') {
-  color: get-light-color('accent-color') !important;
-  border-bottom: 2px solid get-light-color('accent-color') !important;
-  background: rgba(get-light-color('accent-color'), 0.1);
-  @include transition();
-
-  @if $theme == 'dark' {
-    color: get-dark-color('accent-color') !important;
-    border-bottom: 2px solid get-dark-color('accent-color') !important;
-    background: rgba(get-dark-color('accent-color'), 0.1);
-  }
-}
-
-.top-navbar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 50px;
-  z-index: 99999;
-  margin: 0px;
-  padding-top: 0.4rem;
-  color: get-light-color('heading-color');
-  text-align: center;
-  background-color: get-light-color('bg-primary');
-  @include transition();
-
-  .navbar-brand {
-    color: get-light-color('heading-color');
-    text-decoration: none !important;
-    font-weight: 600;
-    img {
-      width: 42px;
-      padding: 5px;
-      margin-left: -10px;
-    }
-  }
-
-  img {
-    display: inline-block;
-  }
-
-  .sidebar-icon {
-    width: 32px;
-    height: 32px;
-    filter: invert(0.5);
-  }
-
-  li {
-    a {
-      color: get-light-color('heading-color');
-      text-decoration: none !important;
-      font-weight: 500;
-      @include transition();
-      border-bottom: 2px solid transparent;
-      &:hover {
-        @include nav-item-hover-effect();
-      }
-    }
-  }
-
-  .navbar-nav .active {
-    @include nav-item-hover-effect();
-  }
-
-  #top-navbar-divider {
-    margin-top: 10px;
-    background-color: get-light-color('muted-text-color');
-    height: 20px;
-    width: 2px;
-  }
-
-  .dropdown-menu {
-    box-shadow: $box-shadow;
-    border: 1px solid rgba(get-light-color('accent-color'), 0.1);
-    max-height: 0vh;
-    overflow: hidden;
-    display: block;
-    visibility: hidden;
-    @include transition();
-
-    &.show {
-      max-height: 100vh;
-      visibility: visible;
-      @include transition();
-
-      a {
-        color: get-light-color('heading-color') !important;
-
-        &:hover {
-          @include nav-item-hover-effect();
-        }
-      }
-    }
-  }
-
-  .navbar-collapse {
-    margin-top: -5px;
-    &.show,
-    &.collapsing {
-      background-color: get-light-color('bg-primary');
-      padding-left: 1rem;
-
-      li {
-        a {
-          color: get-light-color('heading-color');
-          font-weight: 500;
-          @include transition();
-        }
-      }
-      .navbar-nav {
-        .active {
-          color: get-light-color('accent-color');
-        }
-        a:hover {
-          color: get-light-color('accent-color');
-        }
-      }
-    }
-  }
-
-  &.transparent-navbar {
-    background-color: transparent !important;
-    .navbar-brand {
-      color: get-light-color('inverse-text-color');
-      font-weight: 600;
-    }
-    li {
-      a {
-        color: get-light-color('inverse-text-color');
-      }
-    }
-    .feather-menu {
-      stroke: get-light-color('inverse-text-color');
-    }
-  }
-
-  #themeMenu {
-    width: 25px;
-    min-width: 3rem;
-
-    img.theme-icon {
-      display: block !important;
-      margin-left: auto !important;
-      margin-right: auto !important;
-    }
-  }
-
-  @include media('<very-large') {
-    height: -moz-fit-content;
-    height: fit-content;
-    padding-bottom: 0px;
-    padding-top: 0px;
-
-    .container {
-      max-width: 100%;
-    }
-
-    &.transparent-navbar {
-      .navbar-nav .active,
-      li a:hover {
-        color: get-light-color('accent-color');
-        @include transition();
-      }
-    }
-
-    #top-navbar-divider {
-      height: auto;
-      width: auto;
-      margin-right: 15px;
-      border-top: 1px solid #c0ccda;
-    }
-
-    .dropdown-menu {
-      text-align: center;
-      margin-right: 1rem;
-      @include transition();
-    }
-
-    .languageSelector {
-      position: fixed;
-      right: 0.5rem;
-      bottom: 1rem;
-      z-index: 10000000;
-      background-color: get-light-color('bg-primary');
-      box-shadow: $box-shadow;
-    }
-    #themeMenu {
-      width: 100%;
-    }
-  }
-
-  @include media('<=small') {
-    .dropdown-menu {
-      margin-left: -1rem;
-      margin-right: 0rem;
-    }
-  }
-}
-
-.feather-sidebar,
-.feather-menu {
-  width: 1.5rem;
-  height: 1.5rem;
-  stroke: get-light-color('text-color');
-}
-
-html[data-theme='dark'] {
-  .top-navbar {
-    color: get-dark-color('heading-color');
-    background-color: get-dark-color('bg-primary');
-
-    .navbar-brand {
-      color: get-dark-color('heading-color');
-    }
-    .sidebar-icon {
-      filter: invert(0.5);
-    }
-
-    li {
-      a {
-        color: get-dark-color('heading-color');
-      }
-    }
-
-    #top-navbar-divider {
-      background-color: get-dark-color('muted-text-color');
-    }
-
-    .dropdown-menu {
-      box-shadow: $box-shadow;
-      background-color: get-dark-color('bg-card');
-      border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
-
-      &.show {
-        a {
-          color: get-dark-color('heading-color') !important;
-        }
-      }
-    }
-
-    .navbar-collapse {
-      &.show,
-      &.collapsing {
-        background-color: get-dark-color('bg-primary');
-
-        li {
-          a {
-            color: get-dark-color('heading-color');
-          }
-        }
-        .navbar-nav {
-          .active {
-            color: get-dark-color('accent-color');
-          }
-          a:hover {
-            color: get-dark-color('accent-color');
-          }
-        }
-      }
-    }
-
-    &.transparent-navbar {
-      .navbar-brand {
-        color: get-dark-color('text-color');
-      }
-      li {
-        a {
-          color: get-dark-color('text-color');
-        }
-      }
-      .feather-menu {
-        stroke: get-dark-color('text-color');
-      }
-    }
-  }
-
-  img.theme-icon {
-    filter: invert(1);
-  }
-
-  .feather-sidebar,
-  .feather-menu {
-    stroke: get-dark-color('text-color');
-  }
-}
--- a/assets/styles/navigators/sidebar.scss
+++ b/assets/styles/navigators/sidebar.scss
@ -1,301 +0,0 @@
-.sidebar-section {
-  order: 1;
-  flex: 20%;
-  max-width: 20%;
-  @include transition();
-
-  .sidebar-holder {
-    top: 2.5rem;
-    position: sticky;
-    background-color: get-light-color('bg-primary');
-    height: 100vh;
-    overflow: auto;
-    box-shadow: $box-shadow;
-    @include transition();
-
-    .sidebar {
-      background: get-light-color('bg-primary');
-      height: 100vh;
-      @include transition();
-
-      #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: get-light-color('bg-secondary');
-        @include transition();
-        border: 1px solid rgba(get-light-color('accent-color'), 0.1);
-
-        &:focus {
-          border: 1pt solid get-light-color('accent-color');
-          outline: none;
-        }
-      }
-
-      #list-heading {
-        padding-left: 0px !important;
-      }
-
-      .sidebar-tree {
-        padding-left: 1rem;
-        position: relative;
-        width: -moz-max-content;
-        width: max-content;
-
-        .tree {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-
-          li {
-            margin: 0;
-            padding: 0 1em;
-            line-height: 2em;
-            color: get-light-color('heading-color');
-            position: relative;
-
-            i {
-              color: get-light-color('heading-color');
-              font-size: 12px;
-              margin-right: 5px;
-            }
-          }
-          .shift-right {
-            margin-left: 5px;
-          }
-
-          .subtree {
-            padding-left: 0.7rem;
-
-            &:before {
-              content: '';
-              display: block;
-              width: 0;
-              position: absolute;
-              top: 2.5rem;
-              left: 1.5rem;
-              bottom: 0.9rem;
-              border-left: 1px solid get-light-color('text-color');
-            }
-            li {
-              &:before {
-                content: '';
-                display: block;
-                width: 18px;
-                height: 0;
-                border-top: 1px solid get-light-color('text-color');
-                margin-top: -1px;
-                position: absolute;
-                top: 18px;
-                left: -2px;
-              }
-              &:last-child:before {
-                background: get-light-color('bg-primary');
-                height: auto;
-                top: 1.1rem;
-                bottom: 0;
-              }
-              ul {
-                position: relative;
-                padding-left: 0.5rem;
-                display: none;
-                list-style: none;
-
-                &.active {
-                  display: block;
-                }
-
-                &:before {
-                  content: '';
-                  display: block;
-                  width: 0;
-                  position: absolute;
-                  top: -8px;
-                  left: 6px;
-                  bottom: 0.8rem;
-                  border-left: 1px solid;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @include media('<=ultra-large') {
-    flex: 15%;
-    max-width: 15%;
-
-    .sidebar-holder {
-      max-width: 100%;
-    }
-  }
-
-  @include media('<=extra-large') {
-    .sidebar-holder {
-      max-width: 20rem;
-    }
-  }
-
-  @include media('<=very-large') {
-    .sidebar-tree {
-      margin-left: 1rem;
-    }
-  }
-
-  @include media('<very-large') {
-    flex: 0%;
-    max-width: 0%;
-    min-height: 100vh;
-    @include transition();
-
-    .sidebar-holder {
-      position: sticky;
-      top: 2.5rem;
-      width: 100%;
-      padding-bottom: 1rem;
-      max-height: calc(100vh - 2.5rem);
-    }
-
-    &.expanded {
-      flex: 30%;
-      max-width: 30%;
-      margin-right: 0.5rem;
-      @include transition();
-    }
-  }
-
-  @include media('<=medium') {
-    flex: 0%;
-    max-width: 0%;
-    min-height: 100vh;
-    @include transition();
-
-    .sidebar-holder {
-      position: sticky;
-      top: 2.5rem;
-      width: 100%;
-    }
-
-    &.expanded {
-      flex: 40%;
-      max-width: 40%;
-      margin-right: 0.5rem;
-      @include transition();
-    }
-  }
-
-  @include media('<=small') {
-    width: 100%;
-    min-height: 0;
-    max-height: 0;
-    max-width: 100%;
-    @include transition();
-
-    .sidebar-holder {
-      max-height: 0;
-      height: -moz-fit-content;
-      height: fit-content;
-      overflow: hidden;
-      max-width: 100%;
-      @include transition();
-
-      .sidebar {
-        position: relative;
-        height: -moz-fit-content;
-        height: fit-content;
-        max-height: -moz-fit-content;
-        max-height: fit-content;
-        width: 100vw;
-        min-height: 0;
-        overflow: hidden;
-        @include transition();
-
-        .sidebar-tree {
-          margin-left: 0rem;
-          max-height: 0;
-          @include transition();
-        }
-      }
-    }
-
-    &.expanded {
-      margin-top: 2rem;
-      position: relative;
-      height: -moz-fit-content;
-      height: fit-content;
-      flex: none;
-      max-height: 300vh;
-      max-width: 100%;
-      @include transition();
-
-      .sidebar-holder {
-        max-height: 200vh;
-        @include transition();
-
-        .sidebar-tree {
-          max-height: 200vh;
-          @include transition();
-        }
-      }
-    }
-  }
-}
-
-.feather-plus-circle,
-.feather-minus-circle {
-  width: 1rem;
-  height: 1rem;
-}
-
-html[data-theme='dark'] {
-  .sidebar-section {
-    .sidebar-holder {
-      background-color: get-dark-color('bg-primary');
-
-      .sidebar {
-        background: get-dark-color('bg-primary');
-
-        #search-box {
-          background-color: get-dark-color('bg-secondary');
-          border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
-
-          &:focus {
-            border: 1pt solid get-dark-color('accent-color');
-          }
-        }
-
-        .sidebar-tree {
-          .tree {
-            li {
-              color: get-dark-color('heading-color');
-
-              i {
-                color: get-dark-color('heading-color');
-              }
-            }
-            .subtree {
-              &:before {
-                border-left: 1px solid get-dark-color('text-color');
-              }
-              li {
-                &:before {
-                  border-top: 1px solid get-dark-color('text-color');
-                }
-                &:last-child:before {
-                  background: get-dark-color('bg-primary');
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/override.scss
+++ b/assets/styles/override.scss
@ -1,15 +0,0 @@
-/* override this file for custom css */
-
-/* you can import bootstrap mixins */
-// @import 'bootstrap/scss/mixins';
-// Example usage
-// .some-class {
-//   @include media-breakpoint-up(sm) {
-//     // Larger than sm: 576px
-//     display: inline;
-//   }
-//   @include media-breakpoint-down(md) {
-//     // Smaller than md: 768px
-//     display: block;
-//   }
-// }
--- a/assets/styles/sections/about.scss
+++ b/assets/styles/sections/about.scss
@ -1,232 +0,0 @@
-@use 'sass:map';
-
-$progress-bar-colors: (
-  'blue': #048dff,
-  'yellow': #eebb4d,
-  'pink': #ed63d2,
-  'green': #2dca73,
-  'sky': #00c9e3,
-  'orange': #ff7c7c,
-);
-
-@mixin circular-progress-bar-color() {
-  @each $color, $value in $progress-bar-colors {
-    &.#{$color} {
-      .circular-progress-bar {
-        border-color: $value;
-      }
-    }
-  }
-}
-
-@mixin circular-progress-animation-breakpoints() {
-  $progress: 0;
-  $duration: 0;
-  $delay: 1.8;
-
-  @for $i from 0 through 20 {
-    .circular-progress-percentage-#{$progress} {
-      animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s;
-    }
-    .circular-progress-percentage-#{$progress}-delay {
-        animation-delay: #{$delay}s;
-    }
-    $progress: $progress + 5;
-    $duration: $duration + 0.18;
-    $delay: $duration + 1.8;
-  }
-}
-
-@mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) {
-  @for $i from 0 through $keyframes {
-    @keyframes circular-loading-#{$progress} {
-      0% {
-        transform: rotate(0);
-      }
-      100% {
-        transform: rotate(#{$degree}deg);
-      }
-    }
-    $progress: $progress + 5;
-    $degree: $degree + 18;
-  }
-}
-
-.about-section {
-  .social-link {
-    list-style: none;
-    padding: 0.2rem;
-
-    a {
-      font-size: 1.5rem;
-      color: get-light-color('text-color');
-      padding: 0.5rem;
-
-      &:hover {
-        color: get-light-color('accent-color');
-        @include transition();
-      }
-    }
-  }
-
-  .circular-progress {
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    background: none;
-    margin: 0 auto;
-    box-shadow: none;
-    position: relative;
-
-    &::after {
-      content: '';
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      border: 12px solid get-light-color('bg-primary');
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    span {
-      width: 50%;
-      height: 100%;
-      overflow: hidden;
-      position: absolute;
-      top: 0;
-      z-index: 1;
-    }
-
-    .circular-progress-bar {
-      width: 100%;
-      height: 100%;
-      background: none;
-      border-width: 12px;
-      border-style: solid;
-      position: absolute;
-      top: 0;
-    }
-
-    .circular-progress-left {
-      left: 0;
-
-      .circular-progress-bar {
-        left: 100%;
-        border-top-right-radius: 80px;
-        border-bottom-right-radius: 80px;
-        border-left: 0;
-        transform-origin: center left;
-      }
-    }
-    .circular-progress-right {
-      right: 0;
-
-      .circular-progress-bar {
-        left: -100%;
-        border-top-left-radius: 80px;
-        border-bottom-left-radius: 80px;
-        border-right: 0;
-        transform-origin: center right;
-      }
-    }
-    .circular-progress-value {
-      width: 90%;
-      height: 90%;
-      padding: 1rem;
-      border-radius: 50%;
-      background: get-light-color('text-color');
-      font-size: 1rem;
-      color: get-light-color('bg-primary');
-      line-height: initial;
-      text-align: center;
-      position: absolute;
-      top: 5%;
-      left: 5%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    @include circular-progress-bar-color();
-    @include circular-progress-animation-breakpoints();
-    @include circular-progress-animation-keyframes($progress: 0, $degree: 0, $keyframes: 20);
-  }
-
-  @include media('<=large') {
-    .circular-progress {
-      margin-bottom: 20px;
-    }
-  }
-
-  @include media('<=medium') {
-    .about-section.container {
-      max-width: 100%;
-    }
-
-    .circular-progress {
-      width: 135px;
-      height: 135px;
-    }
-  }
-  @include media('<=small') {
-    .circular-progress {
-      width: 150px;
-      height: 150px;
-    }
-
-    .circular-progress .circular-progress-value {
-      font-size: 1rem;
-    }
-  }
-  @include media('<=tiny') {
-    .col-6 {
-      flex: auto;
-      max-width: 100%;
-    }
-
-    .social-link {
-      flex-wrap: wrap;
-    }
-    .certificate-badge {
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-    .circular-progress {
-      width: 200px;
-      height: 200px;
-
-      .circular-progress-left .circular-progress-bar {
-        border-top-right-radius: 100px;
-        border-bottom-right-radius: 100px;
-      }
-      .circular-progress-right .circular-progress-bar {
-        border-top-left-radius: 100px;
-        border-bottom-left-radius: 100px;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .about-section {
-    .social-link {
-      a {
-        color: get-dark-color('text-color');
-
-        &:hover {
-          color: get-dark-color('accent-color');
-        }
-      }
-    }
-
-    .circular-progress {
-      &::after {
-        border: 12px solid get-dark-color('bg-primary');
-      }
-
-      .circular-progress-value {
-        background: get-dark-color('inverse-text-color');
-        color: get-dark-color('text-color');
-      }
-    }
-  }
-}
--- a/assets/styles/sections/accomplishments.scss
+++ b/assets/styles/sections/accomplishments.scss
@ -1,78 +0,0 @@
-.accomplishments-section {
-  @include section-title-adjustment();
-
-  .card {
-    background: get-light-color('bg-card');
-    border-top: 2px solid get-light-color('accent-color');
-    height: 100%;
-
-    &:hover,
-    &:focus {
-      border-top: 2px solid get-light-color('hover-over-accent-color');
-    }
-
-    .card-header {
-      background: none;
-      border: none;
-
-      .sub-title {
-        color: get-light-color('muted-text-color');
-        margin-top: 0.4rem;
-      }
-    }
-
-    .card-body {
-      padding: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    .card-footer {
-      background: get-light-color('bg-card');
-      border: none;
-      padding: 0;
-      padding-left: 0.7rem;
-      padding-bottom: 0.3rem;
-    }
-  }
-
-  @include media('<=large') {
-    width: 100%;
-    padding: 0;
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-    margin-top: 2rem;
-
-    .container {
-      max-width: 100%;
-    }
-  }
-
-  @include media('<=small') {
-    flex: 100%;
-    max-width: 100%;
-  }
-}
-
-html[data-theme='dark'] {
-  .accomplishments-section {
-    .card {
-      background: get-dark-color('bg-card');
-      border-top: 2px solid get-dark-color('accent-color');
-
-      &:hover,
-      &:focus {
-        border-top: 2px solid get-dark-color('hover-over-accent-color');
-      }
-
-      .card-header {
-        .sub-title {
-          color: get-dark-color('muted-text-color');
-        }
-      }
-      .card-footer {
-        background: get-dark-color('bg-card');
-      }
-    }
-  }
-}
--- a/assets/styles/sections/achievements.scss
+++ b/assets/styles/sections/achievements.scss
@ -1,159 +0,0 @@
-.achievements-section {
-  @include section-title-adjustment();
-
-  .container {
-    padding-top: 0.5rem;
-  }
-
-  #gallery {
-    .achievement-entry {
-      margin-top: 5px;
-      margin-bottom: 5px;
-      margin-left: 7px;
-      margin-right: 7px;
-      z-index: 1;
-      background-color: get-light-color('bg-secondary');
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      position: relative;
-      overflow: hidden;
-      @include transition();
-
-      .title {
-        color: get-light-color('inverse-text-color');
-        background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
-        opacity: 0;
-        padding: 5px;
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-        margin-bottom: 0px;
-        bottom: -5px;
-      }
-
-      &:hover {
-        cursor: pointer;
-        transform: scale(1.1);
-        @include transition();
-        z-index: 20000;
-
-        .svg-inline--fa {
-          opacity: 1;
-          font-size: 1rem;
-          @include transition();
-        }
-
-        .title {
-          opacity: 1;
-          bottom: 0px;
-          @include transition();
-        }
-      }
-    }
-
-    .achievement-details {
-      cursor: pointer;
-      z-index: 1;
-      height: 75vh !important;
-      opacity: 1 !important;
-      transition: none !important;
-      transform: none !important;
-
-      .img-type-1 .svg-inline--fa,
-      .img-type-2 .svg-inline--fa {
-        margin-top: 0px !important;
-        transition: none !important;
-        float: right;
-      }
-    }
-
-    .img-type-1 {
-      height: 300px;
-
-      .svg-inline--fa {
-        margin-top: 135px;
-      }
-    }
-    .img-type-2 {
-      height: 146px;
-      margin-bottom: 8px;
-
-      .svg-inline--fa {
-        margin-top: 50px;
-      }
-    }
-
-    .svg-inline--fa {
-      color: get-light-color('muted-text-color');
-      background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
-      padding: 10px;
-      font-size: 0rem;
-      opacity: 0;
-    }
-    .caption {
-      background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
-      bottom: 1rem;
-      left: 1rem;
-      color: get-light-color('inverse-text-color');
-      padding: 15px;
-      position: absolute;
-      @include transition();
-
-      h4 {
-        color: get-light-color('inverse-text-color');
-      }
-      p {
-        font-size: 16px;
-        font-weight: 300;
-        color: get-light-color('inverse-text-color');
-      }
-    }
-
-    @include media('<=medium') {
-      .container {
-        max-width: 100%;
-      }
-      .col-md-6 {
-        flex: 50%;
-        width: 50%;
-      }
-    }
-
-    @include media('<=small') {
-      #gallery .achievement-entry:hover {
-        transform: scale(1.05);
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .achievements-section {
-    #gallery {
-      .achievement-entry {
-        background-color: get-dark-color('bg-secondary');
-
-        .title {
-          color: get-dark-color('inverse-text-color');
-          background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
-        }
-      }
-      .svg-inline--fa {
-        color: get-dark-color('muted-text-color');
-        background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
-      }
-      .caption {
-        background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
-        color: get-dark-color('inverse-text-color');
-
-        h4 {
-          color: get-dark-color('inverse-text-color');
-        }
-        p {
-          color: get-dark-color('inverse-text-color');
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/sections/education.scss
+++ b/assets/styles/sections/education.scss
@ -1,245 +0,0 @@
-.education-section {
-  @include section-title-adjustment();
-
-  .card {
-    &:hover,
-    &:focus {
-      border-left: 2px solid get-light-color('accent-color');
-    }
-  }
-
-  .education-info-table {
-    width: 100%;
-    border: none;
-    background: none;
-
-    .icon {
-      width: 2rem;
-      padding-left: 0;
-      padding-right: 0;
-      position: relative;
-
-      .hline {
-        position: absolute;
-        left: 1rem;
-        top: 0;
-        background-color: get-light-color('accent-color');
-        height: 100%;
-        width: 2px;
-      }
-
-      .icon-holder {
-        background-color: get-light-color('accent-color');
-        border-radius: 50%;
-        height: 2rem;
-        width: 2rem;
-        padding: 0.2rem;
-        text-align: center;
-        color: get-light-color('text-over-accent-color');
-        position: relative;
-      }
-    }
-
-    tr,
-    th,
-    td {
-      border: none !important;
-      padding: 0;
-      background: none !important;
-    }
-
-    tr {
-      &:hover {
-        background: none !important;
-      }
-      &:first-child {
-        .hline {
-          height: 65%;
-          top: auto;
-        }
-      }
-      &:last-child {
-        .hline {
-          height: 50%;
-        }
-      }
-
-      .line {
-        width: 5%;
-        padding-left: 0;
-        padding-right: 0;
-
-        div {
-          height: 2px;
-          margin-right: -1px;
-          background-color: get-light-color('accent-color');
-        }
-      }
-
-      .details {
-        .degree-info {
-          padding: 1rem;
-          margin-top: 0.5rem;
-          margin-bottom: 0.5rem;
-          border-left: 2px solid get-light-color('accent-color');
-          border-top: 1px solid get-light-color('bg-primary');
-          border-bottom: 1px solid get-light-color('bg-primary');
-          border-right: 1px solid get-light-color('bg-primary');
-          border-radius: 5px;
-
-          h5 {
-            margin-bottom: 0.3rem;
-          }
-
-          .timeframe {
-            color: get-light-color('muted-text-color');
-            text-align: right;
-          }
-
-          .taken-courses {
-            table {
-              margin-left: 1rem;
-              width: 100%;
-              @include transition();
-              background: none;
-              border: none;
-
-              tr,
-              td,
-              th {
-                background: none;
-                border: none;
-                color: get-light-color('text-color');
-              }
-
-              tr {
-                height: auto !important;
-              }
-              th {
-                .course-name-header {
-                  width: 50%;
-                }
-              }
-            }
-            .hidden-course {
-              display: none;
-              @include transition();
-            }
-            ul {
-              margin-bottom: 0;
-            }
-          }
-
-          .custom-section {
-            .custom-content {
-              padding-bottom: 0.5em;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  @include media('<=large') {
-    .container {
-      padding-left: 0;
-    }
-  }
-
-  @include media('<=small') {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-
-    .container {
-      padding-right: 0;
-    }
-
-    .icon {
-      display: none;
-    }
-
-    .line {
-      display: none;
-    }
-
-    .timeframe {
-      text-align: left;
-    }
-  }
-}
-
-.education-alt .degree-info {
-  border-right: 2px solid get-light-color('accent-color');
-}
-
-html[data-theme='dark'] {
-  .education-section {
-    .card {
-      &:hover,
-      &:focus {
-        border-left: 2px solid get-dark-color('accent-color');
-      }
-    }
-
-    .education-info-table {
-      .icon {
-        .hline {
-          background-color: get-dark-color('accent-color');
-        }
-
-        .icon-holder {
-          background-color: get-dark-color('accent-color');
-          color: get-dark-color('text-over-accent-color');
-        }
-      }
-      tr {
-        .line {
-          div {
-            background-color: get-dark-color('accent-color');
-          }
-        }
-
-        .details {
-          .degree-info {
-            border-left: 2px solid get-dark-color('accent-color');
-            border-top: 1px solid get-dark-color('bg-primary');
-            border-bottom: 1px solid get-dark-color('bg-primary');
-            border-right: 1px solid get-dark-color('bg-primary');
-
-            .timeframe {
-              color: get-dark-color('muted-text-color');
-            }
-
-            .taken-courses {
-              table {
-                tr,
-                td,
-                th {
-                  color: get-dark-color('text-color');
-                }
-              }
-            }
-
-            &:hover{
-              border: 1px solid rgba(get-dark-color('accent-color'),0.2);
-              border-left: 2px solid get-dark-color('accent-color');
-            }
-          }
-          .custom-section {
-            .custom-content {
-              color: get-dark-color('text-color');
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .education-alt .degree-info {
-    border-right: 2px solid get-dark-color('accent-color');
-  }
-}
--- a/assets/styles/sections/experiences.scss
+++ b/assets/styles/sections/experiences.scss
@ -1,156 +0,0 @@
-.experiences-section {
-  @include section-title-adjustment();
-
-  padding-bottom: 1rem;
-
-  ul {
-    padding-left: 1rem;
-    & > li {
-      margin-left: 0;
-      color: get-light-color('text-color');
-    }
-  }
-
-  .designation {
-    font-weight: 600;
-  }
-
-  .circle {
-    padding: 13px 20px;
-    border-radius: 50%;
-    background-color: get-light-color('accent-color');
-    color: get-light-color('text-over-accent-color');
-    max-height: 50px;
-    z-index: 2;
-  }
-
-  .timeline {
-    margin-top: 1.5rem !important;
-
-    .vertical-line {
-      align-self: stretch;
-
-      &::after {
-        content: '';
-        position: relative;
-        border-left: 3px solid get-light-color('accent-color');
-        z-index: 1;
-        height: 100%;
-        left: -23px;
-      }
-      &:nth-child(even)::after {
-        left: -26px;
-      }
-    }
-    .horizontal-line {
-      div {
-        padding: 0;
-        height: 40px;
-      }
-      hr {
-        border-top: 3px solid get-light-color('accent-color');
-        margin: 0;
-        top: 17px;
-        position: relative;
-        opacity: 1;
-      }
-      .timeline-side-div {
-        display: flex;
-        overflow: hidden;
-      }
-      .corner {
-        border: 3px solid get-light-color('accent-color');
-        width: 100%;
-        position: relative;
-        border-radius: 15px;
-      }
-    }
-    .row {
-      &:nth-child(2n) {
-        div {
-          &:nth-child(1) .corner {
-            left: 50%;
-            top: -50%;
-          }
-          &:nth-child(3) .corner {
-            left: -50%;
-            top: calc(50% - 3px);
-          }
-        }
-      }
-      &:nth-child(4n) {
-        div {
-          &:nth-child(1) .corner {
-            left: 50%;
-            top: calc(50% - 3px);
-          }
-          &:nth-child(3) .corner {
-            left: -50%;
-            top: -50%;
-          }
-        }
-      }
-    }
-  }
-
-  .company-heading {
-    h5 {
-      display: inline;
-      margin-right: 0.25em;
-    }
-    p {
-      display: inline;
-    }
-  }
-
-  @include media('<=medium') {
-    .container {
-      max-width: 100%;
-    }
-  }
-
-  @include media('<=small') {
-    .container {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
-    .timeline {
-      .vertical-line {
-        visibility: hidden;
-      }
-      .horizontal-line {
-        visibility: hidden;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .experiences-section {
-    ul {
-      & > li {
-        color: get-dark-color('text-color');
-      }
-    }
-    .circle {
-      background-color: get-dark-color('accent-color');
-      color: get-dark-color('text-over-accent-color');
-    }
-
-    .timeline {
-      .vertical-line {
-        &::after {
-          border-left: 3px solid get-dark-color('accent-color');
-        }
-      }
-      .horizontal-line {
-        hr {
-          border-top: 3px solid get-dark-color('accent-color');
-        }
-        .corner {
-          border: 3px solid get-dark-color('accent-color');
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/sections/footer.scss
+++ b/assets/styles/sections/footer.scss
@ -1,118 +0,0 @@
-.footer {
-  color: get-light-color('muted-text-color') !important;
-  background-color: get-light-color('footer-color');
-  position: relative;
-  z-index: 9999;
-
-  h5 {
-    color: get-light-color('inverse-text-color');
-  }
-
-  a {
-    color: get-light-color('muted-text-color');
-    @include transition();
-    &:hover {
-      margin-left: 5px;
-      -webkit-text-decoration: get-light-color('muted-text-color') underline;
-              text-decoration: get-light-color('muted-text-color') underline;
-      @include transition();
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-
-    li {
-      margin-top: 5px;
-    }
-  }
-
-  hr {
-    background-color: get-light-color('muted-text-color');
-  }
-
-  p:first-child {
-    color: get-light-color('inverse-text-color');
-  }
-
-  input {
-    background-color: get-light-color('inverse-text-color');
-    &:focus {
-      background-color: get-light-color('bg-secondary');
-    }
-  }
-
-  #disclaimer {
-    color: get-light-color('muted-text-color') !important;
-    text-align: justify;
-    & > strong {
-      color: get-light-color('inverse-text-color') !important;
-    }
-  }
-
-  #theme {
-    color: get-light-color('inverse-text-color');
-    img {
-      width: 32px;
-      display: inline-block;
-    }
-  }
-  #hugo {
-    &:hover {
-      margin-right: 5px;
-      @include transition();
-    }
-    img {
-      display: inline-block;
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .footer {
-    color: get-dark-color('muted-text-color') !important;
-    background-color: get-dark-color('footer-color');
-    h5 {
-      color: get-dark-color('heading-color');
-    }
-
-    a {
-      color: get-dark-color('muted-text-color');
-      &:hover {
-        -webkit-text-decoration: get-dark-color('muted-text-color') underline;
-                text-decoration: get-dark-color('muted-text-color') underline;
-      }
-    }
-
-    hr {
-      background-color: get-dark-color('muted-text-color');
-    }
-
-    p:first-child {
-      color: get-dark-color('muted-text-color');
-    }
-
-    input {
-      background-color: get-dark-color('bg-primary');
-      &:focus {
-        background-color: get-dark-color('bg-secondary');
-        color: get-dark-color('text-color');
-      }
-      &::placeholder {
-        color: get-dark-color('muted-text-color');
-      }
-    }
-
-    #disclaimer {
-      color: get-dark-color('muted-text-color') !important;
-      & > strong {
-        color: get-dark-color('text-color') !important;
-      }
-    }
-
-    #theme {
-      color: get-dark-color('text-color');
-    }
-  }
-}
--- a/assets/styles/sections/home.scss
+++ b/assets/styles/sections/home.scss
@ -1,131 +0,0 @@
-.home {
-  height: 100vh;
-  padding: 0;
-  margin: 0;
-  color: get-light-color('text-over-accent-color');
-  overflow: hidden;
-
-  .background {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    background-attachment: fixed;
-    background-position: center;
-    transform: scale(1.1);
-    filter: blur(3px);
-    background-size: cover;
-  }
-
-  .arrow-center {
-    display: flex;
-    justify-content: center;
-  }
-
-  /*
-    Resolves https://github.com/hugo-toha/toha/issues/70
-  
-    fixed attached images use the whole <body> size. On mobile this can get really
-    tall which blows your image out. Setting the attachment back to scroll allows
-    your cover image to stretch within its own container
-  */
-  @supports (-webkit-touch-callout: none) {
-    .background {
-      background-attachment: scroll;
-    }
-  }
-
-  .content {
-    position: relative;
-    top: -65%;
-    height: 60%;
-  }
-
-  img {
-    width: 148px;
-    height: 148px;
-    background-color: get-light-color('bg-secondary');
-    padding: 5px;
-    margin-bottom: 10px;
-  }
-
-  .greeting,
-  .greeting-subtitle {
-    color: get-light-color('text-over-accent-color');
-  }
-
-  .typing-carousel {
-    font-size: 14pt;
-    color: get-light-color('text-over-accent-color');
-  }
-
-  #typing-carousel-data {
-    display: none;
-  }
-
-  .arrow {
-    position: absolute;
-    color: get-light-color('text-over-accent-color');
-    font-size: 1.5rem;
-    bottom: 0;
-  }
-
-  .bounce {
-    animation: bounce 2s infinite;
-  }
-
-  @keyframes bounce {
-    0%,
-    20%,
-    50%,
-    80%,
-    100% {
-      transform: translateY(0);
-    }
-    40% {
-      transform: translateY(-30px);
-    }
-    60% {
-      transform: translateY(-15px);
-    }
-  }
-
-  @include media('<=small') {
-    .content {
-      position: relative;
-      top: -75%;
-      height: 65%;
-    }
-
-    img {
-      width: 140px;
-      max-width: 50%;
-      height: auto;
-    }
-
-    .greeting {
-      font-size: 24pt;
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .home {
-    color: get-dark-color('text-over-accent-color');
-    img {
-      background-color: get-dark-color('bg-secondary');
-    }
-
-    .greeting,
-    .greeting-subtitle {
-      color: get-dark-color('text-over-accent-color');
-    }
-
-    .typing-carousel {
-      color: get-dark-color('text-over-accent-color');
-    }
-    .arrow {
-      color: get-dark-color('text-over-accent-color');
-    }
-  }
-}
--- a/assets/styles/sections/pdf-viewer.scss
+++ b/assets/styles/sections/pdf-viewer.scss
@ -1,45 +0,0 @@
-.pdf-viewer {
-  canvas {
-    border: 1px solid black;
-    direction: ltr;
-    width: 100%;
-    height: auto;
-    display: none;
-  }
-  
-  .paginator {
-    display: flex!important;
-    width: 100% !important;
-    text-align: center;
-    margin-bottom: 0.2rem !important;
-    justify-content: space-between;
-
-    .page-number-indicator {
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-  
-  .loading-wrapper {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 350px;
-  }
-  
-  .loading {
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    border: 3px solid #d2d0d0;;
-    border-radius: 50%;
-    border-top-color: #383838;
-    animation: spin 1s ease-in-out infinite;
-    -webkit-animation: spin 1s ease-in-out infinite;
-  }
-  
-  @keyframes spin {
-    to { -webkit-transform: rotate(360deg); }
-  }
-}
--- a/assets/styles/sections/projects.scss
+++ b/assets/styles/sections/projects.scss
@ -1,100 +0,0 @@
-.projects-section {
-  .card {
-    .card-header {
-      background-color: get-light-color('bg-card');
-      padding: 0.7rem;
-      padding-bottom: 0rem;
-      text-decoration: none;
-
-      .card-img-xs {
-        margin-right: 0.5rem;
-      }
-      .sub-title {
-        color: get-light-color('muted-text-color');
-        margin-top: 0.4rem;
-
-        span {
-          &:nth-child(1) {
-            float: left;
-          }
-          &:nth-child(2) {
-            float: right;
-          }
-        }
-      }
-    }
-
-    .card-body {
-      padding: 0.7rem;
-    }
-  }
-
-  .filtr-projects {
-    padding: 1rem !important;
-  }
-
-  .project-card-footer {
-    display: flex;
-    .badge {
-      margin-left: 0.1em;
-      margin-right: 0.1em;
-    }
-  }
-
-  .project-tags-holder {
-    width: 70%;
-  }
-
-  .project-btn-holder {
-    width: 30%;
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: column;
-
-    span {
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
-  @include media('<=large') {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-
-    .container {
-      max-width: 100%;
-    }
-    .filtr-projects {
-      padding: 0;
-    }
-    .filtr-item {
-      flex: 50%;
-      padding-left: 0.2rem;
-      padding-right: 0.2rem;
-      max-width: calc(100% / 2 - 0.2rem);
-    }
-  }
-
-  @include media('<=small') {
-    .btn {
-      margin-top: 0.3125rem;
-    }
-    .filtr-item {
-      max-width: 100%;
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .projects-section {
-    .card {
-      .card-header {
-        background-color: get-dark-color('bg-card');
-        .sub-title {
-          color: get-dark-color('muted-text-color');
-        }
-      }
-    }
-  }
-}
--- a/assets/styles/sections/publications.scss
+++ b/assets/styles/sections/publications.scss
@ -1,140 +0,0 @@
-.publications-section {
-  @include section-title-adjustment();
-
-  .card {
-    background: get-light-color('bg-card');
-    border-top: 2px solid get-light-color('accent-color');
-
-    &:hover,
-    &:focus {
-      border-top: 2px solid get-light-color('accent-color');
-    }
-
-    .card-header {
-      background: none;
-      border: none;
-      display: flex;
-      flex-direction: column;
-
-      .sub-title {
-        color: get-light-color('muted-text-color');
-        margin-top: 0.4rem;
-
-        span:nth-child(2) {
-          float: right !important;
-        }
-      }
-
-      a[href] {
-        text-decoration: underline; /* Underline only when href is present */
-      }
-      
-      a:not([href]) {
-        text-decoration: none; /* No underline when href is absent */
-      }
-    }
-
-    .card-body {
-      padding: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    .card-footer {
-      background: get-light-color('bg-card');
-      border: none;
-      padding: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      padding-bottom: 0.3rem;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
-  }
-
-  .filtr-publications {
-    padding: 1rem !important;
-  }
-
-  .btn-group {
-    justify-content: center;
-  }
-
-  @include media('<=large') {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-
-    .container {
-      max-width: 100%;
-    }
-
-    .filtr-publications {
-      padding: 0;
-    }
-
-    .pub-filtr-item {
-      padding-left: 0.2rem;
-      padding-right: 0.2rem;
-    }
-  }
-
-  @include media('<=medium') {
-    .pub-filtr-item {
-      flex: 100%;
-    }
-  }
-
-  @include media('<=small') {
-    .pub-filtr-item {
-      flex: 100%;
-      max-width: 100%;
-    }
-    .details-btn {
-      .btn {
-        margin-top: 0.5rem;
-        margin-left: auto;
-      }
-    }
-
-    .card {
-      .card-footer {
-        padding-left: 0.5rem;
-
-        .tags {
-          flex: 100%;
-          max-width: 100%;
-
-          .btn {
-            margin-top: 0.2rem;
-          }
-        }
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .publications-section {
-    .card {
-      background: get-dark-color('bg-card');
-      border-top: 2px solid get-dark-color('accent-color');
-
-      &:hover,
-      &:focus {
-        border-top: 2px solid get-dark-color('accent-color');
-      }
-
-      .card-header {
-        .sub-title {
-          color: get-dark-color('muted-text-color');
-        }
-      }
-
-      .card-footer {
-        background: get-dark-color('bg-card');
-      }
-    }
-  }
-}
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@ -1,32 +0,0 @@
-.recent-posts-section {
-  .container {
-    padding-top: 1rem;
-  }
-
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
-
-  @include media('<medium') {
-    .post-card {
-      margin-left: 1%;
-      margin-right: 1%;
-      width: 98%;
-    }
-  }
-  @include media('>=medium', '<large') {
-    .container {
-      max-width: 100%;
-    }
-    .post-card {
-      width: calc(100% / 2);
-    }
-  }
-  @include media('>=large') {
-    .post-card {
-      width: calc(100% / 3);
-    }
-  }
-}
--- a/assets/styles/sections/skills.scss
+++ b/assets/styles/sections/skills.scss
@ -1,46 +0,0 @@
-.skills-section {
-  .card {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    height: 100%;
-
-    .card-head {
-      background-color: get-light-color('bg-primary') !important;
-      height: -moz-fit-content;
-      height: fit-content;
-      padding: 0.7rem;
-      padding-bottom: 0rem;
-      border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
-
-      .card-img-xs {
-        margin-right: 0.5rem;
-        margin-bottom: 0.75rem;
-      }
-    }
-
-    .card-body {
-      padding-top: 0.2rem;
-      padding-left: 0.7rem;
-    }
-  }
-
-  @include media('<=medium') {
-    padding-left: 0;
-    padding-right: 0;
-
-    .container {
-      max-width: 95%;
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .skills-section {
-    .card {
-      .card-head {
-        background-color: get-dark-color('bg-card') !important;
-        border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
-      }
-    }
-  }
-}
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@ -1,122 +0,0 @@
-@use 'sass:map';
-
-$breakpoints: (
-  tiny: 320px,
-  small: 640px,
-  medium: 768px,
-  large: 1024px,
-  very-large: 1280px,
-  extra-large: 1536px,
-  ultra-large: 2560px,
-);
-
-// Color are chosen from TailwindCSS color scheme
-// https://tailwindcss.com/docs/customizing-colors
-
-// transitions
-$transition-duration: 0.3s;
-$transition-type: ease-out;
-
-// borders and shadows
-$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-
-// themes
-$themes: (
-  'light': (
-    // cyan 600
-    'accent-color': #0891b2,
-    // cyan 500
-    'hover-over-accent-color': #06b6d4,
-    // zinc 200
-    'text-over-accent-color': #e4e4e7,
-    // slate 50
-    'bg-primary': #f8fafc,
-    // slate 900
-    'bg-primary-inverse': #0f172a,
-    // slate 200
-    'bg-secondary': #e2e8f0,
-    'bg-card': #fff,
-    // slate 800
-    'heading-color': #1e293b,
-    // slate 700
-    'text-color': #334155,
-    // slate 300
-    'inverse-text-color': #cbd5e1,
-    // slate 500
-    'muted-text-color': #64748b,
-    // red 600
-    'inline-code-color': #dc2626,
-    // amber 200
-    'highlight-color': #fde68a,
-    // slate 900
-    'footer-color': #0f172a,
-  ),
-  'dark': (
-    // cyan 600
-    'accent-color': #0891b2,
-    // cyan 500
-    'hover-over-accent-color': #06b6d4,
-    // zinc 200
-    'text-over-accent-color': #e4e4e7,
-    // gray-800
-    'bg-primary': #1f2937,
-    // slate 900
-    'bg-primary-inverse': #0f172a,
-    // gray 900
-    'bg-secondary': #111827,
-    // slate 800
-    'bg-card': #1e293b,
-    // slate 100
-    'heading-color': #f1f5f9,
-    // slate 300
-    'text-color': #cbd5e1,
-    // slate 900
-    'inverse-text-color': #0f172a,
-    // slate 500
-    'muted-text-color': #64748b,
-    // red 600
-    'inline-code-color': #dc2626,
-    // amber 200
-    'highlight-color': #fde68a,
-    // slate 900
-    'footer-color': #0f172a,
-  ),
-);
-
-$brand-colors: (
-  'facebook': #3b5998,
-  'twitter': #1da1f2,
-  'linkedin': #0077b5,
-  'reddit': #ff4500,
-  'tumblr': #35465c,
-  'pocket': #ef4056,
-  'diaspora': #1e1e1e,
-  'whatsapp': #25d366,
-);
-
-$alerts: (
-  'success': (
-    // green 100
-    'bg-color': #dcfce7,
-    // green 800
-    'text-color': #166534,
-  ),
-  'info': (
-    // sky 100
-    'bg-color': #e0f2fe,
-    // sky 800
-    'text-color': #075985,
-  ),
-  'warning': (
-    // yellow 100
-    'bg-color': #fef9c3,
-    // yellow 800
-    'text-color': #854d0e,
-  ),
-  'danger': (
-    // red 100
-    'bg-color': #fee2e2,
-    // red 800
-    'text-color': #991b1b,
-  ),
-);
--- a/content/notes/search.bn.md
+++ b/content/notes/search.bn.md
@ -1,54 +0,0 @@
---
-title: "অনুসন্ধানের ফলাফল"
-date: 2010-06-08T08:06:25+06:00
-weight: 999999
-sitemap:
-  priority : 0.1
-layout: "search"
-url: search
---
-
-
-This file exists solely to respond to /search URL with the related `search` layout template.
-
-No content shown here is rendered, all content is based in the template layouts/page/search.html
-
-Setting a very low sitemap priority will tell search engines this is not important content.
-
-This implementation uses Fusejs and mark.js
-
-
-## Initial setup
-
-Search  depends on additional output content type of JSON in config.toml
-\```
-[outputs]
-  home = ["HTML", "JSON"]
-\```
-
-## Searching additional fields
-
-To search additional fields defined in front matter, you must add it in 2 places.
-
-### Edit layouts/_default/index.JSON
-This exposes the values in /index.json
-i.e. add `category`
-\```
-...
-  "contents":{{ .Content | plainify | jsonify }}
-  {{ if .Params.tags }},
-  "tags":{{ .Params.tags | jsonify }}{{end}},
-  "categories" : {{ .Params.categories | jsonify }},
-...
-\```
-
-### Edit fuse.js options to Search
-`assets/scripts/pages/search.js`
-\```
-keys: [
-  "title",
-  "contents",
-  "tags",
-  "categories"
-]
-\```
--- a/content/notes/search.cn.md
+++ b/content/notes/search.cn.md
@ -1,54 +0,0 @@
---
-title: "Search Results"
-date: 2010-06-08T08:06:25+06:00
-weight: 999999
-sitemap:
-  priority : 0.1
-layout: "search"
-url: search
---
-
-
-This file exists solely to respond to /search URL with the related `search` layout template.
-
-No content shown here is rendered, all content is based in the template layouts/page/search.html
-
-Setting a very low sitemap priority will tell search engines this is not important content.
-
-This implementation uses Fusejs and mark.js
-
-
-## Initial setup
-
-Search  depends on additional output content type of JSON in config.toml
-\```
-[outputs]
-  home = ["HTML", "JSON"]
-\```
-
-## Searching additional fields
-
-To search additional fields defined in front matter, you must add it in 2 places.
-
-### Edit layouts/_default/index.JSON
-This exposes the values in /index.json
-i.e. add `category`
-\```
-...
-  "contents":{{ .Content | plainify | jsonify }}
-  {{ if .Params.tags }},
-  "tags":{{ .Params.tags | jsonify }}{{end}},
-  "categories" : {{ .Params.categories | jsonify }},
-...
-\```
-
-### Edit fuse.js options to Search
-`assets/scripts/pages/search.js`
-\```
-keys: [
-  "title",
-  "contents",
-  "tags",
-  "categories"
-]
-\```
--- a/content/notes/search.de.md
+++ b/content/notes/search.de.md
@ -1,54 +0,0 @@
---
-title: "Search Results"
-date: 2010-06-08T08:06:25+06:00
-weight: 999999
-sitemap:
-  priority : 0.1
-layout: "search"
-url: search
---
-
-
-This file exists solely to respond to /search URL with the related `search` layout template.
-
-No content shown here is rendered, all content is based in the template layouts/page/search.html
-
-Setting a very low sitemap priority will tell search engines this is not important content.
-
-This implementation uses Fusejs and mark.js
-
-
-## Initial setup
-
-Search  depends on additional output content type of JSON in config.toml
-\```
-[outputs]
-  home = ["HTML", "JSON"]
-\```
-
-## Searching additional fields
-
-To search additional fields defined in front matter, you must add it in 2 places.
-
-### Edit layouts/_default/index.JSON
-This exposes the values in /index.json
-i.e. add `category`
-\```
-...
-  "contents":{{ .Content | plainify | jsonify }}
-  {{ if .Params.tags }},
-  "tags":{{ .Params.tags | jsonify }}{{end}},
-  "categories" : {{ .Params.categories | jsonify }},
-...
-\```
-
-### Edit fuse.js options to Search
-`assets/scripts/pages/search.js`
-\```
-keys: [
-  "title",
-  "contents",
-  "tags",
-  "categories"
-]
-\```
--- a/content/notes/search.es.md
+++ b/content/notes/search.es.md
@ -1,54 +0,0 @@
---
-title: "Resultados de Búsqueda"
-date: 2010-06-08T08:06:25+06:00
-weight: 999999
-sitemap:
-  priority : 0.1
-layout: "search"
-url: search
---
-
-
-Este archivo existe únicamente para responder a la URL /search con la plantilla de diseño `search` relacionada.
-
-No se muestra ningún contenido aquí, todo el contenido se basa en la plantilla layouts/page/search.html
-
-Establecer una prioridad muy baja en el mapa del sitio le dirá a los motores de búsqueda que éste no es un contenido importante.
-
-Esta implementación utiliza Fusejs, jquery y mark.js
-
-
-## Configuración inicial
-
-La búsqueda depende del tipo de contenido de salida adicional de JSON en config.toml
-
-\```
-[outputs]
-  home = ["HTML", "JSON"]
-\```
-
-## Búsqueda de archivos adicionales
-
-Para buscar campos adicionales definidos en el front matter, debes añadirlo en 2 lugares.
-
-### Editar layouts/_default/index.JSON
-Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
-\```
-...
-  "contents":{{ .Content | plainify | jsonify }}
-  {{ if .Params.tags }},
-  "tags":{{ .Params.tags | jsonify }}{{end}},
-  "categories" : {{ .Params.categories | jsonify }},
-...
-\```
-
-### Editar las opciones de fuse.js para buscar
-`assets/scripts/pages/search.js`
-\```
-keys: [
-  "title",
-  "contents",
-  "tags",
-  "categories"
-]
-\```
--- a/content/notes/search.fr.md
+++ b/content/notes/search.fr.md
@ -1,54 +0,0 @@
---
-title: "Search Results"
-date: 2010-06-08T08:06:25+06:00
-weight: 999999
-sitemap:
-  priority : 0.1
-layout: "search"
-url: search
---
-
-
-This file exists solely to respond to /search URL with the related `search` layout template.
-
-No content shown here is rendered, all content is based in the template layouts/page/search.html
-
-Setting a very low sitemap priority will tell search engines this is not important content.
-
-This implementation uses Fusejs and mark.js
-
-
-## Initial setup
-
-Search  depends on additional output content type of JSON in config.toml
-\```
-[outputs]
-  home = ["HTML", "JSON"]
-\```
-
-## Searching additional fields
-
-To search additional fields defined in front matter, you must add it in 2 places.
-
-### Edit layouts/_default/index.JSON
-This exposes the values in /index.json
-i.e. add `category`
-\```
-...
-  "contents":{{ .Content | plainify | jsonify }}
-  {{ if .Params.tags }},
-  "tags":{{ .Params.tags | jsonify }}{{end}},
-  "categories" : {{ .Params.categories | jsonify }},
-...
-\```
-
-### Edit fuse.js options to Search
-`assets/scripts/pages/search.js`
-\```
-keys: [
-  "title",
-  "contents",
-  "tags",
-  "categories"
-]
-\```
--- a/content/notes/search.hi.md
+++ b/content/notes/search.hi.md
@ -1,54 +0,0 @@
---
-title: "Search Results"
-date: 2010-06-08T08:06:25+06:00
-weight: 999999
-sitemap:
-  priority : 0.1
-layout: "search"
-url: search
---
-
-
-This file exists solely to respond to /search URL with the related `search` layout template.
-
-No content shown here is rendered, all content is based in the template layouts/page/search.html
-
-Setting a very low sitemap priority will tell search engines this is not important content.
-
-This implementation uses Fusejs and mark.js
-
-
-## Initial setup
-
-Search  depends on additional output content type of JSON in config.toml
-\```
-[outputs]
-  home = ["HTML", "JSON"]
-\```
-
-## Searching additional fields
-
-To search additional fields defined in front matter, you must add it in 2 places.
-
-### Edit layouts/_default/index.JSON
-This exposes the values in /index.json
-i.e. add `category`
-\```
-...
-  "contents":{{ .Content | plainify | jsonify }}
-  {{ if .Params.tags }},
-  "tags":{{ .Params.tags | jsonify }}{{end}},
-  "categories" : {{ .Params.categories | jsonify }},
-...
-\```
-
-### Edit fuse.js options to Search
-`assets/scripts/pages/search.js`
-\```
-keys: [
-  "title",
-  "contents",
-  "tags",
-  "categories"
-]
-\```
--- a/Show more
+++ b/Show more
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-width="27" aria-label="Logo" viewBox="0 0 1493 391"><path fill="#ebb951" stroke="#fcd804" d="M1345.211 24.704l112.262 64.305a43 43 0 0 1 21.627 37.312v142.237a40 40 0 0 1-20.702 35.037l-120.886 66.584a42 42 0 0 1-41.216-.389l-106.242-61.155a57 57 0 0 1-28.564-49.4V138.71a64 64 0 0 1 31.172-54.939l98.01-58.564a54 54 0 0 1 54.54-.503z"/><path fill="#33ba91" stroke="#00a88a" d="M958.07 22.82l117.31 66.78a41 41 0 0 1 20.72 35.64v139.5a45 45 0 0 1-23.1 39.32L955.68 369.4a44 44 0 0 1-43.54-.41l-105.82-61.6a56 56 0 0 1-27.83-48.4V140.07a68 68 0 0 1 33.23-58.44l98.06-58.35a48 48 0 0 1 48.3-.46z"/><path fill="#0594cb" stroke="#0083c0" d="M575.26 20.97l117.23 68.9a40 40 0 0 1 19.73 34.27l.73 138.67a48 48 0 0 1-24.64 42.2l-115.13 64.11a45 45 0 0 1-44.53-.42l-105.83-61.6a55 55 0 0 1-27.33-47.53V136.52a63 63 0 0 1 29.87-53.59l99.3-61.4a49 49 0 0 1 50.6-.56z"/><path fill="#ff4088" stroke="#c9177e" d="M195.81 24.13l114.41 66.54a44 44 0 0 1 21.88 38.04v136.43a48 48 0 0 1-24.45 41.82L194.1 370.9a49 49 0 0 1-48.48-.23L41.05 310.48a53 53 0 0 1-26.56-45.93V135.08a55 55 0 0 1 26.1-46.8l102.8-63.46a51 51 0 0 1 52.42-.69z"/><path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/></svg>