option to customize search placeholder

clean up code

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: gurusabarish # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: gurusabarish # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ['https://www.buymeacoffee.com/gurusabarish'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -16,4 +16,4 @@ hugo.darwin
 hugo.linux
 
 # Temporary lock file while building
-/.hugo_build.lock
+.hugo_build.lock

README.md

@@ -24,6 +24,7 @@ A high performance and mobile first hugo template for personal portfolio and blo
   - [Google Analytics](https://gohugo.io/templates/internal/#google-analytics)
 - Comment Support
   - [Disqus](https://gohugo.io/content-management/comments/)
+- Integration with [FormSpree](https://formspree.io/) for submitting "Contact me" form
 
 Technology used: Bootstrap, fontawesome 
 

exampleSite/config.yaml

@@ -1,11 +1,21 @@
-baseURL: "https://example.org"
+baseURL: "https://hugo-profile.netlify.app"
 languageCode: "en-us"
 title: "Hugo Profile"
 theme: hugo-profile
 
+outputs:
+  home:
+    - "HTML"
+    - "RSS"
+    - "JSON"
+  page:
+    - "HTML"
+    - "RSS"
+
 Paginate: 3
-disqusShortname: gurusabarish
-googleAnalytics: G-DWJJVE27WD
+enableRobotsTXT: true
+# disqusShortname: your-disqus-shortname
+# googleAnalytics: G-MEASUREMENT_ID
 
 markup:
   goldmark:
@@ -19,24 +29,28 @@ Menus:
       title: Blog posts
       url: /blogs
       weight: 1
-
+    - identifier: gallery
+      name: Gallery
+      title: Blog posts
+      url: /gallery
+      weight: 2
     #Dropdown menu
-    - identifier: dropdown
-      title: Example dropdown menu
-      name: Dropdown
-      weight: 2
-    - identifier: dropdown1
-      title: example dropdown 1
-      name: example 1
-      url: /#
-      parent: dropdown
-      weight: 1
-    - identifier: dropdown2
-      title: example dropdown 2
-      name: example 2
-      url: /#
-      parent: dropdown
-      weight: 2
+    # - identifier: dropdown
+    #   title: Example dropdown menu
+    #   name: Dropdown
+    #   weight: 3
+    # - identifier: dropdown1
+    #   title: example dropdown 1
+    #   name: example 1
+    #   url: /#
+    #   parent: dropdown
+    #   weight: 1
+    # - identifier: dropdown2
+    #   title: example dropdown 2
+    #   name: example 2
+    #   url: /#
+    #   parent: dropdown
+    #   weight: 2
 
 params:
   title: "Hugo Profile"
@@ -44,15 +58,28 @@ params:
   # staticPath: ""  # The path to serve the static files from
   favicon: "/fav.png"
 
+  # Whether to serve bootstrap css and js files from CDN or not. Can be set to true, "css" or "js" to choose between
+  # serving both, only the css, or only the js files through the CDN. Any other value will make so that CDN is not used.
+  # Note the lack of "" in true, it should be of boolean type.
+  useBootstrapCDN: false
+
+  # If you want to load dynamically responsive images from Cloudinary
+  # This requires your images to be uploaded + hosted on Cloudinary
+  # Uncomment and change YOUR_CLOUD_NAME to the Cloud Name in your Cloudinary console
+  # cloudinary_cloud_name: "YOUR_CLOUD_NAME"
+
+  # Whether the fade animations on the home page will be enabled
+  animate: true
+
   theme:
-    disableThemeToggle: false
+    # disableThemeToggle: true
     # defaultTheme: "light" # dark
 
-  # font:
-  #   fontSize: 1.5rem # default: 1rem
-  #   fontWeight: 500 # default: 400
-  #   lineHeight: 1 # default: 1.5
-  #   textAlign: right # default: left
+  font:
+    fontSize: 1rem # default: 1rem
+    fontWeight: 400 # default: 400
+    lineHeight: 1.5 # default: 1.5
+    textAlign: left # default: left
 
   # color preference
   # color:
@@ -72,18 +99,20 @@ params:
   #     secondaryColor:
 
   # If you want to customize the menu, you can change it here
-  # navbar:
-  #   align: mx-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto
+  navbar:
+    align: ms-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto
     # brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
-  #   brandName: "Profile" # Brand name for the brand | default is the title variable
-
-  #   menus:
-  #     disableAbout: true
-  #     disableExperience: true
-  #     disableEducation: true
-  #     disableProjects: true
-  #     disableAchievements: true
-  #     disableContact: true
+    # showBrandLogo: false # Show brand logo in nav bar | default is true
+    brandName: "Hugo Profile" # Brand name for the brand | default is the title variable
+    disableSearch: false
+    # searchPlaceholder: "Search"
+    menus:
+      disableAbout: false
+      disableExperience: false
+      disableEducation: false
+      disableProjects: false
+      disableAchievements: false
+      disableContact: false
 
   # Hero
   hero:
@@ -93,10 +122,15 @@ params:
     subtitle: "I build things for the web"
     content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."
     image: /images/hero.svg
+    bottomImage:
+      enable: true
+    # roundImage: true # Make hero image circular | default false
     button:
       enable: true
       name: "Resume"
       url: "#"
+      download: true
+      newPage: false
     socialLinks:
       fontAwesomeIcons:
         - icon: fab fa-github
@@ -130,6 +164,7 @@ params:
   # Experience
   experience:
     enable: true
+    # title: "Custom Name"
     items:
       - job: "Senior Software Developer"
         company: "Facebook"
@@ -194,7 +229,8 @@ params:
   # Education
   education:
     enable: true
-    # index: true
+    # title: "Custom Name"
+    index: false
     items:
       - title: "Master of Business Administration"
         school:
@@ -236,6 +272,7 @@ params:
   # Achievements
   achievements:
     enable: true
+    # title: "Custom Name"
     items:
       - title: Google kickstart runner
         content: I solved all problems with optimal solution.
@@ -254,6 +291,7 @@ params:
   # projects
   projects:
     enable: true
+    # title: "Custom Name"
     items:
       - title: Hugo Profile
         content: A highly customizable and mobile first Hugo template for personal portfolio and blog.
@@ -261,10 +299,10 @@ params:
         featured:
           name: Demo
           link: https://hugo-profile.netlify.app
-        # badges:
-        #   - "Hugo"
-        #   - "Bootstrap"
-        #   - "Javascript"
+        badges:
+          - "Hugo"
+          - "Bootstrap"
+          - "Javascript"
         links:
           - icon: fa fa-envelope
             url: mailto:?subject=Hugo%20Profile%20Template&body=Check%20it%20out:%20https%3a%2f%2fhugo-profile.netlify.app%2fblog%2fmarkdown-syntax%2f
@@ -279,9 +317,9 @@ params:
         featured:
           name: Demo
           link: https://django-converter.herokuapp.com
-        # badges:
-        #   - "Django"
-        #   - "Bootstrap"
+        badges:
+          - "Django"
+          - "Bootstrap"
         links:
           - icon: fab fa-github
             url: https://github.com/gurusabarish/converter
@@ -292,10 +330,10 @@ params:
         featured:
           name: Demo V2
           link: https://hugo-profile-2.netlify.app
-        # badges:
-        #   - "Hugo"
-        #   - "Bootstrap"
-        #   - "Javascript"
+        badges:
+          - "Hugo"
+          - "Bootstrap"
+          - "Javascript"
         links:
           - icon: fab fa-github
             url: https://github.com/gurusabarish/HugoProfileV2
@@ -303,15 +341,51 @@ params:
   #Contact
   contact:
     enable: true
+    # title: "Custom Name"
     content: My inbox is always open. Whether you have a question or just want to say hi, I’ll try my best to get back to you!
     email: gurusabarisha@gmail.com
     btnName: Mail me
+    # formspree:
+    #   enable: true # `contact.email` value will be ignored
+    #   formId: abcdefgh # Take it from your form's endpoint, like 'https://formspree.io/f/abcdefgh'
+    #   emailCaption: "Enter your email address"
+    #   messageCaption: "Enter your message here"
 
   footer:
-    # recentPosts: false
+    recentPosts:
+      path: "blogs"
+      count: 3
+      title: Recent Posts
+      enable: true
+      disableFeaturedImage: false
     socialNetworks:
       github: https://github.com
       linkedin: https://linkedin.com
       twitter: https://twitter.com
       instagram: https://instagram.com
       facebook: https://facebook.com
+
+  # List pages like blogs and posts
+  listPages:
+    disableFeaturedImage: false
+
+  # Single pages like blog and post
+  singlePages:
+    readTime:
+      enable: true
+      content: "min read"
+    scrollprogress:
+      enable: true
+
+  # For translations
+  terms:
+    read: "Read"
+    toc: "Table Of Contents"
+    copyright: "All rights reserved"
+    pageNotFound: "Page not found"
+    emailText: "Check out this site"
+
+  datesFormat:
+    article: "Jan 2, 2006"
+    articleList: "Jan 2, 2006"
+    articleRecent: "Jan 2, 2006"

exampleSite/content/blogs/markdown-syntax.md

@@ -13,34 +13,26 @@ description: ""
 toc:
 ---
 
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-<!--more-->
-
 ## Paragraph
 
 Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
 
 Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
 
-
 ## Blockquotes
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
 
 ### Blockquote without attribution
 
-
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use *Markdown syntax* within a blockquote.
-
+> **Note** that you can use _Markdown syntax_ within a blockquote.
 
 ### Blockquote with attribution
 
-
 > Don't communicate by sharing memory, share memory by communicating.</p>
 > — <cite>Rob Pike[^1]</cite>
 
-
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
 ## Tables
@@ -56,7 +48,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 | Inline&nbsp;&nbsp;&nbsp; | Markdown&nbsp;&nbsp;&nbsp; | In&nbsp;&nbsp;&nbsp;                | Table  |
 | ------------------------ | -------------------------- | ----------------------------------- | ------ |
-| *italics*                | **bold**                   | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code` |
+| _italics_                | **bold**                   | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code` |
 
 ## Code Blocks
 
@@ -66,7 +58,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 <!DOCTYPE html>
 <html lang="en">
   <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>Example HTML5 Document</title>
   </head>
   <body>
@@ -74,6 +66,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
   </body>
 </html>
 ```
+
 ### Code block indented with four spaces
 
     <!DOCTYPE html>
@@ -88,7 +81,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
     </html>
 
 ### Code block with Hugo's internal highlight shortcode
+
 {{< highlight html >}}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -111,13 +106,13 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 ### Unordered List
 
-* List item
-* Another item
-* And another item
+- List item
+- Another item
+- And another item
 
 ### Nested list
 
-* Item
+- Item
   1. First Sub-item
   2. Second Sub-item
 
@@ -126,10 +121,15 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
 
 # H1
+
 ## H2
+
 ### H3
+
 #### H4
+
 ##### H5
+
 ###### H6
 
 ## Other Elements — abbr, sub, sup, kbd, mark

exampleSite/content/blogs/math.md

@@ -0,0 +1,38 @@
+---
+title: "Render Math With Mathjax"
+date: 2022-12-09T19:53:33+05:30
+draft: false
+author: "Gurusabarish"
+tags:
+  - Markdown syntax
+  - Mathjax
+  - example
+image: /images/mathjax.png
+description: ""
+toc: true
+mathjax: true
+---
+
+## Mathjax
+
+Math equations can be rendered using [Mathjax](https://www.mathjax.org) syntax with AMS symbol support.
+
+Optionally enable this on a per-page basis by adding `mathjax: true` to your frontmatter.
+
+Then, use `$$ ... $$` on a line by itself to render a block equation:
+
+$$ | Pr_{x \leftarrow P_{1}} [A(x) = 1] - Pr_{x \leftarrow P_{2}} [A(x) = 1] | < \text{negligible} $$
+
+The raw version is:
+
+```
+$$ | Pr_{x \leftarrow P_{1}} [A(x) = 1] - Pr_{x \leftarrow P_{2}} [A(x) = 1] | < \text{negligible} $$
+```
+
+
+Write in-line equations with `\\( ... \\)` , like \\( x^n / y \\) . It's easy!
+
+```
+Write in-line equations with `\\( ... \\)` , like \\( x^n / y \\) . It's easy!
+```
+

exampleSite/content/blogs/rich-content.md

@@ -51,3 +51,25 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 <br>
 {{< youtube w7Ft2ymGmfc >}}
 <br>
+
+## Theme Custom Shortcodes
+
+These shortcodes are not Hugo built-ins, but are provided by the theme.
+
+### Responsive Images with Cloudinary
+
+You can learn more about this [here](https://cloudinary.com/documentation/responsive_images).
+
+Set the `cloudinary_cloud_name` parameter in your site config to use this shortcode.
+
+```
+{{</* dynamic-img src="/my/image/on/cloudinary" title="A title for the image" */>}}
+```
+
+Note that you do not include the file extension (e.g. `.png`) in the `src` parameter, as the shortcode will automatically determine the best quality and format for the user's device.
+
+Optionally, you can customize the general CSS styles for the image:
+
+```
+{{</* dynamic-img src="/my/image/on/cloudinary" title="A title for the image" style="max-width:60%" */>}}
+```

exampleSite/content/gallery.md

@@ -0,0 +1,14 @@
+---
+title: "Image Gallery"
+date: 2022-06-25T18:35:46+05:30
+draft: false
+description: "My gallery :earth_asia:"
+layout: "gallery"
+images:
+ - src: https://iso.500px.com/wp-content/uploads/2016/03/stock-photo-142984111-1500x1000.jpg
+ - src: https://img.etimg.com/thumb/msid-68721417,width-650,imgsize-1016106,,resizemode-4,quality-100/nature1_gettyimages.jpg
+ - src: https://thumbs.dreamstime.com/b/team-ants-council-collective-decision-work-17037482.jpg
+ - src: https://thumbs.dreamstime.com/b/summer-day-smiling-women-relax-wearing-red-dress-fashion-standing-wooden-bridge-over-sea-blue-sky-background-summer-107411998.jpg
+ - src: https://thumbs.dreamstime.com/b/young-woman-playing-dog-pet-beach-sunrise-sunset-girl-dog-having-fun-seasid-seaside-cute-neglected-stay-66480218.jpg
+ - src: https://thumbs.dreamstime.com/b/funny-picture-taken-sunrise-frozen-lake-perspective-rider-retro-bicycle-sunrise-personal-211066044.jpg 
+---

layouts/404.html

@@ -3,12 +3,12 @@
 {{ end }}
 
 {{ define "title" }}
-{{ .Site.Title }} | 404 page not found
+{{ .Site.Title }} | {{ .Site.Params.terms.pageNotFound | default "404 page not found" }}
 {{ end }}
 
 {{ define "main" }}
 <div class="container py-5 text-center">
-    <img src="{{ .Site.Params.staticPath }}/404.png" alt="404 page not found" class="img-fluid" width="40%">
-    <h1>404 Page Not Found</h1>
+    <img src="{{ .Site.Params.staticPath }}/404.png" alt='{{ .Site.Params.terms.pageNotFound | default "404 page not found" }}' class="img-fluid" width="40%">
+    <h1>{{ .Site.Params.terms.pageNotFound | default "404 page not found" }}</h1>
 </div>
 {{ end }}

layouts/_default/about.html

@@ -0,0 +1,86 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Params.description }}">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/about.css">
+
+<!-- fontawesome -->
+<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+<section id="single">
+    <div class="container">
+        <div class="title mb-3">
+            <h1 class="text-center mb-4">{{ .Title }}</h1>
+        </div>
+        <div class="row justify-content-center">
+            {{ if .Params.image }}
+            <div class="col-sm-12 col-md-12 col-lg-3 px-3">
+                <div class="sticky-sidebar">
+                    <aside class="aboutImg">
+                        <div class="text-center">
+                            <img src="{{ .Params.image }}" class="mx-auto rounded" alt="">
+                        </div>
+                        <h2 class="text-center pt-3">
+                            {{ .Params.name }}
+                        </h2>
+                        <div class="aboutImg-content">
+                            <ul class="list-inline pt-3 text-center">
+                                {{ range .Params.socialLinks.fontAwesomeIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank">
+                                        <i class="{{ .icon }}"></i>
+                                    </a>
+                                </li>
+                                {{ end }}
+
+                                {{ range .Params.socialLinks.customIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank" class="img-icon">
+                                        <img src="{{ .icon }}">
+                                    </a>
+                                </li>
+                                {{ end }}
+                            </ul>
+                        </div>
+                    </aside>
+                </div>
+            </div>
+            {{ end }}
+
+            <div class="col-sm-12 col-md-12 col-lg-6 pt-4 p-2">
+                <div class="pr-lg-4">
+                    <article class="page-content p-2">
+                        {{ .Content | emojify }}
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
+        <i class="fas fa-angle-up"></i>
+    </button>
+</section>
+
+<script>
+    var topScroll = document.getElementById("topScroll");
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topScroll.style.display = "block";
+        } else {
+            topScroll.style.display = "none";
+        }
+    }
+
+    function topFunction() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+</script>
+
+{{ end }}

layouts/_default/baseof.html

@@ -9,17 +9,28 @@
   </title>
 </head>
 
-<body class="light" onload="loading()">
+<body class="light">
   <!-- javascripts -->
   <!-- <script src="/js/jquery-3.6.0.min.js"></script> -->
-  <script src="{{ .Site.Params.staticPath }}/bootstrap-5/js/bootstrap.bundle.js"></script>
 
   {{- partial "sections/header.html" . -}}
   <div id="content">
     {{- block "main" . }}{{- end }}
   </div>
   {{- partial "sections/footer/index.html" . -}}
+
+  {{- if (or (eq .Site.Params.UseBootstrapCDN true) (eq .Site.Params.UseBootstrapCDN "js")) -}}
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
+  {{- else -}}
+  <script src="{{ .Site.Params.staticPath }}/bootstrap-5/js/bootstrap.bundle.min.js"></script>
+  {{- end -}}
+
   {{- partial "scripts.html" . -}}
+
+  <!-- for search -->
+  <section id="search-content" class="py-2">
+    <div class="container" id="search-results"></div>
+  </section>
 </body>
 
 </html>

layouts/_default/gallery.html

@@ -0,0 +1,29 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
+<!-- <link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/list.css" media="all"> -->
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+<div class="container pt-5" id="list-page">
+    <h2 class="text-center pb-2">{{.Title}}</h2>
+    <h6 class="text-center">{{ .Params.description | emojify }}</h6>
+    <div class="row p-4">
+        {{ .Content | emojify }}
+    </div>
+    <div class="card-group p-4">
+        <div class="row justify-content-center">
+            {{ range .Params.images }}
+            <div class="col-md-4 p-0 m-0">
+                <div class="card p-0 m-0 border-0">
+                    <img class="w-100" height="280px" src="{{ .src }}">
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}

layouts/_default/index.json

@@ -0,0 +1,5 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+    {{- $.Scratch.Add "index" (dict "title" .Title "description" .Params.description "content" .Content "image" .Params.image "permalink" .Permalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}

layouts/_default/list.html

@@ -13,7 +13,15 @@
     <div class="row">
         {{ range .Paginator.Pages }}
         <div class="col-lg-4 col-md-6 my-3">
+            <div class="card-columns">
                 <div class="card h-100">
+                    {{ if and (not (.Site.Params.listPages.disableFeaturedImage | default false)) (.Params.image) }}
+                    <div class="card-header">
+                        <a href="{{ .RelPermalink }}">
+                            <img src="{{ .Params.image }}" class="card-img-top" alt="{{ .Title }}">
+                        </a>
+                    </div>
+                    {{ end }}
                     <div class="card-body bg-transparent p-4 shadow-sm">
                         <a href="{{ .RelPermalink }}" class="primary-font card-title">
                             <h5 class="card-title bg-transparent" title="{{ .Title }}">{{ .Title | truncate 25 }}</h5>
@@ -23,8 +31,9 @@
                         </div>
                     </div>
                     <div class="mt-auto post-footer bg-transparent py-3">
-                    <span class="float-start bg-transparent">{{ .Date.Format "January 2, 2006" }}</span>
-                    <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">Read</a>
+                        <span class="float-start bg-transparent">{{ .Date.Format (.Site.Params.datesFormat.articleList | default "January 2, 2006") }}</span>
+                        <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ .Site.Params.terms.read | default "Read" }}</a>
+                    </div>
                 </div>
             </div>
         </div>

layouts/_default/single.html

@@ -21,7 +21,13 @@
             <div class="text-center">
               {{ .Params.author }} 
               <small>|</small>
-              {{ .Date.Format "Jan 2, 2006" }}
+              {{ .Date.Format (.Site.Params.datesFormat.article | default "Jan 2, 2006") }}
+
+              {{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
+              <span id="readingTime">
+                {{ .Site.Params.singlePages.readTime.content | default "min read" }}
+              </span>
+              {{ end }}
             </div>
           </div>
           {{ if .Params.image }}
@@ -29,7 +35,7 @@
             <img class="img-fluid" src="{{ .Params.image }}" alt="{{ .Title }}">
           </div>
           {{ end }}
-          <article class="page-content">
+          <article class="page-content  p-2">
           {{ .Content | emojify }}
           </article>
         </div>
@@ -39,7 +45,7 @@
           {{ if .Params.toc | default true}}
           <aside class="toc">
               <h5>
-                Table Of Contents
+                {{ .Site.Params.terms.toc | default "Table Of Contents" }}
               </h5>
               <div class="toc-content">
                 {{.TableOfContents}}
@@ -49,7 +55,7 @@
 
           {{ if .Params.tags }}
           <aside class="tags">
-            <h5>Tags</h5>
+            <h5>{{ .Site.Params.terms.tags | default "Tags" }}</h5>
             <ul class="tags-ul list-unstyled list-inline">
               {{range .Params.tags}}
               <li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li>
@@ -60,7 +66,7 @@
 
           {{ if .Params.socialShare | default true }}
           <aside class="social">
-            <h5>Social</h5>
+            <h5>{{ .Site.Params.terms.social | default "Social" }}</h5>
             <div class="social-content">
               <ul class="list-inline">
                 <li class="list-inline-item text-center">
@@ -74,7 +80,7 @@
                   </a>
                 </li>
                 <li class="list-inline-item text-center">
-                  <a target="_blank" href="mailto:?subject={{ .Title }}&amp;body=Check out this site {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
+                  <a target="_blank" href='mailto:?subject={{ .Title }}&amp;body={{ .Site.Params.terms.emailText | default "Check out this site" }} {{ .Site.Params.hostName }}{{ .Permalink | absURL }}'>
                     <i class="fa fa-envelope"></i>
                   </a>
                 </li>
@@ -86,7 +92,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-12 col-md-12 col-lg-9 p-2">
+      <div class="col-sm-12 col-md-12 col-lg-9 p-4">
         {{ template "_internal/disqus.html" . }}
       </div>
     </div>
@@ -96,6 +102,13 @@
   </button>
 </section>
 
+{{ if or (.Site.Params.singlePages.scrollprogress.enable | default true) (.Params.enableScrollProgress) }}
+<div class="progress">
+  <div id="scroll-progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+<Script src="{{.Site.Params.staticPath}}/js/scrollProgressBar.js"></script>
+{{ end }}
+
 <script>
   var topScroll = document.getElementById("topScroll");
   window.onscroll = function() {scrollFunction()};
@@ -114,4 +127,8 @@
   }
 </script>
 
+{{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
+<script src="{{.Site.Params.staticPath}}/js/readingTime.js"></script>
+{{end}}
+
 {{ end }}

layouts/partials/head.html

@@ -1,25 +1,39 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
 <link rel="icon" href={{ .Site.Params.favicon | default "/fav.png" }} type="image/gif">
 
 <!-- Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preload"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=Alata&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+>
+<link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Alata&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      media="print" onload="this.media='all'" />
+<noscript>
   <link
           href="https://fonts.googleapis.com/css2?family=Alata&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
           rel="stylesheet">
+</noscript>
 
 <!-- font configuration -->
 <link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/font.css" media="all">
 
 <!-- Internal templates -->
-{{ template "_internal/google_analytics_async.html" . }}
+{{ template "_internal/google_analytics.html" . }}
 {{ template "_internal/opengraph.html" . }}
 {{ template "_internal/twitter_cards.html" . }}
 
 <!-- stylesheets -->
+{{- if (or (eq .Site.Params.UseBootstrapCDN true) (eq .Site.Params.UseBootstrapCDN "css")) -}}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+{{- else -}}
 <link rel="stylesheet" href="{{ .Site.Params.staticPath }}/bootstrap-5/css/bootstrap.min.css" media="all">
+{{- end -}}
 <link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/header.css" media="all">
 <link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/footer.css" media="all">
 
@@ -54,4 +68,31 @@
         line-height: {{ .Site.Params.font.lineHeight | default "1.5" }};
         text-align: {{ .Site.Params.font.textAlign | default "left" }};
     }
+
+    html {
+        background-color: var(--background-color) !important;
+    }
+
+    body::-webkit-scrollbar {
+        width: .5em;
+        height: .5em;
+        background-color: var(--background-color);
+    }
+    
+    ::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 6px var(--background-color);
+        border-radius: 1rem;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        border-radius: 1rem;
+        background-color: var(--secondary-color);
+        outline: 1px solid var(--background-color);
+    }
+
+    #search-content::-webkit-scrollbar {
+        width: .5em;
+        height: .1em;
+        background-color: var(--background-color);
+    }
 </style>

layouts/partials/scripts.html

@@ -22,7 +22,7 @@
         document.body.classList.add('dark');
     } else if (localStorage.getItem("pref-theme") === "light") {
         document.body.classList.remove('dark')
-    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.body.classList.add('dark');
     }
 
@@ -49,16 +49,42 @@
 </script>
 {{- end }}
 
-<script>
-    let loadingIcons;
+{{ if not (.Site.Params.navbar.disableSearch | default false) }}
+    <script src="{{ .Site.Params.staticPath }}/js/search.js"></script>
+{{ end }}
 
-    function loading() {
-        myVar = setTimeout(showPage, 100);
-    }
 
-    function showPage() {
-        try{
-            document.getElementById("loading-icons").style.display = "block";
-        } catch(err) {}
+{{ if (.Params.mathjax | default false) }}
+
+{{ "<!-- MathJax -->" | safeHTML }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js" integrity="sha384-M5jmNxKC9EVnuqeMwRHvFuYUE8Hhp0TgBruj/GZRkYtiMrCRgH7yvv5KY+Owi7TW" crossorigin="anonymous"></script>
+
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+      tex2jax: {
+        inlineMath: [['\\(','\\)']],
+        displayMath: [['$$','$$'], ['\[','\]']],
+        processEscapes: true,
+        processEnvironments: true,
+        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+        TeX: { equationNumbers: { autoNumber: "AMS" },
+             extensions: ["AMSmath.js", "AMSsymbols.js"] }
       }
+    });
 </script>
+{{ end }}
+
+{{ if (.Site.Params.cloudinary_cloud_name | default false) }}
+
+{{ "<!-- cloudinary -->" | safeHTML }}
+<script src="https://unpkg.com/cloudinary-core@2.13.0/cloudinary-core-shrinkwrap.js" integrity="sha384-0bQduxVhZMs6xfvcPH9osdUIw44hjF8EahHuQBdyN6Rryk8tgyFO80Yz5d14F+5d" crossorigin="anonymous"></script>
+<script type="text/javascript">
+    var cl = cloudinary.Cloudinary.new({cloud_name: "{{- .Site.Params.cloudinary_cloud_name }}"}); 
+    cl.responsive();
+</script>
+
+{{ end }}
+
+{{ if (.Site.Params.contact.formspree.enable | default false) }}
+<script src="{{ .Site.Params.staticPath }}/js/contact.js"></script>
+{{ end }}

layouts/partials/sections/achievements.html

@@ -1,7 +1,7 @@
 {{ if .Site.Params.achievements.enable | default false }}
 <section id="achievements" class="py-5">
     <div class="container">
-        <h3 class="text-center">Achievements</h3>
+        <h3 class="text-center">{{ .Site.Params.achievements.title | default "Achievements" }}</h3>
         <div class="px-0 px-md-5 px-lg-5">
             <div class="row justify-content-center px-3 px-md-5 px-lg-5">
                 {{ range .Site.Params.achievements.items }}

layouts/partials/sections/contact.html

@@ -1,14 +1,28 @@
 {{ if .Site.Params.contact.enable | default false }}
 <section id="contact" class="py-5">
     <div class="container">
-        <h3 class="text-center">Get In Touch</h3>
+        <h3 class="text-center">{{ .Site.Params.contact.title | default "Get in Touch" }}</h3>
         <div class="px-0 px-md-5 px-lg-5">
             <div class="row justify-content-center px-md-5">
                 <div class="col-md-8 py-3">
                     <div class="text-center">
                         {{ .Site.Params.contact.content | emojify | markdownify }}
                     </div>
-                    {{ if .Site.Params.contact.email }}
+                    {{ if .Site.Params.contact.formspree.enable | default false }}
+                    <div class="row justify-content-center">
+                        <form id="contact-form" action="https://formspree.io/f/{{ .Site.Params.contact.formspree.formId }}" onsubmit="handleFormspreeSubmit(event)" method="POST" class="col-md-7">
+                            <div class="form-group pt-3">
+                                <input type="email" class="form-control"  name="email" required="true" placeholder='{{ .Site.Params.contact.formspree.emailCaption | emojify | default "Enter your email" }}'>
+                            </div>
+                            <div class="form-group pt-3">
+                                <textarea class="form-control" name="message" required="true" placeholder='{{ .Site.Params.contact.formspree.messageCaption | emojify | default "Enter your message" }}' rows="3"></textarea>
+                            </div>
+                            <div class="form-group text-center pt-3">
+                                <button type="submit" class="btn">{{ .Site.Params.contact.btnName | default "Get in Touch" }}</button>
+                            </div>
+                        </form>
+                    </div>
+                    {{ else if .Site.Params.contact.email }}
                     <div class="text-center pt-3">
                         <a href="mailto:{{ .Site.Params.contact.email }}" class="btn">
                             {{ .Site.Params.contact.btnName | default "Get in Touch" }}
@@ -19,5 +33,18 @@
             </div>
         </div>
     </div>
+    <div id="contact-form-status"></div>
 </section>
 {{ end }}
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="check-circle-fill" viewBox="0 0 16 16">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+  </symbol>
+  <symbol id="info-fill" viewBox="0 0 16 16">
+    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+  </symbol>
+  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+</svg>

layouts/partials/sections/education.html

@@ -1,7 +1,7 @@
 {{ if .Site.Params.education.enable | default false }}
 <section id="education" class="py-5">
     <div class="container">
-        <h3 class="text-center">Education</h3>
+        <h3 class="text-center">{{ .Site.Params.education.title | default "Education" }}</h3>
         <div class="row justify-content-center py-5">
             {{ $indexMenu := .Site.Params.education.index }}
             {{ range $index, $element := .Site.Params.education.items }}

layouts/partials/sections/experience.html

@@ -1,18 +1,17 @@
 {{ if .Site.Params.experience.enable | default false }}
 <section id="experience" class="py-5">
     <div class="container">
-        <h3 class="text-center">Experience</h3>
+        <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience" }}</h3>
         <div class="row justify-content-center">
             <div class="col-sm-12 col-md-8 col-lg-8 py-5">
                 <div class="experience-container px-3 pt-2">
-                    <ul class="nav nav-pills mb-3 bg-transparent" id="pills-tab" role="tablist">
+                    <ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
                         {{ range $index, $element := .Site.Params.experience.items }}
                         {{ if (eq $index 0) }}
                         <li class="nav-item px-1 bg-transparent" role="presentation">
                             <div 
                                 class="nav-link active bg-transparent" 
                                 aria-selected="true" 
-                                type="button"
                                 role="tab" 
                                 data-bs-toggle="pill"
                                 id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
@@ -27,7 +26,6 @@
                             <div 
                                 class="nav-link bg-transparent" 
                                 aria-selected="true" 
-                                type="button"
                                 role="tab" 
                                 data-bs-toggle="pill"
                                 id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'

layouts/partials/sections/footer/copyright.html

@@ -7,7 +7,7 @@
                         height="40px" width="40px">
                 </a>
             </div>
-            &copy; {{ now.Format "2006"}} {{ .Site.Params.copyright }} All Rights Reserved
+            &copy; {{ now.Format "2006"}} {{ .Site.Params.copyright }} {{ .Site.Params.terms.copyright | default "All Rights Reserved" }}
             <div class="text-secondary">
                 Made with
                 <span class="text-danger">

layouts/partials/sections/footer/recentBlogPosts.html

@@ -1,10 +1,22 @@
 <div class="container py-3" id="recent-posts">
-    {{ if .Site.Params.footer.recentPosts | default true }}
-    <div class="h3 text-center text-secondary py-3">Recent posts</div>
+    {{ if .Site.Params.footer.recentPosts.enable | default false }}
+    {{ $recentPostsPath := .Site.Params.footer.recentPosts.path | default "blogs" }}
+    {{ $recentPostsCount := .Site.Params.footer.recentPosts.count | default 3 }}
+    {{ $recentPosts := where .Site.RegularPages "Section" $recentPostsPath | first $recentPostsCount }}
+    <div class="h3 text-center text-secondary py-3">
+        {{ .Site.Params.footer.recentPosts.title | default "Recent Posts" }}
+    </div>
     <div class="row justify-content-center">
-        {{ range ( where .Site.RegularPages "Type" "blogs" | first 3 ) }}
+        {{ range $recentPosts }}
         <div class="col-lg-4 col-md-6 pt-2">
             <div class="card h-100">
+                {{ if and (not (.Site.Params.footer.recentPosts.disableFeaturedImage | default false)) (.Params.image) }}
+                <div class="card-header">
+                    <a href="{{ .RelPermalink }}">
+                        <img src="{{ .Params.image }}" class="card-img-top" alt="{{ .Title }}">
+                    </a>
+                </div>
+                {{ end }}
                 <div class="card-body bg-transparent p-3 shadow-sm">
                     <a href="{{ .RelPermalink }}" class="primary-font card-title">
                         <h5 class="card-title bg-transparent" title="{{ .Title }}">{{ .Title | truncate 25 }}</h5>
@@ -14,8 +26,8 @@
                     </div>
                 </div>
                 <div class="mt-auto card-footer">
-                    <span class="float-start">{{ .Date.Format "January 2, 2006" }}</span>
-                    <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">Read</a>
+                    <span class="float-start">{{ .Date.Format (.Site.Params.datesFormat.articleRecent | default "January 2, 2006") }}</span>
+                    <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ .Site.Params.terms.read | default "Read" }}</a>
                 </div>
             </div>
         </div>

layouts/partials/sections/header.html

@@ -1,34 +1,31 @@
-{{- /* theme-toggle is enabled */}}
-{{- if (not .Site.Params.theme.disableThemeToggle) }}
 {{- /* theme is auto */}}
 <script>
-    if (localStorage.getItem("pref-theme") === "dark") {
+    let localStorageValue = localStorage.getItem("pref-theme");
+    let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    switch (localStorageValue) {
+        case "dark":
             document.body.classList.add('dark');
-    } else if (localStorage.getItem("pref-theme") === "light") {
-        document.body.classList.remove('dark')
-    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            break;
+        case "light":
+            document.body.classList.remove('dark');
+            break;
+        default:
+            if (mediaQuery) {
                 document.body.classList.add('dark');
             }
-
-</script>
-{{- /* theme-toggle is disabled and theme is auto */}}
-{{- else if (and (ne .Site.Params.theme.defaultTheme "light") (ne .Site.Params.theme.defaultTheme "dark"))}}
-<script>
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.body.classList.add('dark');
+            break;
     }
-
 </script>
-{{- end }}
 
 
 <!-- Navbar -->
 <header>
-    <nav class="pt-3 navbar navbar-expand-lg">
+    <nav class="pt-3 navbar navbar-expand-lg {{ if .Site.Params.animate }}animate{{ end }}">
         <div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
             <!-- navbar brand -->
             <a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">
-                {{ if or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo) }}
+                {{ if and (or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo)) .Site.Params.navbar.showBrandLogo | default true }}
                 <img src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon }}" width="30" height="30"
                     class="d-inline-block align-top">
                 {{ .Site.Params.navbar.brandName | default .Site.Params.title }}
@@ -37,6 +34,13 @@
                 {{ end }}
             </a>
 
+            {{ if not (.Site.Params.navbar.disableSearch | default false) }}
+                <div>
+                    <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder='{{ .Site.Params.navbar.searchPlaceholder | default "Ctrl + k to Search..."}}'
+                        aria-label="Search" oninput="searchOnChange(event)">
+                </div>
+            {{ end }}
+
             <!-- navbar toggler -->
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
                 aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -48,68 +52,64 @@
             <!-- navbar content -->
             <div class="collapse navbar-collapse text-wrap primary-font" id="navbarContent">
                 <ul class="navbar-nav {{ .Site.Params.navbar.align | default "ms-auto"}} text-center">
-                    {{
-                    if and
-                    (.Site.Params.about.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableAbout | default false))
-                    }}
-                    <li class="nav-item navbar-text">
-                        <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">About</a>
+                    {{ if not (.Site.Params.navbar.disableSearch | default false) }}
+                        <li class="nav-item navbar-text d-block d-md-none">
+                            <div class="nav-link">
+                                <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder='{{ .Site.Params.navbar.searchPlaceholder | default "Ctrl + k to Search..."}}' aria-label="Search" oninput="searchOnChange(event)">
+                            </div>
                         </li>
                     {{ end }}
 
-                    {{ 
-                    if and
-                    (.Site.Params.experience.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableExperience | default false))
-                    }}
+                    {{ if and (.Site.Params.about.enable | default false) (not (.Site.Params.navbar.menus.disableAbout | default false)) }}
+                    <li class="nav-item navbar-text">
+                        <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">
+                            {{ .Site.Params.about.title | default "About" }}
+                        </a>
+                    </li>
+                    {{ end }}
+
+                    {{ if and (.Site.Params.experience.enable | default false) (not (.Site.Params.navbar.menus.disableExperience | default false)) }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#experience"
-                            aria-label="experience">Experience</a>
+                            aria-label="experience">
+                            {{ .Site.Params.experience.title | default "Experience" }}
+                        </a>
                     </li>
                     {{ end }}
 
-                    {{
-                    if and
-                    (.Site.Params.education.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableEducation | default false))
-                    }}
+                    {{ if and (.Site.Params.education.enable | default false) (not (.Site.Params.navbar.menus.disableEducation | default false)) }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#education"
-                            aria-label="education">Education</a>
+                            aria-label="education">
+                            {{ .Site.Params.education.title | default "Education" }}
+                        </a>
                     </li>
                     {{ end }}
 
-                    {{
-                    if and
-                    (.Site.Params.projects.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableProjects | default false))
-                    }}
-                    {{/* {{ if .Site.Params.projects.enable | default false }} */}}
+                    {{ if and (.Site.Params.projects.enable | default false) (not (.Site.Params.navbar.menus.disableProjects | default false)) }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects"
-                            aria-label="projects">Projects</a>
+                            aria-label="projects">
+                            {{ .Site.Params.projects.title | default "Projects" }}
+                        </a>
                     </li>
                     {{ end }}
 
-                    {{
-                    if and
-                    (.Site.Params.achievements.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableAchievements | default false))
-                    }}
+                    {{ if and (.Site.Params.achievements.enable | default false) (not (.Site.Params.navbar.menus.disableAchievements | default false)) }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#achievements"
-                            aria-label="achievements">Achievements</a>
+                            aria-label="achievements">
+                            {{ .Site.Params.achievements.title | default "Achievements" }}
+                        </a>
                     </li>
                     {{ end }}
 
-                    {{ if and
-                    (.Site.Params.contact.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableContact | default false))
-                    }}
+                    {{ if and (.Site.Params.contact.enable | default false) (not (.Site.Params.navbar.menus.disableContact | default false)) }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#contact"
-                            aria-label="contact">Contact</a>
+                            aria-label="contact">
+                            {{ .Site.Params.contact.title | default "Contact" }}
+                        </a>
                     </li>
                     {{ end }}
 
@@ -141,10 +141,10 @@
                     </li>
                     {{end}}
                     {{end}}
-                </ul>
 
+                    {{ if (not .Site.Params.theme.disableThemeToggle | default false) }}
+                    <li class="nav-item navbar-text">
                         <!-- darkmode mode toggle -->
-                {{ if (not .Site.Params.theme.disableThemeToggle) }}
                         <div class="text-center">
                             <button id="theme-toggle">
                                 <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -163,8 +163,11 @@
                                 </svg>
                             </button>
                         </div>
-            
+                    </li>
                     {{ end }}
+
+                </ul>
+
             </div>
         </div>
     </nav>

layouts/partials/sections/hero/index.html

@@ -1,8 +1,8 @@
 {{ if .Site.Params.hero.enable | default false }}
-<section id="hero" class="py-5">
+<section id="hero" class="py-5 align-middle">
     <div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-8 content" id="primary-font">
+            <div class="col-sm-12 col-md-12 col-lg-8 content {{ if .Site.Params.animate }}animate{{ end }}" id="primary-font">
                 <span class="subtitle">
                     {{ .Site.Params.hero.intro }}
                 </span>
@@ -18,7 +18,10 @@
                 <div class="row">
                     <div class="col-auto h-100">
                         {{ if .Site.Params.hero.button.enable }}
-                        <a href="{{ .Site.Params.hero.button.url }}" class="btn">
+                        <a href="{{ .Site.Params.hero.button.url }}" class="btn" {{ cond .Site.Params.hero.button.download "download" "" }}
+			  {{ if .Site.Params.hero.button.newPage | default true }}
+                          target="_blank"
+                          {{ end }}>
                             {{ .Site.Params.hero.button.name }}
                         </a>
                         {{ end }}
@@ -30,9 +33,9 @@
             </div>
             <div class="col-sm-12 col-md-12 col-lg-4">
                 <div class="row justify-content-center">
-                    <div class="col-sm-12 col-md-9 pt-5 image px-5 px-md-5 px-lg-0 text-center">
+                    <div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center">
                         <img src="{{ .Site.Params.hero.image }}"
-                            class="img-thumbnail mx-auto" 
+                            class="img-thumbnail mx-auto{{ if .Site.Params.hero.roundImage }} rounded-circle{{ end }}"
                             alt=""
                         >
                     </div>
@@ -40,6 +43,7 @@
             </div>
         </div>
     </div>
+    {{ if .Site.Params.hero.bottomImage.enable | default true }}
     <div class="hero-bottom-svg d-md-block d-lg-block d-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="201" height="201" viewBox="0 0 201 201">
             <g id="Group_1168" data-name="Group 1168" transform="translate(-384 -1392)">
@@ -302,5 +306,6 @@
             </g>
         </svg>
     </div>
+    {{ end }}
 </section>
 {{ end }}

layouts/partials/sections/hero/social.html

@@ -1,4 +1,4 @@
-<span id="loading-icons" style="display: none;">
+<span>
     {{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}
     <span class="px-1">
         <a href="{{ .url }}" target="_blank" class="btn social-icon">

layouts/partials/sections/projects.html

@@ -1,7 +1,7 @@
 {{ if .Site.Params.projects.enable | default false }}
 <section id="projects" class="py-5">
     <div class="container">
-        <h3 class="text-center">Projects</h3>
+        <h3 class="text-center">{{ .Site.Params.projects.title | default "Projects" }}</h3>
         <div class="row justify-content-center px-3 px-md-5">
             {{ range .Site.Params.projects.items }}
             <div class="col-lg-4 col-md-6 my-3">

layouts/shortcodes/dynamic-img.html

@@ -0,0 +1,5 @@
+{{ $image := .Get "src" }}
+{{ $alt := .Get "title" }}
+{{ $width := .Get "width" | default "w_auto" }}
+{{ $style := .Get "style" | default "max-width:80%" }}
+<img alt="{{ $alt }}" title="{{ $alt }}" data-src="https://res.cloudinary.com/{{ $.Site.Params.cloudinary_cloud_name }}/{{ $width }},c_scale,f_auto,q_auto,dpr_auto{{ $image}}" class="cld-responsive" style="padding-bottom: 16px; display: block; margin: auto; {{ $style }}">

netlify.toml

@@ -1,6 +1,6 @@
 [build]
 publish = "exampleSite/public"
-command = "cd exampleSite && hugo --gc --minify --themesDir ../.."
+command = 'cd exampleSite && echo -e "\ngoogleAnalytics: $GOOGLE_ANALYTICS \ndisqusShortname: $DISQUS_SHORTNAME \n" >> config.yaml && hugo --gc --minify --themesDir ../..'
 
 [context.production.environment]
 HUGO_VERSION = "0.92.0"

static/css/about.css

@@ -0,0 +1,252 @@
+#single {
+    padding: 60px 0;
+    line-height: 1.7em;
+    font-size: 17px;
+}
+
+#single .title>h1 {
+    opacity: 0.8;
+    color: var(--text-color) !important;
+}
+
+#single .title small {
+    opacity: 0.7;
+}
+
+#single .featured-image {
+    padding: 1rem;
+    padding-top: 0;
+}
+
+#single .featured-image img {
+    border-radius: 1rem;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    margin-bottom: 1rem;
+}
+
+#single .page-content a {
+    display: inline-block;
+    text-decoration: none;
+    color: var(--primary-color) !important;
+}
+
+#single .page-content a::after {
+    content: "";
+    display: block;
+    width: 0px;
+    height: 2px;
+    bottom: 0.37em;
+    background-color: var(--primary-color);
+    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
+    opacity: 0.5;
+}
+
+#single .page-content a:hover::after,
+#single .page-content a:focus::after,
+#single .page-content a:active::after {
+    width: 100%;
+}
+
+#single .page-content h1,
+#single .page-content h2,
+#single .page-content h3,
+#single .page-content h4,
+#single .page-content h5,
+#single .page-content h6 {
+    color: var(--primary-color) !important;
+    margin-bottom: 0.7em;
+    opacity: 0.9;
+}
+
+#single .page-content blockquote {
+    padding: 20px 30px;
+    border-left: 6px solid var(--primary-color) !important;
+    color: var(--text-secondary-color) !important;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 30px 0;
+    border-radius: 5px;
+}
+
+#single .page-content blockquote,
+#single .page-content blockquote * {
+    background-color: var(--secondary-color) !important;
+}
+
+/* table */
+#single .page-content table {
+    width: auto;
+    border-radius: 5px;
+    padding: 0.1rem;
+    margin-bottom: 1.2em;
+    max-width: 100%;
+    display: block;
+    overflow-x: auto;
+    opacity: 0.8;
+}
+
+#single .page-content table>tr {
+    height: 40px !important;
+}
+
+#single .page-content table>thead>tr>th {
+    padding: 0.5rem !important;
+    background-color: var(--primary-color) !important;
+    color: var(--secondary-color) !important;
+    border: 1px solid var(--secondary-color);
+    opacity: 0.9;
+}
+
+#single .page-content table>tbody>tr>td {
+    padding: 0.5rem !important;
+    border: 1px solid var(--secondary-color);
+    background-color: var(--secondary-color) !important;
+    opacity: 0.9;
+}
+
+#single .page-content table>thead>tr {
+    background-color: var(--secondary-color) !important;
+    color: var(--secondary-color) !important;
+}
+
+/* code */
+
+#single .page-content pre {
+    border-radius: 0.7em !important;
+    margin: 5px;
+    margin-bottom: 2em;
+    padding: 2em;
+    background-color: var(--secondary-color) !important;
+    color: var(--text-secondary-color) !important;
+    max-height: 450px;
+}
+
+#single .page-content pre>code {
+    color: var(--text-secondary-color) !important;
+}
+
+#single .page-content code {
+    color: var(--primary-color) !important;
+}
+
+/* kbd and mark */
+
+#single .page-content kbd {
+    color: var(--primary-color) !important;
+    background-color: var(--secondary-color) !important;
+}
+
+#single .page-content mark {
+    color: var(--primary-color) !important;
+    background-color: var(--secondary-color) !important;
+}
+
+/* list */
+
+#single .page-content ol,
+#single .page-content ul {
+    margin-bottom: 1.2em;
+    padding-left: 1.5em;
+    list-style-position: inside;
+    opacity: 0.9;
+}
+
+#single .page-content ol li li,
+#single .page-content ul li li {
+    margin-bottom: 0.5em;
+    padding-left: 1.5em;
+}
+
+/* sidebar */
+
+#single aside {
+    /* background-color: var(--secondary-color); */
+    border-radius: .7rem;
+    padding: .7rem 1rem;
+    margin-bottom: 1em;
+}
+
+#single .sticky-sidebar {
+    position: sticky;
+    top: 150px;
+}
+
+/* aboutImg */
+
+#single aside.aboutImg {
+    padding: .7rem 1rem;
+}
+
+#single aside.aboutImg img {
+    border-radius: 1.5rem !important;
+    position: relative;
+    /* box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2); */
+    max-width: 100%;
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+    #single aside.aboutImg img {
+        width: 60%;
+    }
+ }
+
+
+#single aside.aboutImg h5 {
+    margin: .7em 0;
+    margin-bottom: 1em;
+    color: var(--text-color);
+}
+
+#single aside.aboutImg .img-icon img {
+    width: 1em;
+}
+
+#single aside.aboutImg .aboutImg-content {
+    margin-bottom: 1em;
+    opacity: 0.9;
+}
+
+#single aside.aboutImg .aboutImg-content ul {
+    margin-bottom: 1em;
+    opacity: 0.9;
+}
+
+#single aside.aboutImg .aboutImg-content ul li a {
+    border: 1px solid var(--primary-color);
+    padding: .7rem;
+    color: var(--text-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#single aside.aboutImg .aboutImg-content ul li {
+    margin: .7rem .5rem;
+    margin-left: 0;
+}
+
+#single aside.aboutImg .aboutImg-content ul li:hover a {
+    opacity: .8;
+    color: var(--primary-color);
+}
+
+/* Top scroll */
+
+#single #topScroll {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+#single #topScroll:hover {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+    transition: .5s;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}

static/css/footer.css

@@ -16,6 +16,7 @@ footer .card {
     border-radius: .75rem;
     cursor: context-menu;
     overflow: hidden;
+    border: none;
 }
 
 footer .card:hover {
@@ -30,6 +31,7 @@ footer .card-text * {
 footer .card-footer {
     background-color: var(--background-color) !important;
     padding: .8em .7em;
+    border: 1px solid var(--secondary-color);
 }
 
 footer .card-footer a {
@@ -47,3 +49,16 @@ footer .card-footer a:hover {
 footer .card-footer a:focus {
     box-shadow: none !important;
 }
+
+footer .card > .card-header {
+    padding: 0 !important;
+    border: none !important;
+    background-color: var(--secondary-color) !important;
+}
+
+footer .card > .card-header .card-img-top {
+    width: 100%;
+    height: 250px !important;
+    object-fit: cover;
+    background-color: transparent !important;
+}

static/css/header.css

@@ -1,3 +1,8 @@
+header {
+    z-index: 10;
+    position: relative;
+}
+
 header .navbar .navbar-nav a {
     color: var(--text-color) !important;
 }
@@ -39,6 +44,8 @@ li > .dropdown-toggle:focus{
 }
 
 .dropdown-menu {
+    overflow: auto;
+    /* z-index: 100; */
     background-color: var(--background-color) !important;
     border-color: var(--text-secondary-color) !important;
 }
@@ -50,3 +57,55 @@ li > .dropdown-toggle:focus{
 .dropdown-item:focus, .dropdown-item:active {
     background-color: var(--secondary-color) !important;
 }
+
+#search {
+    border-radius: 1rem !important;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border-color: var(--background-color) !important;
+    transition: none;
+}
+
+#search:focus {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+#search-content {
+    -ms-scroll-chaining: none;
+    scrollbar-width: none;
+    display: none;
+    border-radius: 1rem;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2);
+    z-index: 9999;
+    width: 10%;
+    max-height: 350px;
+    background-color: var(--secondary-color) !important;
+    position: absolute;
+    overflow: scroll;
+}
+
+#search-content::-webkit-scrollbar {
+    display: none;
+}
+
+#search-results > .card {
+    background-color: transparent !important;
+    border: none;
+    margin-bottom: 10px;
+}
+
+#search-results > .card :hover {
+    border-radius: 1rem !important;
+    background-color: var(--background-color) !important;
+    transition: .2s;
+}
+
+#search-results .card a {
+    opacity: 0.9;
+    display: inline-block;
+    text-decoration: none;
+    color: var(--text-color) !important;
+}
+
+#search-results .card a:hover {
+    color: var(--primary-color) !important;
+}

static/css/index.css

@@ -51,10 +51,11 @@
   }
 }
 
-header .navbar {
+header .navbar.animate {
     animation: fade-up 0.5s ease-in;
 }
 
+
 /* ToolTip */
 
 .tooltip {
@@ -75,8 +76,7 @@ header .navbar {
     line-height: 2rem;
     max-width: 100%;
 }
-
-#hero .content {
+#hero .content.animate {
     animation: fade-left 1s ease-out;
 }
 
@@ -110,16 +110,22 @@ header .navbar {
 }
 
 #hero .image img {
-    animation: fade-in 1s ease-out;
     box-shadow:0px 8px 56px rgba(15, 80, 100, 0.16);
-    transition: box-shadow 0.3s;
     padding: 0;
-    border: 0;
-    border: 2px solid var(--secondary-color);
+    border: 3px solid var(--secondary-color);
     border-radius: 1rem;
 }
 
+#hero .image.animate img {
+    animation: fade-in 1s ease-out;
+    transition: box-shadow 0.3s;
+}
+
 #hero .image img:hover {
+    cursor: pointer;
+}
+
+#hero .image.animate img:hover {
     box-shadow: 0 0 11px rgb(15 80 100 / 20%);
     filter: contrast(1.2);
     cursor: pointer;
@@ -188,6 +194,8 @@ header .navbar {
     width: 100%;
 }
 
+
+
 /* about me */
 #about h3 {
     color: var(--text-secondary-color) !important;
@@ -293,6 +301,7 @@ header .navbar {
     border-bottom: 2px solid transparent; 
     border-radius: 0%;
     transition: none;
+    cursor: pointer;
 }
 
 #experience .nav-item .nav-link.active {
@@ -474,6 +483,7 @@ header .navbar {
 }
 
 #achievements .card {
+    cursor: context-menu;
     background-color: var(--secondary-color) !important;
     border-radius: 1rem;
     box-shadow: 0 0 36px rgba(0,0,0,0.1);
@@ -527,3 +537,40 @@ header .navbar {
 #contact .btn:focus {
     box-shadow: none !important;
 }
+
+#contact form .form-control {
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border-radius: .7rem;
+    border: 1px solid var(--text-secondary-color);
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
+}
+
+#contact-form-status {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+#contact-form-status svg {
+    height: 18px;
+    width: 18px;
+}
+
+#contact-form-status button {
+    border-radius: 50%;
+    border: none;
+    background-color: white;
+    padding: 0.5rem;
+    margin-left: 0.5rem;
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
+    font-size: .6rem !important;
+}
+
+#contact-form-status .alert {
+    border-radius: 0.5rem;
+    box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
+    padding: .5rem 1rem;
+}

static/css/list.css

@@ -4,6 +4,7 @@
     border-radius: .75rem;
     cursor: context-menu;
     overflow: hidden;
+    border: none;
 }
 
 #list-page .card a {
@@ -15,7 +16,6 @@
 }
 
 #list-page .card:hover {
-    border: 1px solid var(--secondary-color);
     transition: all 0.3s ease-out;
     transform: translateY(-7px);
 }
@@ -47,6 +47,17 @@
     color: var(--primary-color) !important;
 }
 
+#list-page .card > .card-header {
+    padding: 0 !important;
+    border: none !important;
+    background-color: var(--secondary-color) !important;
+}
+
+#list-page .card > .card-header .card-img-top {
+    width: 100%;
+    height: 250px !important;
+    background-color: transparent !important;
+}
 
 /* pagination */
 #list-page ul li a {

static/css/single.css

@@ -22,6 +22,12 @@
     border-radius: 1rem;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     margin-bottom: 1rem;
+    background-color: var(--secondary-color);
+}
+
+#single .page-content img {
+    max-width: 100%;
+    border-radius: 1rem;
 }
 
 #single .page-content a {
@@ -264,8 +270,8 @@
 #single #topScroll {
     display: none;
     position: fixed;
-    bottom: 10px;
-    right: 10px;
+    bottom: 20px;
+    right: 20px;
     z-index: 99;
     border: none;
     outline: none;
@@ -281,3 +287,25 @@
     transition: .5s;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
 }
+
+/* Singlepage scroll progress start */
+.progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--background-color);
+    z-index: 999;
+}
+
+.progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--primary-color);
+    transition: width .2s;
+}
+
+/* Singlepage scroll progress end */

static/js/contact.js

@@ -0,0 +1,45 @@
+async function handleFormspreeSubmit(event) {
+  event.preventDefault();
+  var form = document.getElementById("contact-form");
+  var data = new FormData(event.target);
+  fetch(event.target.action, {
+    method: form.method,
+    body: data,
+    headers: {
+      Accept: "application/json",
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        contactAlert("success", "Thanks for your submission!");
+        form.reset();
+      } else {
+        response.json().then((data) => {
+          var errMessage = data.errors;
+          for (var i = 0; i < errMessage.length; i++) {
+            contactAlert("danger", errMessage[i].message);
+          }
+        });
+      }
+    })
+    .catch((error) => {
+      contactAlert("danger", "Oops! There was a problem submitting your form");
+    });
+}
+
+function contactAlert(type, message) {
+  var contactFormStatus = document.getElementById("contact-form-status");
+  var alert = `<div class="alert alert-${type} d-flex align-items-center" role="alert">
+                     <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:">
+                        <use xlink:href="#check-circle-fill" />
+                    </svg>
+                    <div>${message}</div>
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                </div>`;
+  contactFormStatus.innerHTML = alert;
+
+  // Remove alert after 3 seconds
+  setTimeout(function () {
+    contactFormStatus.innerHTML = "";
+  }, 3000);
+}

static/js/readingTime.js

@@ -0,0 +1,10 @@
+function readingTime() {
+  const text = document.querySelector("article").innerText;
+  const wpm = 225;
+  const words = text.trim().split(/\s+/).length;
+  const time = Math.ceil(words / wpm);
+
+  const timeElement = document.querySelector("span#readingTime");
+  timeElement.innerHTML = "<small> | </small>" + time + timeElement.innerHTML;
+}
+readingTime();

static/js/scrollProgressBar.js

@@ -0,0 +1,12 @@
+function getScrollPercent() {
+  const totalHeight = document.body.scrollHeight - window.innerHeight;
+  const scrolled = window.scrollY;
+  return (scrolled / totalHeight) * 100;
+}
+const scrollProgressBar = document.getElementById("scroll-progress-bar");
+
+document.onscroll = function () {
+  var scrollPercent = Math.round(getScrollPercent());
+  scrollProgressBar.style.width = scrollPercent + "%";
+  scrollProgressBar.ariaValueNow = scrollPercent;
+};

static/js/search.js

@@ -0,0 +1,138 @@
+async function searchOnChange(evt) {
+  let searchQuery = evt.target.value;
+  var inputEle = document.querySelectorAll("input#search");
+  inputEle.forEach((element) => {
+    element.value = searchQuery;
+  });
+
+  if (searchQuery !== "") {
+    if (!window.searchJson) {
+      window.searchJson = await fetch("/index.json").then((res) => res.json());
+    }
+
+    let searchResults = searchJson.filter((item) => {
+      let res = false;
+      if (item.title && item.description && item.content) {
+        res =
+          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.title && item.description) {
+        res =
+          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.description.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.title && item.content) {
+        res =
+          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.description && item.content) {
+        res =
+          item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.title) {
+        res = item.title.toLowerCase().includes(searchQuery.toLowerCase());
+      } else if (item.description) {
+        res = item.description
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+      } else if (item.content) {
+        res = item.content.toLowerCase().includes(searchQuery.toLowerCase());
+      }
+      return res;
+    });
+    if (searchResults.length > 0) {
+      let searchResultsHtml = "";
+      searchResults.map((item) => {
+        searchResultsHtml += `<div class="card">
+                        <a href="${item.permalink}">
+                            <div class="p-3">
+                                <h5>${item.title}</h5>
+                                <div>${item.description}</div>
+                            </div>
+                       </a>
+                    </div>`;
+      });
+      document.getElementById("search-results").innerHTML = searchResultsHtml;
+    } else {
+      let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`;
+      document.getElementById("search-results").innerHTML = searchResultsHtml;
+    }
+    alignSearchContent();
+    document.getElementById("search-content").style.display = "block";
+  } else {
+    document.getElementById("search-content").style.display = "none";
+    document.getElementById("search-results").innerHTML = "";
+  }
+}
+
+function alignSearchContent() {
+  const searchButtonEle = document.querySelectorAll("#search");
+  // check if search value is not empty
+  for (let i = 0; i < searchButtonEle.length; i++) {
+    if (searchButtonEle[i].value !== "") {
+      let searchButtonPosition;
+      if (window.innerWidth > 768) {
+        searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
+        document.getElementById("search-content").style.width = "500px";
+      } else {
+        var navbarCollapse = document.querySelector("#navbarContent");
+        navbarCollapse.classList.add("show");
+        searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
+        document.getElementById("search-content").style.width = "300px";
+      }
+
+      document.getElementById("search-content").style.top =
+        searchButtonPosition.top + 50 + "px";
+      document.getElementById("search-content").style.left =
+        searchButtonPosition.left + "px";
+    }
+  }
+}
+
+function resetSearch(e) {
+  if (
+    e.keyCode === 27 ||
+    (e.target.id !== "search" &&
+      e.target.closest("section#search-content") === null)
+  ) {
+    if (document.getElementById("search-results").innerHTML !== "") {
+      document.getElementById("search-content").style.display = "none";
+      document.getElementById("search-results").innerHTML = "";
+      var inputEle = document.querySelectorAll("input#search");
+      inputEle.forEach((element) => {
+        element.value = "";
+        element.blur();
+      });
+    }
+  }
+}
+
+document.onkeyup = function () {
+  switch (event.keyCode) {
+    // ESC
+    case 27:
+      resetSearch(event);
+      break;
+
+    // ctrl + k
+    case 75:
+      if (event.ctrlKey) {
+        document.getElementById("search").focus();
+      }
+      break;
+  }
+};
+
+window.addEventListener("keydown", function (e) {
+  if (e.keyCode === 75 && e.ctrlKey) {
+    e.preventDefault();
+  }
+});
+
+// Close search on click outside and on resize
+document.addEventListener("click", function (e) {
+  resetSearch(e);
+});
+window.addEventListener("resize", function (e) {
+  alignSearchContent();
+});