From c5078a2adf338703d7b7a3d62e6594fe2831bc5d Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Mon, 11 May 2026 11:32:35 +0200
Subject: feat: hero name glitch effect on homepage

Chromatic aberration glitch on h1.hero-name. Gravatar moved from
markdown shortcode to template. JS fires randomly every 4-11s.
Respects prefers-reduced-motion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/_default/baseof.html |  6 ++++++
 layouts/index.html           | 35 +++++++++++++----------------------
 2 files changed, 19 insertions(+), 22 deletions(-)

(limited to 'layouts')

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3736a9f..20f428d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -137,5 +137,11 @@
   <!-- Contribution graph widget -->
   {{ $contribScript := resources.Get "js/contribution-graph.js" | minify }}
   <script src="{{ $contribScript.RelPermalink }}"></script>
+
+  <!-- Hero glitch effect (homepage only) -->
+  {{ if .IsHome }}
+  {{ $heroScript := resources.Get "js/hero-glitch.js" | minify }}
+  <script src="{{ $heroScript.RelPermalink }}"></script>
+  {{ end }}
 </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index fd3cfa0..a76505a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,23 +1,22 @@
 {{ define "main" }}
 <section class="min-h-[calc(100vh-200px)] flex items-center justify-center px-4 py-12">
-  <div class="max-w-4xl w-full">
-    <!-- Profile Image (optional) -->
-    {{ if .Params.image }}
-    <div class="flex justify-center mb-8">
+  <div class="max-w-4xl w-full text-center">
+
+    <!-- Gravatar -->
+    <div class="flex justify-center mb-6">
+      {{- $email := .Site.Params.email -}}
+      {{- $hash := $email | lower | md5 -}}
       <img
-        src="{{ .Params.image }}"
+        src="https://www.gravatar.com/avatar/{{ $hash }}?s=192&d=mp"
         alt="{{ .Site.Params.author }}"
         loading="lazy"
         class="w-32 h-32 md:w-48 md:h-48 rounded-full border-4 border-accent object-cover"
       >
     </div>
-    {{ end }}
 
-    <!-- Author Name -->
-<!--     <h1 class="text-4xl md:text-5xl font-bold text-accent text-center mb-4">
-      {{ .Site.Params.author }}
-    </h1>
- -->
+    <!-- Hero Name (glitch effect) -->
+    <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1>
+
     <!-- Bio (from page content) -->
     <div class="text-xl text-text-dim text-center mb-8 leading-relaxed prose prose-invert max-w-none">
       {{ .Content }}
@@ -33,19 +32,10 @@
         {{ $contactUrl = "/it/is/here/" }}
       {{ end }}
 
-      <!-- Articles Button (Primary) -->
-      <a
-        href="{{ $articlesUrl }}"
-        class="btn btn-primary btn-lg"
-      >
+      <a href="{{ $articlesUrl }}" class="btn btn-primary btn-lg">
         {{ i18n "articles" }}
       </a>
-
-      <!-- Contact Button (Outline) -->
-      <a
-        href="{{ $contactUrl }}"
-        class="btn btn-outline btn-lg"
-      >
+      <a href="{{ $contactUrl }}" class="btn btn-outline btn-lg">
         {{ i18n "contact" }}
       </a>
     </div>
@@ -54,6 +44,7 @@
     <div class="mt-16 pt-8 border-t border-border">
       {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false) }}
     </div>
+
   </div>
 </section>
 {{ end }}
-- 
cgit v1.2.3