chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme)

75 files changed, 2430 insertions, 929 deletions

diff --git a/layouts/404.en.html b/layouts/404.en.html
new file mode 100644
index 0000000..2829a20
--- /dev/null
+++ b/layouts/404.en.html
@@ -0,0 +1,142 @@
+{{ define "main" }}
+
+<main class="min-h-screen px-4 py-12">
+  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
+    <div class="text-center">
+    <!-- 404 Heading -->
+    <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
+      404
+    </h1>
+
+    <!-- Error Message -->
+    <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      {{ i18n "notFound" }}
+    </h2>
+
+    <p class="text-lg text-text-dim mb-8">
+      {{ i18n "notFoundMessage" }}
+    </p>
+
+    <!-- Search Box -->
+    <div class="mb-12">
+      <form id="search-form" class="flex flex-col gap-4">
+        <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label>
+        <input
+          id="search-input"
+          type="text"
+          placeholder="{{ (i18n "searchPlaceholder") }}"
+          class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
+          @input="filterArticles($el.value)"
+        />
+      </form>
+      <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
+        <template x-for="article in filteredArticles" :key="article.title">
+          <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
+            <a :href="article.url" class="block text-left">
+              <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
+              <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
+            </a>
+          </div>
+        </template>
+      </div>
+      <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
+        {{ i18n "noSearchResults" }}
+      </div>
+    </div>
+
+    <!-- Recent Articles Section -->
+    <div class="mb-12">
+      <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
+      <div class="space-y-4">
+        {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
+        <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
+          <a href="{{ .Permalink }}" class="block text-left">
+            <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
+            <p class="text-sm text-text-dim mt-1">
+              {{ .Date.Format "Jan 02, 2006" }}
+            </p>
+          </a>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+
+    <!-- Explore Topics -->
+    <div class="mb-12 text-left">
+      {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h3") }}
+    </div>
+
+    <!-- Navigation Links -->
+    <div class="space-y-4 flex flex-col items-center mb-12">
+      <a href="/" class="btn btn-primary">
+        {{ i18n "goHome" }}
+      </a>
+      <a href="/articles/" class="btn btn-secondary">
+        {{ i18n "browseArticles" }}
+      </a>
+      <a href="/is/here/" class="btn btn-outline">
+        {{ i18n "contactSupport" }}
+      </a>
+    </div>
+
+    <!-- Easter Egg Trigger -->
+    <div class="mt-12 pt-8 border-t border-border">
+      <button
+        type="button"
+        @click="toggleEasterEgg()"
+        class="text-sm text-text-dim hover:text-accent transition-colors underline"
+      >
+        {{ i18n "followWhiteRabbit" }}
+      </button>
+    </div>
+
+      <!-- Easter Egg Modal (Hidden by default) -->
+      <div
+        class="fixed inset-0 z-50"
+        :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
+        x-show="showEasterEgg"
+        x-cloak
+      >
+        <!-- Overlay -->
+        <div
+          class="absolute inset-0 bg-black/50"
+          @click="showEasterEgg = false"
+        ></div>
+
+        <!-- Modal Content -->
+        <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
+          <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
+
+          <div class="space-y-4">
+            <button
+              type="button"
+              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
+              class="w-full btn btn-primary"
+            >
+              💊 {{ i18n "bluePill" }}
+            </button>
+
+            <button
+              type="button"
+              @click="goToRandomArticle()"
+              class="w-full btn btn-secondary"
+            >
+              🐰 {{ i18n "redPill" }}
+            </button>
+          </div>
+
+          <button
+            type="button"
+            @click="showEasterEgg = false"
+            class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
+            aria-label="Close modal"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+{{ end }}
diff --git a/layouts/404.html b/layouts/404.html
deleted file mode 100644
index 3295630..0000000
--- a/layouts/404.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ .Site.Language.Locale }}" dir="{{ or .Site.Language.Direction `ltr` }}">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#060b10">
-  <title>404 — {{ .Site.Title }}</title>
-
-  <script>
-    (function() {
-      const theme = localStorage.getItem('theme') || 'dark';
-      if (theme === 'light') {
-        document.documentElement.classList.add('theme-light');
-      }
-    })();
-  </script>
-
-  {{ partialCached "head/css.html" . }}
-  {{ partialCached "head/js.html" . }}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
-  {{ $notfound := resources.Get "css/components/404.css" | fingerprint }}
-  <link rel="stylesheet" href="{{ $notfound.RelPermalink }}">
-</head>
-<body>
-  <a href="#main-content" class="skip-link">Skip to content</a>
-  <canvas id="matrix-canvas" aria-hidden="true" data-mode="background"></canvas>
-
-  {{ partial "header.html" . }}
-
-  <main id="main-content" class="hero--404">
-    <div class="content-wrapper">
-      <!-- Left: Quote + Search -->
-      <div class="hero-left-404">
-        <div class="quote-section">
-          <div class="quote-mark">"</div>
-          <p class="quote-text" id="quote-text">The page you're looking for doesn't exist. But that's okay, nothing exists until you find it.</p>
-          <p class="quote-author" id="quote-author">— 404 Philosopher</p>
-        </div>
-
-        <div class="search-box">
-          <input type="text" placeholder="Search articles..." aria-label="Search">
-          <button aria-label="Search">
-            <svg data-feather="search"></svg>
-          </button>
-        </div>
-
-        <nav class="quick-nav">
-          <h3>Quick Links</h3>
-          <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/articles/">Articles</a></li>
-            <li><a href="/is/">About</a></li>
-            <li><a href="/is/here">Contact</a></li>
-          </ul>
-        </nav>
-      </div>
-
-      <!-- Right: Recent Articles + Terminal -->
-      <div class="hero-right-404">
-        <div class="recent-articles">
-          <h3>Recent Articles</h3>
-          <ul>
-            {{ range first 5 (.Site.RegularPages.ByDate.Reverse) }}
-              <li>
-                <a href="{{ .RelPermalink }}" class="article-link" data-type="{{ .Params.type }}">
-                  {{ .Title }}
-                </a>
-              </li>
-            {{ end }}
-          </ul>
-        </div>
-
-        <div class="terminal-widget">
-          <div class="terminal-bar">
-            <span class="terminal-dot" style="background: #ff6b6b;"></span>
-            <span class="terminal-dot" style="background: #ffd93d;"></span>
-            <span class="terminal-dot" style="background: #6bcf7f;"></span>
-          </div>
-          <div class="terminal-content">
-            <div>$ <span class="terminal-prompt">curl https://danix.xyz/lost</span></div>
-            <div>404: Not Found</div>
-            <div>$ <span class="terminal-prompt">ls /articles</span></div>
-            <div id="terminal-files"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-
-  {{ partial "footer.html" . }}
-
-  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-  <script>feather.replace();</script>
-
-  {{ $notFoundJS := resources.Get "js/404.js" | fingerprint }}
-  <script src="{{ $notFoundJS.RelPermalink }}"></script>
-</body>
-</html>
diff --git a/layouts/404.it.html b/layouts/404.it.html
new file mode 100644
index 0000000..d876371
--- /dev/null
+++ b/layouts/404.it.html
@@ -0,0 +1,142 @@
+{{ define "main" }}
+
+<main class="min-h-screen px-4 py-12">
+  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
+    <div class="text-center">
+    <!-- 404 Heading -->
+    <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
+      404
+    </h1>
+
+    <!-- Error Message -->
+    <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      {{ i18n "notFound" }}
+    </h2>
+
+    <p class="text-lg text-text-dim mb-8">
+      {{ i18n "notFoundMessage" }}
+    </p>
+
+    <!-- Search Box -->
+    <div class="mb-12">
+      <form id="search-form" class="flex flex-col gap-4">
+        <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label>
+        <input
+          id="search-input"
+          type="text"
+          placeholder="{{ (i18n "searchPlaceholder") }}"
+          class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
+          @input="filterArticles($el.value)"
+        />
+      </form>
+      <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
+        <template x-for="article in filteredArticles" :key="article.title">
+          <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
+            <a :href="article.url" class="block text-left">
+              <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
+              <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
+            </a>
+          </div>
+        </template>
+      </div>
+      <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
+        {{ i18n "noSearchResults" }}
+      </div>
+    </div>
+
+    <!-- Recent Articles Section -->
+    <div class="mb-12">
+      <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
+      <div class="space-y-4">
+        {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
+        <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
+          <a href="{{ .Permalink }}" class="block text-left">
+            <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
+            <p class="text-sm text-text-dim mt-1">
+              {{ .Date.Format "Jan 02, 2006" }}
+            </p>
+          </a>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+
+    <!-- Explore Topics -->
+    <div class="mb-12 text-left">
+      {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h3") }}
+    </div>
+
+    <!-- Navigation Links -->
+    <div class="space-y-4 flex flex-col items-center mb-12">
+      <a href="/it/" class="btn btn-primary">
+        {{ i18n "goHome" }}
+      </a>
+      <a href="/it/articles/" class="btn btn-secondary">
+        {{ i18n "browseArticles" }}
+      </a>
+      <a href="/it/is/here/" class="btn btn-outline">
+        {{ i18n "contactSupport" }}
+      </a>
+    </div>
+
+    <!-- Easter Egg Trigger -->
+    <div class="mt-12 pt-8 border-t border-border">
+      <button
+        type="button"
+        @click="toggleEasterEgg()"
+        class="text-sm text-text-dim hover:text-accent transition-colors underline"
+      >
+        {{ i18n "followWhiteRabbit" }}
+      </button>
+    </div>
+
+      <!-- Easter Egg Modal (Hidden by default) -->
+      <div
+        class="fixed inset-0 z-50"
+        :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
+        x-show="showEasterEgg"
+        x-cloak
+      >
+        <!-- Overlay -->
+        <div
+          class="absolute inset-0 bg-black/50"
+          @click="showEasterEgg = false"
+        ></div>
+
+        <!-- Modal Content -->
+        <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
+          <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
+
+          <div class="space-y-4">
+            <button
+              type="button"
+              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}it/'"
+              class="w-full btn btn-primary"
+            >
+              💊 {{ i18n "bluePill" }}
+            </button>
+
+            <button
+              type="button"
+              @click="goToRandomArticle()"
+              class="w-full btn btn-secondary"
+            >
+              🐰 {{ i18n "redPill" }}
+            </button>
+          </div>
+
+          <button
+            type="button"
+            @click="showEasterEgg = false"
+            class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
+            aria-label="Close modal"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+{{ end }}
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 0000000..6f3e357
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,23 @@
+{{- $lang := .Type -}}
+{{- $hasLang := gt (len $lang) 0 -}}
+{{- $highlightLang := $lang -}}
+{{- if not $hasLang -}}{{- $highlightLang = "text" -}}{{- end -}}
+{{- $opts := dict "lineNos" true "lineNumbersInTable" true -}}
+
+<div class="code-block-wrapper not-prose">
+  {{- if $hasLang -}}
+  <div class="code-header" data-lang="{{ $lang }}">
+    <span class="code-lang-label">{{ $lang }}</span>
+    <div class="code-copy-wrapper">
+      <span role="status" aria-live="polite" class="sr-only code-copy-status"></span>
+      <button class="code-copy-btn" aria-label="Copy code" data-copy-target>
+        <i data-feather="copy" class="icon-copy" aria-hidden="true"></i>
+        <i data-feather="check" class="icon-check hidden" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+  {{- end -}}
+  <div class="code-body">
+{{- highlight .Inner $highlightLang $opts -}}
+  </div>
+</div>
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..d0d5e05
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,5 @@
+{{- if eq .Level 1 -}}
+<h1 id="{{ .Anchor }}">{{ .Text | safeHTML }}</h1>
+{{- else -}}
+<h{{ .Level }} id="{{ .Anchor }}"><span aria-hidden="true" class="heading-prefix">//</span> {{ .Text | safeHTML }}</h{{ .Level }}>
+{{- end -}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..482006e
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="{{ .Lang }}" class="theme-dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {{ partial "head-meta.html" . }}
+  <title>{{ .Title }}{{ if ne .Title .Site.Title }} — {{ .Site.Title }}{{ end }}</title>
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="/images/fav.png">
+
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Oxanium:wght@400;600;700&display=swap" rel="stylesheet">
+
+  <!-- Feather Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
+
+  <!-- Tailwind CSS -->
+  {{ $css := resources.Get "css/main.min.css" }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+
+  <!-- Syntax highlighting (Chroma) -->
+  {{ $chroma := resources.Get "css/chroma-custom.css" | minify }}
+  <link rel="stylesheet" href="{{ $chroma.RelPermalink }}">
+</head>
+<body class="bg-bg text-text antialiased" data-page-kind="{{ if .IsHome }}home{{ else }}other{{ end }}">
+  <!-- Reading progress bar (only on single pages/articles) -->
+  {{ if eq .Kind "page" }}
+  <div
+    id="reading-progress"
+    class="fixed top-0 left-0 h-1 transition-all duration-100"
+    style="width: 0%; background: linear-gradient(to right, var(--accent), var(--accent2)); z-index: 9999;"
+  ></div>
+  {{ partial "back-to-top.html" . }}
+  {{ end }}
+  <!-- Skip to main content link -->
+  <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded">
+    {{ i18n "skipToContent" }}
+  </a>
+
+  <!-- Dot grid background pattern -->
+  <div class="fixed inset-0 pointer-events-none opacity-5 dot-grid" style="
+    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+    background-size: 30px 30px;
+    z-index: -1;
+  "></div>
+
+  <!-- Matrix rain canvas background -->
+  <canvas id="matrix-rain" aria-hidden="true"></canvas>
+
+  <!-- Theme toggle & language toggle (before Alpine loads to prevent flash) -->
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') || 'dark';
+      const html = document.documentElement;
+      html.classList.remove('theme-light', 'theme-dark');
+      html.classList.add('theme-' + theme);
+    })();
+  </script>
+
+  <!-- Navigation -->
+  {{ partial "header.html" . }}
+
+  <!-- Main content (spaced for fixed header) -->
+  <main id="main" class="mt-20 relative z-10">
+    {{ block "main" . }}{{ end }}
+  </main>
+
+  <!-- Footer -->
+  {{ partial "footer.html" . }}
+
+  <!-- Search modal (desktop and mobile) -->
+  {{ partial "search-modal.html" . }}
+
+  <!-- Alpine.js -->
+  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+
+  <!-- Feather Icons initialization -->
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script>feather.replace();</script>
+
+  <!-- Theme toggle script -->
+  {{ $themeScript := resources.Get "js/theme-toggle.js" | minify }}
+  <script src="{{ $themeScript.RelPermalink }}"></script>
+
+  <!-- Menu script -->
+  {{ $menuScript := resources.Get "js/menu.js" | minify }}
+  <script src="{{ $menuScript.RelPermalink }}"></script>
+
+  <!-- Contact form script -->
+  {{ $contactScript := resources.Get "js/contact-form.js" | minify }}
+  <script src="{{ $contactScript.RelPermalink }}"></script>
+
+  <!-- 404 Not Found page script -->
+  {{ $notFoundScript := resources.Get "js/not-found-page.js" | minify }}
+  <script src="{{ $notFoundScript.RelPermalink }}"></script>
+
+  <!-- Reading progress bar script (on single pages/articles) -->
+  {{ if eq .Kind "page" }}
+  {{ $progressScript := resources.Get "js/reading-progress.js" | minify }}
+  <script src="{{ $progressScript.RelPermalink }}"></script>
+  {{ end }}
+
+  <!-- Code block copy button -->
+  {{ if eq .Kind "page" }}
+  {{ $codeScript := resources.Get "js/code-copy.js" | minify }}
+  <script src="{{ $codeScript.RelPermalink }}"></script>
+  {{ end }}
+
+  <!-- Matrix rain background effect -->
+  {{ with resources.Get "js/matrix-rain.js" }}
+  {{ $s := . | minify }}
+  <script src="{{ $s.RelPermalink }}"></script>
+  {{ end }}
+
+  <!-- Search functionality script -->
+  {{ $searchScript := resources.Get "js/search.js" | minify }}
+  <script src="{{ $searchScript.RelPermalink }}"></script>
+
+  <!-- Timeline lazy-reveal (scroll-triggered reveal animation) -->
+  {{ if eq .Kind "section" }}
+  {{ $lazyScript := resources.Get "js/article-lazy.js" | minify }}
+  <script src="{{ $lazyScript.RelPermalink }}"></script>
+  {{ end }}
+
+  <!-- Tag cloud spiral layout -->
+  {{ $tagCloudScript := resources.Get "js/tag-cloud-spiral.js" | minify }}
+  <script src="{{ $tagCloudScript.RelPermalink }}"></script>
+</body>
+</html>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..09c0cbb
--- /dev/null
+++ b/layouts/_default/list.html
@@ -0,0 +1,39 @@
+{{ define "main" }}
+<div class="mx-auto px-4 py-12 max-w-5xl">
+  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
+    {{ .Title }}
+  </h1>
+
+  {{ $pinned := where .Pages "Params.pinned" true }}
+  {{ $unpinned := where .Pages "Params.pinned" false }}
+  {{ if eq (len $unpinned) 0 }}
+    {{ $unpinned = where .Pages "Params.pinned" nil }}
+    {{ if eq (len $unpinned) 0 }}
+      {{ $unpinned = where .Pages "Params.pinned" "" }}
+    {{ end }}
+  {{ end }}
+
+  {{ $allPages := ($pinned | append $unpinned) }}
+
+  {{ if eq (len $allPages) 0 }}
+  <div class="py-12 text-center text-text-dim">
+    {{ i18n "noRelated" }}
+  </div>
+  {{ else }}
+  <ol class="timeline" aria-label="{{ .Title }}">
+    {{ range $i, $page := (sort $pinned "Date" "desc") }}
+      {{ $side := "left" }}
+      {{ if eq (mod $i 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }}
+      {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }}
+    {{ end }}
+    {{ $offset := len $pinned }}
+    {{ range $i, $page := (sort $unpinned "Date" "desc") }}
+      {{ $idx := add $i $offset }}
+      {{ $side := "left" }}
+      {{ if eq (mod $idx 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }}
+      {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }}
+    {{ end }}
+  </ol>
+  {{ end }}
+</div>
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..7a1a069
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,54 @@
+{{ define "main" }}
+<article class="mx-auto px-4 py-12 max-w-7xl">
+  <div class="grid md:grid-cols-3 gap-8 content-grid">
+    <!-- Article section -->
+    <div class="md:col-span-2 min-w-0">
+      <!-- Top article navigation (articles only) -->
+      {{ if eq .Section "articles" }}
+      {{ partial "article-nav.html" (dict "page" . "variant" "top") }}
+      {{ end }}
+
+      <!-- Breadcrumb -->
+      {{ partial "breadcrumb.html" . }}
+
+      <!-- Article header -->
+      {{ partial "article-header.html" . }}
+
+      <!-- Article content -->
+      <div class="prose prose-invert max-w-none mb-12">
+        {{ .Content }}
+      </div>
+
+      <!-- Tags section -->
+      {{ if .Params.tags }}
+      <div class="border-t border-border pt-8">
+        <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3>
+        <div class="flex flex-wrap gap-2">
+          {{ $lang := .Lang }}
+          {{ range .Params.tags }}
+          {{ $tagUrl := printf "/tags/%s/" (. | urlize) }}
+          {{ if eq $lang "it" }}
+            {{ $tagUrl = printf "/it/tags/%s/" (. | urlize) }}
+          {{ end }}
+          <a
+            href="{{ $tagUrl }}"
+            class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm"
+          >
+            {{ . }}
+          </a>
+          {{ end }}
+        </div>
+      </div>
+      {{ end }}
+
+      <!-- Bottom article navigation (articles only) -->
+      {{ if eq .Section "articles" }}
+      {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }}
+      {{ end }}
+    </div>
+
+    <!-- Sidebar -->
+    {{ partial "sidebar.html" . }}
+  </div>
+</article>
+{{ end }}
diff --git a/layouts/_partials/article-single.html b/layouts/_partials/article-single.html
deleted file mode 100644
index f030869..0000000
--- a/layouts/_partials/article-single.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<article class="article-single">
-  <!-- Article Hero -->
-  {{ if .Params.image }}
-    <div class="article-hero" style="background-image: url('{{ .Params.image }}')">
-      <div class="article-hero-overlay"></div>
-      <div class="article-hero-content">
-        <nav class="article-breadcrumb">
-          <a href="/articles/">Articles</a>
-          <span>/</span>
-          <span>{{ .Title }}</span>
-        </nav>
-        <h1>{{ .Title }}</h1>
-      </div>
-    </div>
-  {{ end }}
-
-  <!-- Article Meta Bar -->
-  <div class="article-meta-bar">
-    <div class="article-meta">
-      <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span>
-      <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span>
-      <span class="article-read-time">{{ .ReadingTime }} min read</span>
-    </div>
-  </div>
-
-  <!-- Share Sidebar (for large screens) -->
-  {{ partial "share-sidebar.html" . }}
-
-  <!-- Article Body -->
-  <div class="article-body container-narrow">
-    {{ .Content }}
-  </div>
-
-  <!-- Article Footer Nav -->
-  {{ $section := .Site.GetPage .Section }}
-  {{ if $section }}
-    {{ $prevPage := .PrevInSection }}
-    {{ $nextPage := .NextInSection }}
-    {{ if or $prevPage $nextPage }}
-      <nav class="article-footer-nav">
-        {{ if $prevPage }}
-          <a href="{{ $prevPage.RelPermalink }}" class="nav-prev">
-            <span class="nav-label">← Previous</span>
-            <span class="nav-title">{{ $prevPage.Title }}</span>
-          </a>
-        {{ end }}
-        {{ if $nextPage }}
-          <a href="{{ $nextPage.RelPermalink }}" class="nav-next">
-            <span class="nav-label">Next →</span>
-            <span class="nav-title">{{ $nextPage.Title }}</span>
-          </a>
-        {{ end }}
-      </nav>
-    {{ end }}
-  {{ end }}
-</article>
diff --git a/layouts/_partials/featured-card.html b/layouts/_partials/featured-card.html
deleted file mode 100644
index cf2618f..0000000
--- a/layouts/_partials/featured-card.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{{ $page := .page }}
-
-<article class="featured-article">
-  {{ if $page.Params.image }}
-    <div class="featured-image">
-      <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy">
-    </div>
-  {{ end }}
-
-  <div class="featured-body">
-    <div class="featured-header">
-      <span class="featured-type-badge" style="color: var(--type-{{ $page.Params.type }});">
-        {{ $page.Params.type }}
-      </span>
-      <span class="featured-date">$ {{ $page.Date.Format "2006-01-02" }}</span>
-    </div>
-    <h2 class="featured-title">{{ $page.Title }}</h2>
-    {{ with $page.Params.description }}
-      <p class="featured-excerpt">{{ . }}</p>
-    {{ end }}
-    <a href="{{ $page.RelPermalink }}" class="featured-link">Read the full article →</a>
-  </div>
-</article>
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
deleted file mode 100644
index a9df047..0000000
--- a/layouts/_partials/footer.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="footer-container">
-  <div class="footer-content">
-    <div class="footer-copyright">
-      © {{ now.Year }} {{ .Site.Params.author }}. All rights reserved.
-    </div>
-    <nav>
-      <ul class="footer-nav">
-        {{ range .Site.Menus.main }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ end }}
-      </ul>
-    </nav>
-  </div>
-</div>
diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html
deleted file mode 100644
index 1a8a727..0000000
--- a/layouts/_partials/head.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="description" content="{{ .Site.Params.description }}">
-<meta name="theme-color" content="#060b10">
-<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
-
-{{ partialCached "head/css.html" . }}
-{{ partialCached "head/js.html" . }}
diff --git a/layouts/_partials/head/css.html b/layouts/_partials/head/css.html
deleted file mode 100644
index 8897866..0000000
--- a/layouts/_partials/head/css.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{{- with resources.Get "css/main.css" }}
-  {{- $opts := dict
-    "minify" (cond hugo.IsDevelopment false true)
-    "sourceMap" (cond hugo.IsDevelopment "linked" "none")
-  }}
-  {{- with . | css.Build $opts }}
-    {{- if hugo.IsDevelopment }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}">
-    {{- else }}
-      {{- with . | fingerprint }}
-        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
-      {{- end }}
-    {{- end }}
-  {{- end }}
-{{- end }}
diff --git a/layouts/_partials/head/js.html b/layouts/_partials/head/js.html
deleted file mode 100644
index 0210efa..0000000
--- a/layouts/_partials/head/js.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{{- with resources.Get "js/main.js" }}
-  {{- $opts := dict
-    "minify" (cond hugo.IsDevelopment false true)
-    "sourceMap" (cond hugo.IsDevelopment "linked" "none")
-  }}
-  {{- with . | js.Build $opts }}
-    {{- if hugo.IsDevelopment }}
-      <script src="{{ .RelPermalink }}"></script>
-    {{- else }}
-      {{- with . | fingerprint }}
-        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
-      {{- end }}
-    {{- end }}
-  {{- end }}
-{{- end }}
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
deleted file mode 100644
index 1f8efb8..0000000
--- a/layouts/_partials/header.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<nav class="nav-header" role="navigation" aria-label="Main navigation">
-  <button class="hamburger" id="hamburger-btn" aria-label="Toggle menu" aria-expanded="false">
-    <span></span>
-    <span></span>
-    <span></span>
-  </button>
-
-  <div class="menu-overlay" id="menu-overlay">
-    <div class="menu-items">
-      <a href="/" class="menu-logo">{{ .Site.Params.author }}</a>
-
-      <ul class="menu-links">
-        {{ range .Site.Menus.main }}
-          <li>
-            <a href="{{ .URL }}" {{ if (in $.RelPermalink .URL) }}aria-current="page"{{ end }}>
-              {{ .Name }}
-            </a>
-          </li>
-        {{ end }}
-      </ul>
-
-      <div class="menu-footer">
-        <button class="theme-switch" id="theme-switch" aria-label="Toggle theme">
-          <span class="theme-switch-dot"></span>
-        </button>
-      </div>
-    </div>
-  </div>
-</nav>
diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html
deleted file mode 100644
index 57d223d..0000000
--- a/layouts/_partials/hero.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<section class="hero" role="region" aria-label="Hero">
-  <canvas id="matrix-canvas" data-mode="hero" aria-hidden="true"></canvas>
-  <div class="hero-container">
-    <div class="hero-left">
-      <div class="hero-prompt">welcome to</div>
-      <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1>
-      <div class="hero-role" id="typed" data-phrases='{{ .Site.Params.typingPhrases | jsonify }}'></div>
-      <p class="hero-tagline">{{ .Site.Params.description }}</p>
-      <div class="hero-buttons">
-        <a href="/articles/" class="btn btn-primary">Read Articles</a>
-        <a href="/is/" class="btn btn-outline">About Me</a>
-      </div>
-    </div>
-    <div class="hero-right">
-      <div class="hero-terminal">
-        <div class="terminal-bar">
-          <span class="terminal-dot" style="background: #ff5f57;"></span>
-          <span class="terminal-dot" style="background: #febc2e;"></span>
-          <span class="terminal-dot" style="background: #28c840;"></span>
-          <span class="terminal-title">root@danix.xyz</span>
-        </div>
-        <div class="terminal-content">
-          <div class="tl tl-d1"><span class="tc-dim">$ </span><span class="tc-ok">whoami</span></div>
-          <div class="tl tl-d2">danilo</div>
-          <div class="tl tl-d3"><span class="tc-dim">$ </span><span class="tc-ok">cat roles.txt</span></div>
-          <div class="tl tl-d4"><span class="tc-key">Security</span> &amp; Web Dev</div>
-          <div class="tl tl-d5"><span class="tc-key">WordPress</span> Developer</div>
-          <div class="tl tl-d6"><span class="tc-key">Bash</span> Enthusiast</div>
-          <div class="tl tl-d7"><span class="tc-dim">$ </span><span class="tc-ok">uptime</span></div>
-          <div class="tl tl-d8">up 4 years, still learning</div>
-          <div class="tl tl-d9"><span class="tc-dim">$ </span><span class="tc-ok">_</span></div>
-        </div>
-      </div>
-    </div>
-  </div><!-- /.hero-container -->
-
-  <div class="scroll-indicator" aria-hidden="true">
-    <span>scroll</span>
-    <div class="scroll-line"></div>
-  </div>
-</section>
diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html
deleted file mode 100644
index 14245b5..0000000
--- a/layouts/_partials/menu.html
+++ /dev/null
@@ -1,51 +0,0 @@
-{{- /*
-Renders a menu for the given menu ID.
-
-@context {page} page The current page.
-@context {string} menuID The menu ID.
-
-@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
-*/}}
-
-{{- $page := .page }}
-{{- $menuID := .menuID }}
-
-{{- with index site.Menus $menuID }}
-  <nav>
-    <ul>
-      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-    </ul>
-  </nav>
-{{- end }}
-
-{{- define "_partials/inline/menu/walk.html" }}
-  {{- $page := .page }}
-  {{- range .menuEntries }}
-    {{- $attrs := dict "href" .URL }}
-    {{- if $page.IsMenuCurrent .Menu . }}
-      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
-    {{- else if $page.HasMenuCurrent .Menu .}}
-      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
-    {{- end }}
-    {{- $name := .Name }}
-    {{- with .Identifier }}
-      {{- with T . }}
-        {{- $name = . }}
-      {{- end }}
-    {{- end }}
-    <li>
-      <a
-        {{- range $k, $v := $attrs }}
-          {{- with $v }}
-            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-          {{- end }}
-        {{- end -}}
-      >{{ $name }}</a>
-      {{- with .Children }}
-        <ul>
-          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-        </ul>
-      {{- end }}
-    </li>
-  {{- end }}
-{{- end }}
diff --git a/layouts/_partials/photo-article.html b/layouts/_partials/photo-article.html
deleted file mode 100644
index 1040c9b..0000000
--- a/layouts/_partials/photo-article.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<article class="article-single">
-  <!-- Photo Hero -->
-  {{ if .Params.image }}
-    <div class="article-hero" style="background-image: url('{{ .Params.image }}')">
-      <div class="article-hero-overlay"></div>
-      <div class="article-hero-content">
-        <h1>{{ .Title }}</h1>
-      </div>
-    </div>
-  {{ end }}
-
-  <!-- Article Meta Bar -->
-  <div class="article-meta-bar">
-    <div class="article-meta">
-      <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span>
-      <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span>
-    </div>
-  </div>
-
-  <!-- Photo Grid -->
-  <div class="article-body container-narrow">
-    <div class="photo-grid" data-lightbox="true">
-      {{ .Content }}
-    </div>
-  </div>
-
-  <!-- Load photo utilities -->
-  {{ $photoUtils := resources.Get "js/photo-utils.js" }}
-  {{ $lightbox := resources.Get "js/lightbox.js" | fingerprint }}
-  <script src="{{ $photoUtils.RelPermalink }}"></script>
-  <script src="{{ $lightbox.RelPermalink }}"></script>
-</article>
diff --git a/layouts/_partials/post-card.html b/layouts/_partials/post-card.html
deleted file mode 100644
index f3a1362..0000000
--- a/layouts/_partials/post-card.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{{ if eq .context "home" }}
-  <article class="article-card reveal" data-type="{{ .type }}">
-    <div class="article-type" style="background: var(--type-{{ .type }});">{{ .type }}</div>
-    <div class="article-content">
-      <h3 class="article-title"><a href="{{ .url }}">{{ .title }}</a></h3>
-      <p class="article-excerpt">{{ .description }}</p>
-      <div class="article-meta">
-        <span>{{ dateFormat "Jan 2, 2006" .date }}</span>
-        <a href="{{ .url }}" class="article-read">Read →</a>
-      </div>
-    </div>
-  </article>
-{{ else }}
-  {{ $featured := .featured }}
-  <article class="post-card {{ if $featured }}featured{{ end }}">
-    {{ if .image }}
-      <img src="{{ .image }}" alt="{{ .title }}" class="post-card-image">
-    {{ else }}
-      <div class="post-card-image" style="background: linear-gradient(135deg, var(--color-{{ .type }}), var(--bg2));"></div>
-    {{ end }}
-    <div class="post-card-body">
-      <div class="post-type-badge {{ .type }}">{{ .type }}</div>
-      <h3 class="post-card-title"><a href="{{ .url }}">{{ .title }}</a></h3>
-      <p class="post-card-excerpt">{{ .description }}</p>
-      <div class="post-card-meta">
-        <span>{{ dateFormat "Jan 2, 2006" .date }}</span>
-      </div>
-    </div>
-  </article>
-{{ end }}
diff --git a/layouts/_partials/share-sidebar.html b/layouts/_partials/share-sidebar.html
deleted file mode 100644
index 36b6d03..0000000
--- a/layouts/_partials/share-sidebar.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<aside class="share-sidebar" id="share-sidebar" data-url="{{ .Permalink }}" data-title="{{ .Title | htmlEscape }}">
-  <div class="share-buttons">
-    <button class="share-btn" data-platform="whatsapp" title="Share on WhatsApp">
-      <svg 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
-    </button>
-    <button class="share-btn" data-platform="telegram" title="Share on Telegram">
-      <svg 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="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
-    </button>
-    <button class="share-btn" data-platform="linkedin" title="Share on LinkedIn">
-      <svg 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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2"></circle></svg>
-    </button>
-    <button class="share-btn" data-platform="twitter" title="Share on X (Twitter)">
-      <svg 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="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2s9 5 20 0a9.5 9.5 0 0 0 5-6.5"></path></svg>
-    </button>
-    <button class="share-btn" data-platform="facebook" title="Share on Facebook">
-      <svg 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="M18 2h-3a6 6 0 0 0-6 6v4a6 6 0 0 0 6 6h3"></path><path d="M16 18v2"></path><path d="M6 6v12"></path></svg>
-    </button>
-    <button class="share-btn" data-platform="reddit" title="Share on Reddit">
-      <svg 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="1"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm7-3c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"></path></svg>
-    </button>
-    <button class="share-btn" data-platform="email" title="Share via Email">
-      <svg 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"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
-    </button>
-    <button class="share-btn" id="share-copy" title="Copy link">
-      <svg 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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
-    </button>
-  </div>
-</aside>
diff --git a/layouts/_partials/static-page.html b/layouts/_partials/static-page.html
deleted file mode 100644
index d557b2f..0000000
--- a/layouts/_partials/static-page.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<article class="static-page">
-  <!-- Static Page Hero -->
-  <div class="page-hero">
-    <div class="page-hero-overlay"></div>
-    <div class="page-hero-content">
-      <h1>{{ .Title }}</h1>
-    </div>
-  </div>
-
-  <!-- Page Content -->
-  <div class="page-content container-narrow">
-    {{ .Content }}
-  </div>
-
-  <!-- Related Pages Nav (for is/* section) -->
-  {{ if eq .Section "is" }}
-    <nav class="page-nav" style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);">
-      <h3 style="margin-bottom: 1rem;">Other pages</h3>
-      <ul style="list-style: none; margin: 0;">
-        {{ $section := .Site.GetPage "/is" }}
-        {{ if $section }}
-          {{ range $section.Pages }}
-            <li style="margin-bottom: 0.5rem;">
-              <a href="{{ .RelPermalink }}" {{ if eq $.RelPermalink .RelPermalink }}class="active"{{ end }}>
-                {{ .Title }}
-              </a>
-            </li>
-          {{ end }}
-        {{ end }}
-      </ul>
-    </nav>
-  {{ end }}
-</article>
diff --git a/layouts/_partials/terms.html b/layouts/_partials/terms.html
deleted file mode 100644
index 8a6ebec..0000000
--- a/layouts/_partials/terms.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{{- /*
-For a given taxonomy, renders a list of terms assigned to the page.
-
-@context {page} page The current page.
-@context {string} taxonomy The taxonomy.
-
-@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
-*/}}
-
-{{- $page := .page }}
-{{- $taxonomy := .taxonomy }}
-
-{{- with $page.GetTerms $taxonomy }}
-  {{- $label := (index . 0).Parent.LinkTitle }}
-  <div>
-    <div>{{ $label }}:</div>
-    <ul>
-      {{- range . }}
-        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
-      {{- end }}
-    </ul>
-  </div>
-{{- end }}
diff --git a/layouts/_partials/timeline-item.html b/layouts/_partials/timeline-item.html
deleted file mode 100644
index fcb3f50..0000000
--- a/layouts/_partials/timeline-item.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{{ $page := .page }}
-{{ $index := .index }}
-{{ $position := "left" }}
-{{ if (eq (mod $index 2) 1) }}
-  {{ $position = "right" }}
-{{ end }}
-
-<article class="timeline-item {{ $position }}" data-type="{{ $page.Params.type }}">
-  <div class="timeline-dot"></div>
-  
-  <div class="article-card">
-    {{ if $page.Params.image }}
-      <div class="article-card-image">
-        <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy">
-      </div>
-    {{ end }}
-
-    <div class="article-card-body">
-      <div class="article-card-header">
-        <span class="article-type-badge type-{{ $page.Params.type }}">{{ $page.Params.type }}</span>
-        <span class="article-date">{{ $page.Date.Format "Jan 02, 2006" }}</span>
-      </div>
-      <h3 class="article-card-title">
-        <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
-      </h3>
-      {{ with $page.Params.description }}
-        <p class="article-card-excerpt">{{ . }}</p>
-      {{ end }}
-    </div>
-  </div>
-</article>
diff --git a/layouts/articles/single.html b/layouts/articles/single.html
new file mode 100644
index 0000000..e646639
--- /dev/null
+++ b/layouts/articles/single.html
@@ -0,0 +1,50 @@
+{{ define "main" }}
+{{ $articleType := .Params.type | default "life" }}
+{{ $template := printf "article-types/%s.html" $articleType }}
+<article class="mx-auto px-4 py-12">
+  <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid">
+    <!-- Article section -->
+    <div class="md:col-span-2">
+      <!-- Top article navigation -->
+      {{ partial "article-nav.html" (dict "page" . "variant" "top") }}
+
+      <!-- Breadcrumb -->
+      {{ partial "breadcrumb.html" . }}
+
+      <!-- Article header -->
+      {{ partial "article-header.html" . }}
+
+      <!-- Type-specific content -->
+      {{ partial $template . }}
+
+      <!-- Tags section -->
+      {{ if .Params.tags }}
+      <div class="border-t border-border pt-8">
+        <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3>
+        <div class="flex flex-wrap gap-2">
+          {{ $lang := .Lang }}
+          {{ range .Params.tags }}
+          {{ $tagUrl := printf "/tags/%s/" (. | urlize) }}
+          {{ if eq $lang "it" }}
+            {{ $tagUrl = printf "/it/tags/%s/" (. | urlize) }}
+          {{ end }}
+          <a
+            href="{{ $tagUrl }}"
+            class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm"
+          >
+            {{ . }}
+          </a>
+          {{ end }}
+        </div>
+      </div>
+      {{ end }}
+
+      <!-- Bottom article navigation -->
+      {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }}
+    </div>
+
+    <!-- Sidebar -->
+    {{ partial "sidebar.html" . }}
+  </div>
+</article>
+{{ end }}
diff --git a/layouts/baseof.html b/layouts/baseof.html
deleted file mode 100644
index cdbb1e3..0000000
--- a/layouts/baseof.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ site.Language.Locale }}" dir="{{ or site.Language.Direction `ltr` }}">
-<head>
-  {{ partial "head.html" . }}
-  <script>
-    (function() {
-      const theme = localStorage.getItem('theme') || 'dark';
-      if (theme === 'light') {
-        document.documentElement.classList.add('theme-light');
-      }
-    })();
-  </script>
-</head>
-<body>
-  <a href="#main-content" class="skip-link">Skip to content</a>
-  {{ if and (not .IsHome) (ne .Kind "term") (ne .Kind "taxonomy") (ne .Kind "section") }}
-    <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-  {{ end }}
-  {{ partial "header.html" . }}
-  <main id="main-content">{{ block "main" . }}{{ end }}</main>
-  <footer>{{ partial "footer.html" . }}</footer>
-</body>
-</html>
diff --git a/layouts/home.html b/layouts/home.html
deleted file mode 100644
index 54d8087..0000000
--- a/layouts/home.html
+++ /dev/null
@@ -1,48 +0,0 @@
-{{ define "canvas-mode" }}hero{{ end }}
-
-{{ define "main" }}
-  {{ partial "hero.html" . }}
-
-  <section id="articles" class="section-container reveal-group"
-           style="background: var(--bg2); padding: 6rem 2rem;">
-
-    <div class="section-header">
-      <p class="section-eyebrow">// latest posts</p>
-      <h2 class="section-title">Recent Articles</h2>
-    </div>
-
-    {{ $articlesSection := .Site.GetPage "/articles" }}
-    {{ if $articlesSection }}
-      {{ $articles := $articlesSection.Pages }}
-      {{ $articles = sort $articles "Date" "desc" }}
-      <div class="articles-grid">
-        {{ range first 6 $articles }}
-          {{ $type := .Params.type }}
-          {{ if not $type }}{{ $type = "article" }}{{ end }}
-
-          {{ $excerpt := .Params.excerpt }}
-          {{ if not $excerpt }}
-            {{ $excerpt = .Summary | plainify | truncate 150 }}
-          {{ end }}
-
-          {{ $data := dict
-              "title"       .Title
-              "type"        $type
-              "description" $excerpt
-              "date"        .Date
-              "url"         .RelPermalink
-              "image"       .Params.image
-              "featured"    .Params.featured
-              "context"     "home"
-          }}
-          {{ partial "post-card.html" $data }}
-        {{ end }}
-      </div>
-    {{ end }}
-
-    <div style="text-align: center; margin-top: 3rem;">
-      <a href="/articles/" class="btn btn-outline">View All Articles</a>
-    </div>
-
-  </section>
-{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..fd3cfa0
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,59 @@
+{{ 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">
+      <img
+        src="{{ .Params.image }}"
+        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>
+ -->
+    <!-- Bio (from page content) -->
+    <div class="text-xl text-text-dim text-center mb-8 leading-relaxed prose prose-invert max-w-none">
+      {{ .Content }}
+    </div>
+
+    <!-- Call-to-Action Buttons -->
+    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      {{ $lang := .Lang }}
+      {{ $articlesUrl := "/articles/" }}
+      {{ $contactUrl := "/is/here/" }}
+      {{ if eq $lang "it" }}
+        {{ $articlesUrl = "/it/articles/" }}
+        {{ $contactUrl = "/it/is/here/" }}
+      {{ end }}
+
+      <!-- Articles Button (Primary) -->
+      <a
+        href="{{ $articlesUrl }}"
+        class="btn btn-primary btn-lg"
+      >
+        {{ i18n "articles" }}
+      </a>
+
+      <!-- Contact Button (Outline) -->
+      <a
+        href="{{ $contactUrl }}"
+        class="btn btn-outline btn-lg"
+      >
+        {{ i18n "contact" }}
+      </a>
+    </div>
+
+    <!-- Tag Cloud Section -->
+    <div class="mt-16 pt-8 border-t border-border">
+      {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false) }}
+    </div>
+  </div>
+</section>
+{{ end }}
diff --git a/layouts/index.json b/layouts/index.json
new file mode 100644
index 0000000..e17e31e
--- /dev/null
+++ b/layouts/index.json
@@ -0,0 +1,13 @@
+{{- $articles := where .Site.RegularPages "Section" "articles" -}}
+{{- $articles = $articles.ByDate.Reverse -}}
+[
+  {{- range $index, $article := $articles -}}
+  {
+    "title": {{ $article.Title | jsonify }},
+    "url": {{ $article.Permalink | jsonify }},
+    "date": {{ $article.Date.Format "Jan 02, 2006" | jsonify }},
+    "summary": {{ substr ($article.Summary | plainify) 0 160 | jsonify }}
+  }
+  {{- if ne (add $index 1) (len $articles) }},{{ end }}
+  {{- end }}
+]
diff --git a/layouts/is/list.html b/layouts/is/list.html
new file mode 100644
index 0000000..128414f
--- /dev/null
+++ b/layouts/is/list.html
@@ -0,0 +1,22 @@
+{{ define "main" }}
+<div class="mx-auto px-4 py-12">
+  <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid">
+    <!-- Article section -->
+    <div class="md:col-span-2">
+      <!-- Breadcrumb -->
+      {{ partial "breadcrumb.html" . }}
+
+      <!-- Article header -->
+      {{ partial "article-header.html" . }}
+
+      <!-- Article content -->
+      <div class="prose prose-invert max-w-none mb-12">
+        {{ .Content }}
+      </div>
+    </div>
+
+    <!-- Sidebar -->
+    {{ partial "sidebar.html" . }}
+  </div>
+</div>
+{{ end }}
diff --git a/layouts/page.html b/layouts/page.html
deleted file mode 100644
index 44073b2..0000000
--- a/layouts/page.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ define "main" }}
-  {{ if eq .Params.type "photo" }}
-    {{ partial "photo-article.html" . }}
-  {{ else if eq .Section "is" }}
-    {{ partial "static-page.html" . }}
-  {{ else }}
-    {{ partial "article-single.html" . }}
-  {{ end }}
-{{ end }}
diff --git a/layouts/partials/article-card.html b/layouts/partials/article-card.html
new file mode 100644
index 0000000..d803464
--- /dev/null
+++ b/layouts/partials/article-card.html
@@ -0,0 +1,92 @@
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $excerpt := .Description | default .Summary }}
+
+{{ $imageURL := "" }}
+{{ $useDefaultThumbnail := false }}
+{{ if .Params.image }}
+  {{ $resource := .Resources.GetMatch .Params.image }}
+  {{ if $resource }}
+    {{ $imageURL = $resource.RelPermalink }}
+  {{ else }}
+    {{ $imageURL = .Params.image }}
+  {{ end }}
+{{ else }}
+  {{ $useDefaultThumbnail = true }}
+{{ end }}
+
+<article class="card group bg-bg">
+  <!-- Thumbnail -->
+  {{ if or $imageURL $useDefaultThumbnail }}
+  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
+    {{ if $useDefaultThumbnail }}
+    <picture>
+      <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
+      <img
+        src="/images/default_thumbnail_dark.png"
+        alt="{{ .Title }}"
+        class="card-image group-hover:scale-105 transition-transform duration-200"
+        loading="lazy"
+      />
+    </picture>
+    {{ else }}
+    <img
+      src="{{ $imageURL }}"
+      alt="{{ .Title }}"
+      class="card-image group-hover:scale-105 transition-transform duration-200"
+      loading="lazy"
+    />
+    {{ end }}
+    <!-- Type badge pill overlay -->
+    {{ if $typeData }}
+    <div
+      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
+      style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
+    >
+      {{ i18n $articleType }}
+    </div>
+    {{ end }}
+  </a>
+  {{ end }}
+
+  <!-- Content -->
+  <div class="card-body">
+    <!-- Pinned badge -->
+    {{ if .Params.pinned }}
+    <div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
+      📌 PINNED
+    </div>
+    {{ end }}
+
+    <!-- Title -->
+    <h3 class="text-xl font-semibold">
+      <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
+        {{ .Title }}
+      </a>
+    </h3>
+
+    <!-- Metadata -->
+    <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
+      <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+        {{ .PublishDate.Format "Jan 2, 2006" }}
+      </time>
+    </div>
+
+    <!-- Excerpt -->
+    {{ if $excerpt }}
+    <p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
+      {{ $excerpt | plainify }}
+    </p>
+    {{ end }}
+
+    <!-- CTA Button -->
+    <a
+      href="{{ .RelPermalink }}"
+      class="btn btn-sm mt-2"
+    >
+      {{ i18n "readMore" }}
+      <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+    </a>
+  </div>
+</article>
diff --git a/layouts/partials/article-header.html b/layouts/partials/article-header.html
new file mode 100644
index 0000000..94c78a5
--- /dev/null
+++ b/layouts/partials/article-header.html
@@ -0,0 +1,71 @@
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $hasType := .Params.type }}
+
+<div class="mb-8 pb-8 border-b border-border">
+  <!-- Title with accent corner -->
+  <div class="relative mb-6">
+    <!-- Vertical accent line (left side) -->
+    {{ if and $typeData $hasType }}
+    <div
+      class="absolute left-0 top-0 bottom-0 w-1 rounded-full"
+      style="background-color: var(--type-{{ $articleType }});"
+    ></div>
+    {{ end }}
+
+    <!-- Horizontal accent line (bottom, 50% width with fade) -->
+    {{ if and $typeData $hasType }}
+    <div
+      class="absolute left-0 bottom-0 h-1 rounded-full"
+      style="width: 50%; background: linear-gradient(to right, var(--type-{{ $articleType }}), var(--type-{{ $articleType }}) 0%, transparent 100%);"
+    ></div>
+    {{ end }}
+
+    <h1 class="text-4xl md:text-5xl font-bold text-accent pl-6 pt-2">
+      {{ .Title }}
+    </h1>
+  </div>
+
+  <!-- Metadata -->
+  <div class="flex flex-wrap items-center gap-4 text-sm text-text-dim">
+    <!-- Publish date -->
+    {{ if .PublishDate }}
+    <div class="flex items-center gap-1">
+      <i data-feather="calendar" class="w-4 h-4"></i>
+      <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+        {{ .PublishDate.Format "Jan 2, 2006" }}
+      </time>
+    </div>
+    {{ end }}
+
+    <!-- Update date if different -->
+    {{ if .Lastmod }}
+      {{ $lastmodDate := .Lastmod.Format "2006-01-02" }}
+      {{ $pubDate := .PublishDate.Format "2006-01-02" }}
+      {{ if ne $lastmodDate $pubDate }}
+      <div class="flex items-center gap-1">
+        <i data-feather="edit-2" class="w-4 h-4"></i>
+        <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}">
+          {{ .Lastmod.Format "Jan 2, 2006" }}
+        </time>
+      </div>
+      {{ end }}
+    {{ end }}
+
+    <!-- Reading time -->
+    {{ if .Site.Params.readingTime }}
+    <div class="flex items-center gap-1">
+      <i data-feather="clock" class="w-4 h-4"></i>
+      <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span>
+    </div>
+    {{ end }}
+
+    <!-- Type badge -->
+    {{ if and $typeData $hasType }}
+    <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);">
+      {{ i18n $articleType }}
+    </span>
+    {{ end }}
+  </div>
+</div>
diff --git a/layouts/partials/article-list-item.html b/layouts/partials/article-list-item.html
new file mode 100644
index 0000000..44cbf32
--- /dev/null
+++ b/layouts/partials/article-list-item.html
@@ -0,0 +1,95 @@
+{{/* Handle both calling conventions: dict with .Page/.side or direct page */}}
+{{ $page := . }}
+{{ $side := "left" }}
+
+{{ if reflect.IsMap . }}
+  {{ $page = .Page }}
+  {{ $side = .side | default "left" }}
+{{ end }}
+
+{{ $articleType := $page.Params.type | default "life" }}
+{{ $typeConfig := $page.Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $excerpt := $page.Description | default $page.Summary }}
+
+{{ $imageURL := "" }}
+{{ $useDefaultThumbnail := false }}
+{{ if $page.Params.image }}
+  {{ $resource := $page.Resources.GetMatch $page.Params.image }}
+  {{ if $resource }}
+    {{ $imageURL = $resource.RelPermalink }}
+  {{ else }}
+    {{ $imageURL = $page.Params.image }}
+  {{ end }}
+{{ else }}
+  {{ $useDefaultThumbnail = true }}
+{{ end }}
+
+<li class="timeline-item timeline-item--{{ $side }}" style="--type-color: var(--type-{{ $articleType }});">
+  {{/* Decorative connector line */}}
+  <div class="timeline-connector" aria-hidden="true"
+       style="background-color: var(--type-{{ $articleType }});"></div>
+
+  {{/* Node on spine */}}
+  <div class="timeline-node" aria-hidden="true"
+       style="background-color: var(--type-{{ $articleType }}); box-shadow: 0 0 10px color-mix(in srgb, var(--type-{{ $articleType }}) 50%, transparent);"></div>
+
+  <article class="timeline-card group"
+           style="border-color: color-mix(in srgb, var(--type-{{ $articleType }}) 25%, transparent);
+                  box-shadow: 0 0 18px color-mix(in srgb, var(--type-{{ $articleType }}) 10%, transparent);">
+
+    {{/* Thumbnail */}}
+    <a href="{{ $page.RelPermalink }}" class="timeline-thumb" tabindex="-1" aria-hidden="true">
+      {{ if $useDefaultThumbnail }}
+      <picture>
+        <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
+        <img src="/images/default_thumbnail_dark.png"
+             alt=""
+             loading="lazy" />
+      </picture>
+      {{ else }}
+      <img src="{{ $imageURL }}"
+           alt=""
+           loading="lazy" />
+      {{ end }}
+    </a>
+
+    {{/* Text body */}}
+    <div class="timeline-body">
+
+      {{/* Pinned badge */}}
+      {{ if $page.Params.pinned }}
+      <div class="timeline-pinned" style="color: {{ $page.Site.Params.secondaryAccent }};">
+        📌 {{ i18n "pinned" | default "PINNED" }}
+      </div>
+      {{ end }}
+
+      {{/* Type + date meta row */}}
+      <div class="timeline-meta" style="color: var(--type-{{ $articleType }});">
+        {{ i18n $articleType | upper }}
+        <span class="timeline-meta-sep" aria-hidden="true">·</span>
+        <time class="timeline-date"
+              datetime="{{ $page.PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+          {{ $page.PublishDate.Format "Jan 2, 2006" }}
+        </time>
+      </div>
+
+      {{/* Title */}}
+      <h3 class="timeline-title">
+        <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+      </h3>
+
+      {{/* Excerpt */}}
+      {{ if $excerpt }}
+      <p class="timeline-excerpt">{{ $excerpt | plainify }}</p>
+      {{ end }}
+
+      {{/* CTA */}}
+      <a href="{{ $page.RelPermalink }}" class="btn btn-sm mt-auto">
+        {{ i18n "readMore" }}
+        <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+      </a>
+
+    </div>
+  </article>
+</li>
diff --git a/layouts/partials/article-nav.html b/layouts/partials/article-nav.html
new file mode 100644
index 0000000..8a118b3
--- /dev/null
+++ b/layouts/partials/article-nav.html
@@ -0,0 +1,46 @@
+{{ $page    := .page }}
+{{ $variant := .variant | default "bottom" }}
+{{ $prev := $page.PrevInSection }}
+{{ $next := $page.NextInSection }}
+
+{{/* Shell prompt command varies by position */}}
+{{ $cmd := "ls ../" }}
+{{ if eq $variant "top" }}
+  {{ $cmd = "cd" }}
+{{ end }}
+
+<nav class="article-nav {{ if eq $variant "bottom" }}mt-8{{ else }}mb-8{{ end }}"
+     aria-label="Article navigation">
+  <p class="article-nav-prompt" aria-hidden="true">
+    [visitor@danix.xyz articles]$ {{ $cmd }}
+  </p>
+  <div class="article-nav-links">
+    {{/* ---- Previous (left side) ---- */}}
+    {{ if $prev }}
+      <a href="{{ $prev.Permalink }}"
+         class="article-nav-link truncate md:max-w-[45%] text-left"
+         rel="prev"
+         title="{{ $prev.Title }}">
+        ◄ {{ $prev.Title }}
+      </a>
+    {{ else }}
+      <span class="article-nav-placeholder text-left" aria-label="Beginning of articles">
+        ◄ (beginning)
+      </span>
+    {{ end }}
+
+    {{/* ---- Next (right side) ---- */}}
+    {{ if $next }}
+      <a href="{{ $next.Permalink }}"
+         class="article-nav-link truncate md:max-w-[45%] text-right"
+         rel="next"
+         title="{{ $next.Title }}">
+        {{ $next.Title }} ►
+      </a>
+    {{ else }}
+      <span class="article-nav-placeholder text-right" aria-label="End of articles">
+        (end) ►
+      </span>
+    {{ end }}
+  </div>
+</nav>
diff --git a/layouts/partials/article-types/life.html b/layouts/partials/article-types/life.html
new file mode 100644
index 0000000..01cd8b8
--- /dev/null
+++ b/layouts/partials/article-types/life.html
@@ -0,0 +1,3 @@
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
diff --git a/layouts/partials/article-types/link.html b/layouts/partials/article-types/link.html
new file mode 100644
index 0000000..bbf7906
--- /dev/null
+++ b/layouts/partials/article-types/link.html
@@ -0,0 +1,17 @@
+<div class="mb-8 p-6 bg-surface/30 border border-accent/30 rounded-lg">
+  <a
+    href="{{ .Params.external_url }}"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 transition-opacity"
+  >
+    {{ .Params.link_title | default (i18n "readMore") }}
+    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+    </svg>
+  </a>
+</div>
+
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
diff --git a/layouts/partials/article-types/photo.html b/layouts/partials/article-types/photo.html
new file mode 100644
index 0000000..743e02a
--- /dev/null
+++ b/layouts/partials/article-types/photo.html
@@ -0,0 +1,19 @@
+{{ if .Params.featured_image }}
+<figure class="mb-8">
+  <img
+    src="{{ .Params.featured_image }}"
+    alt="{{ .Title }}"
+    loading="lazy"
+    class="w-full h-auto rounded-lg border border-border/30"
+  />
+  {{ if .Params.featured_image_caption }}
+  <figcaption class="bg-surface/30 p-4 text-sm text-text-dim rounded-b-lg">
+    {{ .Params.featured_image_caption }}
+  </figcaption>
+  {{ end }}
+</figure>
+{{ end }}
+
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
diff --git a/layouts/partials/article-types/quote.html b/layouts/partials/article-types/quote.html
new file mode 100644
index 0000000..f27d189
--- /dev/null
+++ b/layouts/partials/article-types/quote.html
@@ -0,0 +1,15 @@
+<blockquote class="mb-8 pl-6 border-l-4 border-[--type-quote] italic text-2xl text-text">
+  "{{ .Params.quote_text }}"
+</blockquote>
+
+{{ if .Params.quote_author }}
+<div class="text-right text-text-dim mb-12">
+  — {{ .Params.quote_author }}
+</div>
+{{ end }}
+
+{{ if .Content }}
+<div class="prose prose-invert max-w-none">
+  {{ .Content }}
+</div>
+{{ end }}
diff --git a/layouts/partials/article-types/tech.html b/layouts/partials/article-types/tech.html
new file mode 100644
index 0000000..01cd8b8
--- /dev/null
+++ b/layouts/partials/article-types/tech.html
@@ -0,0 +1,3 @@
+<div class="prose prose-invert max-w-none mb-12">
+  {{ .Content }}
+</div>
diff --git a/layouts/partials/back-to-top.html b/layouts/partials/back-to-top.html
new file mode 100644
index 0000000..75095e3
--- /dev/null
+++ b/layouts/partials/back-to-top.html
@@ -0,0 +1,23 @@
+<div
+  x-data="{ visible: false }"
+  @scroll.window="visible = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) >= 0.33"
+>
+  <button
+    x-show="visible"
+    x-cloak
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0 translate-y-4"
+    x-transition:enter-end="opacity-100 translate-y-0"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="opacity-100 translate-y-0"
+    x-transition:leave-end="opacity-0 translate-y-4"
+    class="back-to-top"
+    aria-label="{{ i18n "back_to_top" | default "Back to top" }}"
+    type="button"
+    @click="window.scrollTo({ top: 0, behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+      <polyline points="18 15 12 9 6 15"></polyline>
+    </svg>
+  </button>
+</div>
diff --git a/layouts/partials/breadcrumb-jsonld.html b/layouts/partials/breadcrumb-jsonld.html
new file mode 100644
index 0000000..95b5e69
--- /dev/null
+++ b/layouts/partials/breadcrumb-jsonld.html
@@ -0,0 +1,36 @@
+{{- $homeURL := absURL "/" -}}
+{{- $homeName := i18n "home" -}}
+{{- if eq .Lang "it" -}}
+  {{- $homeURL = absURL "/it/" -}}
+{{- end -}}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "name": "{{ $homeName }}",
+      "item": "{{ $homeURL }}"
+    }
+    {{- $pos := 1 -}}
+    {{- range .Ancestors.Reverse -}}
+      {{- if ne .Kind "home" -}}
+        {{- $pos = add $pos 1 -}}
+    ,{
+      "@type": "ListItem",
+      "position": {{ $pos }},
+      "name": "{{ .Title }}",
+      "item": "{{ .Permalink }}"
+    }
+      {{- end -}}
+    {{- end -}}
+    ,{
+      "@type": "ListItem",
+      "position": {{ add $pos 1 }},
+      "name": "{{ .Title }}"
+    }
+  ]
+}
+</script>
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
new file mode 100644
index 0000000..c15dfeb
--- /dev/null
+++ b/layouts/partials/breadcrumb.html
@@ -0,0 +1,16 @@
+{{ $homeLink := "/" }}
+{{ if eq .Lang "it" }}
+  {{ $homeLink = "/it/" }}
+{{ end }}
+
+<nav class="breadcrumb mb-6" aria-label="Breadcrumb">
+  <a href="{{ $homeLink }}">{{ i18n "home" }}</a>
+  {{ range .Ancestors.Reverse }}
+    {{ if ne .Kind "home" }}
+      <span class="breadcrumb-separator">/</span>
+      <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+    {{ end }}
+  {{ end }}
+  <span class="breadcrumb-separator">/</span>
+  <span>{{ .Title }}</span>
+</nav>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..1e50d6f
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,89 @@
+{{- $quotes := .Site.Data.quotes.quotes -}}
+
+<footer class="mt-16 frosted-bar border-t py-12 relative z-20">
+  <div class="container mx-auto px-4">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+
+      <!-- Column 1: Fortune Cookie -->
+      <div>
+        <p class="font-mono text-xs text-text-dim mb-2">$ fortune</p>
+        <div id="fortune-quote" aria-live="polite" data-quotes='{{ $quotes | jsonify }}'>
+          <blockquote>
+            <p class="fortune-text font-mono text-sm text-text italic leading-relaxed">
+              "{{ (index $quotes 0).text }}"
+            </p>
+            <cite class="fortune-author font-mono text-xs text-text-dim not-italic mt-2 block text-right">
+              — {{ (index $quotes 0).author }}
+            </cite>
+          </blockquote>
+        </div>
+      </div>
+      <hr class="md:hidden border-border my-6" />
+
+      <!-- Column 2: Stack & Feature Badges -->
+      <div>
+        <p class="text-text-dim font-mono text-xs mb-1">{{ i18n "footer_built_with" }}</p>
+        <div class="flex flex-wrap gap-1.5 mb-3">
+          <span class="badge-footer-accent">Hugo</span>
+          <span class="badge-footer-accent">Tailwind CSS</span>
+          <span class="badge-footer-accent">Alpine.js</span>
+          <span class="badge-footer-accent">HTML5</span>
+          <span class="badge-footer-accent">CSS3</span>
+          <span class="badge-footer-accent">JavaScript</span>
+          <span class="badge-footer-accent">Claude Code</span>
+        </div>
+
+        <p class="text-text-dim font-mono text-xs mb-1">{{ i18n "footer_features" }}</p>
+        <div class="flex flex-wrap gap-1.5">
+          <a href="{{ .Site.LanguagePrefix }}/is/a11y-compliant/" class="badge-footer-accent2 hover:opacity-80 transition-opacity">WCAG 2.1 AA</a>
+          <span class="badge-footer-accent2">Open Source</span>
+          <span class="badge-footer-accent2">Privacy Friendly</span>
+          <span class="badge-footer-accent2">Keyboard Accessible</span>
+          <span class="badge-footer-accent2">Screen Reader Compatible</span>
+        </div>
+      </div>
+      <hr class="md:hidden border-border my-6" />
+
+      <!-- Column 3: About (Terminal Readout) -->
+      <div>
+        <dl class="space-y-1">
+          <div class="flex gap-2">
+            <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_name" }}:</dt>
+            <dd class="text-text font-mono text-xs">{{ .Site.Params.author }}</dd>
+          </div>
+          <div class="flex gap-2">
+            <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_role" }}:</dt>
+            <dd class="text-text font-mono text-xs">{{ i18n "footer_about_role_value" }}</dd>
+          </div>
+          <div class="flex gap-2">
+            <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_cert" }}:</dt>
+            <dd class="text-accent2 font-mono text-xs font-semibold">eJPT</dd>
+          </div>
+          <div class="flex gap-2">
+            <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_os" }}:</dt>
+            <dd class="text-text font-mono text-xs">{{ i18n "footer_about_os_value" }} <span class="text-text-dim">({{ i18n "footer_about_os_year" }})</span></dd>
+          </div>
+          <div class="flex gap-2">
+            <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_focus" }}:</dt>
+            <dd class="text-text font-mono text-xs">{{ i18n "footer_about_focus_value" }}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <!-- Copyright Bar -->
+    <div class="pt-8 border-t border-border text-center text-xs text-text-dim space-y-1">
+      <p>
+        {{ i18n "footer_made_with" }} <span aria-hidden="true">❤️</span><span class="sr-only">{{ i18n "footer_love" }}</span>,
+        {{ i18n "footer_lack_of" }} <span aria-hidden="true">🛏️</span><span class="sr-only">{{ i18n "footer_sleep" }}</span>,
+        {{ i18n "footer_lots_of" }} <span aria-hidden="true">☕</span><span class="sr-only">{{ i18n "footer_coffee" }}</span>
+        {{ i18n "footer_by" }} <a href="{{ .Site.LanguagePrefix }}/is/" class="text-accent hover:text-accent2 transition-colors py-2 px-1">danix</a>
+      </p>
+      <p>&copy; {{ now.Year }} {{ .Site.Params.author }}. {{ i18n "allRightsReserved" }}</p>
+    </div>
+  </div>
+
+  <!-- Fortune.js: Pick a random quote on each page load -->
+  {{- $fortuneJS := resources.Get "js/fortune.js" | minify -}}
+  <script src="{{ $fortuneJS.RelPermalink }}"></script>
+</footer>
diff --git a/layouts/partials/form-components.html b/layouts/partials/form-components.html
new file mode 100644
index 0000000..6c6416b
--- /dev/null
+++ b/layouts/partials/form-components.html
@@ -0,0 +1,219 @@
+{{ define "form-components" }}
+
+<!-- ============================================
+     FORM INPUT EXAMPLES
+     ============================================ -->
+
+<section class="my-12 space-y-8">
+  <h2>Form Components</h2>
+
+  <!-- Basic Form Group -->
+  <div class="form-group">
+    <label for="input-text">Text Input</label>
+    <input type="text" id="input-text" class="form-input" placeholder="Enter text...">
+  </div>
+
+  <!-- Form Group with Error -->
+  <div class="form-group error">
+    <label for="input-email">Email (with error)</label>
+    <input type="email" id="input-email" class="form-input error" value="invalid-email">
+    <div class="form-error">{{ i18n "form_invalid_email" }}</div>
+  </div>
+
+  <!-- Form Group with Help Text -->
+  <div class="form-group">
+    <label for="input-password" class="">Password</label>
+    <input type="password" id="input-password" class="form-input" placeholder="••••••">
+    <div class="form-group-help">{{ i18n "form_password_help" | default "Must be at least 8 characters" }}</div>
+  </div>
+
+  <!-- Disabled Input -->
+  <div class="form-group">
+    <label for="input-disabled">Disabled Input</label>
+    <input type="text" id="input-disabled" class="form-input" value="Cannot edit" disabled>
+  </div>
+
+  <!-- ============================================
+       TEXTAREA EXAMPLES
+       ============================================ -->
+
+  <div class="form-group">
+    <label for="textarea-message">Message</label>
+    <textarea id="textarea-message" class="form-textarea" placeholder="Enter your message..."></textarea>
+  </div>
+
+  <!-- ============================================
+       SELECT EXAMPLES
+       ============================================ -->
+
+  <div class="form-group">
+    <label for="select-option">Select an option</label>
+    <select id="select-option" class="form-select">
+      <option>Choose...</option>
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </select>
+  </div>
+
+  <!-- ============================================
+       CHECKBOX EXAMPLES
+       ============================================ -->
+
+  <div class="form-group">
+    <label for="agree-terms" class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" id="agree-terms" class="form-checkbox">
+      <span>{{ i18n "form_agree_terms" | default "I agree to the terms" }}</span>
+    </label>
+  </div>
+
+  <!-- Multiple Checkboxes -->
+  <div class="form-group space-y-2">
+    <p class="font-semibold">{{ i18n "form_select_interests" | default "Select your interests" }}</p>
+    <label for="interest-tech" class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" id="interest-tech" class="form-checkbox" name="interests">
+      <span>{{ i18n "form_interest_tech" | default "Technology" }}</span>
+    </label>
+    <label for="interest-design" class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" id="interest-design" class="form-checkbox" name="interests">
+      <span>{{ i18n "form_interest_design" | default "Design" }}</span>
+    </label>
+  </div>
+
+  <!-- ============================================
+       RADIO BUTTON EXAMPLES
+       ============================================ -->
+
+  <div class="form-group space-y-2">
+    <p class="font-semibold">{{ i18n "form_select_preference" | default "Select a preference" }}</p>
+    <label for="preference-option-a" class="flex items-center gap-3 cursor-pointer">
+      <input type="radio" id="preference-option-a" name="preference" class="form-radio">
+      <span>{{ i18n "form_option_a" | default "Option A" }}</span>
+    </label>
+    <label for="preference-option-b" class="flex items-center gap-3 cursor-pointer">
+      <input type="radio" id="preference-option-b" name="preference" class="form-radio">
+      <span>{{ i18n "form_option_b" | default "Option B" }}</span>
+    </label>
+  </div>
+
+  <!-- ============================================
+       FORM ROWS (MULTI-COLUMN)
+       ============================================ -->
+
+  <div class="form-row">
+    <div class="form-group">
+      <label for="first-name">{{ i18n "form_first_name" | default "First Name" }}</label>
+      <input type="text" id="first-name" class="form-input" placeholder="John">
+    </div>
+    <div class="form-group">
+      <label for="last-name">{{ i18n "form_last_name" | default "Last Name" }}</label>
+      <input type="text" id="last-name" class="form-input" placeholder="Doe">
+    </div>
+  </div>
+
+  <!-- ============================================
+       INLINE FORMS
+       ============================================ -->
+
+  <div class="form-inline">
+    <div class="form-group">
+      <label for="search-input">{{ i18n "form_search" | default "Search" }}</label>
+      <input type="text" id="search-input" class="form-input" placeholder="Type to search...">
+    </div>
+    <button class="btn btn-primary">{{ i18n "form_search_btn" | default "Search" }}</button>
+  </div>
+
+  <!-- ============================================
+       MODALS (DEMO BUTTONS)
+       ============================================ -->
+
+  <div class="space-y-3 mt-8">
+    <h3>Modal Examples</h3>
+    <button class="btn btn-primary" @click="showAlertModal = true">{{ i18n "form_open_alert" | default "Open Alert Modal" }}</button>
+    <button class="btn btn-secondary" @click="showConfirmModal = true">{{ i18n "form_open_confirm" | default "Open Confirm Modal" }}</button>
+    <button class="btn btn-outline" @click="showContentModal = true">{{ i18n "form_open_content" | default "Open Content Modal" }}</button>
+  </div>
+
+  <!-- ============================================
+       NOTIFICATIONS (DEMO BUTTONS)
+       ============================================ -->
+
+  <div class="space-y-3 mt-8">
+    <h3>Notifications</h3>
+    <button class="btn btn-primary btn-sm" @click="showToast('success')">Success Toast</button>
+    <button class="btn btn-secondary btn-sm" @click="showToast('error')">Error Toast</button>
+    <button class="btn btn-sm" style="background-color: #3b82f6; color: white;" @click="showToast('info')">Info Toast</button>
+    <button class="btn btn-sm" style="background-color: #f59e0b; color: white;" @click="showToast('warning')">Warning Toast</button>
+  </div>
+
+</section>
+
+<!-- ============================================
+     ALERT MODAL
+     ============================================ -->
+
+<div class="modal" :class="{ active: showAlertModal }" x-show="showAlertModal">
+  <div class="modal-backdrop" @click="showAlertModal = false" aria-hidden="true"></div>
+  <div class="modal-content modal-sm" role="dialog" aria-labelledby="alert-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
+    <div class="modal-header">
+      <h3 class="modal-title" id="alert-modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
+      <div class="modal-close" @click="showAlertModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
+    </div>
+    <div class="modal-body">
+      <p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-primary" @click="showAlertModal = false">{{ i18n "form_ok" | default "OK" }}</button>
+    </div>
+  </div>
+</div>
+
+<!-- ============================================
+     CONFIRM MODAL
+     ============================================ -->
+
+<div class="modal" :class="{ active: showConfirmModal }" x-show="showConfirmModal">
+  <div class="modal-backdrop" @click="showConfirmModal = false" aria-hidden="true"></div>
+  <div class="modal-content modal-sm" role="dialog" aria-labelledby="confirm-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
+    <div class="modal-header">
+      <h3 class="modal-title" id="confirm-modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
+      <div class="modal-close" @click="showConfirmModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
+    </div>
+    <div class="modal-body">
+      <p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-outline" @click="showConfirmModal = false">{{ i18n "form_cancel" | default "Cancel" }}</button>
+      <button class="btn btn-primary" @click="handleConfirm()">{{ i18n "form_confirm" | default "Confirm" }}</button>
+    </div>
+  </div>
+</div>
+
+<!-- ============================================
+     CONTENT MODAL
+     ============================================ -->
+
+<div class="modal" :class="{ active: showContentModal }" x-show="showContentModal">
+  <div class="modal-backdrop" @click="showContentModal = false" aria-hidden="true"></div>
+  <div class="modal-content modal-md" role="dialog" aria-labelledby="content-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
+    <div class="modal-header">
+      <h3 class="modal-title" id="content-modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
+      <div class="modal-close" @click="showContentModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
+    </div>
+    <div class="modal-body">
+      <p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p>
+      <div class="mt-4">
+        <div class="form-group">
+          <label for="modal-input">Input in Modal</label>
+          <input type="text" id="modal-input" class="form-input" placeholder="Type here...">
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-outline" @click="showContentModal = false">{{ i18n "form_close" | default "Close" }}</button>
+      <button class="btn btn-primary">{{ i18n "form_save" | default "Save" }}</button>
+    </div>
+  </div>
+</div>
+
+{{ end }}
diff --git a/layouts/partials/hamburger-menu.html b/layouts/partials/hamburger-menu.html
new file mode 100644
index 0000000..5d8d8ed
--- /dev/null
+++ b/layouts/partials/hamburger-menu.html
@@ -0,0 +1,125 @@
+<!-- Mobile menu overlay (Alpine.js controlled) -->
+<div
+  x-cloak
+  x-data="{ menuOpen: false }"
+  @toggle-menu.window="menuOpen = !menuOpen"
+  @keydown.escape.window="menuOpen = false"
+  :class="{ 'opacity-0 invisible': !menuOpen, 'opacity-100 visible': menuOpen }"
+  class="fixed inset-0 bg-black/50 backdrop-blur transition-all duration-300 z-40"
+  :aria-hidden="!menuOpen"
+  @click="if ($event.target === $el) menuOpen = false"
+>
+  <div
+    class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform transition-transform duration-300 z-50"
+    :class="{ 'translate-x-full': !menuOpen, 'translate-x-0': menuOpen }"
+  >
+    <!-- Close button -->
+    <div class="flex items-center justify-between p-6 border-b border-border">
+      <span class="font-bold text-lg text-accent font-oxanium">Menu</span>
+      <button
+        @click="menuOpen = false"
+        aria-label="{{ i18n "closeMenu" }}"
+        class="p-2 hover:bg-surface rounded transition-colors"
+      >
+        <i data-feather="x" class="w-5 h-5"></i>
+      </button>
+    </div>
+
+    <!-- Menu items -->
+    <nav class="p-6" role="navigation" aria-label="{{ i18n "mainMenu" }}">
+      {{ $currentPath := strings.TrimSuffix "/" .RelPermalink }}
+      {{ range .Site.Menus.main }}
+        {{ $menuPath := strings.TrimSuffix "/" .URL }}
+        {{ $isActive := eq $menuPath $currentPath }}
+        <a
+          href="{{ .URL }}"
+          @click="menuOpen = false"
+          class="block py-4 text-lg font-medium transition-colors border-b border-border/30 {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
+          {{ if $isActive }}aria-current="page"{{ end }}
+        >
+          {{ i18n .Name }}
+        </a>
+      {{ end }}
+    </nav>
+
+    <!-- Mobile search bar -->
+    <div class="p-6 border-b border-border" x-data="mobileSearch()">
+      <label for="search-input-mobile" class="sr-only">
+        {{ i18n "searchPlaceholder" }}
+      </label>
+      <input
+        id="search-input-mobile"
+        type="text"
+        :value="searchQuery"
+        @input="filterArticles($el.value); ensureIndexLoaded()"
+        placeholder="{{ i18n "searchPlaceholder" }}"
+        class="w-full px-4 py-2 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text text-sm"
+        aria-describedby="mobile-search-results"
+      />
+
+      <!-- Mobile search results -->
+      <div id="mobile-search-results" class="mt-3 space-y-2" x-show="filteredArticles.length > 0" role="region" aria-live="polite">
+        <template x-for="article in filteredArticles" :key="article.url">
+          <div class="p-3 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded text-sm">
+            <a :href="article.url" @click="menuOpen = false" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-1 py-1">
+              <h4 class="font-bold text-accent" x-text="article.title"></h4>
+              <p class="text-xs text-text-dim mt-0.5" x-text="article.date"></p>
+            </a>
+          </div>
+        </template>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        x-show="searchQuery && filteredArticles.length === 0"
+        class="mt-3 text-sm text-text-dim"
+        role="status"
+      >
+        {{ i18n "noSearchResults" }}
+      </div>
+    </div>
+
+    <!-- Language switcher -->
+    <div class="p-6">
+      <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
+      <div class="flex gap-2">
+        {{ $currentLang := .Page.Language }}
+        {{ $currentPath := .RelPermalink }}
+        {{ range .Site.Languages }}
+          {{ $langCode := .Lang }}
+          {{ $langName := .LanguageName }}
+          {{ $current := eq $langCode $currentLang }}
+          <!-- Build the translated URL by replacing language prefix -->
+          {{ $url := $currentPath }}
+          {{ if eq $langCode "en" }}
+            {{ if hasPrefix $currentPath "/it/" }}
+              {{ $url = strings.TrimPrefix "/it" $currentPath }}
+            {{ end }}
+          {{ else }}
+            {{ if not (hasPrefix $currentPath "/it/") }}
+              {{ $url = printf "/it%s" $currentPath }}
+            {{ end }}
+          {{ end }}
+          <a
+            href="{{ $url }}"
+            @click="menuOpen = false"
+            class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
+          >
+            {{ $langName }}
+          </a>
+        {{ end }}
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  // Close menu before page navigation to prevent flicker
+  window.addEventListener('beforeunload', () => {
+    const overlay = document.querySelector('[x-data*="menuOpen"]');
+    if (overlay && overlay.__x) {
+      overlay.__x.$data.menuOpen = false;
+    }
+  });
+</script>
diff --git a/layouts/partials/head-meta.html b/layouts/partials/head-meta.html
new file mode 100644
index 0000000..34a60e2
--- /dev/null
+++ b/layouts/partials/head-meta.html
@@ -0,0 +1,57 @@
+{{/* description: per-page excerpt wins over site-wide description */}}
+{{ $description := .Site.Language.Params.siteDescription }}
+{{ with .Params.excerpt }}{{ $description = . }}{{ end }}
+
+{{/* og:type: "article" only for single content pages that have a date */}}
+{{ $ogType := "website" }}
+{{ if and (eq .Kind "page") .Date }}{{ $ogType = "article" }}{{ end }}
+
+{{/* og:image: page image wins; fall back to lamp for homepage, dark thumbnail for articles */}}
+{{ $defaultImage := "images/default_thumbnail_dark.png" }}
+{{ if .IsHome }}{{ $defaultImage = "images/lampD.png" }}{{ end }}
+{{ $ogImage := printf "%s%s" .Site.BaseURL $defaultImage }}
+{{ with .Params.image }}{{ $ogImage = printf "%s%s" $.Site.BaseURL (strings.TrimLeft "/" .) }}{{ end }}
+
+{{/* author: page-level param wins; fall back to site param */}}
+{{ $author := .Site.Params.author }}
+{{ with .Params.author }}{{ $author = . }}{{ end }}
+
+<meta name="description" content="{{ $description }}">
+
+<meta property="og:title" content="{{ .Title }}">
+<meta property="og:description" content="{{ $description }}">
+<meta property="og:type" content="{{ $ogType }}">
+<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:site_name" content="{{ .Site.Title }}">
+<meta property="og:locale" content="{{ .Site.Language.Params.locale }}">
+<meta property="og:image" content="{{ $ogImage }}">
+
+{{ if eq $ogType "article" }}
+<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+<meta property="article:author" content="{{ $author }}">
+{{ end }}
+
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ .Title }}">
+<meta name="twitter:description" content="{{ $description }}">
+<meta name="twitter:image" content="{{ $ogImage }}">
+{{ with .Site.Params.twitterHandle }}
+<meta name="twitter:site" content="@{{ . }}">
+{{ end }}
+
+{{/* SEO: Self-referencing canonical */}}
+<link rel="canonical" href="{{ .Permalink }}">
+
+{{/* SEO: hreflang alternates for all language variants */}}
+{{ range .AllTranslations }}
+<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
+{{ end }}
+{{/* x-default: EN version (served at root /) */}}
+{{ range .AllTranslations }}
+  {{ if eq .Language.Lang "en" }}
+<link rel="alternate" hreflang="x-default" href="{{ .Permalink }}">
+  {{ end }}
+{{ end }}
+
+{{/* Structured data: BreadcrumbList JSON-LD (single pages and named sections) */}}
+{{ if or (eq .Kind "page") (eq .Kind "section") }}{{ partial "breadcrumb-jsonld.html" . }}{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..914e645
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,94 @@
+<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b">
+  <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
+    <!-- Logo and Site Name -->
+    {{ $homeLink := "/" }}
+    {{ if eq .Lang "it" }}
+      {{ $homeLink = "/it/" }}
+    {{ end }}
+    <a href="{{ $homeLink }}" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
+      <img src="/images/lampD.png" alt="Logo" style="width: 40px; height: 40px; max-width: none;" class="flex-shrink-0">
+      <span class="hidden md:inline font-bold text-lg text-accent font-oxanium">danix.xyz</span>
+    </a>
+
+    <!-- Desktop menu (hidden on mobile) -->
+    <div class="hidden md:flex items-center gap-8">
+      {{ $currentPath := strings.TrimSuffix "/" .RelPermalink }}
+      {{ range .Site.Menus.main }}
+        {{ $menuPath := strings.TrimSuffix "/" .URL }}
+        {{ $isActive := eq $menuPath $currentPath }}
+        <a
+          href="{{ .URL }}"
+          class="text-sm transition-colors {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
+          {{ if $isActive }}aria-current="page"{{ end }}
+        >
+          {{ i18n .Name }}
+        </a>
+      {{ end }}
+    </div>
+
+    <!-- Right side controls: Search, Language, Theme, Menu -->
+    <div class="flex items-center gap-4 md:gap-6">
+      <!-- Search button (desktop only) -->
+      <button
+        x-data
+        @click="$dispatch('open-search')"
+        aria-label="{{ i18n "searchArticles" }}"
+        class="hidden md:flex p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
+      >
+        <i data-feather="search" class="w-5 h-5" aria-hidden="true"></i>
+      </button>
+
+      <!-- Language switcher (desktop) -->
+      <div class="hidden md:flex gap-2">
+        {{ $currentLang := .Page.Language }}
+        {{ $currentPath := .RelPermalink }}
+        {{ range .Site.Languages }}
+          {{ $langCode := .Lang }}
+          {{ $langName := .LanguageName }}
+          {{ $current := eq $langCode $currentLang }}
+          <!-- Build the translated URL by replacing language prefix -->
+          {{ $url := $currentPath }}
+          {{ if eq $langCode "en" }}
+            {{ if hasPrefix $currentPath "/it/" }}
+              {{ $url = strings.TrimPrefix "/it" $currentPath }}
+            {{ end }}
+          {{ else }}
+            {{ if not (hasPrefix $currentPath "/it/") }}
+              {{ $url = printf "/it%s" $currentPath }}
+            {{ end }}
+          {{ end }}
+          <a
+            href="{{ $url }}"
+            class="px-2 py-1 text-sm rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}hover:bg-surface{{ end }}"
+          >
+            {{ $langName }}
+          </a>
+        {{ end }}
+      </div>
+
+      <!-- Theme toggle button -->
+      <button
+        id="theme-toggle"
+        aria-label="{{ i18n "toggleTheme" }}"
+        class="p-2 rounded hover:bg-surface transition-colors"
+      >
+        <i id="theme-icon-sun" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i>
+        <i id="theme-icon-moon" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i>
+      </button>
+
+      <!-- Hamburger menu button (mobile only) -->
+      <button
+        x-data
+        @click="$dispatch('toggle-menu')"
+        aria-label="{{ i18n "toggleMenu" }}"
+        aria-controls="hamburger-menu"
+        class="md:hidden p-2 rounded hover:bg-surface transition-colors"
+      >
+        <i data-feather="menu" class="w-5 h-5"></i>
+      </button>
+    </div>
+  </nav>
+
+  <!-- Mobile hamburger overlay menu -->
+  {{ partial "hamburger-menu.html" . }}
+</header>
diff --git a/layouts/partials/search-modal.html b/layouts/partials/search-modal.html
new file mode 100644
index 0000000..6b96b3a
--- /dev/null
+++ b/layouts/partials/search-modal.html
@@ -0,0 +1,87 @@
+<!-- Desktop Search Modal (hidden on mobile, shown via Alpine) -->
+<div
+  x-cloak
+  x-data="searchOverlay()"
+  @keydown.escape.window="handleEscape($event)"
+  @open-search.window="open()"
+  class="fixed inset-0 z-50"
+  :class="{ 'flex items-center justify-center': isOpen, 'hidden': !isOpen }"
+  x-show="isOpen"
+>
+  <!-- Overlay backdrop -->
+  <div
+    class="absolute inset-0 bg-black/50"
+    @click="close()"
+    aria-hidden="true"
+  ></div>
+
+  <!-- Modal content -->
+  <div
+    class="relative bg-bg border-2 border-accent rounded-lg shadow-xl max-w-2xl mx-4 w-full"
+    role="dialog"
+    aria-labelledby="search-modal-title"
+    aria-modal="true"
+  >
+    <!-- Header with close button -->
+    <div class="flex items-center justify-between p-6 border-b border-border">
+      <h2 id="search-modal-title" class="text-xl font-bold text-accent">
+        {{ i18n "searchArticles" }}
+      </h2>
+      <button
+        @click="close()"
+        aria-label="Close search"
+        class="p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
+      >
+        <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    <!-- Search input -->
+    <div class="p-6 border-b border-border">
+      <label for="search-input-desktop" class="sr-only">
+        {{ i18n "searchPlaceholder" }}
+      </label>
+      <input
+        id="search-input-desktop"
+        type="text"
+        :value="searchQuery"
+        @input="filterArticles($el.value)"
+        placeholder="{{ i18n "searchPlaceholder" }}"
+        class="w-full px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
+        aria-describedby="search-results"
+      />
+    </div>
+
+    <!-- Results container -->
+    <div id="search-results" class="max-h-96 overflow-y-auto p-6">
+      <!-- Results list -->
+      <div x-show="filteredArticles.length > 0" class="space-y-3" role="region" aria-live="polite">
+        <template x-for="article in filteredArticles" :key="article.url">
+          <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded">
+            <a :href="article.url" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-2 py-1">
+              <h3 class="font-bold text-accent hover:underline" x-text="article.title"></h3>
+              <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
+            </a>
+          </div>
+        </template>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        x-show="searchQuery && filteredArticles.length === 0"
+        class="text-center py-8 text-text-dim"
+        role="status"
+      >
+        {{ i18n "noSearchResults" }}
+      </div>
+
+      <!-- No query state -->
+      <div
+        x-show="!searchQuery"
+        class="text-center py-8 text-text-dim"
+      >
+        {{ i18n "searchPlaceholder" }}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
new file mode 100644
index 0000000..a2225f1
--- /dev/null
+++ b/layouts/partials/sidebar.html
@@ -0,0 +1,54 @@
+<aside class="order-last md:order-none md:col-span-1">
+  <!-- Author info widget (optional - can be expanded) -->
+  <div class="sidebar-widget">
+    <p class="sidebar-widget-label"># {{ i18n "author" }}</p>
+    <p class="text-text-dim text-sm leading-relaxed">
+      {{ .Site.Params.author }}
+    </p>
+  </div>
+
+  <hr class="sidebar-hr">
+
+  <!-- Social sharing widget -->
+  {{ partial "social-share.html" (dict "page" . "mode" "sidebar") }}
+
+  <!-- Related posts widget (articles only) -->
+  {{ if and .Site.Params.relatedPosts (eq .Section "articles") }}
+  {{ $related := first 5 (.Site.RegularPages.Related .) }}
+  <hr class="sidebar-hr">
+  <div class="sidebar-widget">
+    <p class="sidebar-widget-label"># {{ i18n "relatedPosts" }}</p>
+    {{ if $related }}
+    <ul class="space-y-3">
+      {{ range $related }}
+      {{ $articleType := .Params.type | default "life" }}
+      {{ $excerpt := .Description | default .Summary }}
+      <li
+        class="pl-3 border-l-2"
+        style="border-color: var(--type-{{ $articleType }});"
+      >
+        <a href="{{ .RelPermalink }}" class="text-sm hover:text-accent transition-colors leading-snug block">
+          {{ .Title }}
+          <time class="text-text-dim/60 ml-1" datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+            · {{ .PublishDate.Format "Jan 2006" }}
+          </time>
+        </a>
+        {{ if $excerpt }}
+        <p class="text-xs text-text-dim/70 leading-snug mt-0.5 line-clamp-1">
+          {{ $excerpt | plainify | truncate 60 }}
+        </p>
+        {{ end }}
+      </li>
+      {{ end }}
+    </ul>
+    {{ else }}
+    <p class="text-sm text-text-dim">{{ i18n "noRelated" }}</p>
+    {{ end }}
+  </div>
+  {{ end }}
+
+  <hr class="sidebar-hr">
+
+  <!-- Tag Cloud Widget -->
+  {{ partial "tag-cloud.html" (dict "page" . "showCount" false "wrapInWidget" true "maxTags" 15) }}
+</aside>
diff --git a/layouts/partials/social-share.html b/layouts/partials/social-share.html
new file mode 100644
index 0000000..9e9be43
--- /dev/null
+++ b/layouts/partials/social-share.html
@@ -0,0 +1,123 @@
+{{ $page := .page }}
+{{ $mode := .mode | default "sidebar" }}
+{{ $url := $page.Permalink | urlquery }}
+{{ $title := $page.Title | urlquery }}
+
+{{ $gridClass := "share-grid gap-1" }}
+{{ if eq $mode "inline" }}
+  {{ $gridClass = "flex flex-wrap justify-center gap-1" }}
+{{ end }}
+
+<div class="sidebar-widget">
+  <p class="sidebar-widget-label"># {{ i18n "share" }}</p>
+  <nav aria-label="{{ i18n "share" }}">
+    <div class="{{ $gridClass }}">
+
+      <!-- Copy link -->
+      <div x-data="{ copied: false }">
+        <button
+          @click="navigator.clipboard.writeText('{{ $page.Permalink }}').then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
+          :aria-label="copied ? '{{ i18n "linkCopied" }}' : '{{ i18n "copyLink" }}'"
+          :class="copied ? 'btn-share btn-share--copied' : 'btn-share'"
+        >
+          <i x-show="!copied" data-feather="copy" aria-hidden="true"></i>
+          <i x-show="copied" data-feather="check" aria-hidden="true"></i>
+        </button>
+      </div>
+
+      <!-- Email -->
+      <a
+        href="mailto:?subject={{ $title }}&body={{ $title }}%0A%0A{{ $page.Permalink | urlquery }}"
+        aria-label="{{ i18n "shareViaEmail" }}"
+        class="btn-share"
+      >
+        <i data-feather="mail" aria-hidden="true"></i>
+      </a>
+
+      <!-- Facebook -->
+      <a
+        href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "facebook" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+        </svg>
+      </a>
+
+      <!-- Twitter / X -->
+      <a
+        href="https://twitter.com/intent/tweet?url={{ $url }}&text={{ $title }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "twitter" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+        </svg>
+      </a>
+
+      <!-- Reddit -->
+      <a
+        href="https://www.reddit.com/submit?url={{ $url }}&title={{ $title }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "reddit" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+          <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
+        </svg>
+      </a>
+
+      <!-- Pinterest -->
+      <a
+        href="https://pinterest.com/pin/create/button/?url={{ $url }}&description={{ $title }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "pinterest" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/>
+        </svg>
+      </a>
+
+      <!-- WhatsApp -->
+      <a
+        href="https://api.whatsapp.com/send?text={{ $title }}%20{{ $page.Permalink | urlquery }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "whatsapp" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
+        </svg>
+      </a>
+
+      <!-- Telegram -->
+      <a
+        href="https://t.me/share/url?url={{ $url }}&text={{ $title }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "telegram" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+          <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+        </svg>
+      </a>
+
+      <!-- Signal -->
+      <a
+        href="https://signal.me/#p/{{ $page.Permalink | urlquery }}"
+        target="_blank" rel="noopener noreferrer"
+        aria-label="{{ i18n "signal" }}"
+        class="btn-share"
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.157 5.32a6.68 6.68 0 0 1 6.143 4.032l.734-.267.55 1.513-.717.261a6.71 6.71 0 0 1 .133 1.327 6.68 6.68 0 0 1-.176 1.51l.69.252-.55 1.513-.707-.258A6.68 6.68 0 0 1 12 18.68a6.68 6.68 0 0 1-6.294-4.455l-.66.24-.55-1.513.677-.247A6.71 6.71 0 0 1 5 12.187a6.71 6.71 0 0 1 .16-1.438l-.698-.254.55-1.513.725.264A6.68 6.68 0 0 1 12.157 5.32zM12 7.2a4.8 4.8 0 1 0 0 9.6A4.8 4.8 0 0 0 12 7.2z"/>
+        </svg>
+      </a>
+
+    </div>
+  </nav>
+</div>
diff --git a/layouts/partials/tag-cloud.html b/layouts/partials/tag-cloud.html
new file mode 100644
index 0000000..b896e8d
--- /dev/null
+++ b/layouts/partials/tag-cloud.html
@@ -0,0 +1,90 @@
+{{/* tag-cloud.html
+  Reusable tag cloud partial for homepage, sidebar, and 404 pages.
+
+  Params (dict):
+    page         Page    required — calling page context (provides .Site.Taxonomies.tags, .Lang)
+    showCount    bool    optional — show post count per tag (default true)
+    heading      string  optional — heading text override (default: i18n "tagCloud")
+    headingLevel string  optional — h2|h3|p for non-widget mode (default "h2")
+    wrapInWidget bool    optional — wrap in .sidebar-widget for sidebar placement (default false)
+    maxTags      int     optional — max tags to show, 0 = all (default 0)
+*/}}
+
+{{- $page         := .page -}}
+{{- $showCount    := .showCount    | default true -}}
+{{- $heading      := .heading      | default (i18n "tagCloud") -}}
+{{- $headingLevel := .headingLevel -}}
+{{- $wrapInWidget := .wrapInWidget | default false -}}
+{{- $maxTags      := .maxTags      | default 0 -}}
+
+{{- $tags := $page.Site.Taxonomies.tags -}}
+
+{{/* Early exit if no tags */}}
+{{- if $tags -}}
+
+{{/* Compute max count for continuous scaling */}}
+{{- $maxCount := 0 -}}
+{{- range $tags -}}
+  {{- if gt .Count $maxCount -}}{{- $maxCount = .Count -}}{{- end -}}
+{{- end -}}
+
+{{/* Ordered tag list (descending by count) */}}
+{{- $orderedTags := $tags.ByCount -}}
+{{- if gt $maxTags 0 -}}
+  {{- $orderedTags = first $maxTags $orderedTags -}}
+{{- end -}}
+
+{{/* Render based on placement mode */}}
+{{- if $wrapInWidget -}}
+<div class="sidebar-widget">
+  <p class="sidebar-widget-label"># {{ i18n "topTags" }}</p>
+  <nav aria-label="{{ i18n "exploreTopics" }}">
+    <div class="tag-cloud" data-tag-cloud>
+{{- else -}}
+<section {{- if $headingLevel }} aria-labelledby="tag-cloud-heading"{{ end }}>
+  {{- if $headingLevel -}}
+  {{- if eq $headingLevel "h2" -}}
+  <h2 id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</h2>
+  {{- else if eq $headingLevel "h3" -}}
+  <h3 id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</h3>
+  {{- else -}}
+  <p id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</p>
+  {{- end -}}
+  {{- end -}}
+  <nav aria-label="{{ i18n "exploreTopics" }}">
+    <div class="tag-cloud" data-tag-cloud>
+{{- end -}}
+
+      {{- range $orderedTags -}}
+        {{- $count := .Count -}}
+        {{- $ratio := (div (float $count) (float $maxCount)) -}}
+        {{- $size := (add 0.6 (mul $ratio 1.2)) -}}
+        {{- $opacity := (add 0.7 (mul $ratio 0.3)) -}}
+        <a
+          href="{{ .Page.RelPermalink }}"
+          class="tag-cloud-link"
+          data-weight="{{ printf "%.4f" $ratio }}"
+          {{- if ge $ratio 0.5 }}
+          style="font-size: {{ $size }}rem; color: var(--accent); opacity: {{ $opacity }};"
+          {{- else }}
+          style="font-size: {{ $size }}rem; color: var(--text-dim); opacity: {{ $opacity }};"
+          {{- end }}
+          aria-label="{{ .Name }}{{- if $showCount }} ({{ i18n "postCount" $count }}){{- end -}}"
+        >
+          {{- .Name -}}
+          {{- if $showCount -}}
+          <span class="tag-cloud-count" aria-hidden="true">{{ $count }}</span>
+          {{- end -}}
+        </a>
+      {{- end -}}
+
+    </div>
+  </nav>
+
+{{- if $wrapInWidget -}}
+</div>
+{{- else -}}
+</section>
+{{- end -}}
+
+{{- end -}}{{/* end if $tags */}}
diff --git a/layouts/partials/toast-container.html b/layouts/partials/toast-container.html
new file mode 100644
index 0000000..7bbd3c0
--- /dev/null
+++ b/layouts/partials/toast-container.html
@@ -0,0 +1,13 @@
+{{ define "toast-container" }}
+
+<!-- Toast notification container with Alpine.js integration -->
+<div class="toast-container" x-data="formComponentsData()">
+  <template x-for="toast in toasts" :key="toast.id">
+    <div class="toast" :class="`toast-${toast.type}`" x-show="toasts.length > 0">
+      <span x-text="toast.message"></span>
+      <button class="toast-close" @click="removeToast(toast.id)" type="button" aria-label="Close notification"></button>
+    </div>
+  </template>
+</div>
+
+{{ end }}
diff --git a/layouts/repository/single.html b/layouts/repository/single.html
new file mode 100644
index 0000000..ce2c305
--- /dev/null
+++ b/layouts/repository/single.html
@@ -0,0 +1,77 @@
+{{ define "main" }}
+<article class="mx-auto px-4 py-12 max-w-7xl">
+  <div class="content-grid">
+    <!-- Breadcrumb -->
+    {{ partial "breadcrumb.html" . }}
+
+    <!-- Page Title (Hero) -->
+    <div class="mb-12">
+      <h1 class="text-5xl md:text-6xl font-bold mb-4 text-accent animate-fade-in">
+        {{ i18n "repositoryTitle" }}
+      </h1>
+      <p class="text-xl text-text-dim animate-fade-in-delay">
+        {{ i18n "repositorySubtitle" }}
+      </p>
+    </div>
+
+    <!-- Page Content (markdown sections) -->
+    <div class="prose dark:prose-invert max-w-none mb-12">
+      {{ .Content }}
+    </div>
+
+    <!-- Social sharing (inline mode) -->
+    <div class="mb-12">
+      {{ partial "social-share.html" (dict "page" . "mode" "inline") }}
+    </div>
+
+    <!-- Repository Cards Section -->
+    <section class="mt-16">
+      <h2 class="text-3xl font-bold mb-8">{{ i18n "githubReposTitle" }}</h2>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {{ range $.Site.Data.repos.repos }}
+        <div class="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
+          <!-- Card Image -->
+          <img
+            src="{{ .image }}"
+            alt="{{ .name }}"
+            class="w-full h-48 object-cover"
+            loading="lazy"
+          />
+
+          <!-- Card Content -->
+          <div class="p-6">
+            <h3 class="text-xl font-bold mb-2">{{ .name }}</h3>
+
+            <p class="text-text-dim mb-4">
+              {{ i18n .description_key }}
+            </p>
+
+            <!-- Tags -->
+            {{ if .tags }}
+            <div class="flex flex-wrap gap-2 mb-4">
+              {{ range .tags }}
+              <span class="text-xs px-2 py-1 bg-border/20 rounded">
+                {{ . }}
+              </span>
+              {{ end }}
+            </div>
+            {{ end }}
+
+            <!-- GitHub Link -->
+            <a
+              href="{{ .github_url }}"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-primary w-full text-center"
+            >
+              {{ i18n "visitGithub" }} →
+            </a>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </section>
+  </div>
+</article>
+{{ end }}
diff --git a/layouts/robots.txt b/layouts/robots.txt
new file mode 100644
index 0000000..8fc0c20
--- /dev/null
+++ b/layouts/robots.txt
@@ -0,0 +1,5 @@
+User-agent: *
+Disallow: /search-index.json
+Disallow: /it/search-index.json
+
+Sitemap: {{ .Site.BaseURL }}sitemap.xml
diff --git a/layouts/section.html b/layouts/section.html
deleted file mode 100644
index d817087..0000000
--- a/layouts/section.html
+++ /dev/null
@@ -1,40 +0,0 @@
-{{ define "main" }}
-  {{ if eq .Type "articles" }}
-    <!-- Articles Section with Timeline -->
-    <div class="page-header">
-      <h1>{{ .Title }}</h1>
-      <div class="filter-buttons">
-        <button class="filter-btn active" data-filter="all">All</button>
-        <button class="filter-btn" data-filter="tech">Tech</button>
-        <button class="filter-btn" data-filter="life">Life</button>
-        <button class="filter-btn" data-filter="quote">Quote</button>
-        <button class="filter-btn" data-filter="link">Link</button>
-        <button class="filter-btn" data-filter="photo">Photo</button>
-      </div>
-    </div>
-
-    {{ $featured := (.Pages.ByDate.Reverse) }}
-    {{ if and $featured (index $featured 0).Params.featured }}
-      {{ partial "featured-card.html" (dict "page" (index $featured 0)) }}
-    {{ end }}
-
-    <section class="timeline-section">
-      <div class="timeline-line"></div>
-      <div class="timeline-feed">
-        {{ $pages := .Pages.ByDate.Reverse }}
-        {{ range $index, $page := $pages }}
-          {{ partial "timeline-item.html" (dict "page" $page "index" $index) }}
-        {{ end }}
-      </div>
-    </section>
-
-    {{ $filters := resources.Get "js/filters.js" | fingerprint }}
-    <script defer src="{{ $filters.RelPermalink }}"></script>
-
-  {{ else }}
-    <!-- Static Section (is/about, is/contact, etc.) -->
-    <div class="container-narrow" style="padding-top: 2rem;">
-      {{ .Content }}
-    </div>
-  {{ end }}
-{{ end }}
diff --git a/layouts/shortcodes/actions.html b/layouts/shortcodes/actions.html
index 296a211..7badab3 100644
--- a/layouts/shortcodes/actions.html
+++ b/layouts/shortcodes/actions.html
@@ -1,7 +1,19 @@
-{{ $link := .Get "url" }}
-{{ $desc := .Get "desc" }}
-{{ $outclass := .Get "outclass" }}
-{{ $inclass := .Get "inclass" }}
-<ul class="actions{{ with $outclass }} {{ . }}{{ end }}">
-	<li><a href="{{ $link }}" class="button{{ with $inclass }} {{ . }}{{ end }}">{{ $desc }}</a></li>
-</ul>
+{{- $url := .Get "url" -}}
+{{- $desc := .Get "desc" | default "Download" -}}
+{{- $outclass := .Get "outclass" | default "" -}}
+{{- $inclass := .Get "inclass" | default "" -}}
+
+{{- if $url -}}
+<div class="my-6 {{ $outclass }}">
+  <a
+    href="{{ $url }}"
+    class="inline-flex items-center gap-2 px-4 py-2 rounded border border-accent/30 text-accent font-medium hover:border-accent/50 hover:bg-accent/10 transition-colors {{ $inclass }}"
+    download
+  >
+    <i data-feather="download" class="w-4 h-4"></i>
+    {{ $desc }}
+  </a>
+</div>
+{{- else -}}
+  {{- errorf "actions shortcode: 'url' parameter is required" -}}
+{{- end -}}
diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html
new file mode 100644
index 0000000..6c5748f
--- /dev/null
+++ b/layouts/shortcodes/contact.html
@@ -0,0 +1,65 @@
+<form id="contact-form" x-data="contactForm()" @submit.prevent="submitContactForm" class="space-y-6">
+  <!-- Name Field -->
+  <div>
+    <label for="name" class="block text-sm font-medium text-text mb-2">
+      {{ i18n "name" }}
+    </label>
+    <input
+      id="name"
+      type="text"
+      x-model="formData.name"
+      required
+      class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
+      :aria-busy="isSubmitting"
+    />
+  </div>
+
+  <!-- Email Field -->
+  <div>
+    <label for="email" class="block text-sm font-medium text-text mb-2">
+      {{ i18n "email" }}
+    </label>
+    <input
+      id="email"
+      type="email"
+      x-model="formData.email"
+      required
+      class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
+      :aria-busy="isSubmitting"
+    />
+  </div>
+
+  <!-- Message Field -->
+  <div>
+    <label for="message" class="block text-sm font-medium text-text mb-2">
+      {{ i18n "message" }}
+    </label>
+    <textarea
+      id="message"
+      x-model="formData.message"
+      rows="5"
+      required
+      class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors resize-none"
+      :aria-busy="isSubmitting"
+    ></textarea>
+  </div>
+
+  <!-- Status Message -->
+  <div
+    x-show="statusMessage"
+    x-text="statusMessage"
+    :class="statusClass"
+    class="px-4 py-3 rounded-lg text-sm transition-all"
+  ></div>
+
+  <!-- Submit Button -->
+  <button
+    type="submit"
+    :disabled="isSubmitting"
+    class="w-full px-4 py-2 bg-accent text-bg font-medium rounded-lg hover:bg-accent/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+  >
+    <span x-show="!isSubmitting">{{ i18n "submit" }}</span>
+    <span x-show="isSubmitting">{{ i18n "sending" }}</span>
+  </button>
+</form>
+
diff --git a/layouts/shortcodes/div-close.html b/layouts/shortcodes/div-close.html
deleted file mode 100644
index ea7e47c..0000000
--- a/layouts/shortcodes/div-close.html
+++ /dev/null
@@ -1,2 +0,0 @@
-</div>
-
diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html
deleted file mode 100644
index 0c0b755..0000000
--- a/layouts/shortcodes/div.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{{ if .Get "class" }}
-<div class="{{ with .Get "class" }}{{ . }}{{ end }}">
-{{ end }}
-
diff --git a/layouts/shortcodes/dropcap.html b/layouts/shortcodes/dropcap.html
index 80cbefe..6114678 100644
--- a/layouts/shortcodes/dropcap.html
+++ b/layouts/shortcodes/dropcap.html
@@ -1,14 +1 @@
-{{/*
-	* The dropcap shortcode:
-	*
-	* Usage:
-	*
-	* {{< dropcap class="some class" >}}
-	* your paragraph that will have a drop cap here
-	* {{< /dropcap >}}
-	*
-	*/}}
-
-<p class="has-dropcap {{ with .Get "class"}}{{.}}{{ end }}">
-	{{ .InnerDeindent }}
-</p>
+<span class="text-2xl font-bold first-letter:text-3xl">{{ .Inner }}</span>
diff --git a/layouts/shortcodes/em.html b/layouts/shortcodes/em.html
index 11f399a..a3a096c 100644
--- a/layouts/shortcodes/em.html
+++ b/layouts/shortcodes/em.html
@@ -1 +1 @@
-<mark>{{ .Inner | markdownify }}</mark>
+<em>{{ .Inner }}</em>
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
deleted file mode 100644
index 4cf2e7b..0000000
--- a/layouts/shortcodes/figure.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{{/*
-    * This version of the figure shortcode needs to be closed and doesn't
-    * add an image itself, but relies on the img.html shortcode to provide
-    * a responsive image instead.
-    */}}
-<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-    {{- if .Get "link" -}}
-        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
-    {{- end -}}
-    {{.InnerDeindent}}
-    {{- if .Get "link" }}</a>{{ end -}}
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-        <figcaption>
-            {{ with (.Get "title") -}}
-                <h4>{{ . }}</h4>
-            {{- end -}}
-            {{- if or (.Get "caption") (.Get "attr") -}}<p>
-                {{- .Get "caption" | markdownify -}}
-                {{- with .Get "attrlink" }}
-                    <a href="{{ . }}">
-                {{- end -}}
-                {{- .Get "attr" | markdownify -}}
-                {{- if .Get "attrlink" }}</a>{{ end }}</p>
-            {{- end }}
-        </figcaption>
-    {{- end }}
-</figure>
diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html
deleted file mode 100644
index ae7d23e..0000000
--- a/layouts/shortcodes/gal-img.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{{- $src := .Get "src" -}}
-{{- $source := resources.Get $src -}}
-{{- $alt := .Get "alt" -}}
-{{- $caption := .Get "caption" -}}
-{{- $location := .Get "location" -}}
-{{- $fullsize := $source -}}
-{{- $thumb := $source.Resize "400x webp" -}}
-<figure class="photo-card"
-  data-photo-index="{{ .Ordinal }}"
-  data-src="{{ $fullsize.RelPermalink }}"
-  data-alt="{{ $alt }}"
-  data-caption="{{ $caption }}"
-  data-location="{{ $location }}">
-  <img src="{{ $thumb.RelPermalink }}" alt="{{ $alt }}" loading="lazy">
-  {{ with $caption }}<figcaption>{{ . }}</figcaption>{{ end }}
-</figure>
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index f9e546e..b66c327 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,3 +1,12 @@
-<div class="photo-grid" data-lightbox="true">
-    {{ .Inner }}
+{{- $cols := .Get "cols" | default "2" -}}
+
+<div class="my-8 grid gap-4" style="grid-template-columns: repeat({{ $cols }}, 1fr)">
+  {{- range $line := strings.Split .Inner "\n" -}}
+    {{- if strings.Contains $line "![" -}}
+      {{- $image := strings.TrimSpace $line -}}
+      {{- if $image -}}
+        {{ $image | markdownify | safeHTML }}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
 </div>
diff --git a/layouts/shortcodes/gravatar.html b/layouts/shortcodes/gravatar.html
index 56e2514..3a1ebcc 100644
--- a/layouts/shortcodes/gravatar.html
+++ b/layouts/shortcodes/gravatar.html
@@ -1,52 +1,17 @@
-{{/*
-	* The gravatar shortcode:
-	* All arguments are optional, main ones are mail and size and have a fallback set in place.
-	* Args:
-	*		mail: [string] The email address. Falls back to .Site.Params.author_email which should be set in your config file.
-	*		size: [int] The size of the fetched image. Defaults to 200 if not set.
-	*		class: [string] The class to give to the figure block.
-	*		link: [string] The address to link the picture to.
-	*		target: [string] Where to open the link. One of "_blank", "_self", "_parent", "_top".
-	*		caption: [string] Caption text to show with the image. Supports Markdown.
-	*
-	* Usage:
-	*		{{< gravatar mail="some@address.com" size=150 class="some class" link="https://example.com" target="_blank" rel="author" caption="Here's a picture of a dog." >}}
-	*
-	* Output:
-	*	<figure class="some class">
-	*		<a href="https://example.com" target="_blank" rel="author">
-	*			<img src="https://www.gravatar.com/avatar/emailhash?s=150" alt="Here's a picture of a dog." />
-	*		</a>
-	*		<figcaption>
-	*			<p>
-	*				Here's a picture of a dog.
-	*			</p>
-	*		</figcaption>
-	*	</figure>
-	*
-	*/}}
+{{- $email := .Get "email" -}}
+{{- $size := .Get "size" | default "256" | int -}}
+{{- $alt := .Get "alt" | default "User avatar" -}}
+{{- $class := .Get "class" | default "w-32 h-32 rounded-full" -}}
 
-{{- $mailhash := $.Site.Params.author_email -}}
-{{- if .Get "mail" -}}{{- $mailhash = .Get "mail" -}}{{- end -}}
-{{- $hash := $mailhash | lower | md5 -}}
-
-<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-{{- if .Get "link" -}}
-	<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
-{{- end }}
-	<img src="https://www.gravatar.com/avatar/{{- $hash -}}?s={{- with .Get "size" }}{{.}}{{ else }}200{{ end }}"
-		{{- if or (.Get "alt") (.Get "caption") }}
-		alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-		{{- end -}}
-	/>
-{{- if .Get "link" -}}
-	</a>
-{{- end }}
-{{- if .Get "caption" -}}
-	<figcaption>
-		<p>
-		{{- .Get "caption" | markdownify -}}
-		</p>
-	</figcaption>
-{{- end }}
-</figure>
+{{- if $email -}}
+  {{- $hash := md5 (strings.TrimSpace (strings.ToLower $email)) -}}
+  {{- $gravatarURL := printf "https://www.gravatar.com/avatar/%s?s=%d&d=identicon" $hash $size -}}
+  <img
+    src="{{ $gravatarURL }}"
+    alt="{{ $alt }}"
+    class="{{ $class }}"
+    loading="lazy"
+  />
+{{- else -}}
+  {{- errorf "gravatar shortcode: 'email' parameter is required" -}}
+{{- end -}}
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
new file mode 100644
index 0000000..84dec3f
--- /dev/null
+++ b/layouts/shortcodes/image.html
@@ -0,0 +1,23 @@
+{{- $src := .Get "src" -}}
+{{- $alt := .Get "alt" | default "Image" -}}
+{{- $caption := .Get "caption" -}}
+{{- $class := .Get "class" | default "w-full h-auto rounded-lg border border-border" -}}
+{{- $link := .Get "link" -}}
+{{- $figureClass := .Get "figure-class" -}}
+
+{{- if or $src .Inner -}}
+  <figure class="my-8{{- with $figureClass }} {{ . }}{{- end -}}">
+    {{- if .Inner -}}
+      {{- .Inner -}}
+    {{- else -}}
+      {{- if $link -}}<a href="{{ $link }}">{{- end -}}
+      <img src="{{ $src }}" alt="{{ $alt }}" class="{{ $class }}" loading="lazy" />
+      {{- if $link -}}</a>{{- end -}}
+    {{- end -}}
+    {{- if $caption -}}
+      <figcaption class="mt-3 text-center text-sm text-text-dim italic">{{ $caption }}</figcaption>
+    {{- end -}}
+  </figure>
+{{- else -}}
+  {{- errorf "image shortcode: 'src' parameter or inner content is required" -}}
+{{- end -}}
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
deleted file mode 100644
index fbf96c0..0000000
--- a/layouts/shortcodes/img.html
+++ /dev/null
@@ -1,84 +0,0 @@
-{{/*
-    Taken from https://www.brycewray.com/posts/2022/06/responsive-optimized-images-hugo/
-*/}}
-
-{{- $respSizes := .Site.Params.imageSizes -}}
-{{- $src := .Get "src" -}}
-{{- $source := resources.Get $src -}}
-{{- $alt := .Get "alt" -}}
-{{- $divClass := .Get "divClass" -}}
-{{/*
-    The styling in $imgClass, below, makes
-    an image fill the container horizontally
-    and adjust its height automatically
-    for that, and then fade in for the LQIP effect.
-    Feel free to adjust your CSS/SCSS as desired.
-*/}}
-{{- $imgClass := "animate-fade" -}}
-{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
-{{/*
-    Now we'll create the 20-pixel-wide LQIP
-    and turn it into Base64-encoded data, which
-    is better for performance and caching.
-*/}}
-{{- $LQIP_img := $source.Resize "20x jpg" -}}
-{{- $LQIP_b64 := $LQIP_img.Content | base64Encode -}}
-{{/*
-    $CFPstyle is for use in styling
-    the div's background, as you'll see shortly.
-*/}}
-{{- $CFPstyle := printf "%s%s%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px;" -}}
-{{/*
-    Then, we create a 640-pixel-wide JPG
-    of the image. This will serve as the
-    "fallback" image for that tiny percentage
-    of browsers that don't understand the
-    HTML `picture` tag.
-*/}}
-{{- $actualImg := $source.Resize "640x jpg" -}}
-<div class="picture{{with $divClass}} {{.}}{{end}}" style="{{ $CFPstyle | safeCSS }}">
-{{/*
-    Now we'll build the `picture` which modern
-    browsers use to decide which image, and
-    which format thereof, to show. Remember to
-    put `webp` first, since the browser will use
-    the first format it **can** use, and WebP files
-    usually are smaller. After WebP, the fallback
-    is the universally safe JPG format.
-*/}}
-    <a href="{{ $source.RelPermalink }}">
-        <picture>
-            <source
-                type="image/webp"
-                srcset="
-                {{- with $respSizes -}}
-                    {{- range $i, $e := $respSizes -}}
-                        {{- if ge $source.Width . -}}
-                            {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" $e " webp") ).RelPermalink }} {{ . }}w
-                        {{- end -}}
-                    {{- end -}}
-                {{- end -}}"
-                sizes="{{ $dataSzes }}"
-            />
-            <source
-                type="image/jpeg"
-                srcset="
-                {{- with $respSizes -}}
-                    {{- range $i, $e := . -}}
-                        {{- if ge $source.Width . -}}
-                            {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" . " jpg") ).RelPermalink }} {{ . }}w
-                        {{- end -}}
-                    {{- end -}}
-                {{- end -}}"
-                sizes="{{ $dataSzes }}"
-            />
-            <img class="{{ $imgClass }}"
-                src="{{ $actualImg.RelPermalink }}"
-                width="{{ $source.Width }}"
-                height="{{ $source.Height }}"
-                alt="{{ $alt }}"
-                loading="lazy"
-            />
-        </picture>
-    </a>
-</div>
diff --git a/layouts/shortcodes/quote.html b/layouts/shortcodes/quote.html
index 05d0c94..1ed5c3c 100644
--- a/layouts/shortcodes/quote.html
+++ b/layouts/shortcodes/quote.html
@@ -1,19 +1,15 @@
-<blockquote class="blockquote">
-    <p>
-        {{.Inner}}
-    </p>
-    {{ if .Get "source" }}
-    <footer class="blockquote-footer">
-		<cite title="by: {{ with .Get "source"}}{{.}}{{ end }}">
-            {{ with .Get "src"}}
-                by
-                <a href="{{.}}" target="_blank" rel="noopener noreferrer">
-            {{ end }}
-            {{ with .Get "source" }}{{.}}{{ end }}
-            {{ with .Get "src"}}
-                </a>
-            {{ end }}
-			</cite>
-		</footer>
-    {{ end }}
+{{- $source := .Get "source" -}}
+{{- $src := .Get "src" -}}
+
+<blockquote class="my-8 pl-6 border-l-4 border-accent/50 italic text-text-dim">
+  <p class="text-lg">{{ .Inner }}</p>
+  {{- if $source -}}
+    <footer class="mt-4 text-sm not-italic text-text-dim">
+      {{- if $src -}}
+        — <a href="{{ $src }}" class="text-accent hover:underline">{{ $source }}</a>
+      {{- else -}}
+        — {{ $source }}
+      {{- end -}}
+    </footer>
+  {{- end -}}
 </blockquote>
diff --git a/layouts/shortcodes/strike.html b/layouts/shortcodes/strike.html
index 415036a..275b7c1 100644
--- a/layouts/shortcodes/strike.html
+++ b/layouts/shortcodes/strike.html
@@ -1 +1 @@
-<strike>{{ .Inner | markdownify }}</strike>
+<s>{{ .Inner }}</s>
diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html
deleted file mode 100644
index d042bb0..0000000
--- a/layouts/shortcodes/svg.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<span class="inline-svg{{ with .Get "class" }} {{ . }}{{ end }}">
-{{- $fname := print "SVGs/" ( .Get "name" ) ".svg" -}}
-{{ $icon := resources.Get $fname }}
-{{ $icon.Content | safeHTML }}
-</span>
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
index aa30a13..1e2645d 100644
--- a/layouts/shortcodes/video.html
+++ b/layouts/shortcodes/video.html
@@ -1,37 +1,37 @@
-{{/*
-	* The video shortcode:
-	* All arguments are optional, except for src which is where you define your video file
-	* This shortcode supports webm, mp4, and other HTML5 video formats.
-	* Args:
-	*		src: [string] Path to video file (required)
-	*		class: [string] The class(es) to give to the video block.
-	*		width: [int] The width of the video
-	*		height: [int] The height of the video
-	*		autoplay: [bool] true or false for autoplay - defaults to false
-	*		loop: [bool] true or false for loop - defaults to false
-	*		muted: [bool] true or false for mute - defaults to false
-	*
-	* Usage:
-	*		{{< video src="my-video.mp4" width=600 height=400 autoplay=true loop=true muted=true class="responsive-video" >}}
-	*
-	* Output:
-	*	<video class="responsive-video" controls preload="auto" width="600" height="400" autoplay loop muted playsinline>
-	*		<source src="my-video.mp4" type="video/mp4">
-	*	</video>
-	*
-	*/}}
+{{- $src := .Get "src" -}}
+{{- $id := .Get "id" -}}
+{{- $title := .Get "title" | default "Video" -}}
+{{- $class := .Get "class" | default "" -}}
 
-{{ $ext := (.Get "src") | path.Ext }}
-{{ $filetype := slicestr $ext 1}}
-
-<video{{ with .Get "class" }} class="{{ . }}"{{ end }}
-	controls
-	preload="auto"
-	{{ with .Get "width" }}width="{{.}}"{{ end }}
-	{{ with .Get "height" }}height="{{.}}"{{ end }}
-	{{ if eq (.Get "autoplay") "true" }}autoplay {{ end }}
-	{{ if eq (.Get "loop") "true" }}loop {{ end }}
-	{{ if eq (.Get "muted") "true" }}muted {{ end }}
-	playsinline >
-    <source src="{{ ( .Get "src" ) }}" type="video/{{ $filetype }}">
-</video>
+{{- if $id -}}
+  <div class="my-6{{- with $class }} {{ . }}{{- end -}}">
+    <iframe
+      class="w-full aspect-video"
+      src="https://www.youtube.com/embed/{{ $id }}"
+      title="{{ $title }}"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+    ></iframe>
+  </div>
+{{- else if $src -}}
+  {{- $ext := $src | path.Ext -}}
+  {{- $filetype := slicestr $ext 1 -}}
+  {{- $videoURL := $src -}}
+  {{- $resource := .Page.Resources.GetMatch $src -}}
+  {{- if $resource -}}{{- $videoURL = $resource.RelPermalink -}}{{- end -}}
+  <video
+    {{- with $class }} class="{{ . }}"{{ end }}
+    controls
+    preload="auto"
+    playsinline
+    {{- with .Get "width" }} width="{{ . }}"{{ end }}
+    {{- with .Get "height" }} height="{{ . }}"{{ end }}
+    {{- if eq (.Get "autoplay") "true" }} autoplay{{ end }}
+    {{- if eq (.Get "loop") "true" }} loop{{ end }}
+    {{- if eq (.Get "muted") "true" }} muted{{ end }}
+  >
+    <source src="{{ $videoURL }}" type="video/{{ $filetype }}">
+  </video>
+{{- else -}}
+  {{- errorf "video shortcode: either 'src' or 'id' parameter is required" -}}
+{{- end -}}
diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html
deleted file mode 100644
index c2e7875..0000000
--- a/layouts/taxonomy.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{{ define "main" }}
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-  {{ end }}
-{{ end }}
diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html
new file mode 100644
index 0000000..c3a4317
--- /dev/null
+++ b/layouts/taxonomy/list.html
@@ -0,0 +1,49 @@
+{{ define "main" }}
+<div class="mx-auto px-4 py-12 max-w-4xl">
+  <!-- Page title with taxonomy name -->
+  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
+    {{ i18n .Data.Plural }}
+  </h1>
+
+  <!-- Articles list -->
+  <div class="space-y-6 max-w-3xl">
+    {{ $pinned := where .Pages "Params.pinned" true }}
+    {{ $unpinned := where .Pages "Params.pinned" false }}
+
+    <!-- If no unpinned posts found (because param is undefined), get all non-pinned pages -->
+    {{ if eq (len $unpinned) 0 }}
+      {{ $unpinned = where .Pages "Params.pinned" nil }}
+      {{ if eq (len $unpinned) 0 }}
+        {{ $unpinned = where .Pages "Params.pinned" "" }}
+      {{ end }}
+    {{ end }}
+
+    <!-- Pinned posts first -->
+    {{ range (sort $pinned "Date" "desc") }}
+      <div class="relative">
+        {{ partial "article-card.html" . }}
+        <span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30">
+          {{ i18n "postCount" .Pages.Len }}
+        </span>
+      </div>
+    {{ end }}
+
+    <!-- Regular posts -->
+    {{ range (sort $unpinned "Date" "desc") }}
+      <div class="relative">
+        {{ partial "article-card.html" . }}
+        <span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30">
+          {{ i18n "postCount" .Pages.Len }}
+        </span>
+      </div>
+    {{ end }}
+
+    <!-- Empty state -->
+    {{ if eq (len .Pages) 0 }}
+      <div class="py-12 text-center text-text-dim">
+        {{ i18n "noRelated" }}
+      </div>
+    {{ end }}
+  </div>
+</div>
+{{ end }}
diff --git a/layouts/taxonomy/term.html b/layouts/taxonomy/term.html
new file mode 100644
index 0000000..1b953bc
--- /dev/null
+++ b/layouts/taxonomy/term.html
@@ -0,0 +1,46 @@
+{{ define "main" }}
+<div class="mx-auto px-4 py-12 max-w-4xl">
+  <!-- Page title with taxonomy type -->
+  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-2">
+    {{ i18n .Data.Singular }}
+  </h1>
+
+  <!-- Current term heading -->
+  <p class="text-lg text-text-dim mb-12">
+    <span class="inline-flex items-center px-3 py-1 rounded text-sm font-medium border border-accent/30 text-accent">
+      {{ .Title }}
+    </span>
+  </p>
+
+  <!-- Articles list -->
+  <div class="space-y-6 max-w-3xl">
+    {{ $pinned := where .Pages "Params.pinned" true }}
+    {{ $unpinned := where .Pages "Params.pinned" false }}
+
+    <!-- If no unpinned posts found (because param is undefined), get all non-pinned pages -->
+    {{ if eq (len $unpinned) 0 }}
+      {{ $unpinned = where .Pages "Params.pinned" nil }}
+      {{ if eq (len $unpinned) 0 }}
+        {{ $unpinned = where .Pages "Params.pinned" "" }}
+      {{ end }}
+    {{ end }}
+
+    <!-- Pinned posts first -->
+    {{ range (sort $pinned "Date" "desc") }}
+      {{ partial "article-card.html" . }}
+    {{ end }}
+
+    <!-- Regular posts -->
+    {{ range (sort $unpinned "Date" "desc") }}
+      {{ partial "article-card.html" . }}
+    {{ end }}
+
+    <!-- Empty state -->
+    {{ if eq (len .Pages) 0 }}
+      <div class="py-12 text-center text-text-dim">
+        {{ i18n "noRelated" }}
+      </div>
+    {{ end }}
+  </div>
+</div>
+{{ end }}
diff --git a/layouts/term.html b/layouts/term.html
deleted file mode 100644
index c2e7875..0000000
--- a/layouts/term.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{{ define "main" }}
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-  {{ end }}
-{{ end }}