Fix mermaid rendering inside split shortcode (#1059)

* Fix build failure due to Hugo chaning `_internal` template behavior

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Update min Hugo version

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+exampleSite/node_modules
+exampleSite/public

.eslintrc.yml

@@ -0,0 +1,12 @@
+env:
+  browser: true
+  es2021: true
+extends: 
+  - standard
+  - plugin:no-jquery/all
+  - prettier
+plugins:
+  - no-jquery
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,8 +6,8 @@ title: 'Feature Request'
 
 <!---
 Before filing an issue, please review the following:
-  Existing Features: https://github.com/hossainemruz/toha#features
-  Project Roadmap: https://github.com/hossainemruz/toha#project-roadmap
+  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

.github/workflows/autoprefixer.yml

@@ -8,12 +8,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout to latest commit
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "15.x"
+          node-version: "20.x"
 
       - name: Run autoprefixer
         run: |
@@ -21,7 +21,7 @@ jobs:
           npm run autoprefixer
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v7
         with:
           branch: autoprefixer
           branch-suffix: timestamp

.github/workflows/build.yml

@@ -1,28 +0,0 @@
-name: Run Build
-
-# Run action on pull request event
-on: [pull_request]
-
-
-jobs:
-  build:
-    runs-on: ubuntu-18.04
-    steps:
-    # checkout to the commit that has been pushed
-    - uses: actions/checkout@v2.4.0
-      with:
-        submodules: true  # Fetch Hugo themes (true OR recursive)
-        fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
-
-    # install Hugo
-    - name: Setup Hugo
-      uses: peaceiris/actions-hugo@v2.5.0
-      with:
-        hugo-version: 'latest'
-        extended: true
-
-    # build website
-    - name: Create Config
-      run: touch config.toml
-    - name: Build
-      run: hugo --minify

.github/workflows/codeql-analysis.yml

@@ -39,11 +39,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4.2.2
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      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.
@@ -54,7 +54,7 @@ jobs:
     # 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@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -68,4 +68,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/enforce-lablel.yml

@@ -1,9 +1,12 @@
-name: Enforce Labels
+name: Label Enforcer
 
+# Run action on pull request creation, reopening, or label changes
 on:
   pull_request:
-    types: [labeled, unlabeled, opened, edited, synchronize]
+    types: [opened, reopened, labeled, unlabeled]
+
 jobs:
+  # Ensure that PR has desired labels
   enforce-label:
     runs-on: ubuntu-latest
     steps:

.github/workflows/md-link-checker.yml

@@ -1,13 +0,0 @@
-name: Check Markdown links
-
-# Run action on pull request event
-on: [pull_request]
-
-jobs:
-  markdown-link-check:
-    runs-on: ubuntu-latest
-    steps:
-    # checkout to latest commit
-    - uses: actions/checkout@v3
-    # run markdown linter
-    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.14

.github/workflows/merge-to-main.yml

@@ -1,4 +1,4 @@
-name: Release Drafter
+name: Merge to main workflows
 # Run action on push in mater branch
 on:
   push:
@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     # Create/Update release draft
-    - uses: release-drafter/release-drafter@v5.20.0
+    - uses: release-drafter/release-drafter@v6.1.0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/project-automation-issue.yaml

@@ -1,150 +0,0 @@
-name: Project Automation (Issue)
-on:
-  issues:
-    types:
-      - opened
-      - reopened
-      - closed
-      - labeled
-      - unlabeled
-jobs:
-  issue_automation:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-          ORGANIZATION: hugo-toha
-          PROJECT_NUMBER: 4
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            query($org: String!, $number: Int!) {
-              organization(login: $org){
-                projectNext(number: $number) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' -f org="$ORGANIZATION" -F number=$PROJECT_NUMBER > project_data.json
-
-           echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-
-          # Read the ID of the "Type" field options
-          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_BUG='$(jq -r '.data.organization.projectNext.fields.nodes[] | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Bug")             |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_FEATURE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Feature") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_ENHANCEMENT='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Enhancement") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_DOCUMENTATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Documentation")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_TRANSLATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Translation")    |.id' project_data.json) >> $GITHUB_ENV
-
-          # Read the id of the "Status" field options
-          echo 'STATUS_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Status") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_TODO='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Todo")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_IN_PROGRESS='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="In Progress")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_READY_FOR_REVIEW='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Ready for Review")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_DONE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Done")    |.id' project_data.json) >> $GITHUB_ENV
-
-      - name: Add Issue to project
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          item_id="$( gh api graphql -f query='
-            mutation($project:ID!, $issue:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $issue}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project="$PROJECT_ID" -f issue="$ISSUE_ID" --jq '.data.addProjectNextItem.projectNextItem.id')"
-
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
-
-      - name: Export Labels
-        env:
-          ISSUE_DATA: ${{ toJson(github.event.issue) }}
-        run: |
-          echo 'LABELS='$(echo "$ISSUE_DATA" | jq -r '[.labels[].name] | join(" ")') >> $GITHUB_ENV
-
-      - name: Set "Type" field
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-        run: |
-          # Only execute this step if the Issue contains at least one label
-          if [ "${#LABELS[@]}" -gt 0 ]; then
-
-            # Let by default the type is "Bug"
-            OPTION_ID=$TYPE_BUG
-
-            # If it has "feature" label then set the type to "Feature"
-            if [[ "${LABELS[*]}" =~ "feature" ]]; then
-              OPTION_ID=$TYPE_FEATURE
-            fi
-
-            # If it has "enhancement" label then set the type to "Enhancement"
-            if [[ "${LABELS[*]}" =~ "enhancement" ]]; then
-              OPTION_ID=$TYPE_ENHANCEMENT
-            fi
-
-            # If it has "documentation" label then set the type to "Documentation"
-            if [[ "${LABELS[*]}" =~ "documentation" ]]; then
-              OPTION_ID=$TYPE_DOCUMENTATION
-            fi
-
-            # If it has "translation" label then set the type to "Translation"
-            if [[ "${LABELS[*]}" =~ "translation" ]]; then
-              OPTION_ID=$TYPE_TRANSLATION
-            fi
-
-            # Set the "Type" field to appropriate option
-            gh api graphql -f query='
-              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
-                updateProjectNextItemField(input: {
-                  projectId: $project
-                  itemId: $item
-                  fieldId: $field
-                  value: $opt_id
-                }) {
-                  projectNextItem {
-                    id
-                  }
-                }
-              }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$TYPE_ID" -f opt_id="$OPTION_ID" --silent
-          fi
-
-      - name: Set "Status" field
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-        run: |
-          STATE=${{github.event.issue.state}}
-
-          echo "State: $STATE"
-
-          OPTION_ID=$STATUS_TODO
-
-          if [[ "${STATE}" == "closed" ]]
-          then
-            OPTION_ID=$STATUS_DONE
-          fi
-
-          gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
-              updateProjectNextItemField(input: {
-                projectId: $project
-                itemId: $item
-                fieldId: $field
-                value: $status_id
-              }) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$STATUS_ID" -f status_id="$OPTION_ID" --silent

.github/workflows/project-automation-pr.yaml

@@ -1,219 +0,0 @@
-name: Project Automation (PR)
-on:
-  pull_request:
-    types:
-      - opened
-      - ready_for_review
-      - reopened
-      - review_requested
-      - closed
-      - labeled
-      - unlabeled
-      - synchronize
-jobs:
-  pr_automation:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-          ORGANIZATION: hugo-toha
-          PROJECT_NUMBER: 4
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            query($org: String!, $number: Int!) {
-              organization(login: $org){
-                projectNext(number: $number) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' -f org="$ORGANIZATION" -F number=$PROJECT_NUMBER > project_data.json
-
-          echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-
-          # Read the ID of the "Type" field options
-          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'PROJECT_ID='$(jq -r '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Type") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_BUG='$(jq -r '.data.organization.projectNext.fields.nodes[] | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Bug")             |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_FEATURE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Feature") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_ENHANCEMENT='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Enhancement") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_DOCUMENTATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Documentation")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'TYPE_TRANSLATION='$(jq -r '.data.organization.projectNext.fields.nodes[]  | select(.name== "Type") |.settings | fromjson.options[] | select(.name=="Translation")    |.id' project_data.json) >> $GITHUB_ENV
-
-          # Read the id of the "Status" field options
-          echo 'STATUS_ID='$(jq -r '.data.organization.projectNext.fields.nodes[]     | select(.name== "Status") |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_TODO='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Todo")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_IN_PROGRESS='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="In Progress")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_READY_FOR_REVIEW='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Ready for Review")    |.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_DONE='$(jq -r '.data.organization.projectNext.fields.nodes[]   | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Done")    |.id' project_data.json) >> $GITHUB_ENV
-
-      - name: Add PR to project
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-          PR_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          item_id="$( gh api graphql -f query='
-            mutation($project:ID!, $pr:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project="$PROJECT_ID" -f pr="$PR_ID" --jq '.data.addProjectNextItem.projectNextItem.id')"
-
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
-
-      - name: Export Labels
-        env:
-          PR_DATA: ${{ toJson(github.event.pull_request) }}
-        run: |
-          echo 'LABELS='$(echo "$PR_DATA" | jq -r '[.labels[].name] | join(" ")') >> $GITHUB_ENV
-
-      - name: Set "Type" field
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-        run: |
-          # Only execute this step if the PR contains at least one label
-          if [ "${#LABELS[@]}" -gt 0 ]; then
-
-            # Let by default the type is "Bug"
-            OPTION_ID=$TYPE_BUG
-
-            # If it has "feature" label then set the type to "Feature"
-            if [[ "${LABELS[*]}" =~ "feature" ]]; then
-              OPTION_ID=$TYPE_FEATURE
-            fi
-
-            # If it has "enhancement" label then set the type to "Enhancement"
-            if [[ "${LABELS[*]}" =~ "enhancement" ]]; then
-              OPTION_ID=$TYPE_ENHANCEMENT
-            fi
-
-            # If it has "documentation" label then set the type to "Documentation"
-            if [[ "${LABELS[*]}" =~ "documentation" ]]; then
-              OPTION_ID=$TYPE_DOCUMENTATION
-            fi
-
-            # If it has "translation" label then set the type to "Translation"
-            if [[ "${LABELS[*]}" =~ "translation" ]]; then
-              OPTION_ID=$TYPE_TRANSLATION
-            fi
-
-            # Set the "Type" field to appropriate option
-            gh api graphql -f query='
-              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
-                updateProjectNextItemField(input: {
-                  projectId: $project
-                  itemId: $item
-                  fieldId: $field
-                  value: $opt_id
-                }) {
-                  projectNextItem {
-                    id
-                  }
-                }
-              }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$TYPE_ID" -f opt_id="$OPTION_ID" --silent
-          fi
-
-      - name: Set "Status" field
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-        run: |
-          MERGED=${{github.event.pull_request.merged}}
-          STATE=${{github.event.pull_request.state}}
-          REVIEWERS=${{github.event.pull_request.requested_reviewers}}
-          DRAFT=${{github.event.pull_request.draft}}
-
-          echo "Merged: $MERGED"
-          echo "State: $STATE"
-          echo "Draft: $DRAFT"
-          echo "Reviewer: $REVIEWER"
-
-          OPTION_ID=$STATUS_TODO
-
-          if [[ ("${MERGED}" == "true") || ("${STATE}" == "closed") ]]
-          then
-            OPTION_ID=$STATUS_DONE
-          elif [[ ${#REVIEWERS[@]} -gt 0 ]]
-          then
-            OPTION_ID=$STATUS_READY_FOR_REVIEW
-          else
-            OPTION_ID=$STATUS_IN_PROGRESS
-          fi
-
-          # Expose the OPTION_ID so that it can be used in later steps
-          echo 'PR_STATUS='$OPTION_ID >> $GITHUB_ENV
-
-          gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
-              updateProjectNextItemField(input: {
-                projectId: $project
-                itemId: $item
-                fieldId: $field
-                value: $status_id
-              }) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project="$PROJECT_ID" -f item="$ITEM_ID" -f field="$STATUS_ID" -f status_id="$OPTION_ID" --silent
-
-      - name: Find Linked Issues
-        id: linked_issues
-        uses: hossainemruz/linked-issues@main
-        with:
-          pr_url: ${{github.event.pull_request.html_url}}
-          format: IssueNumber
-
-      - name: Update Linked Issues Status
-        env:
-          GITHUB_TOKEN: ${{secrets.PROJECT_AUTOMATION}}
-        run: |
-          declare -a issues=(${{ steps.linked_issues.outputs.issues }})
-
-          # Loop through the every issues and update their Status to same as the PR Status
-          for i in "${issues[@]}"
-          do
-            # Find the Issue ID
-            ISSUE_ID="$(gh api graphql -f query='
-              query($owner: String!, $name: String!, $issue_number: Int!) {
-                repository(owner: $owner, name: $name) {
-                  issue(number: $issue_number) {
-                    id
-                  }
-                }
-              }' -f owner="${{github.event.pull_request.head.repo.owner.login}}" -f name="${{github.event.pull_request.head.repo.name}}" -F issue_number=$i --jq='.data.repository.issue.id')"
-
-            # Find the id of the Issue at the project board
-            item_id="$( gh api graphql -f query='
-              mutation($project:ID!, $pr:ID!) {
-                addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
-                  projectNextItem {
-                    id
-                  }
-                }
-              }' -f project="$PROJECT_ID" -f pr="$ISSUE_ID" --jq '.data.addProjectNextItem.projectNextItem.id')"
-
-            # Update the Issue Status
-            gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
-              updateProjectNextItemField(input: {
-                projectId: $project
-                itemId: $item
-                fieldId: $field
-                value: $status_id
-              }) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project="$PROJECT_ID" -f item="$item_id" -f field="$STATUS_ID" -f status_id="$PR_STATUS" --silent
-          done

.github/workflows/pull-request.yml

@@ -0,0 +1,83 @@
+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

.gitignore

@@ -2,4 +2,6 @@
 node_modules/
 .DS_Store
 .history/
-resources/
+resources/
+public/
+.hugo_build.lock

.prettierrc.yml

@@ -0,0 +1,5 @@
+printWidth: 100
+tabWidth: 2
+semi: false
+singleQuote: true
+trailingComma: "all"

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.12.1

README.md

@@ -1,3 +1,6 @@
+> [!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)
@@ -34,6 +37,8 @@ A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist desi
   - GoatCounter
   - counter.dev
   - Google Analytics
+  - Matomo/Piwik
+  - [Umami](https://umami.is/)
 - Comment Support
   - [Disqus](https://disqus.com/)
   - [Valine](https://valine.js.org/)
@@ -51,6 +56,7 @@ For more details about the features please visit [here](https://toha-guides.netl
 - Deutsch
 - Español
 - 简体中文
+- 繁體中文
 - हिन्दी
 - Italiano
 - 日本語
@@ -58,6 +64,14 @@ For more details about the features please visit [here](https://toha-guides.netl
 - русский
 - 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).
 
@@ -79,92 +93,70 @@ Here are few screenshots from the [example site](https://hugo-toha.github.io).
 
 ## Requirements
 
-- Hugo Version 0.87.0 or higher
+- 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.
 
 ## Usage
 
-In order to use this theme, follow the following steps:
+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.
 
-#### Add theme as git submodule
+If you want to start from scratch, then follow these steps:
 
-At first, add [Toha](https://github.com/hugo-toha/toha) theme as git submodule to your hugo-site.
+##### 1. Initialize Hugo module on you repo
 
-```console
-$ git submodule add https://github.com/hugo-toha/toha.git themes/toha
+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>
 ```
 
-> 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.
+##### 2. Add this theme as your module dependency
 
-If you don't already have a hugo site, create one by following the step-by-step guide from [here](https://toha-guides.netlify.app/posts/getting-started/prepare-site/).
-
-#### Configuring Site
-
-Now, configure your site to use `toha` theme by adding the following configuration in `config.yaml` file of your site.
+Now, in your `hugo.yaml` file, add a `module` section.
 
 ```yaml
-baseURL: https://hugo-toha.github.io
-
-languageCode: en-us
-title: "John's Blog"
-theme: "toha"
-
-# Manage languages
-# For any more details, you can check the official documentation: https://gohugo.io/content-management/multilingual/
-languages:
-  en:
-    languageName: English
-    weight: 1
-
-# Control TOC depth
-markup:
-  tableOfContents:
-    startLevel: 2
-    endLevel: 6
-    ordered: false
-
-# At least HTML and JSON are required for the main HTML content and
-# client-side JavaScript search
-outputs:
-  home:
-  - HTML
-  - RSS
-  - JSON
-
-# Enable global emoji support
-enableEmoji: true
-
-# Site parameters
-params:
-  # GitHub repo URL and branch of your site
-  gitRepo: https://github.com/hugo-toha/hugo-toha.github.io
-  gitBranch: main
-
-  # specify whether you want to write some blog posts or not
-  enableBlogPost: true
-
-  # specify whether you want to show Table of Contents in reading page
-  enableTOC: true
-
-  # Provide newsletter configuration. 
-  # This feature has been implemented for Mailchimp only for now.
-  # You can also hide it from the footer.
-  newsletter:
-    # specify whether you want to display the newsletter form 
-    enable: true
-    # specify which newsletter provider you want to use
-    provider: mailchimp
-    # specify the target URL for the subscription form
-    mailchimpURL: https://github.us1.list-manage.com/subscribe/post?u=19de52a4603135aae97163fd8&amp;id=094a24c76e
+# Use Hugo modules to add theme
+module:
+  imports:
+  - path: github.com/hugo-toha/toha/v4
 ```
 
-Don't forget to update `title`, `baseURL`, and `gitRepo` fields with your own information. To know about more available configuration options, please visit [here](https://toha-guides.netlify.app/posts/configuration/site-parameters/).
+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 with `toha` theme locally with the following command:
+Now, you can run your hugo site locally with the following steps:
 
-```console
-$ hugo server --theme toha --watch
+##### 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
+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/).
@@ -180,138 +172,6 @@ Here, are some handy shortcodes you can use with this theme.
 - [Video](https://toha-guides.netlify.app/posts/shortcodes/#video)
 - [Mermaid](https://hugo-toha.github.io/posts/shortcodes/#mermaid)
 
-## Project Roadmap
-
-Here, are the current plan and progress of various components of this theme. The components will be prioritized based on users requests.
-
-### 1. Portfolio Mode
-
-Here is the check list for portfolio mode,
-
-- [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
-
-- [x] **Projects**
-
-  - [x] Category Filter
-  - [x] Project Card
-    - [x] Overview
-      - [x] Markdown Support
-    - [x] Github Stars
-    - [x] External URL Support
-    - [x] Technology Tags
-
-- [x] **Recent Posts**
-
-- [x] **Academic Career**
-
-  - [x] Degree
-  - [x] Institution
-  - [x] Timeline
-  - [x] Taken Courses
-  - [x] CGPA
-  - [x] Extracurricular Activities
-
-- [ ] **Publications**
-
-  - [ ] Category Filter
-  - [ ] Card
-  - [ ] Abstract
-  - [ ] Authors
-  - [ ] Tags
-  - [ ] Links
-  - [ ] Gallery
-
-- [x] **Accomplishment / Courses**
-
-  - [x] Overview
-  - [x] Certificate
-
-- [x] **Achievements Gallery**
-  - [x] Image
-  - [x] Summary
-
-### 2. Blog Mode
-
-Here is the checklist for blog mode,
-
-- [ ] **Dedicated Home page**
-
-- [x] **List Page**
-
-  - [x] Post Cards
-  - [x] Sidebar
-  - [x] Pagination
-
-- [x] **Reading Page**
-
-  - [x] Hero Image
-  - [x] Author Information
-  - [x] Sidebar
-  - [x] Table of Contents
-  - [x] Next & Previous Page Navigation
-  - [x] `Improve This Page` Button
-  - [x] Disqus Comment
-
-### 3. Documentation Mode
-
-Here is the check list for documentation mode,
-
-- [ ] **Dedicated Home Page**
-- [ ] **Doc Page**
-  - [ ] Redesign sidebar
-  - [ ] Redesign TOC menu
-  - [ ] Search Capability
-
-### 4. Note Mode
-
-- [ ] **Dedicated Home Page**
-- [ ] **Note Page**
-  - [x] Add note view
-  - [ ] Redesign sidebar
-  - [ ] Add search capability
-
-### 5. Tracking and Comments
-
-- [x] Google Analytics
-- [x] Disqus Comment
-
-### 6. Shortcodes
-
-- [x] Image
-- [x] Split Page into Multiple Column
-- [x] Vertical space between two sections
-- [x] Alert
-- [ ] Figure & sub-figure
-- [ ] Tabs
-- [x] Notes
-
 ## 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.
@@ -333,34 +193,72 @@ For local development, you can make changes in the theme submodule and test the
 
 At first, fork [this repo](https://github.com/hugo-toha/toha). Then, follow the following steps to use the forked theme for local developments,
 
-**Using the forked theme in your own site:**
-
-If you want to run your local development against your own site, follow the following steps:
-
-```bash
-# add the original theme as a submodule of your site if you haven't done already
-$ git submodule add https://github.com/hugo-toha/toha.git themes/toha
-# navigate into the toha theme folder
-$ cd themes/toha
-# add your own fork as a remote
-$ git remote add my-fork https://github.com/<your-github-user>/toha
-# create a new branch for your changes
-$ git checkout -b my-feature-branch
-```
-
-**Using the forked theme in the example site:**
+#### 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
-# clone the example site along with the submodules
-$ git clone git@github.com:hugo-toha/hugo-toha.github.io.git --recursive
-# navigate into the toha theme folder
-$ cd themes/toha
-# add your own fork as a remote
-$ git remote add my-fork https://github.com/<your-github-user>/toha
-# create a new branch for your changes
-$ git checkout -b my-feature-branch
+# 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.

assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}

assets/scripts/application.js

@@ -0,0 +1,11 @@
+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();

assets/scripts/core/device.js

@@ -0,0 +1,36 @@
+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 }
+}

assets/scripts/core/index.js

@@ -0,0 +1,2 @@
+export * from './device'
+export * from './insertScript'

assets/scripts/core/insertScript.js

@@ -0,0 +1,14 @@
+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)
+}

assets/scripts/core/theme-scheme.js

@@ -0,0 +1,9 @@
+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)

assets/scripts/features/copyCode/copyCode.js

@@ -0,0 +1,22 @@
+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)
+    }
+  })
+}

assets/scripts/features/copyCode/index.js

@@ -0,0 +1 @@
+import './copyCode'

assets/scripts/features/darkmode/index.js

@@ -0,0 +1,70 @@
+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'
+    }
+  }
+}

assets/scripts/features/embedpdf/index.js

@@ -0,0 +1,165 @@
+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))
+})

assets/scripts/features/flowchart/index.js

@@ -0,0 +1,3 @@
+if (process.env.FEATURE_FLOWCHART_MERMAID === '1') {
+  import('./mermaid')
+}

assets/scripts/features/flowchart/mermaid.js

@@ -0,0 +1,7 @@
+import mermaid from 'mermaid'
+import * as params from '@params'
+
+const mermaidOptions = params.flowchart?.mermaid || {}
+const options = Object.assign({}, mermaidOptions, { startOnLoad: true })
+
+mermaid.initialize(options)

assets/scripts/features/index.js

@@ -0,0 +1,35 @@
+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')
+}

assets/scripts/features/math/index.js

@@ -0,0 +1,3 @@
+if (process.env.FEATURE_MATH_KATEX === '1') {
+  import('./katex')
+}

assets/scripts/features/math/katex.js

@@ -0,0 +1,21 @@
+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 || {})
+    }
+  )
+})

assets/scripts/features/syntaxhighlight/hljs.js

@@ -0,0 +1,12 @@
+import hljs from 'highlight.js'
+import * as params from '@params'
+
+const defaultOptions = {
+  ignoreUnescapedHTML: true
+}
+
+hljs.configure({
+    ...defaultOptions,
+    ...(params.syntaxhighlight?.hljs || {}),
+});
+hljs.highlightAll();

assets/scripts/features/syntaxhighlight/index.js

@@ -0,0 +1,3 @@
+if (process.env.FEATURE_SYNTAXHIGHLIGHT_HLJS === '1') {
+  import('./hljs')
+}

assets/scripts/features/theme/index.js

@@ -0,0 +1,88 @@
+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'
+    }
+  }
+}

assets/scripts/features/toc/index.js

@@ -0,0 +1,48 @@
+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()
+      }
+    })
+  }
+})

assets/scripts/features/videoplayer/index.js

@@ -0,0 +1,3 @@
+if (process.env.FEATURE_VIDEOPLAYER_PLYR === '1') {
+  import('./plyr')
+}

assets/scripts/features/videoplayer/plyr.js

@@ -0,0 +1,5 @@
+import Plyr from 'plyr'
+import * as params from '@params'
+
+const options = params.videoplayer?.plyr
+window.addEventListener('DOMContentLoaded', () => Plyr.setup('.video-player', options))

assets/scripts/pages/home.js

@@ -0,0 +1,16 @@
+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
+  })
+})

assets/scripts/pages/index.js

@@ -0,0 +1,4 @@
+import './note'
+import './search'
+import './single'
+import './home'

assets/scripts/pages/note.js

@@ -0,0 +1,30 @@
+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)
+  }
+})

assets/scripts/pages/search.js

@@ -0,0 +1,140 @@
+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
+  }
+})

assets/scripts/pages/single.js

@@ -0,0 +1,60 @@
+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'
+      })
+    })
+  }
+})

assets/scripts/process-shim.js

@@ -0,0 +1,3 @@
+export const process = {
+  env: {}
+}

assets/scripts/sections/achievements.js

@@ -0,0 +1,220 @@
+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))

assets/scripts/sections/education.js

@@ -0,0 +1,30 @@
+// 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)))
+})

assets/scripts/sections/index.js

@@ -0,0 +1,8 @@
+import './navbar'
+import './sidebar'
+
+import './education'
+import './achievements'
+import './projects'
+import './skills'
+import './publications'

assets/scripts/sections/navbar.js

@@ -0,0 +1,63 @@
+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')
+      }
+    })
+  })
+})

assets/scripts/sections/projects.js

@@ -0,0 +1,19 @@
+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')

assets/scripts/sections/publications.js

@@ -0,0 +1,13 @@
+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'
+    })
+  }
+})

assets/scripts/sections/sidebar.js

@@ -0,0 +1,38 @@
+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)
+})

assets/scripts/sections/skills.js

@@ -0,0 +1,15 @@
+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'
+    })
+  }
+})

assets/styles/application.template.scss

@@ -0,0 +1,80 @@
+// 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 }}

assets/styles/components/buttons.scss

@@ -0,0 +1,217 @@
+.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;
+    }
+  }
+}

assets/styles/components/cards.scss

@@ -0,0 +1,129 @@
+.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;
+        }
+      }
+    }
+  }
+}

assets/styles/components/images.scss

@@ -0,0 +1,76 @@
+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;
+  }
+}

assets/styles/components/links.scss

@@ -0,0 +1,97 @@
+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');
+    }
+  }
+}

assets/styles/components/misc.scss

@@ -0,0 +1,79 @@
+.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;
+        }
+      }
+    }
+  }
+}

assets/styles/components/tables.scss

@@ -0,0 +1,114 @@
+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);
+      }
+    }
+  }
+}

assets/styles/components/texts.scss

@@ -0,0 +1,124 @@
+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');
+  }
+}

assets/styles/layouts/404.scss

@@ -0,0 +1,64 @@
+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;
+      }
+    }
+  }
+}

assets/styles/layouts/list.scss

@@ -0,0 +1,207 @@
+/* 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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/layouts/main.scss

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

assets/styles/layouts/notes.scss

@@ -0,0 +1,199 @@
+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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/layouts/single.scss

@@ -0,0 +1,389 @@
+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');
+        }
+      }
+    }
+  }
+}

assets/styles/mixins.scss

@@ -0,0 +1,72 @@
+@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;
+}

assets/styles/navigators/navbar.scss

@@ -0,0 +1,286 @@
+@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');
+  }
+}

assets/styles/navigators/sidebar.scss

@@ -0,0 +1,301 @@
+.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');
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/override.scss

@@ -0,0 +1,15 @@
+/* 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;
+//   }
+// }

assets/styles/sections/about.scss

@@ -0,0 +1,232 @@
+@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');
+      }
+    }
+  }
+}

assets/styles/sections/accomplishments.scss

@@ -0,0 +1,78 @@
+.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');
+      }
+    }
+  }
+}

assets/styles/sections/achievements.scss

@@ -0,0 +1,159 @@
+.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');
+        }
+      }
+    }
+  }
+}

assets/styles/sections/education.scss

@@ -0,0 +1,245 @@
+.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');
+  }
+}

assets/styles/sections/experiences.scss

@@ -0,0 +1,156 @@
+.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');
+        }
+      }
+    }
+  }
+}

assets/styles/sections/footer.scss

@@ -0,0 +1,118 @@
+.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');
+    }
+  }
+}

assets/styles/sections/home.scss

@@ -0,0 +1,131 @@
+.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');
+    }
+  }
+}

assets/styles/sections/pdf-viewer.scss

@@ -0,0 +1,45 @@
+.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); }
+  }
+}

assets/styles/sections/projects.scss

@@ -0,0 +1,100 @@
+.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');
+        }
+      }
+    }
+  }
+}

assets/styles/sections/publications.scss

@@ -0,0 +1,140 @@
+.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');
+      }
+    }
+  }
+}

assets/styles/sections/recent-posts.scss

@@ -0,0 +1,32 @@
+.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);
+    }
+  }
+}

assets/styles/sections/skills.scss

@@ -0,0 +1,46 @@
+.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);
+      }
+    }
+  }
+}

assets/styles/variables.scss

@@ -0,0 +1,122 @@
+@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,
+  ),
+);

content/notes/search.bn.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.cn.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.de.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.es.md

@@ -43,7 +43,7 @@ Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
 \```
 
 ### Editar las opciones de fuse.js para buscar
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.fr.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.hi.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.id.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.it.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.jp.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.ko.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.md

@@ -13,7 +13,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -24,7 +24,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -41,7 +41,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.ru.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/notes/search.vn.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/posts/_index.md

@@ -0,0 +1,3 @@
+---
+title: Posts
+---

content/search/search.bn.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/search/search.cn.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/search/search.de.md

@@ -1,5 +1,5 @@
 ---
-title: "Search Results"
+title: "Suchergebnisse"
 date: 2010-06-08T08:06:25+06:00
 weight: 999999
 sitemap:
@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/search/search.es.md

@@ -43,7 +43,7 @@ Esto expone los valores en /index.json: por ejemplo, para agregar `categories`
 \```
 
 ### Editar las opciones de fuse.js para buscar
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",

content/search/search.fr.md

@@ -15,7 +15,7 @@ No content shown here is rendered, all content is based in the template layouts/
 
 Setting a very low sitemap priority will tell search engines this is not important content.
 
-This implementation uses Fusejs, jquery and mark.js
+This implementation uses Fusejs and mark.js
 
 
 ## Initial setup
@@ -26,7 +26,7 @@ Search  depends on additional output content type of JSON in config.toml
   home = ["HTML", "JSON"]
 \```
 
-## Searching additional fileds
+## Searching additional fields
 
 To search additional fields defined in front matter, you must add it in 2 places.
 
@@ -43,7 +43,7 @@ i.e. add `category`
 \```
 
 ### Edit fuse.js options to Search
-`static/js/search.js`
+`assets/scripts/pages/search.js`
 \```
 keys: [
   "title",