Initial commit

2025-11-29 17:51:00 +01:00
commit 694a7047a4
66 changed files with 5105 additions and 0 deletions
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode | default "en" }}" class="dark">
+<head>
+  {{- partial "head/meta.html" . -}}
+  {{- partial "head/opengraph.html" . -}}
+  {{- partial "head/twitter.html" . -}}
+  {{- partial "head/json-ld.html" . -}}
+  {{- partial "head/preload.html" . -}}
+  {{- partial "head/favicon.html" . -}}
+
+  {{/* CSS - built by Tailwind CLI to static folder */}}
+  <link rel="stylesheet" href="/css/main.css">
+</head>
+<body
+  x-data
+  hx-boost="true"
+  hx-target="#main-content"
+  hx-select="#main-content"
+  hx-swap="innerHTML show:top"
+  hx-push-url="true"
+  class="text-text-primary min-h-screen flex flex-col"
+>
+  {{/* WebGL Background Canvas (preserved across navigation) */}}
+  <canvas
+    id="webgl-bg"
+    hx-preserve="true"
+    class="fixed inset-0 -z-10 pointer-events-none"
+    aria-hidden="true"
+  ></canvas>
+
+  {{- partial "header.html" . -}}
+
+  <main id="main-content" class="flex-1">
+    {{- block "main" . }}{{- end -}}
+  </main>
+
+  {{- partial "footer.html" . -}}
+
+  {{/* Persistent Audio Player (preserved across navigation) */}}
+  <div id="audio-player-container" hx-preserve="true" class="fixed bottom-0 left-0 right-0 z-player">
+    {{- partial "player.html" . -}}
+  </div>
+
+  {{/* WebGL Visualizer Canvas (preserved) */}}
+  <canvas
+    id="visualizer"
+    hx-preserve="true"
+    class="fixed inset-0 pointer-events-none z-visualizer"
+    aria-hidden="true"
+  ></canvas>
+
+  {{/* Alpine.js - data and stores defined before CDN loads */}}
+  <script>
+    // Define Alpine stores and components BEFORE Alpine loads
+    document.addEventListener('alpine:init', () => {
+      // Global audio store
+      Alpine.store('audio', {
+        currentTrack: null,
+        isPlaying: false,
+        progress: 0,
+        duration: 0,
+        volume: 0.8
+      });
+
+      // Player UI component
+      Alpine.data('playerUI', () => ({
+        togglePlay() {
+          window.__pivoine?.audioManager?.toggle();
+        },
+        seek(time) {
+          window.__pivoine?.audioManager?.seek(parseFloat(time));
+        },
+        setVolume(v) {
+          const volume = parseFloat(v);
+          Alpine.store('audio').volume = volume;
+          window.__pivoine?.audioManager?.setVolume(volume);
+          localStorage.setItem('pivoine-volume', volume);
+        },
+        toggleMute() {
+          const store = Alpine.store('audio');
+          if (store.volume > 0) {
+            this._previousVolume = store.volume;
+            this.setVolume(0);
+          } else {
+            this.setVolume(this._previousVolume || 0.8);
+          }
+        },
+        formatTime(seconds) {
+          if (!seconds || isNaN(seconds)) return '0:00';
+          const mins = Math.floor(seconds / 60);
+          const secs = Math.floor(seconds % 60);
+          return `${mins}:${secs.toString().padStart(2, '0')}`;
+        },
+        _previousVolume: 0.8
+      }));
+    });
+  </script>
+
+  {{/* htmx */}}
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+
+  {{/* Alpine.js */}}
+  <script defer src="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js"></script>
+
+  {{/* Main JS - audio manager and visualizer */}}
+  {{- $js := resources.Get "js/main.js" -}}
+  {{- if $js -}}
+    {{- $jsOpts := dict "format" "esm" -}}
+    {{- if hugo.IsProduction -}}
+      {{- $jsOpts = merge $jsOpts (dict "minify" true) -}}
+    {{- end -}}
+    {{- $js = $js | js.Build $jsOpts -}}
+    {{- if hugo.IsProduction -}}
+      {{- $js = $js | fingerprint -}}
+    {{- end -}}
+    <script type="module" src="{{ $js.RelPermalink }}"></script>
+  {{- end -}}
+
+  {{/* Analytics */}}
+  {{- if and .Site.Params.umami.enabled hugo.IsProduction -}}
+    {{- partial "analytics.html" . -}}
+  {{- end -}}
+
+  <script>
+    // htmx config
+    document.addEventListener('DOMContentLoaded', function() {
+      if (typeof htmx !== 'undefined') {
+        htmx.config.globalViewTransitions = true;
+      }
+    });
+
+    // Re-init components after htmx swap
+    document.body.addEventListener('htmx:afterSwap', function() {
+      window.dispatchEvent(new CustomEvent('page:loaded'));
+    });
+  </script>
+</body>
+</html>
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -0,0 +1,113 @@
+{{ define "main" }} {{/* Hero Section */}}
+<section
+  class="min-h-[calc(100vh-4rem)] flex items-center justify-center relative overflow-hidden"
+>
+  {{/* Animated background pattern */}}
+  <div class="absolute inset-0 opacity-10">
+    <div
+      class="absolute inset-0 bg-gradient-to-b from-transparent via-surface-1/50 to-surface-0"
+    ></div>
+  </div>
+
+  <div class="relative z-10 text-center px-6">
+    <h1 class="text-5xl md:text-7xl font-medium tracking-tighter mb-4">
+      VALKNAR'S
+    </h1>
+    <p class="text-text-secondary text-lg md:text-xl tracking-wide">
+      Pivoine.Art
+    </p>
+
+    {{/* Scroll indicator */}}
+    <button
+      onclick="document.getElementById('latest-tracks').scrollIntoView({ behavior: 'smooth' })"
+      class="mt-16 animate-bounce cursor-pointer hover:text-text-primary transition-colors"
+      aria-label="Scroll to content"
+    >
+      <svg
+        class="w-6 h-6 mx-auto text-text-muted"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19 14l-7 7m0 0l-7-7m7 7V3"
+        />
+      </svg>
+    </button>
+  </div>
+</section>
+
+{{/* Latest Tracks */}}
+<section id="latest-tracks" class="py-24">
+  <div class="container-wide">
+    <header class="mb-12">
+      <h2 class="text-2xl font-medium tracking-tight">Latest Tracks</h2>
+      <p class="text-text-secondary mt-2">Recent audio</p>
+    </header>
+
+    {{- $tracks := where .Site.RegularPages "Section" "tracks" -}} {{- if
+    $tracks }}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {{- range first 3 $tracks }} {{ partial "track-card.html" . }} {{- end }}
+    </div>
+
+    <div class="mt-12 text-center">
+      <a
+        href="/tracks/"
+        class="group inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent hover:bg-accent hover:text-surface-0 transition-all duration-300"
+      >
+        View all tracks
+        <svg
+          class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M17 8l4 4m0 0l-4 4m4-4H3"
+          />
+        </svg>
+      </a>
+    </div>
+    {{- else }}
+    <p class="text-text-muted">No tracks yet. Check back soon.</p>
+    {{- end }}
+  </div>
+</section>
+
+{{/* About Preview */}}
+<section class="py-24">
+  <div class="container-narrow text-center">
+    <h2 class="text-2xl font-medium tracking-tight mb-6">About</h2>
+    <p class="text-text-secondary text-lg leading-relaxed mb-8">
+      Technology and sound, creating massive beats to push the boundaries of
+      audio perception.
+    </p>
+    <a
+      href="/about/"
+      class="group inline-flex items-center gap-2 text-text-primary relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-accent hover:after:w-full after:transition-all after:duration-300"
+    >
+      Read more
+      <svg
+        class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M17 8l4 4m0 0l-4 4m4-4H3"
+        />
+      </svg>
+    </a>
+  </div>
+</section>
+{{ end }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -0,0 +1,26 @@
+{{ define "main" }}
+<section class="py-16">
+  <div class="container-wide">
+    <header class="mb-12">
+      <h1 class="text-4xl font-medium tracking-tight">{{ .Title }}</h1>
+      {{- with .Description }}
+      <p class="text-text-secondary mt-2">{{ . }}</p>
+      {{- end }}
+    </header>
+
+    {{- if .Content }}
+    <div class="prose prose-invert max-w-none mb-12">
+      {{ .Content }}
+    </div>
+    {{- end }}
+
+    {{- if .Pages }}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {{- range .Pages }}
+        {{ partial "track-card.html" . }}
+      {{- end }}
+    </div>
+    {{- end }}
+  </div>
+</section>
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+<article class="py-16">
+  <div class="container-narrow">
+    <header class="mb-12">
+      <h1 class="text-4xl font-medium tracking-tight">{{ .Title }}</h1>
+      {{- if not .Date.IsZero }}
+      <time class="text-text-muted text-sm mt-2 block">
+        {{ .Date.Format "January 2, 2006" }}
+      </time>
+      {{- end }}
+    </header>
+
+    <div class="prose prose-invert prose-lg max-w-none">
+      {{ .Content }}
+    </div>
+  </div>
+</article>
+{{ end }}
--- a/layouts/partials/analytics.html
+++ b/layouts/partials/analytics.html
@@ -0,0 +1,8 @@
+{{- if and .Site.Params.umami.enabled .Site.Params.umami.websiteID .Site.Params.umami.src }}
+<script
+  defer
+  src="{{ .Site.Params.umami.src }}"
+  data-website-id="{{ .Site.Params.umami.websiteID }}"
+  data-domains="pivoine.art"
+></script>
+{{- end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -0,0 +1,34 @@
+<footer class="border-t border-border mt-auto pb-24">
+  <div class="container-wide py-12">
+    <div class="flex flex-col md:flex-row items-center justify-between gap-6">
+      {{/* Copyright */}}
+      <p class="text-sm text-text-muted">
+        &copy; {{ now.Year }} {{ .Site.Params.author }}. All rights reserved.
+      </p>
+
+      {{/* Links */}}
+      <nav class="flex items-center gap-6">
+        <a
+          href="/imprint/"
+          class="text-sm text-text-muted hover:text-text-secondary transition-colors"
+        >
+          Imprint
+        </a>
+        <a
+          href="/index.xml"
+          class="text-sm text-text-muted hover:text-text-secondary transition-colors"
+          aria-label="RSS Feed"
+          target="_blank"
+        >
+          RSS
+        </a>
+        <a
+          href="mailto:{{ .Site.Params.email }}"
+          class="text-sm text-text-muted hover:text-text-secondary transition-colors"
+        >
+          Contact
+        </a>
+      </nav>
+    </div>
+  </div>
+</footer>
--- a/layouts/partials/head/favicon.html
+++ b/layouts/partials/head/favicon.html
@@ -0,0 +1,15 @@
+<link
+  rel="icon"
+  type="image/png"
+  href="/favicon/favicon-96x96.png"
+  sizes="96x96"
+/>
+<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+<link rel="shortcut icon" href="/favicon/favicon.ico" />
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="/favicon/apple-touch-icon.png"
+/>
+<meta name="apple-mobile-web-app-title" content="Valknar's" />
+<link rel="manifest" href="/favicon/site.webmanifest" />
--- a/layouts/partials/head/json-ld.html
+++ b/layouts/partials/head/json-ld.html
@@ -0,0 +1,47 @@
+{{/* Website schema for homepage */}}
+{{- if .IsHome }}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "{{ .Site.Title }}",
+  "url": "{{ .Site.BaseURL }}",
+  "description": "{{ .Site.Params.description }}",
+  "author": {
+    "@type": "Person",
+    "name": "{{ .Site.Params.author }}",
+    "email": "{{ .Site.Params.email }}"
+  }
+}
+</script>
+{{- end }}
+
+{{/* MusicRecording schema for track pages */}}
+{{- if and .IsPage (eq .Section "tracks") }}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "MusicRecording",
+  "name": "{{ .Title }}",
+  "description": "{{ .Description | default .Summary | plainify }}",
+  "url": "{{ .Permalink }}",
+  "datePublished": "{{ .Date.Format "2006-01-02" }}",
+  "byArtist": {
+    "@type": "Person",
+    "name": "{{ .Params.artist | default .Site.Params.author }}"
+  }
+  {{- if .Params.audio }},
+  "audio": {
+    "@type": "AudioObject",
+    "contentUrl": "{{ .Params.audio }}"
+  }
+  {{- end }}
+  {{- if .Params.genre }},
+  "genre": "{{ .Params.genre }}"
+  {{- end }}
+  {{- with .Resources.GetMatch "cover.*" }},
+  "image": "{{ .Permalink }}"
+  {{- end }}
+}
+</script>
+{{- end }}
--- a/layouts/partials/head/meta.html
+++ b/layouts/partials/head/meta.html
@@ -0,0 +1,29 @@
+{{- $title := cond .IsHome .Site.Title (printf "%s | %s" .Title .Site.Title) -}}
+{{- $desc := .Description | default .Summary | default .Site.Params.description | plainify | truncate 160 -}}
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+<title>{{ $title }}</title>
+<meta name="description" content="{{ $desc }}">
+<meta name="author" content="{{ .Site.Params.author }}">
+
+<link rel="canonical" href="{{ .Permalink }}">
+
+{{/* Theme */}}
+<meta name="theme-color" content="#0a0a0a">
+<meta name="color-scheme" content="dark">
+
+{{/* Favicon */}}
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+
+{{/* RSS */}}
+<link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="{{ "index.xml" | absURL }}">
+
+{{/* Robots */}}
+{{- $robots := "index, follow" -}}
+{{- if .Params.noindex -}}
+  {{- $robots = "noindex, nofollow" -}}
+{{- end -}}
+<meta name="robots" content="{{ $robots }}">
--- a/layouts/partials/head/opengraph.html
+++ b/layouts/partials/head/opengraph.html
@@ -0,0 +1,30 @@
+{{- $title := .Title | default .Site.Title -}}
+{{- $desc := .Description | default .Summary | default .Site.Params.description | plainify | truncate 200 -}}
+{{- $image := .Params.image | default "/images/og-default.png" -}}
+{{- if not (strings.HasPrefix $image "http") -}}
+  {{- $image = $image | absURL -}}
+{{- end -}}
+
+<meta property="og:title" content="{{ $title }}">
+<meta property="og:description" content="{{ $desc }}">
+<meta property="og:type" content="{{ cond (eq .Section "tracks") "music.song" "website" }}">
+<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:site_name" content="{{ .Site.Title }}">
+<meta property="og:locale" content="en_US">
+
+{{- if $image }}
+<meta property="og:image" content="{{ $image }}">
+<meta property="og:image:alt" content="{{ $title }}">
+{{- end }}
+
+{{/* Audio-specific OpenGraph tags */}}
+{{- if and (eq .Section "tracks") .Params.audio }}
+<meta property="og:audio" content="{{ .Params.audio }}">
+<meta property="og:audio:type" content="audio/mpeg">
+  {{- if .Params.duration }}
+<meta property="music:duration" content="{{ .Params.duration }}">
+  {{- end }}
+  {{- if .Params.artist }}
+<meta property="music:musician" content="{{ .Params.artist }}">
+  {{- end }}
+{{- end }}
--- a/layouts/partials/head/preload.html
+++ b/layouts/partials/head/preload.html
@@ -0,0 +1,16 @@
+{{/* Preconnect to external domains */}}
+<link rel="preconnect" href="https://jellyfin.media.pivoine.art" crossorigin>
+
+{{/* DNS prefetch */}}
+<link rel="dns-prefetch" href="https://unpkg.com">
+
+{{/* Preload fonts if we add custom fonts later */}}
+{{/* <link rel="preload" href="/fonts/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin> */}}
+
+{{/* Preload cover image on track pages */}}
+{{- if and .IsPage (eq .Section "tracks") }}
+  {{- with .Resources.GetMatch "cover.*" }}
+    {{- $webp := .Resize "800x webp q85" }}
+<link rel="preload" href="{{ $webp.RelPermalink }}" as="image" type="image/webp">
+  {{- end }}
+{{- end }}
--- a/layouts/partials/head/twitter.html
+++ b/layouts/partials/head/twitter.html
@@ -0,0 +1,21 @@
+{{- $title := .Title | default .Site.Title -}}
+{{- $desc := .Description | default .Summary | default .Site.Params.description | plainify | truncate 200 -}}
+{{- $image := .Params.image | default "/images/og-default.png" -}}
+{{- if not (strings.HasPrefix $image "http") -}}
+  {{- $image = $image | absURL -}}
+{{- end -}}
+
+{{/* Determine card type */}}
+{{- $cardType := "summary" -}}
+{{- if $image -}}
+  {{- $cardType = "summary_large_image" -}}
+{{- end -}}
+
+<meta name="twitter:card" content="{{ $cardType }}">
+<meta name="twitter:title" content="{{ $title }}">
+<meta name="twitter:description" content="{{ $desc }}">
+
+{{- if $image }}
+<meta name="twitter:image" content="{{ $image }}">
+<meta name="twitter:image:alt" content="{{ $title }}">
+{{- end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,44 @@
+<header class="fixed top-0 left-0 right-0 z-sticky bg-surface-0/80 backdrop-blur-md border-b border-border">
+  <nav class="container-wide flex items-center justify-between h-16">
+    {{/* Logo */}}
+    <a
+      href="{{ "/" | relURL }}"
+      class="flex items-center gap-3 group"
+      aria-label="{{ .Site.Title }} - Home"
+    >
+      <canvas
+        id="logo-canvas"
+        hx-preserve="true"
+        class="w-8 h-8"
+        width="32"
+        height="32"
+        aria-hidden="true"
+      ></canvas>
+      <span class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors">
+        VALKNAR'S
+      </span>
+    </a>
+
+    {{/* Navigation */}}
+    <ul
+      class="flex items-center gap-4 md:gap-8"
+      x-data="{ path: window.location.pathname }"
+      @htmx:after-settle.window="path = window.location.pathname"
+    >
+      {{- range .Site.Menus.main }}
+      <li>
+        <a
+          href="{{ .URL }}"
+          class="text-sm transition-colors"
+          :class="path.startsWith('{{ .URL }}') ? 'text-text-primary border-b border-text-primary' : 'text-text-secondary hover:text-text-primary link-hover'"
+        >
+          {{ .Name }}
+        </a>
+      </li>
+      {{- end }}
+    </ul>
+  </nav>
+</header>
+
+{{/* Spacer for fixed header */}}
+<div class="h-16" aria-hidden="true"></div>
--- a/layouts/partials/player.html
+++ b/layouts/partials/player.html
@@ -0,0 +1,122 @@
+{{/* Persistent Audio Player */}}
+<div
+  x-data="playerUI()"
+  x-show="$store.audio.currentTrack"
+  x-cloak
+  class="audio-player p-4"
+  role="region"
+  aria-label="Audio player"
+>
+  <div class="container-wide flex items-center gap-4">
+    {{/* Track Info */}}
+    <div class="flex items-center gap-3 min-w-0 flex-1">
+      {{/* Cover */}}
+      <div
+        class="w-12 h-12 bg-surface-2 rounded overflow-hidden flex-shrink-0"
+        x-show="$store.audio.currentTrack?.image"
+      >
+        <img
+          :src="$store.audio.currentTrack?.image"
+          :alt="$store.audio.currentTrack?.title"
+          class="w-full h-full object-cover"
+        >
+      </div>
+
+      {{/* Title */}}
+      <div class="min-w-0">
+        <p
+          class="text-sm font-medium truncate"
+          x-text="$store.audio.currentTrack?.title || 'No track'"
+        ></p>
+        <p class="text-xs text-text-muted">Valknar</p>
+      </div>
+    </div>
+
+    {{/* Controls */}}
+    <div class="flex items-center gap-4">
+      {{/* Play/Pause */}}
+      <button
+        @click="togglePlay()"
+        class="w-10 h-10 flex items-center justify-center rounded-full bg-accent text-surface-0 hover:scale-105 transition-transform"
+        :aria-label="$store.audio.isPlaying ? 'Pause' : 'Play'"
+      >
+        <svg
+          x-show="!$store.audio.isPlaying"
+          class="w-5 h-5 ml-0.5"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+        <svg
+          x-show="$store.audio.isPlaying"
+          x-cloak
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+        </svg>
+      </button>
+    </div>
+
+    {{/* Progress */}}
+    <div class="flex-1 max-w-md hidden sm:flex items-center gap-3">
+      <span class="text-xs text-text-muted tabular-nums" x-text="formatTime($store.audio.progress)">0:00</span>
+      <input
+        type="range"
+        min="0"
+        :max="$store.audio.duration || 100"
+        :value="$store.audio.progress"
+        @input="seek($event.target.value)"
+        class="audio-player__progress flex-1"
+        aria-label="Seek"
+      >
+      <span class="text-xs text-text-muted tabular-nums" x-text="formatTime($store.audio.duration)">0:00</span>
+    </div>
+
+    {{/* Volume */}}
+    <div class="hidden md:flex items-center gap-2">
+      <button
+        @click="toggleMute()"
+        class="p-2 text-text-secondary hover:text-text-primary transition-colors"
+        :aria-label="$store.audio.volume === 0 ? 'Unmute' : 'Mute'"
+      >
+        <svg
+          x-show="$store.audio.volume > 0"
+          class="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.5 6.5a8 8 0 010 11M11 5L6 9H2v6h4l5 4V5z"/>
+        </svg>
+        <svg
+          x-show="$store.audio.volume === 0"
+          x-cloak
+          class="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"/>
+        </svg>
+      </button>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        :value="$store.audio.volume"
+        @input="setVolume($event.target.value)"
+        class="w-20 audio-player__progress"
+        aria-label="Volume"
+      >
+    </div>
+  </div>
+</div>
+
+<style>
+  [x-cloak] { display: none !important; }
+</style>
--- a/layouts/partials/track-card.html
+++ b/layouts/partials/track-card.html
@@ -0,0 +1,70 @@
+{{/* Track Card Component */}}
+<article class="track-card rounded-lg overflow-hidden group grayscale hover:grayscale-0">
+  {{/* Cover Image/Video */}}
+  <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
+    {{- with .Resources.GetMatch "cover.*" }}
+      {{- $img := .Resize "600x webp q85" }}
+      <img
+        src="{{ $img.RelPermalink }}"
+        alt="{{ $.Title }}"
+        class="track-card__cover w-full h-full"
+        loading="lazy"
+        decoding="async"
+      >
+    {{- else }}
+      <div class="w-full h-full bg-surface-2 flex items-center justify-center">
+        <svg class="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+        </svg>
+      </div>
+    {{- end }}
+
+    {{/* Video preview on hover */}}
+    {{- with .Resources.GetMatch "preview.*" }}
+    <video
+      src="{{ .RelPermalink }}"
+      class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      muted
+      loop
+      playsinline
+      onmouseenter="this.play()"
+      onmouseleave="this.pause(); this.currentTime=0;"
+    ></video>
+    {{- end }}
+
+    {{/* Play overlay - hide if video exists */}}
+    {{- if not (.Resources.GetMatch "preview.*") }}
+    <div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+      <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
+        <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </div>
+    </div>
+    {{- end }}
+  </a>
+
+  {{/* Info */}}
+  <div class="p-4">
+    <a href="{{ .Permalink }}" class="block">
+      <h3 class="font-medium truncate group-hover:text-accent transition-colors">
+        {{ .Title }}
+      </h3>
+    </a>
+
+    <div class="flex items-center justify-between mt-2 text-sm text-text-muted">
+      <time datetime="{{ .Date.Format "2006-01-02" }}">
+        {{ .Date.Format "2006.01.02" }}
+      </time>
+      {{- with .Params.duration }}
+      <span class="tabular-nums">{{ . }}</span>
+      {{- end }}
+    </div>
+
+    {{- with .Params.genre }}
+    <span class="inline-block mt-3 px-2 py-1 text-xs bg-surface-2 text-text-secondary rounded">
+      {{ . }}
+    </span>
+    {{- end }}
+  </div>
+</article>
--- a/layouts/tracks/list.html
+++ b/layouts/tracks/list.html
@@ -0,0 +1,43 @@
+{{ define "main" }}
+<section class="py-16">
+  <div class="container-wide">
+    <header class="mb-12">
+      <h1 class="text-4xl font-medium tracking-tight">Tracks</h1>
+      <p class="text-text-secondary mt-2">{{ .Description | default "All audio experiments" }}</p>
+    </header>
+
+    {{- $tracks := .Pages -}}
+    {{- if $tracks }}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      {{- range $tracks }}
+        {{ partial "track-card.html" . }}
+      {{- end }}
+    </div>
+
+    {{/* Pagination */}}
+    {{- if .Paginator }}
+    <nav class="mt-16 flex justify-center gap-4" aria-label="Pagination">
+      {{- if .Paginator.HasPrev }}
+      <a
+        href="{{ .Paginator.Prev.URL }}"
+        class="px-4 py-2 border border-border hover:border-text-muted transition-colors"
+      >
+        Previous
+      </a>
+      {{- end }}
+      {{- if .Paginator.HasNext }}
+      <a
+        href="{{ .Paginator.Next.URL }}"
+        class="px-4 py-2 border border-border hover:border-text-muted transition-colors"
+      >
+        Next
+      </a>
+      {{- end }}
+    </nav>
+    {{- end }}
+    {{- else }}
+    <p class="text-text-muted">No tracks yet. Check back soon.</p>
+    {{- end }}
+  </div>
+</section>
+{{ end }}
--- a/layouts/tracks/single.html
+++ b/layouts/tracks/single.html
@@ -0,0 +1,138 @@
+{{ define "main" }}
+<article class="py-16">
+  <div class="container-wide">
+    {{/* Content area with offset */}}
+    <div class="md:mx-72">
+      {{/* Header */}}
+      <header class="mb-8">
+        {{/* Meta */}}
+        <div class="flex items-center gap-4 text-sm text-text-muted mb-3">
+          <time datetime="{{ .Date.Format "2006-01-02" }}">
+            {{ .Date.Format "January 2, 2006" }}
+          </time>
+          {{- with .Params.genre }}
+          <span class="px-2 py-1 bg-surface-2 rounded">{{ . }}</span>
+          {{- end }}
+        </div>
+
+        <h1 class="text-3xl md:text-4xl font-medium tracking-tight mb-2">
+          {{ .Title }}
+        </h1>
+
+        {{- with .Description }}
+        <p class="text-text-secondary">{{ . }}</p>
+        {{- end }}
+      </header>
+
+      {{/* Cover Image + Play Widget - 2 Column Layout */}}
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+        {{/* Cover Image - 1 column */}}
+        {{- with .Resources.GetMatch "cover.*" }}
+          {{- $img := .Resize "400x webp q90" }}
+          <figure
+            class="overflow-hidden rounded-lg group cursor-pointer relative aspect-square border border-border"
+            {{- if $.Params.audio }}
+            x-data
+            @click="
+              $store.audio.currentTrack = {
+                title: '{{ $.Title }}',
+                url: '{{ $.Params.audio }}',
+                image: '{{ with $.Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
+              };
+              window.__pivoine?.audioManager?.play('{{ $.Params.audio }}');
+              $store.audio.isPlaying = true;
+            "
+            {{- end }}
+          >
+            <img
+              src="{{ $img.RelPermalink }}"
+              alt="{{ $.Title }}"
+              class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
+              loading="eager"
+            >
+            {{/* Video preview on hover */}}
+            {{- with $.Resources.GetMatch "preview.*" }}
+            <video
+              src="{{ .RelPermalink }}"
+              class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              muted
+              loop
+              playsinline
+              onmouseenter="this.play()"
+              onmouseleave="this.pause(); this.currentTime=0;"
+            ></video>
+            {{- end }}
+          </figure>
+        {{- end }}
+
+        {{/* Play Widget - 2 columns */}}
+        {{- if .Params.audio }}
+        <div
+          x-data
+          @click="
+            $store.audio.currentTrack = {
+              title: '{{ .Title }}',
+              url: '{{ .Params.audio }}',
+              image: '{{ with .Resources.GetMatch "cover.*" }}{{ (.Resize "200x webp q85").RelPermalink }}{{ end }}'
+            };
+            window.__pivoine?.audioManager?.play('{{ .Params.audio }}');
+            $store.audio.isPlaying = true;
+          "
+          class="md:col-span-2 flex items-center gap-4 cursor-pointer group"
+        >
+          <button
+            class="w-14 h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-accent text-surface-0 group-hover:scale-110 transition-transform"
+            aria-label="Play {{ .Title }}"
+          >
+            <svg class="w-6 h-6 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z"/>
+            </svg>
+          </button>
+          <div>
+            <p class="font-medium group-hover:text-accent transition-colors">Play Track</p>
+            {{- with .Params.duration }}
+            <p class="text-sm text-text-muted tabular-nums">{{ . }}</p>
+            {{- end }}
+          </div>
+        </div>
+        {{- end }}
+      </div>
+      {{/* Content */}}
+      {{- if .Content }}
+      <div class="prose prose-invert prose-lg max-w-none">
+        {{ .Content }}
+      </div>
+      {{- end }}
+
+      {{/* Tags */}}
+      {{- with .GetTerms "tags" }}
+      <footer class="mt-12 pt-8 border-t border-border">
+        <div class="flex flex-wrap gap-2">
+          {{- range . }}
+          <a
+            href="{{ .Permalink }}"
+            class="px-3 py-1 text-sm bg-surface-2 hover:bg-surface-3 transition-colors rounded"
+          >
+            {{ .LinkTitle }}
+          </a>
+          {{- end }}
+        </div>
+      </footer>
+      {{- end }}
+
+      {{/* Related Tracks */}}
+      {{- $related := .Site.RegularPages.Related . | first 3 }}
+      {{- if $related }}
+      <aside class="mt-16 pt-12 border-t border-border">
+        <h2 class="text-xl font-medium mb-8">Related Tracks</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {{- range $related }}
+            {{ partial "track-card.html" . }}
+          {{- end }}
+        </div>
+      </aside>
+      {{- end }}
+    </div>
+  </div>
+</article>
+{{ end }}