summaryrefslogtreecommitdiffstats
path: root/layouts/_partials
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/_partials')
-rw-r--r--layouts/_partials/article-single.html56
-rw-r--r--layouts/_partials/featured-card.html23
-rw-r--r--layouts/_partials/header.html30
-rw-r--r--layouts/_partials/hero.html44
-rw-r--r--layouts/_partials/matrix-canvas.html1
-rw-r--r--layouts/_partials/photo-article.html32
-rw-r--r--layouts/_partials/share-sidebar.html28
-rw-r--r--layouts/_partials/static-page.html33
-rw-r--r--layouts/_partials/timeline-item.html31
9 files changed, 260 insertions, 18 deletions
diff --git a/layouts/_partials/article-single.html b/layouts/_partials/article-single.html
new file mode 100644
index 0000000..f030869
--- /dev/null
+++ b/layouts/_partials/article-single.html
@@ -0,0 +1,56 @@
+<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
new file mode 100644
index 0000000..cf2618f
--- /dev/null
+++ b/layouts/_partials/featured-card.html
@@ -0,0 +1,23 @@
+{{ $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/header.html b/layouts/_partials/header.html
index 872c207..1f8efb8 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,17 +1,29 @@
-<div class="header-container">
- <a href="/" class="site-title">{{ .Site.Params.author }}</a>
- <div class="header-controls">
- <nav>
- <ul>
+<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) }}class="active"{{ end }}>
+ <a href="{{ .URL }}" {{ if (in $.RelPermalink .URL) }}aria-current="page"{{ end }}>
{{ .Name }}
</a>
</li>
{{ end }}
</ul>
- </nav>
- <button id="theme-toggle-btn" class="theme-toggle" aria-label="Toggle theme">🌙 dark</button>
+
+ <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>
-</div>
+</nav>
diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html
index 11034be..ac8a4e1 100644
--- a/layouts/_partials/hero.html
+++ b/layouts/_partials/hero.html
@@ -1,11 +1,39 @@
-<section class="hero">
- {{ partial "matrix-canvas.html" . }}
- <div class="hero-content">
- <div class="hero-avatar">{{ .Site.Params.avatar }}</div>
- <div class="hero-text">
- <h1>{{ .Site.Params.author }}</h1>
- <div class="hero-role">// engineer • writer • human</div>
- <p class="hero-bio">{{ .Site.Params.description }}</p>
+<section class="hero" role="region" aria-label="Hero">
+ <div class="hero-left">
+ <div class="hero-prompt">// Featured</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="#articles" class="btn btn-outline">Explore</a>
</div>
</div>
+
+ <div class="hero-right">
+ <div class="hero-terminal">
+ <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">whoami</span></div>
+ <div>danilo</div>
+ <div>$ <span class="terminal-prompt">pwd</span></div>
+ <div>/home/danilo/web</div>
+ <div>$ <span class="terminal-prompt">ls -la</span></div>
+ <div>total 48</div>
+ <div>drwxr-xr-x 5 danilo staff 160 Apr 9 2026 .</div>
+ <div>-rw-r--r-- 1 danilo staff 4.2K blog.md</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="scroll-indicator">
+ <span>Scroll to explore</span>
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+ <path d="M10 3v10M6 9l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ </div>
</section>
diff --git a/layouts/_partials/matrix-canvas.html b/layouts/_partials/matrix-canvas.html
deleted file mode 100644
index b10b471..0000000
--- a/layouts/_partials/matrix-canvas.html
+++ /dev/null
@@ -1 +0,0 @@
-<canvas id="matrix-canvas"></canvas>
diff --git a/layouts/_partials/photo-article.html b/layouts/_partials/photo-article.html
new file mode 100644
index 0000000..1040c9b
--- /dev/null
+++ b/layouts/_partials/photo-article.html
@@ -0,0 +1,32 @@
+<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/share-sidebar.html b/layouts/_partials/share-sidebar.html
new file mode 100644
index 0000000..36b6d03
--- /dev/null
+++ b/layouts/_partials/share-sidebar.html
@@ -0,0 +1,28 @@
+<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
new file mode 100644
index 0000000..d557b2f
--- /dev/null
+++ b/layouts/_partials/static-page.html
@@ -0,0 +1,33 @@
+<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/timeline-item.html b/layouts/_partials/timeline-item.html
new file mode 100644
index 0000000..fcb3f50
--- /dev/null
+++ b/layouts/_partials/timeline-item.html
@@ -0,0 +1,31 @@
+{{ $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>