option to customize search placeholder

clean up code

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://donate.stripe.com/7sIeWp3aG07vd6o8ww'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+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

@@ -3,9 +3,19 @@ languageCode: "en-us"
 title: "Hugo Profile"
 theme: hugo-profile
 
+outputs:
+  home:
+    - "HTML"
+    - "RSS"
+    - "JSON"
+  page:
+    - "HTML"
+    - "RSS"
+
 Paginate: 3
-disqusShortname: gurusabarish
+enableRobotsTXT: true
-googleAnalytics: G-DWJJVE27WD
+# disqusShortname: your-disqus-shortname
+# googleAnalytics: G-MEASUREMENT_ID
 
 markup:
   goldmark:
@@ -19,13 +29,11 @@ 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
@@ -55,15 +63,23 @@ params:
   # 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:
+  font:
-  #   fontSize: 1.5rem # default: 1rem
+    fontSize: 1rem # default: 1rem
-  #   fontWeight: 500 # default: 400
+    fontWeight: 400 # default: 400
-  #   lineHeight: 1 # default: 1.5
+    lineHeight: 1.5 # default: 1.5
-  #   textAlign: right # default: left
+    textAlign: left # default: left
 
   # color preference
   # color:
@@ -83,18 +99,20 @@ params:
   #     secondaryColor:
 
   # If you want to customize the menu, you can change it here
-  # navbar:
+  navbar:
-  #   align: mx-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto
+    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
+    # showBrandLogo: false # Show brand logo in nav bar | default is true
-
+    brandName: "Hugo Profile" # Brand name for the brand | default is the title variable
-  #   menus:
+    disableSearch: false
-  #     disableAbout: true
+    # searchPlaceholder: "Search"
-  #     disableExperience: true
+    menus:
-  #     disableEducation: true
+      disableAbout: false
-  #     disableProjects: true
+      disableExperience: false
-  #     disableAchievements: true
+      disableEducation: false
-  #     disableContact: true
+      disableProjects: false
+      disableAchievements: false
+      disableContact: false
 
   # Hero
   hero:
@@ -104,11 +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
@@ -208,7 +230,7 @@ params:
   education:
     enable: true
     # title: "Custom Name"
-    # index: true
+    index: false
     items:
       - title: "Master of Business Administration"
         school:
@@ -277,10 +299,10 @@ params:
         featured:
           name: Demo
           link: https://hugo-profile.netlify.app
-        # badges:
+        badges:
-        #   - "Hugo"
+          - "Hugo"
-        #   - "Bootstrap"
+          - "Bootstrap"
-        #   - "Javascript"
+          - "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
@@ -295,9 +317,9 @@ params:
         featured:
           name: Demo
           link: https://django-converter.herokuapp.com
-        # badges:
+        badges:
-        #   - "Django"
+          - "Django"
-        #   - "Bootstrap"
+          - "Bootstrap"
         links:
           - icon: fab fa-github
             url: https://github.com/gurusabarish/converter
@@ -308,10 +330,10 @@ params:
         featured:
           name: Demo V2
           link: https://hugo-profile-2.netlify.app
-        # badges:
+        badges:
-        #   - "Hugo"
+          - "Hugo"
-        #   - "Bootstrap"
+          - "Bootstrap"
-        #   - "Javascript"
+          - "Javascript"
         links:
           - icon: fab fa-github
             url: https://github.com/gurusabarish/HugoProfileV2
@@ -319,16 +341,51 @@ params:
   #Contact
   contact:
     enable: true
-    #title: "Custom name"
+    # 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,67 +13,60 @@ 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
 
 Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
 
-   | Name  | Age |
+| Name  | Age |
-   | ----- | --- |
+| ----- | --- |
-   | Bob   | 27  |
+| Bob   | 27  |
-   | Alice | 23  |
+| Alice | 23  |
 
 ### Inline Markdown within tables
 
 | 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
 
 ### Code block with backticks
 
-``` html
+```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>Example HTML5 Document</title>
-</head>
+  </head>
-<body>
+  <body>
     <p>Test</p>
-</body>
+  </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
+- List item
-* Another item
+- Another item
-* And 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%" */>}}
+```

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%">
+    <img src="{{ .Site.Params.staticPath }}/404.png" alt='{{ .Site.Params.terms.pageNotFound | default "404 page not found" }}' class="img-fluid" width="40%">
-    <h1>404 Page Not Found</h1>
+    <h1>{{ .Site.Params.terms.pageNotFound | default "404 page not found" }}</h1>
 </div>
 {{ end }}

layouts/_default/baseof.html

@@ -9,7 +9,7 @@
   </title>
 </head>
 
-<body class="light" onload="loading()">
+<body class="light">
   <!-- javascripts -->
   <!-- <script src="/js/jquery-3.6.0.min.js"></script> -->
 
@@ -26,6 +26,11 @@
   {{- 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/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>
+                        <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">Read</a>
+                        <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 }}
@@ -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>
@@ -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,6 +1,7 @@
 <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 -->
@@ -23,7 +24,7 @@
 <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" . }}
 
@@ -67,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>
+{{ if not (.Site.Params.navbar.disableSearch | default false) }}
-    let loadingIcons;
+    <script src="{{ .Site.Params.staticPath }}/js/search.js"></script>
+{{ end }}
 
-    function loading() {
-        myVar = setTimeout(showPage, 100);
-    }
 
-    function showPage() {
+{{ if (.Params.mathjax | default false) }}
-        try{
+
-            document.getElementById("loading-icons").style.display = "block";
+{{ "<!-- MathJax -->" | safeHTML }}
-        } catch(err) {}
+<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/contact.html

@@ -8,7 +8,21 @@
                     <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/experience.html

@@ -5,7 +5,7 @@
         <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">

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 }}
+    {{ if .Site.Params.footer.recentPosts.enable | default false }}
-    <div class="h3 text-center text-secondary py-3">Recent posts</div>
+    {{ $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>
+                    <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">Read</a>
+                    <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") {
+            break;
-        document.body.classList.remove('dark')
+        case "light":
-    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.body.classList.remove('dark');
+            break;
+        default:
+            if (mediaQuery) {
                 document.body.classList.add('dark');
             }
-
+            break;
-</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');
     }
-
 </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,44 +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 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.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>
+                        <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)) }}
                     <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.disableEducation | 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)) }}
                     <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)) }}
                     <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 }}
 
@@ -117,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">
@@ -139,8 +163,11 @@
                                 </svg>
                             </button>
                         </div>
-            
+                    </li>
                     {{ end }}
+
+                </ul>
+
             </div>
         </div>
     </nav>

layouts/partials/sections/hero/index.html

@@ -2,7 +2,7 @@
 <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" {{ cond .Site.Params.hero.button.download "download" "" }}>
+                        <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/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/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

@@ -57,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,7 +76,7 @@ header .navbar {
     line-height: 2rem;
     max-width: 100%;
 }
-#hero .content {
+#hero .content.animate {
     animation: fade-left 1s ease-out;
 }
 
@@ -109,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);
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    transition: box-shadow 0.3s;
     padding: 0;
-    border: 0;
+    border: 3px solid var(--secondary-color);
-    border: 2px 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;
@@ -476,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);
@@ -529,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 {
@@ -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();
+});