Update and run autoprefixer (#601 )

Co-authored-by: kodiakhq[bot] <kodiakhq[bot]@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
add vendor specific css prefixes (#600 )
2022-06-10 15:23:40 +00:00 · 2022-06-10 21:22:48 +06:00 · 2022-06-10 15:18:49 +00:00 · 2022-06-09 04:23:08 +00:00 · 2022-05-16 22:26:23 +06:00 · 2022-05-16 05:08:47 +00:00
152 changed files with 6632 additions and 338 deletions
@@ -8,10 +8,10 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout to latest commit
-        uses: actions/checkout@v2.4.0
+        uses: actions/checkout@v3

      - name: Setup Node
-        uses: actions/setup-node@v2.4.1
+        uses: actions/setup-node@v3
        with:
          node-version: "15.x"

@@ -21,7 +21,7 @@ jobs:
          npm run autoprefixer

      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v3.11.0
+        uses: peter-evans/create-pull-request@v4
        with:
          branch: autoprefixer
          branch-suffix: timestamp
@@ -0,0 +1,28 @@
+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
@@ -39,11 +39,11 @@ jobs:

    steps:
    - name: Checkout repository
-      uses: actions/checkout@v2.4.0
+      uses: actions/checkout@v3

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
      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@v1
+      uses: github/codeql-action/autobuild@v2

    # ℹ️ 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@v1
+      uses: github/codeql-action/analyze@v2
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    # Create/Update release draft
-    - uses: release-drafter/release-drafter@v5.15.0
+    - uses: release-drafter/release-drafter@v5.20.0
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -8,6 +8,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    # checkout to latest commit
-    - uses: actions/checkout@v2.4.0
+    - uses: actions/checkout@v3
    # run markdown linter
-    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.13
+    - uses: gaurav-nelson/github-action-markdown-link-check@1.0.14
@@ -106,7 +106,7 @@ jobs:

            # Set the "Type" field to appropriate option
            gh api graphql -f query='
-              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: ID!) {
+              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
                updateProjectNextItemField(input: {
                  projectId: $project
                  itemId: $item
@@ -136,7 +136,7 @@ jobs:
          fi

          gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: ID!) {
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
              updateProjectNextItemField(input: {
                projectId: $project
                itemId: $item
@@ -109,7 +109,7 @@ jobs:

            # Set the "Type" field to appropriate option
            gh api graphql -f query='
-              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: ID!) {
+              mutation ($project: ID!, $item: ID!, $field: ID!, $opt_id: String!) {
                updateProjectNextItemField(input: {
                  projectId: $project
                  itemId: $item
@@ -153,7 +153,7 @@ jobs:
          echo 'PR_STATUS='$OPTION_ID >> $GITHUB_ENV

          gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: ID!) {
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
              updateProjectNextItemField(input: {
                projectId: $project
                itemId: $item
@@ -204,7 +204,7 @@ jobs:

            # Update the Issue Status
            gh api graphql -f query='
-            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: ID!) {
+            mutation ($project: ID!, $item: ID!, $field: ID!, $status_id: String!) {
              updateProjectNextItemField(input: {
                projectId: $project
                itemId: $item
@@ -30,8 +30,15 @@ A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist desi
 - Achievement Gallery
 - Sidebar to Categorize the Posts
 - Short Codes
- Google Analytics Support
- Disqus Comment Support
+- Analytics Support
+  - GoatCounter
+  - counter.dev
+  - Google Analytics
+- Comment Support
+  - [Disqus](https://disqus.com/)
+  - [Valine](https://valine.js.org/)
+  - [Uttarances](https://utteranc.es/)
+  - [Giscus](https://giscus.app/)

 For more details about the features please visit [here](https://toha-guides.netlify.app/posts/features/).

@@ -49,6 +56,7 @@ For more details about the features please visit [here](https://toha-guides.netl
 - 日本語
 - 한국어
 - русский
+- suomi
 - Tiếng Việt

 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).
@@ -71,7 +79,7 @@ Here are few screenshots from the [example site](https://hugo-toha.github.io).

 ## Requirements

- Hugo Version 0.68.0 or higher
+- Hugo Version 0.87.0 or higher

 ## Usage

@@ -165,10 +173,12 @@ When you run your site for first time, it will start with the default parameters

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

- [Alert](https://toha-guides.netlify.app/posts/short-codes/alert/)
- [Image](https://toha-guides.netlify.app/posts/short-codes/img/)
- [Split](https://toha-guides.netlify.app/posts/short-codes/split/)
- [Vertical Space](https://toha-guides.netlify.app/posts/short-codes/vs/)
+- [Alert](https://toha-guides.netlify.app/posts/shortcodes/#alert)
+- [Image](https://toha-guides.netlify.app/posts/shortcodes/#image)
+- [Split](https://toha-guides.netlify.app/posts/shortcodes/#split)
+- [Vertical Space](https://toha-guides.netlify.app/posts/shortcodes/#vertical-space)
+- [Video](https://toha-guides.netlify.app/posts/shortcodes/#video)
+- [Mermaid](https://hugo-toha.github.io/posts/shortcodes/#mermaid)

 ## Project Roadmap

@@ -118,3 +118,6 @@ other = "নোট সমূহ"

 [disclaimer_text]
 other = "দায় বিজ্ঞপ্তি"
+
+[search]
+other = "অনুসন্ধান করুন"
@@ -121,3 +121,6 @@ other = "Notizen"

 [disclaimer_text]
 other = "Haftungshinweis"
+
+[search]
+other = "Suche"
@@ -121,3 +121,6 @@ other = "Notes"

 [disclaimer_text]
 other = "Liability Notice"
+
+[search]
+other = "Search"
@@ -121,3 +121,6 @@ other = "Notas"

 [disclaimer_text]
 other = "Aviso de responsabilidad"
+
+[search]
+other = "Búsqueda"
@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Koti"
+
+[posts]
+other = "Artikkelit"
+
+[toc_heading]
+other = "Sisällysluettelo"
+
+[tags]
+other = "Tagit"
+
+[categories]
+other = "Kategoriat"
+
+[at]
+other = "at"
+
+[resume]
+other = "Ansioluetteloni"
+
+[navigation]
+other = "Navigointi"
+
+[contact_me]
+other = "Ota yhteyttä minuun:"
+
+[email]
+other = "Sähköposti"
+
+[phone]
+other = "Puhelin"
+
+[newsletter_text]
+other = "Pysy ajan tasalla tilaamalla sähköposti-ilmoitukset"
+
+[newsletter_input_placeholder]
+other = "Syötä sähköpostiosoite"
+
+[newsletter_warning]
+other = "Syöttämällä sähköpostin, hyväksyt että haluat vastaanottaa uutiskirjeen tältä sivustolta."
+
+[submit]
+other = "Lähetä"
+
+[hugoAttributionText]
+other = "Voimanlähteenä"
+
+[prev]
+other = "Edellinen"
+
+[next]
+other = "Seuraava"
+
+[share_on]
+other = "Jaa"
+
+[improve_this_page]
+other = "Paranna tätä sivua"
+
+[out_of]
+other = "out of"
+
+[publications]
+other = "Julkaisut"
+
+[taken_courses]
+other = "Käydyt kurssit"
+
+[course_name]
+other = "Kurssin nimi"
+
+[total_credit]
+other = "Opintopisteet yhteensä"
+
+[obtained_credit]
+other = "Saadut opintopisteet"
+
+[extracurricular_activities]
+other = "Opetusohjelman ulkopuolinen toiminta"
+
+[show_more]
+other = "Näytä lisää"
+
+[show_less]
+other = "Näytä vähemmän"
+
+[responsibilities]
+other = "Työtehtävät:"
+
+[present]
+other = "Tämä päivä"
+
+[comments_javascript]
+other = "Ole hyvä ja enabloi JavaScript katsoaksesi"
+
+[comments_by]
+other = "kommentit mahdollistavat"
+
+[read]
+other = "Lue"
+
+[project_star]
+other = "Tähti"
+
+[project_details]
+other = "Yksityiskohdat"
+
+[err_404]
+other = "Sivua jota etsit ei löydy."
+
+[more]
+other = "Lisää"
+
+[view_certificate]
+other = "Katso todistus"
+
+[notes]
+other = "Muistiinpanot"
+
+[disclaimer_text]
+other = "Vastuuilmoitus"
+
+[search]
+other = "Haku"
@@ -121,3 +121,6 @@ other = "Remarques"

 [disclaimer_text]
 other = "Avis de responsabilité"
+
+[search]
+other = "Chercher"
@@ -121,3 +121,6 @@ other = "टिप्पणियाँ"

 [disclaimer_text]
 other = "दायित्व सूचना"
+
+[search]
+other = "खोज"
@@ -121,3 +121,6 @@ other = "Catatan"

 [disclaimer_text]
 other = "Pemberitahuan Kewajiban"
+
+[search]
+other = "Mencari"
@@ -121,3 +121,6 @@ other = "Appunti"

 [disclaimer_text]
 other = "Avviso di responsabilità"
+
+[search]
+other = "Ricerca"
@@ -118,3 +118,6 @@ other = "ノート"

 [disclaimer_text]
 other = "責任通知"
+
+[search]
+other = "検索"
@@ -121,3 +121,6 @@ other = "메모"

 [disclaimer_text]
 other = "책임 고지"
+
+[search]
+other = "찾다"
@@ -119,4 +119,6 @@ other = "Bekijk certificaat"
 other = "Opmerkingen"

 [disclaimer_text]
-other = "Haftungshinweis"
+other = "Haftungshinweis"
+[search]
+other = "Zoekopdracht"
@@ -121,3 +121,6 @@ other = "Ноты"

 [disclaimer_text]
 other = "Уведомление об ответственности"
+
+[search]
+other = "Поиск"
@@ -121,3 +121,6 @@ other = "Ghi chú"

 [disclaimer_text]
 other = "Thông báo trách nhiệm"
+
+[search]
+other = "Tìm kiếm"
@@ -121,3 +121,6 @@ other = "笔记"

 [disclaimer_text]
 other = "免责声明"
+
+[search]
+other = "搜索"
@@ -86,29 +86,29 @@ other = "查看更多"
 [show_less]
 other = "顯示較少"

-# [responsibilities]
-# other = "Responsibilities:"
+[responsibilities]
+other = "職責:"

-# [present]
-# other = "Present"
+[present]
+other = "現在"

-# [comments_javascript]
-# other = "Please enable JavaScript to view the"
+[comments_javascript]
+other = "請開啟 JavaScript 查看"

-# [comments_by]
-# other = "comments powered by"
+[comments_by]
+other = "評論由"

-# [read]
-# other = "Read"
+[read]
+other = "閱讀"

-# [project_star]
-# other = "Star"
+[project_star]
+other = "Star"

-# [project_details]
-# other = "Details"
+[project_details]
+other = "詳情"

-# [err_404]
-# other = "The page you are looking for is not there yet."
+[err_404]
+other = "您訪問的頁面不存在"

 [more]
 other = "更多的"
@@ -121,3 +121,6 @@ other = "筆記"

 [disclaimer_text]
 other = "免責聲明"
+
+[search]
+other = "搜索"
@@ -9,16 +9,9 @@
    <!------ ADD PAGE SPECIFIC HEADERS ------->
    {{ block "header" . }} {{ end }}

-    <!-- ADD GOOGLE ANALYTICS IF ENABLED -->
-    {{ if site.GoogleAnalytics }}
-        <!-- Google Analytics v3  ID -->
-        {{ if hasPrefix site.GoogleAnalytics "UA-"}}
-          {{ template "_internal/google_analytics_async.html" . }}
-        {{ else }}
-          <!-- Google Analytics v4  ID -->
-          {{ template "_internal/google_analytics.html" . }}
-        {{ end }}
-    {{ end }}
+    <!--================= add analytics if enabled =========================-->
+    {{- partial "analytics.html" . -}}
+
  </head>

  <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
@@ -45,5 +38,9 @@

    <!------- ADD PAGE SPECIFIC SCRIPTS ------>
    {{ block "scripts" . }} {{ end }}
+
+    <!------ IF WANTED, ADD SUPPORT LINKS -------->
+    {{- partial "misc/support.html" . -}}
+
  </body>
 </html>
@@ -20,7 +20,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -0,0 +1,43 @@
+{{- $pctx := . -}}
+{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
+{{- $pages := slice -}}
+{{- if $.IsHome -}}
+{{- $pages = sort $pctx.RegularPages "Date" "desc" -}}
+{{- else if $.IsSection -}}
+{{- $pages = sort $pctx.RegularPagesRecursive "Date" "desc" -}}
+{{- else -}}
+{{- $pages = sort $pctx.RegularPagesRecursive "Date" "desc" -}}
+{{- end -}}
+{{- $limit := .Site.Config.Services.RSS.Limit -}}
+{{- if ge $limit 1 -}}
+{{- $pages = $pages | first $limit -}}
+{{- end -}}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{- with .OutputFormats.Get "RSS" -}}
+    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{- end -}}
+    {{ range $pages }}
+    {{- if ne .RelPermalink "/search/" -}}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+      <description>{{ .Summary | html }}</description>
+    </item>
+    {{ end }}
+    {{ end }}
+  </channel>
+</rss>
@@ -20,7 +20,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -20,7 +20,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -48,7 +48,7 @@
        <div class="author-profile ml-auto align-self-lg-center">
          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
          <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
-          <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
+          <p>{{ .Page.Date | time.Format ":date_full" }}</p>
        </div>

        <div class="title">
@@ -136,7 +136,7 @@
          {{ end }}
          <div class="col-md-6 btn-improve-page">
            {{ if ( eq site.Params.GitForge "gitlab" ) }}
-              <a href="{{ site.Params.GitRepo }}/-/edit/{{ .Scratch.Get "GitBranch" }}/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
+              <a href="{{ site.Params.GitRepo }}/-/edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
            {{ else if ( eq site.Params.GitForge "gitea" ) }}
              <a href="{{ site.Params.GitRepo }}/_edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
            {{ else }} <!--- Make Github-style the default -->
@@ -157,23 +157,13 @@
      <hr />

      <!----- Add comment support  ----->
-      {{ with site.Params.features.comment }}
-        {{ if .enable }}
-          <!-- Add Disqus forum  -->
-          {{ if .disqus.shortName }}
-              {{ partial "disqus.html" . }}
-          <!-- Add valine -->
-          {{ else if .valine }}
-              {{ partial "valine.html" . }}
-          <!-- Add utteranc -->
-          {{ else if .utteranc }}
-              {{ partial "utteranc.html" . }}
-          {{ end }}
-        {{ end }}
+      {{ if site.Params.features.comment.enable }}
+        {{ partial "comments.html" site.Params.features.comment }}
      {{ end }}
+
      <!-- Keep backward compatibility with old config.yaml -->
      {{ if site.DisqusShortname }}
-        {{ partial "disqus.html" . }}
+        {{ partial "comments/disqus.html" (dict (slice "disqus" "shortName")  site.DisqusShortname) }}
      {{ end }}

      </div>
@@ -189,7 +179,7 @@

 {{ define "toc" }}
  <section class="toc-section" id="toc-section">
-    {{ if site.Params.enableTOC }}
+    {{ if and site.Params.enableTOC ( .Params.enableTOC | default true ) }}
    <div class="toc-holder">
      <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
      <hr>
@@ -207,7 +197,15 @@
 <script>
  hljs.initHighlightingOnLoad();
 </script>
+
+<!-------------- Enable Math support for this page  ---------------->
 {{ if .Params.math }}
    {{ partial "math.html" . }}
 {{ end }}
+
+<!-------------- Enable mermaid support for this page  ---------------->
+{{ if .Params.mermaid }}
+    {{ partial "mermaid.html" . }}
+{{ end }}
+
 {{ end }}
@@ -20,7 +20,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -29,16 +29,8 @@
    <!--================= custom style overrides =========================-->
    <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
    
-    <!-- Add Google Analytics if enabled in configuration -->
-    {{ if site.GoogleAnalytics }}
-        <!-- Google Analytics v3  ID -->
-        {{ if hasPrefix site.GoogleAnalytics "UA-"}}
-          {{ template "_internal/google_analytics_async.html" . }}
-        {{ else }}
-          <!-- Google Analytics v4  ID -->
-          {{ template "_internal/google_analytics.html" . }}
-        {{ end }}
-    {{ end }}
+    <!--================= add analytics if enabled =========================-->
+    {{- partial "analytics.html" . -}}
  </head>
  <body data-spy="scroll" data-target="#top-navbar" data-offset="100">

@@ -87,5 +79,9 @@
    <script src="{{ "/js/github-button.js" | relURL }}"></script>
    <script src="{{ "/js/home.js" | relURL }}"></script>
    <script src="{{ "/js/jquery.filterizr.min.js" | relURL }}"></script>
+
+    <!------ ADD SUPPORT LINKS -------->
+    {{- partial "misc/support.html" . -}}
+
  </body>
 </html>
@@ -21,7 +21,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -21,7 +21,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -0,0 +1,49 @@
+<!-- Add Analytics if enabled in configuration -->
+{{ with site.Params.features.analytics }}
+    {{ if .enabled }}
+        <!-- Google Analytics -->
+        {{ with .google }}
+            {{ $privacyConfig:= dict (slice "Site" "Config" "Privacy" "GoogleAnalytics") $.Site.Config.Privacy.GoogleAnalytics }}
+            {{ $analyticsConfig := dict (slice "Site" "GoogleAnalytics") .id }}
+            {{ template "_internal/google_analytics.html" (merge $privacyConfig $analyticsConfig) }}
+        {{ end }}
+
+        <!-- Counter.dev -->
+        {{ with .counterDev }}
+            <script>
+            if (
+                !sessionStorage.getItem("_swa") &&
+                document.referrer.indexOf(location.protocol + "//" + location.host) !== 0
+            ) {
+                fetch(
+                "https://counter.dev/track?" +
+                    new URLSearchParams({
+                    referrer: document.referrer,
+                    screen: screen.width + "x" + screen.height,
+                    user: "{{ .id }}",
+                    utcoffset: "1",
+                    }),
+		    {{ with .referrerPolicy }}
+			    { referrerPolicy: "{{ . }}" }
+		    {{ end }}
+                );
+            }
+            sessionStorage.setItem("_swa", "1");
+            </script>
+        {{ end }}
+
+        <!-- GoatCounter -->
+        {{ with .goatCounter }}
+            <script
+            data-goatcounter="https://{{ .code }}.goatcounter.com/count"
+            async
+            src="//gc.zgo.at/count.js"
+            ></script>
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+<!-- Keep backwards compatibility and consistency with HUGO defaults -->
+{{ if site.GoogleAnalytics }}
+    {{ template "_internal/google_analytics.html" . }}
+{{ end }}
@@ -4,15 +4,19 @@
      <div class="card-head d-flex">
        {{ if .logo }}
          {{ $logoImage := resources.Get .logo }}
-
          {{/*  svg don't support "Fit" operation   */}}
          {{ if ne $logoImage.MediaType.SubType "svg" }}
            {{ $logoImage = $logoImage.Fit "24x24" }}
          {{ end }}
-
+        
          <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+          <h5 class="card-title">{{ .name }}</h5>
+        {{ else if .icon }}
+          {{ $iconName := .icon }}
+          <h5 class="card-title"><span class="{{ $iconName }}"> {{ .name }}</span></h5>
+        {{ else }}
+          <h5 class="card-title">{{ .name }}</h5>
        {{ end }}
-        <h5 class="card-title">{{ .name }}</h5>
      </div>
      <div class="card-body">
        <p class="card-text">{{ .summary | markdownify }}</p>
@@ -0,0 +1,11 @@
+{{ if .disqus.shortName }}
+    {{ partial "comments/disqus.html" . }}
+{{ else if .valine }}
+    {{ partial "comments/valine.html" . }}
+{{ else if .utteranc }}
+    {{ partial "comments/utteranc.html" . }}
+{{ else if .giscus }}
+    {{ partial "comments/giscus.html" . }}
+{{ else if .commento }}
+    {{ partial "comments/commento.html" . }}
+{{ end }}
@@ -0,0 +1,12 @@
+{{ with .commento }}
+    {{ $serverURL   := .serverURL }}
+    {{ $autoInit    := .autoInit | default "true"}}
+    {{ $hideDeleted := .hideDeleted | default "false"}}
+
+    <script defer
+    src="http://{{ $serverURL }}/js/commento.js"
+    data-auto-init="{{ $autoInit }}"
+    data-hide-deleted="{{ $hideDeleted }}"
+    ></script>
+    <div id="commento"></div>
+{{ end }}
@@ -0,0 +1,29 @@
+{{ with .disqus }}
+  <div id="disqus_thread"></div>
+  <script type="text/javascript">
+    (function () {
+      // Don't ever inject Disqus on localhost--it creates unwanted
+      // discussions from 'localhost:1313' on your Disqus account...
+      if (window.location.hostname == "localhost") return;
+
+      var dsq = document.createElement("script");
+      dsq.type = "text/javascript";
+      dsq.async = true;
+      var disqus_shortname = "{{ .shortName }}";
+      dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
+      (
+        document.getElementsByTagName("head")[0] ||
+        document.getElementsByTagName("body")[0]
+      ).appendChild(dsq);
+    })();
+  </script>
+  <noscript
+    >{{ i18n "comments_javascript" }}
+    <a href="https://disqus.com/?ref_noscript"
+      >{{ i18n "comments_by" }} Disqus.</a
+    ></noscript
+  >
+  <a href="https://disqus.com/" class="dsq-brlink"
+    >{{ i18n "comments_by" }} <span class="logo-disqus">Disqus</span></a
+  >
+{{ end }}
@@ -0,0 +1,28 @@
+{{ with .giscus }}
+{{ $repo          := .repo }}
+{{ $repoID        := .repoID }}
+{{ $category      := .category | default "General" }}
+{{ $categoryID    := .categoryID }}
+{{ $theme         := .theme | default "light" }}
+{{ $map           := .map | default "url" }}
+{{ $reaction      := .reaction | default "1" }}
+{{ $metadata      := .metadata | default "0" }}
+{{ $inputPosition := .inputPosition | default "bottom" }}
+{{ $crossOrigin   := .crossOrigin | default "anonymous" }}
+
+<script src="https://giscus.app/client.js"
+        data-repo="{{ $repo }}"
+        data-repo-id="{{ $repoID }}"
+        data-category="{{ $category }}"
+        data-category-id="{{ $categoryID }}"
+        data-mapping="{{ $map }}"
+        data-reactions-enabled="{{ $reaction }}"
+        data-emit-metadata="{{ $metadata }}"
+        data-input-position="{{ $inputPosition }}"
+        data-theme="{{ $theme }}"
+        data-lang="{{ .Site.Language.Lang }}"
+        crossorigin="{{ $crossOrigin }}"
+        async>
+</script>
+{{ end }}
+
@@ -1,6 +1,7 @@
-{{ $repo := site.Params.features.comment.utteranc.repo }}
-{{ $issueTerm := site.Params.features.comment.utteranc.issueTerm }}
-{{ $theme := site.Params.features.comment.utteranc.theme }}
+{{ with .utteranc }}
+{{ $repo        := .repo }}
+{{ $issueTerm   := .issueTerm }}
+{{ $theme       := .theme }}

 <div id="utteranc_thread"></div>
 <div id="comments" class="comments">
@@ -20,3 +21,4 @@
        document.getElementById('comments-container').appendChild(utterances);
    })();
 </script>
+{{ end }}
@@ -0,0 +1,18 @@
+{{ with .valine }}
+<div id="vcomments"></div>
+<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
+<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
+<script type="text/javascript">
+  new Valine({
+    el: "#vcomments",
+    appId: "{{ .appId }}",
+    appKey: "{{ .appKey }}",
+    avatar: "{{ .avatar }}",
+    placeholder: "{{ .placeholder }}",
+    visitor: "{{ .visitor }}",
+    lang: "{{ .lang }}",
+    recordIP: "{{ .recordIP }}",
+    enableQQ: "{{ .enableQQ }}",
+  });
+</script>
+{{ end }}
@@ -1,32 +0,0 @@
-{{ $disqusShortName := site.DisqusShortname }}
-{{ if site.Params.features.comment.disqus.shortName }}
-  {{ $disqusShortName = site.Params.features.comment.disqus.shortName }}
-{{ end }}
-
-<div id="disqus_thread"></div>
-<script type="text/javascript">
-  (function () {
-    // Don't ever inject Disqus on localhost--it creates unwanted
-    // discussions from 'localhost:1313' on your Disqus account...
-    if (window.location.hostname == "localhost") return;
-
-    var dsq = document.createElement("script");
-    dsq.type = "text/javascript";
-    dsq.async = true;
-    var disqus_shortname = "{{ $disqusShortName }}";
-    dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
-    (
-      document.getElementsByTagName("head")[0] ||
-      document.getElementsByTagName("body")[0]
-    ).appendChild(dsq);
-  })();
-</script>
-<noscript
-  >{{ i18n "comments_javascript" }}
-  <a href="https://disqus.com/?ref_noscript"
-    >{{ i18n "comments_by" }} Disqus.</a
-  ></noscript
->
-<a href="https://disqus.com/" class="dsq-brlink"
-  >{{ i18n "comments_by" }} <span class="logo-disqus">Disqus</span></a
->
@@ -1,6 +1,7 @@
 {{/*  variables for enabling/disabling parts of the footer  */}}
 {{ $footerEnabled      := site.Params.footer.enable             | default true }}
 {{ $navigationEnabled  := site.Params.footer.navigation.enable  | default true }}
+{{ $customMenusEnabled := site.Params.footer.navigation.customMenus | default true }}
 {{ $contactMeEnabled   := site.Params.footer.contactMe.enable   | default true }}
 {{ $newsletterEnabled  := site.Params.footer.newsletter.enable  | default true }}
 {{ $credentialsEnabled := site.Params.footer.credentials.enable | default true }}
@@ -26,7 +27,12 @@
    {{ $sections = (index site.Data site.Language.Lang).sections }}
  {{ end }}

-  {{ $copyrightNotice := "© 2021 Copyright."}}
+  {{ $customMenus := site.Params.customMenus }}
+  {{ if (index site.Data site.Language.Lang).site.customMenus }}
+    {{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
+  {{ end }}
+
+  {{ $copyrightNotice := now.Format "2006" | printf "© %s Copyright."}}
  {{ if (index site.Data site.Language.Lang).site }}
    {{ $siteConfig := (index site.Data site.Language.Lang).site }}
    {{ if $siteConfig.copyright }}
@@ -37,7 +43,7 @@

  {{ $disclaimer := "" }}
  {{ $siteConfig := (index site.Data site.Language.Lang).site }}
-  {{ if $siteConfig.disclaimer }} 
+  {{ if $siteConfig.disclaimer }}
    {{ $disclaimer = $siteConfig.disclaimer }}
  {{ end }}

@@ -58,7 +64,7 @@
  {{ end }}
  {{ $hugoLogo = $hugoLogo.RelPermalink}}

-  <footer class="container-fluid text-center align-content-center footer pb-2">
+  <footer id="footer" class="container-fluid text-center align-content-center footer pb-2">
    <div class="container pt-5">
      <div class="row text-left">
        {{ if $navigationEnabled }}
@@ -77,6 +83,15 @@
                </li>
              {{ end }}
            {{- end }}
+            {{ if $customMenusEnabled }}
+              {{ range $customMenus }}
+                {{ if .showOnFooter }}
+                    <li class="nav-item">
+                      <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+                    </li>
+                {{ end }}
+              {{ end }}
+            {{ end }}
          </ul>
          {{ end }}
        </div>
@@ -86,7 +101,23 @@
          <h5>{{ i18n "contact_me" }}</h5>
          <ul>
            {{ range $key,$value:= $author.contactInfo }}
-            <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
+              {{ if (eq $key "email") }}
+                <li><a href={{ printf "mailto:%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fas fa-envelope"></i></span> <span>{{ $value }}</span>
+                </a></li>
+              {{ else if (eq $key "phone") }}
+                <li><span><i class="fas fa-phone-alt"></i></span> <span>{{ $value }}</span></li>
+              {{ else if (eq $key "linkedin") }}
+                <li><a href={{ printf "https://www.linkedin.com/in/%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fab fa-linkedin"></i></span> <span>{{ $author.name }}</span>
+                </a></li>
+              {{ else if (eq $key "github") }}
+                <li><a href={{ printf "https://github.com/%s" $value }} target="_blank" rel="noopener">
+                  <span><i class="fab fa-github"></i></span> <span>{{ $value }}</span>
+                </a></li>
+              {{ else }}
+                <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
+              {{ end }}
            {{ end }}
          </ul>
        </div>
@@ -128,6 +159,7 @@
              <input type='hidden' name='schedule_type' value='1' />
              <small id="emailHelp" class="form-text text-muted">{{ i18n "newsletter_warning" }}</small>
              <button type="submit" class="btn btn-info"> {{ i18n "submit" }} </button>
+              </div>
              </form>
            {{ end }}
          </div>
@@ -9,9 +9,16 @@
 <link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>

-<!--=================== cdn ==============================-->
-<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
+<!--=================== fonts ==============================-->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600">
+
+<!--=================== icons ==============================-->
+<link rel="stylesheet" href="{{ "/fontawesome/css/all.min.css" | relURL }}"/>
+
+<!--=================== dark mode ==========================-->
+{{ if site.Params.darkMode.enable }}
+<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
+{{ end }}

 <!--================= fab-icon =========================-->
 {{/* add favicon only if the site author has provided the the favicon */}}
@@ -1,5 +1,15 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
-    onload="renderMathInElement(document.body);">
+<link rel="stylesheet" href="{{ "/katex/katex.min.css" | relURL }}">
+<script type="text/javascript" defer src="{{ "/katex/katex.min.js" | relURL }}"></script>
+<script type="text/javascript" defer src="{{ "/katex/auto-render.min.js" | relURL }}" onload="renderMathInElement(document.body);">
+    renderMathInElement(
+        document.body,
+        {
+            delimiters: [
+                {left: "$$", right: "$$", display: true},
+                {left: "\\[", right: "\\]", display: true},
+                {left: "$", right: "$", display: false},
+                {left: "\\(", right: "\\)", display: false}
+            ]
+        }
+    );
 </script>
@@ -0,0 +1,6 @@
+<script src="{{ "/js/mermaid-8.14.0.min.js" | relURL }}"></script>
+<script>
+    mermaid.initialize({
+        startOnLoad:true
+    });
+</script>
@@ -0,0 +1,16 @@
+{{ with site.Params.features.support }}
+    {{ if .enabled }}
+        <!-- Enable Ko-Fi floating button -->
+        {{ with .kofi }}
+            <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
+            <script>
+            kofiWidgetOverlay.draw('{{ .user }}', {
+                'type': 'floating-chat',
+                'floating-chat.donateButton.text': '{{ .text }}',
+                'floating-chat.donateButton.text-color': '{{ .textColor }}',
+                'floating-chat.donateButton.background-color': '{{ .backgroundColor }}',
+            });
+            </script>
+        {{ end }}
+    {{ end }}
+{{ end }}
@@ -6,14 +6,14 @@
 <div class="dropdown languageSelector">
    <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{ $countryCode := partial "helpers/country-code.html" . }}
-        <img class="flag" src="https://www.countryflags.io/{{ $countryCode }}/flat/16.png" alt="{{ $countryCode }}">
+        <span class="flag-icon flag-icon-{{$countryCode}}"></span>
        {{ site.Language.LanguageName }}
    </a>
    <div class="dropdown-menu" aria-labelledby="languageSelector">
        {{ range .Translations }}
        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
            {{ $countryCode := partial "helpers/country-code.html" . }}
-            <img class="flag" src="https://www.countryflags.io/{{ $countryCode }}/flat/24.png" alt="{{ $countryCode }}">
+            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
            {{ .Language.LanguageName }}
        </a>
        {{ end }}
@@ -47,6 +47,9 @@
      {{ if .IsTranslated }}
        {{ partial "navigators/lang-selector-2.html" . }}
      {{ end }}
+      {{ if site.Params.darkMode.enable }}
+        {{ partial "navigators/theme-selector.html" . }}
+      {{ end }}
      </ul>
    </div>
  </div>
@@ -1,6 +1,7 @@
 {{/*  variables for enabling/disabling various features  */}}
 {{ $blogEnabled   := site.Params.features.blog.enable   | default false }}
 {{ $notesEnabled  := site.Params.features.notes.enable  | default false }}
+{{ $maxVisibleSections   := site.Params.topNavbar.maxVisibleSections   | default 5 }}

 {{/*  keep backward compatibility for blog post  */}}
 {{ if site.Params.enableBlogPost }}
@@ -65,32 +66,32 @@
      <span class="navbar-toggler-icon"></span>
    </button>

-    <div class="collapse navbar-collapse" id="top-nav-items">
+    <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#home">{{ i18n "home" }}</a>
        </li>
        {{ if $sections }}
-          {{ $sectionCount := 0}}
+          {{ $sectionCount := 1 }}
          {{ range sort $sections "section.weight" }}
            {{ if and (.section.enable) (.section.showOnNavbar)}}
              {{ $sectionCount  = add $sectionCount 1}}
-              {{ if le $sectionCount 5 }}
+              {{ if le $sectionCount $maxVisibleSections }}
                <li class="nav-item">
                  <a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                </li>
              {{ end }}
            {{ end }}
          {{- end }}
-          {{ if gt $sectionCount 5 }}
+          {{ if gt $sectionCount $maxVisibleSections }}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                {{ $sectionCount := 0 }}
+                {{ $sectionCount := 1 }}
                {{ range sort $sections "section.weight" }}
                  {{ if and (.section.enable) (.section.showOnNavbar) }}
                    {{ $sectionCount  = add $sectionCount 1}}
-                    {{ if gt $sectionCount 5 }}
+                    {{ if gt $sectionCount $maxVisibleSections }}
                      <a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                    {{ end }}
                  {{ end }}
@@ -114,13 +115,18 @@
          </li>
        {{ end }}
        {{ range $customMenus }}
-          <li class="nav-item">
-            <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
-          </li>
+            {{ if (not .hideFromNavbar) }}
+              <li class="nav-item">
+                <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
+              </li>
+            {{ end }}
        {{ end }}
        {{ if .IsTranslated }}
          {{ partial "navigators/lang-selector.html" . }}
        {{ end }}
+        {{ if site.Params.darkMode.enable }}
+          {{ partial "navigators/theme-selector.html" . }}
+        {{ end }}
      </ul>
    </div>
  </div>
@@ -0,0 +1,20 @@
+<li class="nav-item dropdown">
+<!-- This is for initializing the color scheme selection for new visitors. See /js/darkmode.js -->
+<div id="theme-initialization" style="display: none;"
+  default-theme="{{ site.Params.darkMode.default }}"></div>
+<a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
+  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+</a>
+<div class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
+  <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
+  </a>
+  <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+  </a>
+  <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
+    <img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
+  </a>
+</div>
+</li>
@@ -5,3 +5,10 @@
 <script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>
+
+{{ if site.Params.darkMode.enable }}
+{{ if eq site.Params.darkMode.provider "darkreader" }}
+<script type="text/javascript" src="{{ "/js/darkreader.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/darkmode-darkreader.js" | relURL }}"></script>
+{{ end }}
+{{ end }}
@@ -31,7 +31,7 @@
          <li>
            {{ if eq .name "Email" }}
              <a href="mailto:{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"><i class="{{ .icon }}"></i></a>
-            {{ else if eq .name "Phone" }}
+            {{ else if eq .name (i18n "phone") }}
              <a href="tel:{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"><i class="{{ .icon }}"></i></a>
            {{ else }}
              <a href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"><i class="{{ .icon }}"></i></a>
@@ -6,9 +6,12 @@
 <div class="container-fluid anchor pb-5 accomplishments-section">
  {{ if not (.section.hideTitle) }}
    <h1 class="text-center">
-      <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
  {{ end }}
-
+  
  <div class="container">
    <div class="row" id="acomplishment-card-holder">
      {{ range .accomplishments }}
@@ -6,7 +6,10 @@
 <div class="container-fluid anchor pb-5 achievements-section">
  {{ if not (.section.hideTitle) }}
    <h1 class="text-center">
-      <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
  {{ end }}
  <div class="container">
    <div class="row" id="gallery">
@@ -4,17 +4,24 @@
 {{ end }}

 <div class="container-fluid anchor pb-5 education-section education-alt" id="{{ $sectionID }}">
-    {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
-    {{ end }}
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ end }}

-    <div class="container">
-        <table class="education-info-table">
-            <tbody>
-                {{ range .degrees}}
-                <tr>
-                    <td class="icon">
-                        <div class="hline"></div>
+  <div class="container">
+    <table class="education-info-table">
+        <tbody>
+            {{ $count := len .degrees }}
+            {{ range .degrees}}
+            <tr>
+                <td class="icon">
+                    {{ if gt $count 1}}
+                    <div class="hline"></div>
+                    {{ end }}
                        <div class="icon-holder">
                            <i class="fas {{ .icon }}"></i>
                        </div>
@@ -53,6 +60,7 @@
                                </div>
                            {{ end }}
                            {{ if .takenCourses }}
+                            {{ $collapseAfter  := .takenCourses.collapseAfter | default 2 }}
                            <div class="taken-courses">
                                <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
                                {{ if .takenCourses.showGrades }}
@@ -65,7 +73,7 @@
                                    </thead>
                                    <tbody>
                                        {{ range $index,$course := .takenCourses.courses }}
-                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                        <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">
                                            <td>{{ $course.name }}</td>
                                            {{ if not $hideScale  }}<td>{{ $course.outOf }}</td>{{ end }}
                                            <td>{{ $course.achieved }}</td>
@@ -76,11 +84,11 @@
                                {{ else }}
                                    <ul>
                                        {{ range $index,$course := .takenCourses.courses }}
-                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li>
                                        {{ end }}
                                    </ul>
                                {{ end }}
-                                {{ if gt (len .takenCourses.courses) 2 }}
+                                {{ if gt (len .takenCourses.courses) $collapseAfter }}
                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
                                    onclick="toggleCourseVisibility(this);" id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
@@ -114,4 +122,4 @@
            </tbody>
        </table>
    </div>
-</div>
+</div>
@@ -4,18 +4,24 @@
 {{ end }}

 <div class="container-fluid anchor pb-5 education-section">
-    {{ if not (.section.hideTitle) }}
+  {{ if not (.section.hideTitle) }}
    <h1 class="text-center">
        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
-    {{ end }}
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ end }}

-    <div class="container">
-        <table class="education-info-table">
-            <tbody>
-                {{ range .degrees}}
-                <tr>
-                    <td class="icon">
-                        <div class="hline"></div>
+  <div class="container">
+    <table class="education-info-table">
+        <tbody>
+            {{ $count := len .degrees }}
+            {{ range .degrees}}
+            <tr>
+                <td class="icon">
+                    {{ if gt $count 1}}
+                    <div class="hline"></div>
+                    {{ end }}
                        <div class="icon-holder">
                            <i class="fas {{ .icon }}"></i>
                        </div>
@@ -54,6 +60,7 @@
                                </div>
                            {{ end }}
                            {{ if .takenCourses }}
+                            {{ $collapseAfter  := .takenCourses.collapseAfter | default 2 }}
                            <div class="taken-courses">
                                <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
                                {{ if .takenCourses.showGrades }}
@@ -66,7 +73,7 @@
                                    </thead>
                                    <tbody>
                                        {{ range $index,$course := .takenCourses.courses }}
-                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                        <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">
                                            <td>{{ $course.name }}</td>
                                            {{ if not $hideScale  }}<td>{{ $course.outOf }}</td>{{ end }}
                                            <td>{{ $course.achieved }}</td>
@@ -77,11 +84,11 @@
                                {{ else }}
                                    <ul>
                                        {{ range $index,$course := .takenCourses.courses }}
-                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li>
                                        {{ end }}
                                    </ul>
                                {{ end }}
-                                {{ if gt (len .takenCourses.courses ) 2 }}
+                                {{ if gt (len .takenCourses.courses ) $collapseAfter }}
                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
                                    onclick="toggleCourseVisibility(this);" id="show-more-btn">{{ i18n "show_more"}}</button>
                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
@@ -106,4 +113,4 @@
            </tbody>
        </table>
    </div>
-</div>
+</div>
@@ -6,8 +6,10 @@
 <div class="container-fluid anchor pb-5 experiences-section">
  {{ if not (.section.hideTitle) }}
    <h1 class="text-center">
-      <span id="{{ $sectionID }}"></span>{{ .section.name }}
-    </h1>
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
  {{ end }}

  <div class="container timeline text-justify">
@@ -29,4 +31,4 @@
     {{ end }}
   {{ end }}
  </div>
-</div>
+</div>
@@ -1,5 +1,5 @@
 {{ if gt (len .positions) 1 }}
-  {{ partial "sections/experiences/multiple-positions" . }}
+  {{ partial "sections/experiences/multiple-positions.html" . }}
 {{ else }}
  {{ partial "sections/experiences/single-position.html" . }}
 {{ end }}
@@ -12,10 +12,12 @@
    <!-- Add company overview -->
    <p>{{ .company.overview | markdownify }}</p>
    <!-- Add the responsibilities handled at this position -->
+    {{ if $position.responsibilities }}
    <h6 class="text-muted">{{ i18n "responsibilities" }}</h6>
    <ul class="justify-content-around">
    {{ range $position.responsibilities }}
        <li>{{ . | markdownify }}</li>
    {{ end }}
    </ul>
+    {{ end }}
 </div>
@@ -5,7 +5,11 @@

 <div class="container-fluid anchor pb-5 projects-section" id="{{ $sectionID }}">
  {{ if not (.section.hideTitle) }}
-    <h1 class="text-center">{{ .section.name }}</h1>
+    <h1 class="text-center">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
  {{ end }}
  <div class="container ml-auto text-center">
    <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
@@ -12,7 +12,10 @@
 <div class="container-fluid anchor pb-5 recent-posts-section">
  {{ if not (.section.hideTitle) }}
    <h1 class="text-center">
-      <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
  {{ end }}
  <div class="container">
    <div class="row" id="recent-post-cards">
@@ -6,7 +6,10 @@
 <div class="container-fluid anchor pb-5 skills-section">
  {{ if not (.section.hideTitle) }}
    <h1 class="text-center">
-      <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
  {{ end }}
  <div class="container d-flex-block">
    <div class="row" id="primary-skills">
@@ -1,17 +0,0 @@
-<!-- valine -->
-<div id="vcomments"></div>
-<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
-<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
-<script type="text/javascript">
-  new Valine({
-    el: "#vcomments",
-    appId: "{{ .valine.appId }}",
-    appKey: "{{ .valine.appKey }}",
-    avatar: "{{ .valine.avatar }}",
-    placeholder: "{{ .valine.placeholder }}",
-    visitor: "{{ .valine.visitor }}",
-    lang: "{{ .valine.lang }}",
-    recordIP: "{{ .valine.recordIP }}",
-    enableQQ: "{{ .valine.enableQQ }}",
-  });
-</script>
@@ -0,0 +1,13 @@
+{{ $alignment:= .Get "align"}}
+{{ if not $alignment }}
+    {{ $alignment = "center"}}
+{{ end }}
+
+{{ $background:= .Get "background" }}
+{{ if not $background }}
+    {{ $background = "none"}}
+{{ end }}
+
+<div class="mermaid" align="{{ $alignment }}" style="background-color: {{ $background }}; border-radius: 5px;">
+    {{ safeHTML .Inner }}
+</div>
@@ -20,7 +20,7 @@
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
-          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
@@ -8,8 +8,8 @@
      "version": "1.0.0",
      "license": "MIT",
      "devDependencies": {
-        "autoprefixer": "^10.4.0",
-        "postcss": "^8.3.11",
+        "autoprefixer": "^10.4.7",
+        "postcss": "^8.4.14",
        "postcss-cli": "^8.3.1"
      }
    },
@@ -104,17 +104,27 @@
      }
    },
    "node_modules/autoprefixer": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
-      "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
      "dependencies": {
-        "browserslist": "^4.17.5",
-        "caniuse-lite": "^1.0.30001272",
-        "fraction.js": "^4.1.1",
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
+        "fraction.js": "^4.2.0",
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
      },
      "bin": {
        "autoprefixer": "bin/autoprefixer"
@@ -122,10 +132,6 @@
      "engines": {
        "node": "^10 || ^12 || >=14"
      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
      "peerDependencies": {
        "postcss": "^8.1.0"
      }
@@ -152,15 +158,25 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-      "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
+      "version": "4.20.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
      "dependencies": {
-        "caniuse-lite": "^1.0.30001271",
-        "electron-to-chromium": "^1.3.878",
+        "caniuse-lite": "^1.0.30001332",
+        "electron-to-chromium": "^1.4.118",
        "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.3",
        "picocolors": "^1.0.0"
      },
      "bin": {
@@ -168,21 +184,23 @@
      },
      "engines": {
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001272",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
-      "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
+      "version": "1.0.30001340",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz",
+      "integrity": "sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==",
      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
    },
    "node_modules/chalk": {
      "version": "4.1.2",
@@ -278,9 +296,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.3.883",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.883.tgz",
-      "integrity": "sha512-goyjNx4wB9j911PBteb+AXNbErug7rJVkmDXWdw5SCVn2JlARBwsqucPkvp1h5mXWxHUbBRK3bwXTrqSxSiAIQ==",
+      "version": "1.4.137",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
      "dev": true
    },
    "node_modules/emoji-regex": {
@@ -336,9 +354,9 @@
      }
    },
    "node_modules/fraction.js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
      "dev": true,
      "engines": {
        "node": "*"
@@ -603,9 +621,9 @@
      }
    },
    "node_modules/nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
      "dev": true,
      "bin": {
        "nanoid": "bin/nanoid.cjs"
@@ -615,9 +633,9 @@
      }
    },
    "node_modules/node-releases": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
      "dev": true
    },
    "node_modules/normalize-path": {
@@ -675,21 +693,27 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.3.11",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
-      "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
      "dependencies": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.2"
      },
      "engines": {
        "node": "^10 || ^12 || >=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
      }
    },
    "node_modules/postcss-cli": {
@@ -772,9 +796,9 @@
      }
    },
    "node_modules/postcss-value-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
      "dev": true
    },
    "node_modules/pretty-hrtime": {
@@ -888,9 +912,9 @@
      }
    },
    "node_modules/source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
      "dev": true,
      "engines": {
        "node": ">=0.10.0"
@@ -1083,17 +1107,17 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
-      "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
      "dev": true,
      "requires": {
-        "browserslist": "^4.17.5",
-        "caniuse-lite": "^1.0.30001272",
-        "fraction.js": "^4.1.1",
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
+        "fraction.js": "^4.2.0",
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
      }
    },
    "binary-extensions": {
@@ -1112,22 +1136,22 @@
      }
    },
    "browserslist": {
-      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-      "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
+      "version": "4.20.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
      "dev": true,
      "requires": {
-        "caniuse-lite": "^1.0.30001271",
-        "electron-to-chromium": "^1.3.878",
+        "caniuse-lite": "^1.0.30001332",
+        "electron-to-chromium": "^1.4.118",
        "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.3",
        "picocolors": "^1.0.0"
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30001272",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
-      "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
+      "version": "1.0.30001340",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz",
+      "integrity": "sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==",
      "dev": true
    },
    "chalk": {
@@ -1204,9 +1228,9 @@
      }
    },
    "electron-to-chromium": {
-      "version": "1.3.883",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.883.tgz",
-      "integrity": "sha512-goyjNx4wB9j911PBteb+AXNbErug7rJVkmDXWdw5SCVn2JlARBwsqucPkvp1h5mXWxHUbBRK3bwXTrqSxSiAIQ==",
+      "version": "1.4.137",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
      "dev": true
    },
    "emoji-regex": {
@@ -1253,9 +1277,9 @@
      }
    },
    "fraction.js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
      "dev": true
    },
    "fs-extra": {
@@ -1447,15 +1471,15 @@
      }
    },
    "nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
      "dev": true
    },
    "node-releases": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
      "dev": true
    },
    "normalize-path": {
@@ -1495,14 +1519,14 @@
      "dev": true
    },
    "postcss": {
-      "version": "8.3.11",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
-      "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
      "dev": true,
      "requires": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.2"
      }
    },
    "postcss-cli": {
@@ -1551,9 +1575,9 @@
      }
    },
    "postcss-value-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
      "dev": true
    },
    "pretty-hrtime": {
@@ -1620,9 +1644,9 @@
      "dev": true
    },
    "source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
      "dev": true
    },
    "string-width": {
@@ -17,8 +17,8 @@
  },
  "homepage": "https://github.com/hossainemruz/toha#readme",
  "devDependencies": {
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.3.11",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
    "postcss-cli": "^8.3.1"
  }
 }
@@ -0,0 +1,20 @@
+/* Note: No need to invert when the screen is small because the navbar is
+   collapsed to a hamburger menu. */
+@media only screen and (min-width: 1200px) {
+  .dynamic-navbar .navbar-icon-svg-dark {
+    filter: invert(1);
+  };
+}
+
+@media only screen and (min-width: 1200px) {
+  .dropdown-menu-icons-only {
+    width: 25px;
+    min-width: 3rem;
+  }
+}
+
+.menu-icon-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
@@ -1,6 +1,7 @@
 .education-section .education-info-table {
  width: 100%;
  border: none;
+  background: none;
 }

 .education-section .education-info-table tr:hover {
@@ -12,6 +13,7 @@
 .education-section .education-info-table td {
  border: none;
  padding: 0;
+  background: none;
 }

 .education-section .timeframe {
@@ -21,8 +23,8 @@

 .education-section h1 > span{
  margin-top: -55px;  /* Size of fixed header */
-  padding-bottom:55px; 
-  display: block; 
+  padding-bottom:55px;
+  display: block;
 }

 .education-section .icon {
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 364 364" style="enable-background:new 0 0 364 364;" xml:space="preserve">
+<g>
+	<path d="M350,60.5h-50c-7.72,0-14,6.28-14,14v225c0,7.72,6.28,14,14,14h50c7.72,0,14-6.28,14-14v-225
+		C364,66.78,357.72,60.5,350,60.5z M325.864,166.5c-11.23,0-20.333-9.104-20.333-20.333s9.104-20.333,20.333-20.333
+		s20.333,9.104,20.333,20.333S337.094,166.5,325.864,166.5z"/>
+	<path d="M230,50.5H30c-16.542,0-30,13.458-30,30v149c0,16.542,13.458,30,30,30h79v21.765c0,0.665-0.466,1.235-0.847,1.235H52.351
+		C46.092,282.5,41,287.329,41,293.265v9.235c0,5.962,5.198,11,11.351,11h156.604c6.091,0,11.046-4.935,11.046-11v-9.235
+		c0-6.037-4.852-10.765-11.046-10.765h-55.803c-0.517,0-1.151-0.681-1.151-1.235V259.5h78c16.542,0,30-13.458,30-30v-149
+		C260,63.958,246.542,50.5,230,50.5z M230,80.5l0.017,133H30v-133H230z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 206.622 206.622" style="enable-background:new 0 0 206.622 206.622;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M155.287,58.38c-6.703-7.189-14.65-12.775-23.62-16.603c-1.299-0.552-2.8-0.291-3.83,0.672
+				c-1.034,0.963-1.4,2.443-0.94,3.777c8.128,23.444,1.654,49.524-16.485,66.441c-18.146,16.918-44.614,21.557-67.43,11.812
+				c-1.288-0.55-2.8-0.291-3.83,0.672c-1.034,0.963-1.4,2.443-0.94,3.777c3.197,9.218,8.215,17.535,14.918,24.72
+				c12.721,13.643,29.996,21.517,48.64,22.168c0.836,0.03,1.668,0.043,2.5,0.043c17.728,0,34.54-6.611,47.571-18.764
+				c13.647-12.724,21.517-29.998,22.168-48.643C174.658,89.807,168.011,72.025,155.287,58.38z M166.883,108.203
+				c-0.585,16.74-7.655,32.251-19.905,43.675c-12.25,11.423-28.223,17.425-44.959,16.809c-16.743-0.583-32.252-7.652-43.674-19.904
+				c-4.21-4.511-7.678-9.519-10.363-14.947c23.47,6.872,49.127,0.987,67.291-15.952c18.167-16.941,25.828-42.13,20.608-66.02
+				c5.23,3.057,9.984,6.867,14.19,11.382C161.496,75.496,167.465,91.464,166.883,108.203z"/>
+			<path d="M167.607,163.757c-1.393-1.393-3.649-1.393-5.042,0s-1.393,3.649,0,5.042l7.563,7.563
+				c0.696,0.696,1.609,1.045,2.521,1.045c0.912,0,1.825-0.348,2.521-1.045c1.393-1.393,1.393-3.649,0-5.042L167.607,163.757z"/>
+			<path d="M170.128,30.259l-7.563,7.565c-1.393,1.393-1.393,3.651,0,5.042c0.696,0.696,1.609,1.045,2.521,1.045
+				s1.825-0.348,2.521-1.045l7.563-7.565c1.393-1.393,1.393-3.651,0-5.042C173.777,28.866,171.521,28.866,170.128,30.259z"/>
+			<path d="M103.311,188.793c-1.971,0-3.566,1.597-3.566,3.566v10.697c0,1.969,1.595,3.566,3.566,3.566
+				c1.971,0,3.566-1.597,3.566-3.566v-10.697C106.877,190.39,105.282,188.793,103.311,188.793z"/>
+			<path d="M201.371,99.745h-10.697c-1.971,0-3.566,1.597-3.566,3.566c0,1.969,1.595,3.566,3.566,3.566h10.697
+				c1.971,0,3.566-1.597,3.566-3.566C204.937,101.342,203.341,99.745,201.371,99.745z"/>
+			<path d="M39.015,42.866c0.696,0.696,1.609,1.045,2.521,1.045s1.825-0.348,2.521-1.045c1.393-1.391,1.393-3.649,0-5.042
+				l-7.563-7.565c-1.393-1.393-3.649-1.393-5.042,0c-1.393,1.391-1.393,3.649,0,5.042L39.015,42.866z"/>
+			<path d="M39.015,163.757l-7.563,7.563c-1.393,1.393-1.393,3.649,0,5.042c0.696,0.696,1.609,1.045,2.521,1.045
+				c0.912,0,1.825-0.348,2.521-1.045l7.563-7.563c1.393-1.393,1.393-3.649,0-5.042C42.664,162.364,40.408,162.364,39.015,163.757z"
+				/>
+			<path d="M103.311,17.829c1.971,0,3.566-1.597,3.566-3.566V3.566c0-1.969-1.595-3.566-3.566-3.566
+				c-1.971,0-3.566,1.597-3.566,3.566v10.697C99.745,16.232,101.34,17.829,103.311,17.829z"/>
+			<path d="M15.949,99.745H5.251c-1.971,0-3.566,1.597-3.566,3.566c0,1.969,1.595,3.566,3.566,3.566h10.697
+				c1.971,0,3.566-1.597,3.566-3.566C19.514,101.342,17.919,99.745,15.949,99.745z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g id="Sun">
+	<path d="M32.1318512,18.2793007c-7.7119007,0-13.9863014,6.2743988-13.9863014,13.9862976
+		s6.2744007,13.9864006,13.9863014,13.9864006s13.9862976-6.274498,13.9862976-13.9864006
+		S39.84375,18.2793007,32.1318512,18.2793007z M32.1318512,44.2793007c-6.6245003,0-12.0137005-5.3897018-12.0137005-12.0137024
+		s5.3892002-12.0135975,12.0137005-12.0135975s12.0136986,5.3895988,12.0136986,12.0135975
+		S38.7563515,44.2793007,32.1318512,44.2793007z"/>
+	<path d="M32.0000496,13.1688995c0.5522003,0,1-0.4471998,1-1V1c0-0.5527-0.4477997-1-1-1c-0.5522995,0-1,0.4473-1,1v11.1688995
+		C31.0000496,12.7216997,31.4477501,13.1688995,32.0000496,13.1688995z"/>
+	<path d="M32.0000496,50.830101c-0.5522995,0-1,0.4472008-1,1V63c0,0.5527,0.4477005,1,1,1c0.5522003,0,1-0.4473,1-1V51.830101
+		C33.0000496,51.2773018,32.5522499,50.830101,32.0000496,50.830101z"/>
+	<path d="M62.263649,30.4452991H51.09375c-0.5522003,0-1,0.4473-1,1s0.4477997,1.0000019,1,1.0000019h11.169899
+		c0.5522995,0,1-0.4473019,1-1.0000019S62.8159485,30.4452991,62.263649,30.4452991z"/>
+	<path d="M13.90625,31.4452991c0-0.5527-0.447794-1-0.999999-1H1.7363508c-0.5523,0-1,0.4473-1,1s0.4477,1.0000019,1,1.0000019
+		H12.906251C13.458456,32.4453011,13.90625,31.9979992,13.90625,31.4452991z"/>
+	<path d="M45.1801491,19.8778992c0.2559013,0,0.5116997-0.097599,0.7070999-0.2929001l7.8988991-7.8984995
+		c0.3906021-0.3905993,0.3906021-1.0233994,0-1.4139996c-0.3905983-0.3907003-1.0234985-0.3907003-1.4140968,0l-7.8989029,7.8984003
+		c-0.3905983,0.3906002-0.3905983,1.0233994,0,1.4140987C44.668457,19.7803001,44.9243507,19.8778992,45.1801491,19.8778992z"/>
+	<path d="M45.887249,45.2030983c-0.3906975-0.3905983-1.0234985-0.3905983-1.4141006,0
+		c-0.3905983,0.3907013-0.3905983,1.0235023,0,1.4141006l7.8989029,7.8973999
+		c0.1952972,0.1954002,0.4511986,0.2929993,0.7070999,0.2929993c0.2557983,0,0.5116997-0.097599,0.7069969-0.2929993
+		c0.3906021-0.3905983,0.3906021-1.0233994,0-1.4139977L45.887249,45.2030983z"/>
+	<path d="M18.112751,19.5849991c0.1954002,0.1953011,0.4511986,0.2929001,0.7070999,0.2929001
+		c0.2558002,0,0.5116997-0.097599,0.7069988-0.2929001c0.3906059-0.3906994,0.3906059-1.0234985,0-1.4140987L11.6289501,10.2725
+		c-0.3906994-0.3907003-1.0234947-0.3907003-1.4140997,0c-0.3906002,0.3906002-0.3906002,1.0234003,0,1.4139996
+		L18.112751,19.5849991z"/>
+	<path d="M19.5712509,45.2700996c-0.0177002-0.0208015-0.024601-0.0471992-0.0444012-0.0670013
+		c-0.3906002-0.3905983-1.0233936-0.3905983-1.4140987,0l-3.9401007,3.9400024l-4.0341949,3.8446999
+		c-0.3999052,0.3811989-0.415205,1.0139008-0.0339994,1.4137993c0.0192947,0.0203018,0.045495,0.0278015,0.066,0.0460014
+		c0.0176945,0.0208969,0.0245943,0.0472984,0.0443945,0.0669975c0.1953001,0.1954002,0.4512005,0.2929993,0.7069998,0.2929993
+		c0.2559004,0,0.5117006-0.097599,0.7070999-0.2929993l3.9401007-3.9398994l4.0341997-3.8446999
+		c0.3999004-0.3811989,0.415205-1.0139008,0.0340004-1.4137993C19.6179504,45.2958984,19.5917511,45.2882996,19.5712509,45.2700996z
+		"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
@@ -0,0 +1,59 @@
+const DARK = "dark";
+const LIGHT = "light";
+const SYSTEM = "system";
+const COLOR_THEME = "color-theme";
+const DARK_OPTIONS = {
+  brightness: 100,
+  contrast: 100,
+  sepia: 0
+};
+const SVG_INVERT = {invert: ['img[src$=".svg"]']};
+const NAVBAR_ICON_ID = "navbar-theme-icon-svg";
+const DARK_ICON = "/icons/moon-svgrepo-com.svg";
+const LIGHT_ICON = "/icons/sun-svgrepo-com.svg";
+const SYSTEM_ICON = "/icons/computer-svgrepo-com.svg";
+
+function enableDarkTheme() {
+  localStorage.setItem(COLOR_THEME, DARK);
+  DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = DARK_ICON;
+}
+
+function enableLightTheme() {
+  localStorage.setItem(COLOR_THEME, LIGHT);
+  DarkReader.disable();
+  document.getElementById(NAVBAR_ICON_ID).src = LIGHT_ICON;
+}
+
+function useSystemTheme() {
+  localStorage.setItem(COLOR_THEME, SYSTEM);
+  DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = SYSTEM_ICON;
+}
+
+function initializeColorTheme() {
+  // We're using the themeInitialization attributes as a 'hack' for setting up
+  // the default color scheme because we don't want to complicate this further
+  // by creating custom javascript output in Hugo.
+  let themeInitialization = document.getElementById("theme-initialization");
+  let defaultColorScheme = themeInitialization.getAttribute('default-theme');
+  // If the user has already selected a preferred theme then use that instead
+  // of the default theme. Also, the default theme gets loaded to localStorage
+  // on the first visit.
+  let colorTheme = localStorage.getItem(COLOR_THEME);
+  if (colorTheme == null || colorTheme.length == 0) {
+    colorTheme = defaultColorScheme;
+  }
+  // Enable the color theme
+  if (colorTheme == DARK) {
+    enableDarkTheme();
+  } else if (colorTheme == SYSTEM) {
+    useSystemTheme();
+  } else {
+    // We use light theme for the two conditions below.
+    // 1. the selected theme is light
+    // 2. no default theme is found - fall back to original behavior
+    enableLightTheme();
+  }
+}
+initializeColorTheme()
@@ -338,7 +338,6 @@ var projectCards;
    // re-render custom functions on window resize
    window.onresize = function () {
      detectDevice();
-      adjustSkillCardsHeight();
      adjustRecentPostsHeight();
      showAchievements();
    };
@@ -158,18 +158,16 @@ function toggleCourseVisibility(elem) {
  }

  // toggle hidden-course class from the third elements
-  for (var i = 0; i < courses.length; i++) {
-    if (i > 1 && courses[i].classList !== null) {
-      courses[i].classList.toggle("hidden-course");
+  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 current button visibility
-  elem.classList.toggle("hidden");
-  // toggle the alternate button visibility
-  if  (elem.id === "show-more-btn"){
-    document.getElementById("show-less-btn").classList.toggle("hidden");
-  }else{
-    document.getElementById("show-more-btn").classList.toggle("hidden");
+  // toggle the buttons visibility
+  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
+  for (const buttonToToggle of buttonsToToggle) {
+    buttonToToggle.classList.toggle("hidden");
  }
 }
@@ -1,5 +1,42 @@
 "use strict";

+const updateNavBar = () => {
+  if ($(document).scrollTop() > 40) {
+    $('#top-navbar').removeClass('initial-navbar');
+    $('#top-navbar').addClass('final-navbar shadow');
+
+    $('#navbar-toggler').removeClass('navbar-dark');
+    $('#navbar-toggler').addClass('navbar-light');
+
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
+
+    // get the main logo from hidden img tag
+    let mainLogo = document.getElementById("main-logo")
+    if (mainLogo !== null) {
+      let logoURL = mainLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+
+  } else {
+    $('#top-navbar').removeClass('final-navbar shadow');
+    $('#top-navbar').addClass('initial-navbar');
+
+    $('#navbar-toggler').removeClass('navbar-light');
+    $('#navbar-toggler').addClass('navbar-dark');
+
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
+
+    // get the inverted logo from hidden img tag
+    let invertedLogo = document.getElementById("inverted-logo")
+    if (invertedLogo !== null) {
+      let logoURL = invertedLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+  }
+};
+
 (function ($) {
  jQuery(document).ready(function () {

@@ -8,34 +45,7 @@
    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
    // $.onscroll = function() {scrollFunction()};
    $(document).scroll(function () {
-      if ($(document).scrollTop() > 40) {
-        $('#top-navbar').removeClass('initial-navbar');
-        $('#top-navbar').addClass('final-navbar shadow');
-
-        $('#navbar-toggler').removeClass('navbar-dark');
-        $('#navbar-toggler').addClass('navbar-light');
-
-        // get the main logo from hidden img tag
-        let mainLogo = document.getElementById("main-logo")
-        if (mainLogo !== null) {
-          let logoURL = mainLogo.getAttribute("src");
-          $('#logo').attr("src", logoURL);
-        }
-
-      } else {
-        $('#top-navbar').removeClass('final-navbar shadow');
-        $('#top-navbar').addClass('initial-navbar');
-
-        $('#navbar-toggler').removeClass('navbar-light');
-        $('#navbar-toggler').addClass('navbar-dark');
-
-        // get the inverted logo from hidden img tag
-        let invertedLogo = document.getElementById("inverted-logo")
-        if (invertedLogo !== null) {
-          let logoURL = invertedLogo.getAttribute("src");
-          $('#logo').attr("src", logoURL);
-        }
-      }
+      updateNavBar();
    });

    // Creates a click handler to collapse the navigation when
@@ -46,6 +56,8 @@
        $('.navbar-collapse').collapse('hide');
      });
    }
+
+    updateNavBar();
  });

 })(jQuery);
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n<t.length;){var o=t[n];if(a<=0&&t.slice(n,n+i)===e)return n;"\\"===o?n++:"{"===o?a++:"}"===o&&a--,n++}return-1},i=/^\\begin{/,o=function(e,t){for(var n,a=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i<n.length;i++)if("text"===n[i].type)a.appendChild(document.createTextNode(n[i].data));else{var l=document.createElement("span"),d=n[i].data;r.displayMode=n[i].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[i].data+"` with ",e),a.appendChild(document.createTextNode(n[i].rawData));continue}a.appendChild(l)}return a},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var a=t.childNodes[n];if(3===a.nodeType){var i=l(a.textContent,r);i&&(n+=i.childNodes.length-1,t.replaceChild(i,a))}else 1===a.nodeType&&function(){var t=" "+a.className+" ";-1===r.ignoredTags.indexOf(a.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(a,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),a=a.default}()}));
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n<t.length;){var o=t[n];if(a<=0&&t.slice(n,n+i)===e)return n;"\\"===o?n++:"{"===o?a++:"}"===o&&a--,n++}return-1},i=/^\\begin{/,o=function(e,t){for(var n,a=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()\|[\]{}]/g,"\\$&")})).join("\|")+")");-1!==(n=e.search(o));){n>0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i<n.length;i++)if("text"===n[i].type)a.appendChild(document.createTextNode(n[i].data));else{var l=document.createElement("span"),d=n[i].data;r.displayMode=n[i].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[i].data+"` with ",e),a.appendChild(document.createTextNode(n[i].rawData));continue}a.appendChild(l)}return a},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var a=t.childNodes[n];if(3===a.nodeType){var i=l(a.textContent,r);i&&(n+=i.childNodes.length-1,t.replaceChild(i,a))}else 1===a.nodeType&&function(){var t=" "+a.className+" ";-1===r.ignoredTags.indexOf(a.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(a,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters\|\|[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags\|\|["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses\|\|[],r.errorCallback=r.errorCallback\|\|console.error,r.macros=r.macros\|\|{},d(e,r)}}(),a=a.default}()}));