Update netlify.toml

feat: add rendered math support with mathjax

.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://donate.stripe.com/7sIeWp3aG07vd6o8ww'] # 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

exampleSite/config.yaml

@@ -1,11 +1,19 @@
-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
+enableRobotsTXT: true
-googleAnalytics: G-DWJJVE27WD
 
 markup:
   goldmark:
@@ -19,39 +27,57 @@ Menus:
       title: Blog posts
       url: /blogs
       weight: 1
-
+    - identifier: gallery
+      name: Gallery
+      title: Blog posts
+      url: /gallery
+      weight: 2
     #Dropdown menu
-    - identifier: dropdown
+    # - identifier: dropdown
-      title: Example dropdown menu
+    #   title: Example dropdown menu
-      name: Dropdown
+    #   name: Dropdown
-      weight: 2
+    #   weight: 3
-    - identifier: dropdown1
+    # - identifier: dropdown1
-      title: example dropdown 1
+    #   title: example dropdown 1
-      name: example 1
+    #   name: example 1
-      url: /#
+    #   url: /#
-      parent: dropdown
+    #   parent: dropdown
-      weight: 1
+    #   weight: 1
-    - identifier: dropdown2
+    # - identifier: dropdown2
-      title: example dropdown 2
+    #   title: example dropdown 2
-      name: example 2
+    #   name: example 2
-      url: /#
+    #   url: /#
-      parent: dropdown
+    #   parent: dropdown
-      weight: 2
+    #   weight: 2
 
 params:
   title: "Hugo Profile"
   description: Text about my cool site
+  # 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:
+  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:
@@ -71,18 +97,18 @@ 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
+    # brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
-  #   brandName: "Profile" # Brand name for the brand | default is the title variable
+    brandName: "Hugo Profile" # Brand name for the brand | default is the title variable
-
+    disableSearch: false
-  #   menus:
+    menus:
-  #     disableAbout: true
+      disableAbout: false
-  #     disableExperience: true
+      disableExperience: false
-  #     disableEducation: true
+      disableEducation: false
-  #     disableProjects: true
+      disableProjects: false
-  #     disableAchievements: true
+      disableAchievements: false
-  #     disableContact: true
+      disableContact: false
 
   # Hero
   hero:
@@ -96,6 +122,8 @@ params:
       enable: true
       name: "Resume"
       url: "#"
+      download: true
+      newPage: false
     socialLinks:
       fontAwesomeIcons:
         - icon: fab fa-github
@@ -106,12 +134,11 @@ params:
         - icon: /fav.png
           url: "https://example.com"
 
-
   # About
   about:
     enable: true
     title: "About Me"
-    image: '/images/me.png'
+    image: "/images/me.png"
     content: |-
       I am a software developer with a passion for web development. I have a background in computer science and mathematics, and I have a strong interest in the intersection of technology and art. I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. 
 
@@ -130,6 +157,7 @@ params:
   # Experience
   experience:
     enable: true
+    # title: "Custom Name"
     items:
       - job: "Senior Software Developer"
         company: "Facebook"
@@ -194,7 +222,8 @@ params:
   # Education
   education:
     enable: true
-    # index: true
+    # title: "Custom Name"
+    index: false
     items:
       - title: "Master of Business Administration"
         school:
@@ -236,6 +265,7 @@ params:
   # Achievements
   achievements:
     enable: true
+    # title: "Custom Name"
     items:
       - title: Google kickstart runner
         content: I solved all problems with optimal solution.
@@ -245,7 +275,7 @@ params:
       - title: Hugo Profile
         content: Developed a theme and getting 1K+ downloads per month.
         url: "https://github.com/gurusabarish/hugo-profile"
-      - title:  Microsoft Imagine Runner
+      - title: Microsoft Imagine Runner
         content: We are developed a product which can help others.
       - title: Google Summer of Code
         content: Contributed to a open source project.
@@ -254,6 +284,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 +292,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
@@ -274,14 +305,14 @@ params:
             url: https://twitter.com/intent/tweet?text=Check+it+out:&url=https%3A%2F%2Fgithub.com%2Fgurusabarish%2Fhugo-profile
 
       - title: Image Converter
-        content:  A web app to convert image to pdf, png to jpg, png to jpg and png to webp without database using django.
+        content: A web app to convert image to pdf, png to jpg, png to jpg and png to webp without database using django.
         image: /images/projects/converter.jpg
         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
@@ -292,10 +323,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
@@ -303,12 +334,18 @@ 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
 
   footer:
-    # recentPosts: false
+    recentPosts:
+      path: "blogs"
+      count: 3
+      title: Recent Posts
+      enable: true
+      disableFeaturedImage: false
     socialNetworks:
       github: https://github.com
       linkedin: https://linkedin.com
@@ -316,4 +353,6 @@ params:
       instagram: https://instagram.com
       facebook: https://facebook.com
 
-
+  # List pages like blogs and posts
+  listPages:
+    disableFeaturedImage: false

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>
+    <title>Example HTML5 Document</title>
-</head>
+  </head>
-<body>
+  <body>
-  <p>Test</p>
+    <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%" */>}}
+```

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

@@ -8,7 +8,7 @@
 
 {{ define "main" }}
 <div class="container py-5 text-center">
-    <img src="/404.png" alt="404 page not found" class="img-fluid" width="40%">
+    <img src="{{ .Site.Params.staticPath }}/404.png" alt="404 page not found" class="img-fluid" width="40%">
     <h1>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

@@ -12,14 +12,25 @@
 <body class="light" onload="loading()">
   <!-- javascripts -->
   <!-- <script src="/js/jquery-3.6.0.min.js"></script> -->
-  <script src="/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

@@ -1,6 +1,6 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
-<link rel="stylesheet" href="/css/list.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/list.css" media="all">
 {{ end }}
 
 {{ define "title" }}
@@ -13,18 +13,27 @@
     <div class="row">
         {{ range .Paginator.Pages }}
         <div class="col-lg-4 col-md-6 my-3">
-            <div class="card h-100">
+            <div class="card-columns">
-                <div class="card-body bg-transparent p-4 shadow-sm">
+                <div class="card h-100">
-                    <a href="{{ .RelPermalink }}" class="primary-font card-title">
+                    {{ if and (not (.Site.Params.listPages.disableFeaturedImage | default false)) (.Params.image) }}
-                        <h5 class="card-title bg-transparent" title="{{ .Title }}">{{ .Title | truncate 25 }}</h5>
+                    <div class="card-header">
-                    </a>
+                        <a href="{{ .RelPermalink }}">
-                    <div class="card-text secondary-font">
+                            <img src="{{ .Params.image }}" class="card-img-top" alt="{{ .Title }}">
-                        <p>{{ .Summary | truncate 300}}</p>
+                        </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>
+                        </a>
+                        <div class="card-text secondary-font">
+                            <p>{{ .Summary | truncate 300}}</p>
+                        </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>
                     </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>
                 </div>
             </div>
         </div>

layouts/_default/single.html

@@ -1,9 +1,9 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Params.description }}">
-<link rel="stylesheet" href="/css/single.css">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/single.css">
 
 <!-- fontawesome -->
-<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
 {{ end }}
 
 {{ define "title" }}
@@ -29,7 +29,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>
@@ -86,7 +86,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>
@@ -100,7 +100,6 @@
   var topScroll = document.getElementById("topScroll");
   window.onscroll = function() {scrollFunction()};
 
-  console.log(topScroll);
   function scrollFunction() {
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
       topScroll.style.display = "block";

layouts/index.html

@@ -1,10 +1,10 @@
 {{ define "head" }}
 <meta name="description" content={{ .Site.Params.description }}>
-<link rel="stylesheet" href="/css/index.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/index.css" media="all">
-<link rel="stylesheet" href="/css/projects.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/projects.css" media="all">
 
 <!-- fontawesome -->
-<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+<script defer src="{{ .Site.Params.staticPath }}/fontawesome-5/all-5.15.4.js"></script>
 {{ end }}
 
 {{ define "title" }}

layouts/partials/head.html

@@ -1,34 +1,48 @@
 <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
+<link rel="preload"
-    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"
+      as="style"
-    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"
+>
+<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="/css/font.css" media="all">
+<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 -->
-<link rel="stylesheet" href="/bootstrap-5/css/bootstrap.min.css" media="all">
+{{- if (or (eq .Site.Params.UseBootstrapCDN true) (eq .Site.Params.UseBootstrapCDN "css")) -}}
-<link rel="stylesheet" href="/css/header.css" media="all">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-<link rel="stylesheet" href="/css/footer.css" media="all">
+{{- 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">
 
 <!-- theme -->
-<link rel="stylesheet" href="/css/theme.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/theme.css" media="all">
 
 <!-- Custom Styles -->
 {{ if .Site.Params.customCSS }}
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/style.css">
 {{ end }}
 
 <style>
@@ -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

@@ -62,3 +62,39 @@
         } catch(err) {}
     }
 </script>
+
+{{ if not (.Site.Params.navbar.disableSearch | default false) }}
+    <script src="/js/search.js"></script>
+{{ end }}
+
+
+{{ 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 }}

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

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 }}
@@ -35,12 +35,14 @@
                                 {{ .school.name }}
                                 {{ end }}
 
+                                {{ if .GPA }}
                                 <div class="py-1">
                                     GPA:
                                     <i>
                                         <small>{{ .GPA }}</small>
                                     </i> 
                                 </div>
+                                {{ end }}
                                 <div class="py-1 education-content">
                                     {{ .content | markdownify}}
                                 </div>

layouts/partials/sections/experience.html

@@ -1,7 +1,7 @@
 {{ 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">
@@ -12,7 +12,6 @@
                             <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/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>

layouts/partials/sections/header.html

@@ -1,5 +1,5 @@
 {{- /* theme-toggle is enabled */}}
-{{- if (not .Site.Params.theme.disableThemeToggle) }}
+{{- if (not .Site.Params.theme.disableThemeToggle | default false) }}
 {{- /* theme is auto */}}
 <script>
     if (localStorage.getItem("pref-theme") === "dark") {
@@ -24,7 +24,7 @@
 
 <!-- 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 }}">
@@ -37,6 +37,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="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">
@@ -47,69 +54,65 @@
 
             <!-- 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">
+                <ul class="navbar-nav {{ .Site.Params.navbar.align | default "ms-auto"}} text-center">
-                    {{
+                    {{ if not (.Site.Params.navbar.disableSearch | default false) }}
-                    if and
+                        <li class="nav-item navbar-text d-block d-md-none">
-                    (.Site.Params.about.enable | default false)
+                            <div class="nav-link">
-                    (not (.Site.Params.navbar.menus.disableAbout | default false))
+                                <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder="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)) }}
-                    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.disableEducation | default false)) }}
-                    if and
-                    (.Site.Params.projects.enable | default false)
-                    (not (.Site.Params.navbar.menus.disableEducation | default false))
-                    }}
-                    {{/* {{ if .Site.Params.projects.enable | 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
+                    {{ if and (.Site.Params.contact.enable | default false) (not (.Site.Params.navbar.menus.disableContact | default false)) }}
-                    (.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,30 +144,33 @@
                     </li>
                     {{end}}
                     {{end}}
+
+                    {{ if (not .Site.Params.theme.disableThemeToggle | default false) }}
+                    <li class="nav-item navbar-text">
+                        <!-- darkmode mode toggle -->
+                        <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">
+                                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                                </svg>
+                                <svg id="sun" 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">
+                                    <circle cx="12" cy="12" r="5"></circle>
+                                    <line x1="12" y1="1" x2="12" y2="3"></line>
+                                    <line x1="12" y1="21" x2="12" y2="23"></line>
+                                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                                    <line x1="1" y1="12" x2="3" y2="12"></line>
+                                    <line x1="21" y1="12" x2="23" y2="12"></line>
+                                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                                </svg>
+                            </button>
+                        </div>
+                    </li>
+                    {{ end }}
+
                 </ul>
 
-                <!-- 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">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                        </svg>
-                        <svg id="sun" 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">
-                            <circle cx="12" cy="12" r="5"></circle>
-                            <line x1="12" y1="1" x2="12" y2="3"></line>
-                            <line x1="12" y1="21" x2="12" y2="23"></line>
-                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                            <line x1="1" y1="12" x2="3" y2="12"></line>
-                            <line x1="21" y1="12" x2="23" y2="12"></line>
-                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                        </svg>
-                    </button>
-                </div>
-            
-                {{ end }}
             </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,7 +33,7 @@
             </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" 
                             alt=""

layouts/partials/sections/hero/social.html

@@ -1,4 +1,4 @@
-<span id="loading-icons" style="display: none;">
+<span id="loading-icons" style="display: {{ if .Site.Params.animate }}none{{else}}block{{ end }};">
     {{ 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/projects/list.html

@@ -1,9 +1,9 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
-<link rel="stylesheet" href="/css/projects.css" media="all">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/projects.css" media="all">
 
 <!-- fontawesome -->
-<script defer src="/fontawesome-5/all-5.15.4.js"></script>
+<script defer src="{{ .Site.Params.staticPath }}/fontawesome-5/all-5.15.4.js"></script>
 {{ end }}
 
 {{ define "title" }}

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.animate {
-#hero .content {
     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);
-    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;
@@ -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);

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,7 @@
     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 a {
@@ -264,8 +265,8 @@
 #single #topScroll {
     display: none;
     position: fixed;
-    bottom: 10px;
+    bottom: 20px;
-    right: 10px;
+    right: 20px;
     z-index: 99;
     border: none;
     outline: none;

static/js/search.js

@@ -0,0 +1,73 @@
+async function searchOnChange(evt) {
+  let searchQuery = evt.target.value;
+
+  if (searchQuery !== "") {
+    const searchButtonEle = document.querySelectorAll("#search");
+    let searchButtonPosition;
+    if (window.innerWidth > 768) {
+      searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
+      document.getElementById("search-content").style.width = "500px";
+    } else {
+      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";
+
+    let 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;
+    }
+    document.getElementById("search-content").style.display = "block";
+  } else {
+    document.getElementById("search-content").style.display = "none";
+    document.getElementById("search-results").innerHTML = "";
+  }
+}