diff --git a/assets/js/email.js b/assets/js/email.js
new file mode 100644
index 00000000..4d45f4cf
--- /dev/null
+++ b/assets/js/email.js
@@ -0,0 +1,13 @@
+(function () {
+  const links = document.querySelectorAll(".email-link");
+  links.forEach((link) => {
+    let email = atob(link.getAttribute("data-email"));
+    const subject = link.getAttribute("data-subject");
+    let mailto = email.startsWith("mailto:") ? email : "mailto:" + email;
+
+    if (subject) {
+      mailto += (mailto.includes("?") ? "&" : "?") + "subject=" + encodeURIComponent(subject);
+    }
+    link.href = mailto;
+  });
+})();
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a6c78f9f..d1c2719d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -53,11 +53,18 @@
           {{ if $replyByEmail }}
             <strong class="block mt-8">
               <a
-                target="_blank"
-                class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
-                href="mailto:{{ site.Params.Author.email }}?subject={{ replace (printf "Reply to %s" .Title) "\"" "'" }}">
+                class="email-link m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
+                href="#"
+                data-email="{{ site.Params.Author.email | base64Encode }}"
+                data-subject="{{ replace (printf "Reply to %s" .Title) "\"" "'" }}">
                 {{ i18n "article.reply_by_email" | default "Reply by Email" }}
               </a>
+              <noscript>
+                <span
+                  class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300">
+                  {{ i18n "article.reply_by_email" | default "Reply by Email" }} (require JavaScript)
+                </span>
+              </noscript>
             </strong>
           {{ end }}
         </div>
@@ -76,7 +83,7 @@
       {{ if .Params.showComments | default (site.Params.article.showComments | default false) }}
         {{ if templates.Exists "partials/comments.html" }}
           <div class="pt-3">
-            <hr class="border-dotted border-neutral-300 dark:border-neutral-600">
+            <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
             <div class="pt-3">
               {{ partial "comments.html" . }}
             </div>
diff --git a/layouts/partials/author-extra.html b/layouts/partials/author-extra.html
index 0c5eb11b..f47ef7fb 100644
--- a/layouts/partials/author-extra.html
+++ b/layouts/partials/author-extra.html
@@ -21,7 +21,7 @@
         height="96"
         alt="{{ $.Site.Params.Author.name | default " Author" }}"
         src="{{ $final.RelPermalink }}"
-        data-zoom-src="{{ $squareImage.RelPermalink }}">
+        data-zoom-src="{{ $squareImage.RelPermalink }}" />
     {{ end }}
   {{ end }}
   <div class="place-self-center">
@@ -40,12 +40,16 @@
       <div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
     {{ end }}
     <div class="text-2xl sm:text-lg">
-      <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
+      <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500 space-x-2">
         {{ range .data.social }}
           {{ range $name, $link := . }}
+            {{ $isEmail := eq $name "email" }}
             <a
-              class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
-              href="{{ $link }}"
+              class="{{ cond $isEmail "email-link" "" }} hover:text-primary-700 dark:hover:text-primary-400"
+              href="{{ cond $isEmail "#" ($link | safeURL) }}"
+              {{ if $isEmail }}
+                data-email="{{ $link | base64Encode }}" data-subject="Contact"
+              {{ end }}
               target="_blank"
               aria-label="{{ $name | title }}"
               title="{{ $name | title }}"
diff --git a/layouts/partials/author-links.html b/layouts/partials/author-links.html
index 2e04ac29..72d6ce45 100644
--- a/layouts/partials/author-links.html
+++ b/layouts/partials/author-links.html
@@ -1,10 +1,14 @@
 {{ with .Site.Params.Author.links }}
-  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
+  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500 space-x-2">
     {{ range $links := . }}
       {{ range $name, $url := $links }}
+        {{ $isEmail := eq $name "email" }}
         <a
-          class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
-          href="{{ $url | safeURL }}"
+          class="{{ cond $isEmail "email-link" "" }} hover:text-primary-700 dark:hover:text-primary-400"
+          href="{{ cond $isEmail "#" ($url | safeURL) }}"
+          {{ if eq $name "email" }}
+            data-email="{{ $url | base64Encode }}"
+          {{ end }}
           target="_blank"
           aria-label="{{ $name | title }}"
           title="{{ $name | title }}"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 0652e82c..14e617d2 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -156,6 +156,7 @@
   {{ end }}
   {{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
   {{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
+  {{ $jsResources = $jsResources | append (resources.Get "js/email.js") }}
   {{ if $jsResources }}
     {{ $bundleJS := $jsResources | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint $alg }}
     <script
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index d67eece1..d90572e3 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -79,9 +79,14 @@
               <div class="flex flex-wrap">
                 {{ range $links := . }}
                   {{ range $name, $url := $links }}
+                    {{ $isEmail := eq $name "email" }}
                     <a
-                      class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
-                      href="{{ $url }}"
+                      class="{{ cond $isEmail "email-link" "" }} hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
+                      href="{{ cond $isEmail "#" ($url | safeURL) }}"
+                      {{ if $isEmail }}
+                        data-email="{{ $url | base64Encode }}"
+                        data-subject="Contact"
+                      {{ end }}
                       target="_blank"
                       aria-label="{{ $name | title }}"
                       title="{{ $name | title }}"
diff --git a/layouts/partials/home/hero.html b/layouts/partials/home/hero.html
index 8a74d45f..25e886d8 100644
--- a/layouts/partials/home/hero.html
+++ b/layouts/partials/home/hero.html
@@ -93,27 +93,22 @@
               <div class="flex flex-wrap">
                 {{ range $links := . }}
                   {{ range $name, $url := $links }}
-                    {{ if not $disableHeroImageFilter }}
-                      <a
-                        class="px-1 hover:text-primary-400 text-primary-300"
-                        href="{{ $url }}"
-                        target="_blank"
-                        aria-label="{{ $name | title }}"
-                        title="{{ $name | title }}"
-                        rel="me noopener noreferrer">
-                        {{ partial "icon.html" $name }}
-                      </a>
-                    {{ else }}
-                      <a
-                        class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200"
-                        href="{{ $url }}"
-                        target="_blank"
-                        aria-label="{{ $name | title }}"
-                        title="{{ $name | title }}"
-                        rel="me noopener noreferrer">
-                        {{ partial "icon.html" $name }}
-                      </a>
-                    {{ end }}
+                    {{ $isEmail := eq $name "email" }}
+                    <a
+                      class="px-1 hover:text-primary-400
+                      {{ cond $disableHeroImageFilter `text-primary-300` `text-primary-800 dark:text-primary-200` }}
+                      {{ cond $isEmail `email-link` `` }}"
+                      href="{{ cond $isEmail "#" ($url | safeURL) }}"
+                      {{ if $isEmail }}
+                        data-email="{{ $url | base64Encode }}"
+                        data-subject="Contact"
+                      {{ end }}
+                      target="_blank"
+                      aria-label="{{ $name | title }}"
+                      title="{{ $name | title }}"
+                      rel="me noopener noreferrer">
+                      {{ partial "icon.html" $name }}
+                    </a>
                   {{ end }}
                 {{ end }}
               </div>
diff --git a/layouts/partials/sharing-links.html b/layouts/partials/sharing-links.html
index 83e63fe9..5bda5cec 100644
--- a/layouts/partials/sharing-links.html
+++ b/layouts/partials/sharing-links.html
@@ -3,10 +3,15 @@
   <section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
     {{ range . }}
       {{ with index $links . }}
+        {{ $isEmail := eq .icon "email" }}
         <a
+          class="{{ cond $isEmail "email-link" "" }} m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
           target="_blank"
-          class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
-          href="{{ printf .url $.Permalink $.Title }}"
+          href="{{ cond $isEmail "#" (printf .url $.Permalink $.Title | safeURL) }}"
+          {{ if $isEmail }}
+            data-email="{{ $.Site.Params.Author.email | base64Encode }}"
+            data-subject="{{ replace (printf "Reply to %s" $.Title) "\"" "'" }}"
+          {{ end }}
           title="{{ i18n .title }}"
           aria-label="{{ i18n .title }}">
           {{ partial "icon.html" .icon }}