Initial commit

2025-11-29 17:51:00 +01:00
commit 694a7047a4
66 changed files with 5105 additions and 0 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,21 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(chmod:*)",
+      "Bash(npx tailwindcss:*)",
+      "Bash(pnpm add:*)",
+      "Bash(pnpm exec tailwindcss:*)",
+      "Bash(pnpm css:*)",
+      "Bash(hugo:*)",
+      "WebFetch(domain:pivoine.art)",
+      "Bash(curl:*)",
+      "WebFetch(domain:github.com)",
+      "WebSearch",
+      "WebFetch(domain:htmx.org)",
+      "Bash(cat:*)",
+      "Bash(git remote:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,28 @@
+# Dependencies
+node_modules/
+
+# Build output
+public/
+resources/
+
+# Git
+.git/
+.gitignore
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Hugo
+hugo_stats.json
+
+# Development
+*.log
+*.md
+!README.md
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,32 @@
+# Dependencies
+node_modules/
+
+# Build output
+public/
+resources/_gen/
+
+# Hugo
+hugo_stats.json
+.hugo_build.lock
+
+# Environment
+.env
+.env.*
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Cache
+.cache/
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
--- a/33
+++ b/33
@@ -0,0 +1,33 @@
+# Stage 1: Build
+FROM node:22-alpine AS builder
+
+# Install Hugo
+RUN apk add --no-cache hugo
+
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+
+# Copy package files first (for layer caching)
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# Copy source files
+COPY . .
+
+# Build CSS and Hugo site
+RUN pnpm build
+
+# Stage 2: Production
+FROM nginx:alpine
+
+# Copy built site
+COPY --from=builder /app/public /usr/share/nginx/html
+
+# Copy nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,108 @@
+```
+                    · · ·
+                ·           ·
+              ·               ·
+            ·                   ·
+           ·                     ·
+          ·                       ·
+          ·                       ·
+          ·                       ·
+           ·                     ·
+            ·                   ·
+              ·               ·
+                ·           ·
+                    · · ·
+```
+
+# PIVOINE.ART
+
+> Technology and sound, creating massive beats to push the boundaries of audio perception.
+
+---
+
+## About
+
+An immersive audio experience. Electronic music meets WebGL visualization.
+5000 particles react to every frequency. The logo breathes with the beat.
+
+Dark. Minimal. Precise.
+
+---
+
+## Features
+
+```
+▸ WebGL Visualizer     5000 particles · 512 FFT · bass/mid/high reactivity
+▸ Reactive Logo        Canvas-based · audio-driven · mouse-aware
+▸ Persistent Player    Play · seek · volume · progress
+▸ Web Audio API        Real-time frequency analysis
+▸ SPA Navigation       htmx · smooth transitions · Alpine.js state
+```
+
+---
+
+## Stack
+
+```
+Hugo ─────────────── Static site generation
+Tailwind CSS 4 ───── Utility-first styling
+Alpine.js ────────── Lightweight reactivity
+Three.js ─────────── WebGL rendering
+Web Audio API ────── Frequency analysis
+pnpm ─────────────── Package management
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Development server
+pnpm dev
+
+# Build for production
+pnpm build
+```
+
+---
+
+## Deploy
+
+```bash
+# Build image
+docker build -t pivoine-art .
+
+# Run container
+docker run -p 8080:80 pivoine-art
+```
+
+---
+
+## Structure
+
+```
+├── assets/
+│   ├── css/          # Tailwind source
+│   └── js/           # Visualizer · Logo · Main
+├── config/           # Hugo configuration
+├── content/          # Markdown content
+├── layouts/          # Hugo templates
+└── static/           # Compiled assets
+```
+
+---
+
+## Author
+
+**Valknar**
+valknar@pivoine.art
+
+---
+
+## License
+
+All audio content © Valknar. All rights reserved.
+Code: MIT
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -0,0 +1,5 @@
+++
+date = '{{ .Date }}'
+draft = true
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+++
--- a/archetypes/tracks.md
+++ b/archetypes/tracks.md
@@ -0,0 +1,17 @@
+---
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+description: ""
+
+# Audio
+audio: ""
+duration: ""
+
+# Metadata
+artist: "Valknar"
+genre: ""
+
+# Taxonomies
+tags: []
+---
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -0,0 +1,299 @@
+@import "tailwindcss";
+
+@source "../../layouts/_default/*.html";
+@source "../../layouts/partials/*.html";
+@source "../../layouts/partials/head/*.html";
+@source "../../layouts/tracks/*.html";
+
+html {
+  scroll-padding-top: 4rem; /* Account for fixed header height */
+}
+
+:root {
+  /* === SURFACE COLORS (Dark Theme) === */
+  --color-surface-0: #0a0a0a;
+  --color-surface-1: #121212;
+  --color-surface-2: #1a1a1a;
+  --color-surface-3: #232323;
+  --color-surface-4: #2c2c2c;
+
+  /* === TEXT COLORS === */
+  --color-text-primary: #e8e8e8;
+  --color-text-secondary: #888888;
+  --color-text-muted: #555555;
+
+  /* === ACCENT === */
+  --color-accent: #ffffff;
+  --color-accent-dim: #666666;
+  --color-accent-glow: rgba(255, 255, 255, 0.1);
+
+  /* === BORDERS === */
+  --color-border: #2a2a2a;
+
+  /* === TYPOGRAPHY === */
+  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+
+  /* === ANIMATION === */
+  --duration-fast: 150ms;
+  --duration-normal: 300ms;
+  --duration-slow: 500ms;
+  --duration-page: 400ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+
+  /* === SPACING === */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+}
+
+@theme inline {
+  /* Map CSS vars to Tailwind colors */
+  --color-surface-0: var(--color-surface-0);
+  --color-surface-1: var(--color-surface-1);
+  --color-surface-2: var(--color-surface-2);
+  --color-surface-3: var(--color-surface-3);
+  --color-surface-4: var(--color-surface-4);
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-muted: var(--color-text-muted);
+  --color-accent: var(--color-accent);
+  --color-border: var(--color-border);
+
+  /* Font family */
+  --font-family-mono: var(--font-mono);
+
+  /* Z-index */
+  --z-index-sticky: 200;
+  --z-index-visualizer: 5;
+  --z-index-player: 400;
+}
+
+@layer base {
+  html {
+    font-family: var(--font-mono);
+    background: var(--color-surface-0);
+    color: var(--color-text-primary);
+    letter-spacing: 0.02em;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body {
+    min-height: 100vh;
+  }
+
+  ::selection {
+    background: var(--color-accent);
+    color: var(--color-surface-0);
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--color-surface-1);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-surface-3);
+    border-radius: var(--radius-full);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-surface-4);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  a {
+    color: var(--color-text-primary);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--ease-out);
+  }
+  a:hover {
+    color: var(--color-accent);
+  }
+}
+
+@layer components {
+  /* htmx transitions */
+  .htmx-request #main-content {
+    opacity: 0;
+    transform: translateY(8px);
+    transition: all var(--duration-page) var(--ease-out);
+  }
+  .htmx-settling #main-content {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Animations */
+  .fade-in-up {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: all var(--duration-slow) var(--ease-out);
+  }
+  .fade-in-up.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .link-hover {
+    position: relative;
+  }
+  .link-hover::after {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: var(--color-accent);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform var(--duration-normal) var(--ease-out);
+  }
+  .link-hover:hover::after {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+
+  /* Audio Player */
+  .audio-player {
+    background: var(--color-surface-1);
+    border-top: 1px solid var(--color-border);
+  }
+  .audio-player__progress {
+    appearance: none;
+    width: 100%;
+    height: 4px;
+    background: var(--color-surface-3);
+    cursor: pointer;
+  }
+  .audio-player__progress::-webkit-slider-thumb {
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    background: var(--color-accent);
+    border-radius: var(--radius-full);
+  }
+
+  /* Track Card */
+  .track-card {
+    background: rgba(18, 18, 18, 0.6);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--color-border);
+    transition: all var(--duration-normal) var(--ease-out);
+  }
+  .track-card:hover {
+    background: rgba(18, 18, 18, 0.8);
+    border-color: var(--color-surface-4);
+    transform: translateY(-2px);
+  }
+  .track-card__cover {
+    aspect-ratio: 1;
+    object-fit: cover;
+    filter: grayscale(20%);
+    transition: filter var(--duration-normal);
+  }
+  .track-card:hover .track-card__cover {
+    filter: grayscale(0%);
+  }
+
+  /* Prose */
+  .prose {
+    color: var(--color-text-secondary);
+    line-height: 1.75;
+  }
+  .prose h1,
+  .prose h2,
+  .prose h3,
+  .prose h4 {
+    color: var(--color-text-primary);
+    font-weight: 500;
+    margin-top: 2em;
+    margin-bottom: 0.5em;
+  }
+  .prose h1 {
+    font-size: 2rem;
+  }
+  .prose h2 {
+    font-size: 1.5rem;
+  }
+  .prose h3 {
+    font-size: 1.25rem;
+  }
+  .prose p {
+    margin-bottom: 1.25em;
+  }
+  .prose a {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .prose strong {
+    color: var(--color-text-primary);
+    font-weight: 600;
+  }
+  .prose ul,
+  .prose ol {
+    margin-bottom: 1.25em;
+    padding-left: 1.5em;
+  }
+  .prose li {
+    margin-bottom: 0.5em;
+  }
+  .prose code {
+    background: var(--color-surface-2);
+    padding: 0.2em 0.4em;
+    border-radius: var(--radius-sm);
+    font-size: 0.9em;
+  }
+  .prose pre {
+    background: var(--color-surface-1);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 1em;
+    overflow-x: auto;
+    margin: 1.5em 0;
+  }
+  .prose pre code {
+    background: none;
+    padding: 0;
+  }
+}
+
+@layer utilities {
+  .container-narrow {
+    max-width: 48rem;
+    margin-inline: auto;
+    padding-inline: 1.5rem;
+  }
+  .container-wide {
+    max-width: 80rem;
+    margin-inline: auto;
+    padding-inline: 1.5rem;
+  }
+  .z-sticky {
+    z-index: 200;
+  }
+  .z-visualizer {
+    z-index: -1;
+    opacity: 0.25;
+  }
+  .z-player {
+    z-index: 400;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
--- a/assets/js/logo/reactive-logo.js
+++ b/assets/js/logo/reactive-logo.js
@@ -0,0 +1,181 @@
+/**
+ * Reactive Logo
+ * Small WebGL canvas logo that reacts to audio and mouse
+ */
+
+import * as THREE from 'three';
+
+export class ReactiveLogo {
+  constructor(canvas, audioManager) {
+    this.canvas = canvas;
+    this.audioManager = audioManager;
+    this.mouse = { x: 0, y: 0 };
+    this.running = false;
+    this.time = 0;
+
+    if (!canvas) {
+      console.warn('ReactiveLogo: No canvas provided');
+      return;
+    }
+
+    this.init();
+  }
+
+  init() {
+    const size = 32;
+
+    // Scene
+    this.scene = new THREE.Scene();
+
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
+    this.camera.position.z = 3;
+
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
+      alpha: true,
+      antialias: true
+    });
+    this.renderer.setSize(size, size);
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+    // Create logo geometry (simple points in a circular pattern)
+    this.createLogoParticles();
+
+    // Mouse tracking
+    this.canvas.addEventListener('mouseenter', () => this.onMouseEnter());
+    this.canvas.addEventListener('mouseleave', () => this.onMouseLeave());
+    window.addEventListener('mousemove', (e) => this.onMouseMove(e));
+
+    this.start();
+  }
+
+  createLogoParticles() {
+    const count = 50;
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(count * 3);
+    const randoms = new Float32Array(count);
+
+    // Create points in a circular pattern
+    for (let i = 0; i < count; i++) {
+      const angle = (i / count) * Math.PI * 2;
+      const radius = 0.8 + Math.random() * 0.2;
+
+      positions[i * 3] = Math.cos(angle) * radius;
+      positions[i * 3 + 1] = Math.sin(angle) * radius;
+      positions[i * 3 + 2] = (Math.random() - 0.5) * 0.2;
+
+      randoms[i] = Math.random();
+    }
+
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1));
+
+    const material = new THREE.ShaderMaterial({
+      vertexShader: `
+        uniform float uTime;
+        uniform float uAudio;
+        attribute float aRandom;
+
+        void main() {
+          vec3 pos = position;
+
+          // Bouncy pulsing
+          float pulse = 1.0 + sin(uTime * 5.0 + aRandom * 6.28) * 0.15;
+          pulse += sin(uTime * 8.0 + aRandom * 3.14) * 0.1;
+          pos *= pulse;
+
+          // Audio reactivity - bouncy
+          float audioBounce = uAudio * (1.0 + sin(uTime * 10.0) * 0.3);
+          pos *= 1.0 + audioBounce * 0.6;
+
+          vec4 mvPos = modelViewMatrix * vec4(pos, 1.0);
+          gl_PointSize = 3.0 * (1.0 + uAudio * 0.8);
+          gl_Position = projectionMatrix * mvPos;
+        }
+      `,
+      fragmentShader: `
+        void main() {
+          float dist = length(gl_PointCoord - 0.5);
+          if (dist > 0.5) discard;
+          float alpha = 1.0 - smoothstep(0.2, 0.5, dist);
+          gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
+        }
+      `,
+      uniforms: {
+        uTime: { value: 0 },
+        uAudio: { value: 0 }
+      },
+      transparent: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    });
+
+    this.logoMesh = new THREE.Points(geometry, material);
+    this.scene.add(this.logoMesh);
+  }
+
+  onMouseEnter() {
+    this.isHovered = true;
+  }
+
+  onMouseLeave() {
+    this.isHovered = false;
+  }
+
+  onMouseMove(e) {
+    if (!this.isHovered) return;
+    const rect = this.canvas.getBoundingClientRect();
+    this.mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+    this.mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+  }
+
+  start() {
+    if (this.running) return;
+    this.running = true;
+    this.animate();
+  }
+
+  pause() {
+    this.running = false;
+  }
+
+  animate() {
+    if (!this.running) return;
+    requestAnimationFrame(() => this.animate());
+
+    this.time += 0.016;
+
+    // Get audio level
+    let audioLevel = 0;
+    if (this.audioManager?.isInitialized) {
+      const bands = this.audioManager.getFrequencyBands();
+      audioLevel = (bands.low + bands.mid + bands.high) / 3;
+    }
+
+    // Update uniforms
+    if (this.logoMesh?.material?.uniforms) {
+      this.logoMesh.material.uniforms.uTime.value = this.time;
+      this.logoMesh.material.uniforms.uAudio.value = audioLevel;
+    }
+
+    // Rotate based on mouse
+    if (this.logoMesh) {
+      this.logoMesh.rotation.x += (this.mouse.y * 0.5 - this.logoMesh.rotation.x) * 0.1;
+      this.logoMesh.rotation.y += (this.mouse.x * 0.5 - this.logoMesh.rotation.y) * 0.1;
+      this.logoMesh.rotation.z = this.time * 0.2;
+    }
+
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  destroy() {
+    this.running = false;
+    this.logoMesh?.geometry?.dispose();
+    this.logoMesh?.material?.dispose();
+    this.renderer?.dispose();
+  }
+}
+
+export default ReactiveLogo;
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1,257 @@
+/**
+ * Pivoine.art - Main JavaScript
+ * Audio blog with WebGL visualizers
+ */
+
+import { Visualizer } from './visualizer/scene.js';
+import { ReactiveLogo } from './logo/reactive-logo.js';
+
+// Audio Manager - Web Audio API wrapper
+class AudioManager {
+  constructor() {
+    this.audio = document.createElement('audio');
+    this.audio.crossOrigin = 'anonymous';
+    this.audioContext = null;
+    this.analyser = null;
+    this.source = null;
+    this.frequencyData = null;
+    this.isInitialized = false;
+  }
+
+  async init() {
+    if (this.isInitialized) return;
+
+    try {
+      this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      this.analyser = this.audioContext.createAnalyser();
+      this.analyser.fftSize = 512;
+      this.analyser.smoothingTimeConstant = 0.8;
+
+      this.source = this.audioContext.createMediaElementSource(this.audio);
+      this.source.connect(this.analyser);
+      this.analyser.connect(this.audioContext.destination);
+
+      this.frequencyData = new Uint8Array(this.analyser.frequencyBinCount);
+      this.isInitialized = true;
+
+      // Update Alpine store on audio events
+      this.audio.addEventListener('timeupdate', () => {
+        if (window.Alpine) {
+          Alpine.store('audio').progress = this.audio.currentTime;
+          Alpine.store('audio').duration = this.audio.duration || 0;
+        }
+      });
+
+      this.audio.addEventListener('ended', () => {
+        if (window.Alpine) {
+          Alpine.store('audio').isPlaying = false;
+        }
+      });
+
+      this.audio.addEventListener('play', () => {
+        if (window.Alpine) {
+          Alpine.store('audio').isPlaying = true;
+        }
+      });
+
+      this.audio.addEventListener('pause', () => {
+        if (window.Alpine) {
+          Alpine.store('audio').isPlaying = false;
+        }
+      });
+    } catch (e) {
+      console.error('Failed to initialize audio context:', e);
+    }
+  }
+
+  async play(url) {
+    await this.init();
+
+    if (this.audioContext?.state === 'suspended') {
+      await this.audioContext.resume();
+    }
+
+    if (url && url !== this.audio.src) {
+      this.audio.src = url;
+    }
+
+    await this.audio.play();
+  }
+
+  pause() {
+    this.audio.pause();
+  }
+
+  toggle() {
+    if (this.audio.paused) {
+      this.audio.play();
+    } else {
+      this.audio.pause();
+    }
+  }
+
+  seek(time) {
+    this.audio.currentTime = time;
+  }
+
+  setVolume(v) {
+    this.audio.volume = Math.max(0, Math.min(1, v));
+  }
+
+  getFrequencyData() {
+    if (this.analyser) {
+      this.analyser.getByteFrequencyData(this.frequencyData);
+    }
+    return this.frequencyData;
+  }
+
+  getFrequencyBands() {
+    const data = this.getFrequencyData();
+    if (!data) return { low: 0, mid: 0, high: 0 };
+
+    const len = data.length;
+    const low = this._avg(data, 0, len * 0.1) / 255;
+    const mid = this._avg(data, len * 0.1, len * 0.5) / 255;
+    const high = this._avg(data, len * 0.5, len) / 255;
+    return { low, mid, high };
+  }
+
+  _avg(data, start, end) {
+    let sum = 0;
+    for (let i = Math.floor(start); i < Math.floor(end); i++) {
+      sum += data[i];
+    }
+    return sum / (end - start);
+  }
+}
+
+// Initialize global instances
+if (!window.__pivoine) {
+  const audioManager = new AudioManager();
+
+  window.__pivoine = {
+    audioManager,
+    visualizer: null,
+    logo: null
+  };
+
+  // Initialize WebGL components after DOM is ready
+  const initWebGL = () => {
+    // Main visualizer (fullscreen background)
+    const visualizerCanvas = document.getElementById('visualizer');
+    if (visualizerCanvas && !window.__pivoine.visualizer) {
+      window.__pivoine.visualizer = new Visualizer(visualizerCanvas, audioManager);
+    }
+
+    // Logo in header
+    const logoCanvas = document.getElementById('logo-canvas');
+    if (logoCanvas && !window.__pivoine.logo) {
+      window.__pivoine.logo = new ReactiveLogo(logoCanvas, audioManager);
+    }
+  };
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initWebGL);
+  } else {
+    initWebGL();
+  }
+}
+
+// Alpine.js initialization
+document.addEventListener('alpine:init', () => {
+  // Global audio store
+  Alpine.store('audio', {
+    currentTrack: null,
+    isPlaying: false,
+    progress: 0,
+    duration: 0,
+    volume: 0.8
+  });
+
+  // Main app component
+  Alpine.data('app', () => ({
+    init() {
+      // Restore volume from localStorage
+      const savedVolume = localStorage.getItem('pivoine-volume');
+      if (savedVolume) {
+        Alpine.store('audio').volume = parseFloat(savedVolume);
+        window.__pivoine.audioManager.setVolume(parseFloat(savedVolume));
+      }
+    }
+  }));
+
+  // 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
+  }));
+});
+
+// htmx lifecycle hooks
+document.body.addEventListener('htmx:beforeSwap', () => {
+  // Pause visualizer during page transition for performance
+  window.__pivoine?.visualizer?.pause();
+});
+
+document.body.addEventListener('htmx:afterSwap', () => {
+  // Resume visualizer after swap
+  window.__pivoine?.visualizer?.resume();
+  // Re-initialize scroll animations
+  window.dispatchEvent(new CustomEvent('page:loaded'));
+});
+
+// Scroll animations with Intersection Observer
+function initScrollAnimations() {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+        }
+      });
+    },
+    { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
+  );
+
+  document.querySelectorAll('.fade-in-up').forEach((el) => {
+    observer.observe(el);
+  });
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', initScrollAnimations);
+window.addEventListener('page:loaded', initScrollAnimations);
+
+export { AudioManager };
--- a/assets/js/visualizer/particles.js
+++ b/assets/js/visualizer/particles.js
@@ -0,0 +1,145 @@
+/**
+ * Particle System
+ * Audio-reactive 3D particle cloud
+ */
+
+import * as THREE from 'three';
+
+// Vertex Shader
+const vertexShader = `
+uniform float uTime;
+uniform float uLow;
+uniform float uMid;
+uniform float uHigh;
+uniform float uSize;
+
+attribute float aRandom;
+attribute float aScale;
+
+varying float vAlpha;
+
+void main() {
+  vec3 pos = position;
+
+  // Base rotation
+  float angle = uTime * 0.2;
+  mat3 rotation = mat3(
+    cos(angle), 0.0, sin(angle),
+    0.0, 1.0, 0.0,
+    -sin(angle), 0.0, cos(angle)
+  );
+  pos = rotation * pos;
+
+  // Bass affects scale/expansion
+  float bassScale = 1.0 + uLow * 0.4;
+  pos *= bassScale;
+
+  // Mid frequencies create wave motion
+  float wave = sin(pos.x * 0.1 + uTime * 2.0) * uMid * 8.0;
+  pos.y += wave * aRandom;
+
+  // High frequencies add jitter/sparkle
+  vec3 jitter = normalize(pos) * uHigh * aRandom * 5.0;
+  pos += jitter;
+
+  // Calculate view position
+  vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+
+  // Point size with perspective
+  float size = uSize * aScale;
+  size *= (1.0 + uLow * 0.5); // Pulse with bass
+  gl_PointSize = size * (300.0 / -mvPosition.z);
+
+  // Alpha based on distance and audio
+  vAlpha = 0.6 + uLow * 0.3;
+
+  gl_Position = projectionMatrix * mvPosition;
+}
+`;
+
+// Fragment Shader
+const fragmentShader = `
+varying float vAlpha;
+
+void main() {
+  // Circular point with soft edge
+  float dist = length(gl_PointCoord - vec2(0.5));
+  if (dist > 0.5) discard;
+
+  float alpha = 1.0 - smoothstep(0.2, 0.5, dist);
+  alpha *= vAlpha;
+
+  // Pure white color for minimal aesthetic
+  gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
+}
+`;
+
+export class ParticleSystem {
+  constructor(count = 5000) {
+    this.count = count;
+    this.createGeometry();
+    this.createMaterial();
+    this.mesh = new THREE.Points(this.geometry, this.material);
+  }
+
+  createGeometry() {
+    this.geometry = new THREE.BufferGeometry();
+
+    const positions = new Float32Array(this.count * 3);
+    const randoms = new Float32Array(this.count);
+    const scales = new Float32Array(this.count);
+
+    for (let i = 0; i < this.count; i++) {
+      const i3 = i * 3;
+
+      // Spherical distribution
+      const radius = 20 + Math.random() * 30;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+
+      positions[i3] = radius * Math.sin(phi) * Math.cos(theta);
+      positions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
+      positions[i3 + 2] = radius * Math.cos(phi);
+
+      randoms[i] = Math.random();
+      scales[i] = 0.5 + Math.random() * 1.5;
+    }
+
+    this.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    this.geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1));
+    this.geometry.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));
+  }
+
+  createMaterial() {
+    this.material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        uTime: { value: 0 },
+        uLow: { value: 0 },
+        uMid: { value: 0 },
+        uHigh: { value: 0 },
+        uSize: { value: 2.0 }
+      },
+      transparent: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    });
+  }
+
+  update(bands, time) {
+    if (!this.material) return;
+
+    this.material.uniforms.uTime.value = time;
+    this.material.uniforms.uLow.value = bands.low || 0;
+    this.material.uniforms.uMid.value = bands.mid || 0;
+    this.material.uniforms.uHigh.value = bands.high || 0;
+  }
+
+  dispose() {
+    this.geometry?.dispose();
+    this.material?.dispose();
+  }
+}
+
+export default ParticleSystem;
--- a/assets/js/visualizer/scene.js
+++ b/assets/js/visualizer/scene.js
@@ -0,0 +1,110 @@
+/**
+ * WebGL Visualizer Scene
+ * Three.js particle system that reacts to audio frequency data
+ */
+
+import * as THREE from 'three';
+import { ParticleSystem } from './particles.js';
+
+export class Visualizer {
+  constructor(canvas, audioManager) {
+    this.canvas = canvas;
+    this.audioManager = audioManager;
+    this.running = false;
+    this.time = 0;
+
+    if (!canvas) {
+      console.warn('Visualizer: No canvas provided');
+      return;
+    }
+
+    this.init();
+  }
+
+  init() {
+    // Scene setup
+    this.scene = new THREE.Scene();
+
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    this.camera.position.z = 50;
+
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
+      alpha: true,
+      antialias: true,
+      powerPreference: 'high-performance'
+    });
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+    // Particles
+    this.particles = new ParticleSystem(5000);
+    this.scene.add(this.particles.mesh);
+
+    // Event listeners
+    window.addEventListener('resize', () => this.resize());
+
+    // Start animation
+    this.start();
+  }
+
+  resize() {
+    if (!this.camera || !this.renderer) return;
+
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+
+  start() {
+    if (this.running) return;
+    this.running = true;
+    this.animate();
+  }
+
+  pause() {
+    this.running = false;
+  }
+
+  resume() {
+    this.start();
+  }
+
+  animate() {
+    if (!this.running) return;
+    requestAnimationFrame(() => this.animate());
+
+    this.time += 0.01;
+
+    // Get audio frequency bands
+    let bands = { low: 0, mid: 0, high: 0 };
+    if (this.audioManager?.isInitialized) {
+      bands = this.audioManager.getFrequencyBands();
+    }
+
+    // Update particles with audio data
+    this.particles.update(bands, this.time);
+
+    // Subtle camera movement
+    this.camera.position.x = Math.sin(this.time * 0.1) * 3;
+    this.camera.position.y = Math.cos(this.time * 0.15) * 2;
+    this.camera.lookAt(0, 0, 0);
+
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  destroy() {
+    this.running = false;
+    this.particles?.dispose();
+    this.renderer?.dispose();
+  }
+}
+
+export default Visualizer;
--- a/assets/jsconfig.json
+++ b/assets/jsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}
--- a/config/_default/hugo.toml
+++ b/config/_default/hugo.toml
@@ -0,0 +1,29 @@
+baseURL = "https://pivoine.art/"
+languageCode = "en-us"
+title = "Valknar's"
+
+[permalinks]
+  tracks = "/tracks/:slug/"
+
+[taxonomies]
+  tag = "tags"
+  genre = "genres"
+
+[outputs]
+  home = ["HTML", "RSS"]
+  section = ["HTML", "RSS"]
+
+[sitemap]
+  changefreq = "weekly"
+  priority = 0.5
+
+[markup.goldmark.renderer]
+  unsafe = true
+
+[build]
+  writeStats = true
+
+[module]
+  [module.hugoVersion]
+    extended = false
+    min = "0.128.0"
--- a/config/_default/menus.toml
+++ b/config/_default/menus.toml
@@ -0,0 +1,14 @@
+[[main]]
+  name = "Tracks"
+  url = "/tracks/"
+  weight = 10
+
+[[main]]
+  name = "About"
+  url = "/about/"
+  weight = 20
+
+[[main]]
+  name = "Imprint"
+  url = "/imprint/"
+  weight = 30
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -0,0 +1,16 @@
+description = "Valknar's audio"
+author = "Valknar"
+email = "valknar@pivoine.art"
+
+[jellyfin]
+  baseURL = "https://jellyfin.media.pivoine.art"
+  # API key via environment variable: HUGO_PARAMS_JELLYFIN_APIKEY
+
+[umami]
+  enabled = true
+  websiteID = ""  # Set your Umami website ID
+  src = ""        # Your Umami instance URL
+
+[visualizer]
+  particleCount = 5000
+  fftSize = 512
--- a/config/development/hugo.toml
+++ b/config/development/hugo.toml
@@ -0,0 +1,4 @@
+baseURL = "http://localhost:1313/"
+
+[params.umami]
+  enabled = false
--- a/config/production/hugo.toml
+++ b/config/production/hugo.toml
@@ -0,0 +1,7 @@
+baseURL = "https://pivoine.art/"
+
+[minify]
+  minifyOutput = true
+
+[params.umami]
+  enabled = true
--- a/content/_index.md
+++ b/content/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Valknar's"
+description: "Valknar's audio"
+---
--- a/content/about.md
+++ b/content/about.md
@@ -0,0 +1,21 @@
+---
+title: "About"
+description: "About Valknar and his music"
+---
+
+## About Valknar
+
+Technology and sound, creating massive beats to push the boundaries of audio perception.
+
+### Equipment
+
+Debian GNU/Linux 13, KDE-Plasma 6 on Wayland, 16 × AMD Ryzen 7 8745HS, AI
+
+### Dedication
+
+The love of my life, Palina.
+
+### Contact
+
+For collaborations, licensing, or just to say hello:
+**valknar@pivoine.art**
--- a/content/imprint.md
+++ b/content/imprint.md
@@ -0,0 +1,20 @@
+---
+title: "Imprint"
+description: "Legal information and imprint"
+---
+
+## Imprint
+
+**Responsible for content:**
+
+[Valknar](mailto:valknar@pivoine.art)
+
+## Privacy
+
+This website uses [Umami](https://umami.is) for privacy-respecting analytics. No personal data is collected or shared with third parties.
+
+## Copyright
+
+All audio content on this site is created by Valknar unless otherwise noted. All rights reserved.
+
+For licensing inquiries, please contact valknar@pivoine.art.
--- a/content/tracks/_index.md
+++ b/content/tracks/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Tracks"
+description: "All audio"
+---
--- a/content/tracks/changed-her-mind-again/cover.png
+++ b/content/tracks/changed-her-mind-again/cover.png
--- a/content/tracks/changed-her-mind-again/index.md
+++ b/content/tracks/changed-her-mind-again/index.md
@@ -0,0 +1,17 @@
+---
+title: "Changed Her Mind Again"
+date: 2025-09-10
+draft: false
+description: "Again..."
+
+audio: "https://jellyfin.media.pivoine.art/Items/ebd4e9f45b9dda1cada560af5e6cb7a8/Download?api_key=64d0a008577f49a4aa276d4bbe5c5d60"
+duration: "4:07"
+
+artist: "Valknar"
+genre: "Breakbeat"
+
+tags:
+  - blues
+  - rock
+  - dope
+---
--- a/content/tracks/changed-her-mind-again/preview.mp4
+++ b/content/tracks/changed-her-mind-again/preview.mp4
--- a/content/tracks/shadow/cover.png
+++ b/content/tracks/shadow/cover.png
--- a/content/tracks/shadow/index.md
+++ b/content/tracks/shadow/index.md
@@ -0,0 +1,17 @@
+---
+title: "Shadow"
+date: 2025-11-06
+draft: false
+description: "In my shadow"
+
+audio: "https://jellyfin.media.pivoine.art/Items/aada4e4ac0320e258595976a9edb6a09/Download?api_key=53d58826a49b4026a815d13db5e38ff7"
+duration: "3:26"
+
+artist: "Valknar"
+genre: "Dubstep"
+
+tags:
+  - dark
+  - dope
+  - ghetto
+---
--- a/content/tracks/shadow/preview.mp4
+++ b/content/tracks/shadow/preview.mp4
--- a/content/tracks/the-end-of-all/cover.png
+++ b/content/tracks/the-end-of-all/cover.png
--- a/content/tracks/the-end-of-all/index.md
+++ b/content/tracks/the-end-of-all/index.md
@@ -0,0 +1,17 @@
+---
+title: "The End Of All"
+date: 2025-11-16
+draft: false
+description: "The end of all is just the beginning"
+
+audio: "https://jellyfin.media.pivoine.art/Items/60d39ab0aad880627e8fb85cf1ee7b40/Download?api_key=64d0a008577f49a4aa276d4bbe5c5d60"
+duration: "4:35"
+
+artist: "Valknar"
+genre: "Drum'n'Bass"
+
+tags:
+  - dark
+  - deep
+  - soul
+---
--- a/content/tracks/the-end-of-all/preview.mp4
+++ b/content/tracks/the-end-of-all/preview.mp4
--- a/content/tracks/the-moon/cover.png
+++ b/content/tracks/the-moon/cover.png
--- a/content/tracks/the-moon/index.md
+++ b/content/tracks/the-moon/index.md
@@ -0,0 +1,17 @@
+---
+title: "The Moon"
+date: 2025-08-19
+draft: false
+description: "Because we are the last"
+
+audio: "https://jellyfin.media.pivoine.art/Items/d91333f9c7c4d8251174c86a81588cbd/Download?api_key=64d0a008577f49a4aa276d4bbe5c5d60"
+duration: "3:44"
+
+artist: "Valknar"
+genre: "Drum'n'Bass"
+
+tags:
+  - dark
+  - deep
+  - soul
+---
--- a/content/tracks/the-moon/preview.mp4
+++ b/content/tracks/the-moon/preview.mp4
--- 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 }}
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,48 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml application/json application/rss+xml image/svg+xml;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # Static assets with long cache
+    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot|webp|mp3|mp4|webm|ogg)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        access_log off;
+    }
+
+    # HTML files - no cache for fresh content
+    location ~* \.html$ {
+        expires -1;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    # Clean URLs - try files, then directories, then fallback to index.html
+    location / {
+        try_files $uri $uri/ $uri.html /index.html;
+    }
+
+    # RSS feed
+    location = /index.xml {
+        types { application/rss+xml xml; }
+    }
+
+    # Deny access to hidden files
+    location ~ /\. {
+        deny all;
+        access_log off;
+        log_not_found off;
+    }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "pivoine.art",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "Valknar's Pivoine.Art",
+  "scripts": {
+    "css": "postcss assets/css/main.css -o static/css/main.css",
+    "css:watch": "postcss assets/css/main.css -o static/css/main.css --watch",
+    "dev": "pnpm css && hugo server -D",
+    "build": "NODE_ENV=production pnpm css && hugo --minify"
+  },
+  "dependencies": {
+    "three": "^0.170.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.0.0-beta.9",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^4.0.0-beta.9"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+}
--- a/static/css/main.css
+++ b/static/css/main.css
--- a/static/favicon/apple-touch-icon.png
+++ b/static/favicon/apple-touch-icon.png
--- a/static/favicon/favicon-96x96.png
+++ b/static/favicon/favicon-96x96.png
--- a/static/favicon/favicon.ico
+++ b/static/favicon/favicon.ico
--- a/static/favicon/favicon.svg
+++ b/static/favicon/favicon.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <!-- Logo: dots arranged in a ring with larger sizes -->
+  <g fill="#e8e8e8">
+    <!-- Outer ring - larger dots -->
+    <circle cx="50" cy="10" r="4"></circle>
+    <circle cx="62" cy="11" r="3"></circle>
+    <circle cx="73" cy="16" r="3.5"></circle>
+    <circle cx="82" cy="24" r="2.5"></circle>
+    <circle cx="88" cy="35" r="3.2"></circle>
+    <circle cx="90" cy="47" r="3"></circle>
+    <circle cx="89" cy="59" r="3.8"></circle>
+    <circle cx="84" cy="70" r="2.6"></circle>
+    <circle cx="76" cy="79" r="3.2"></circle>
+    <circle cx="65" cy="86" r="3"></circle>
+    <circle cx="52" cy="90" r="3.5"></circle>
+    <circle cx="39" cy="88" r="2.5"></circle>
+    <circle cx="27" cy="82" r="3.2"></circle>
+    <circle cx="18" cy="73" r="3"></circle>
+    <circle cx="12" cy="62" r="3.8"></circle>
+    <circle cx="10" cy="49" r="2.6"></circle>
+    <circle cx="12" cy="36" r="3.2"></circle>
+    <circle cx="18" cy="25" r="3"></circle>
+    <circle cx="28" cy="16" r="3.5"></circle>
+    <circle cx="40" cy="11" r="2.5"></circle>
+
+    <!-- Middle ring - medium dots -->
+    <circle cx="50" cy="18" r="2.5"></circle>
+    <circle cx="60" cy="20" r="2"></circle>
+    <circle cx="69" cy="26" r="2.6"></circle>
+    <circle cx="76" cy="34" r="2.2"></circle>
+    <circle cx="80" cy="44" r="2.5"></circle>
+    <circle cx="81" cy="55" r="2"></circle>
+    <circle cx="78" cy="65" r="2.6"></circle>
+    <circle cx="72" cy="73" r="2.2"></circle>
+    <circle cx="63" cy="79" r="2.5"></circle>
+    <circle cx="52" cy="82" r="2"></circle>
+    <circle cx="41" cy="80" r="2.6"></circle>
+    <circle cx="31" cy="75" r="2.2"></circle>
+    <circle cx="24" cy="66" r="2.5"></circle>
+    <circle cx="20" cy="56" r="2"></circle>
+    <circle cx="20" cy="45" r="2.6"></circle>
+    <circle cx="23" cy="35" r="2.2"></circle>
+    <circle cx="30" cy="26" r="2.5"></circle>
+    <circle cx="40" cy="20" r="2"></circle>
+
+    <!-- Inner scattered dots - small -->
+    <circle cx="55" cy="25" r="1.8"></circle>
+    <circle cx="65" cy="32" r="1.5"></circle>
+    <circle cx="72" cy="42" r="1.9"></circle>
+    <circle cx="73" cy="54" r="1.6"></circle>
+    <circle cx="68" cy="64" r="1.8"></circle>
+    <circle cx="60" cy="72" r="1.5"></circle>
+    <circle cx="48" cy="75" r="1.9"></circle>
+    <circle cx="37" cy="71" r="1.6"></circle>
+    <circle cx="30" cy="63" r="1.8"></circle>
+    <circle cx="27" cy="52" r="1.5"></circle>
+    <circle cx="28" cy="41" r="1.9"></circle>
+    <circle cx="34" cy="32" r="1.6"></circle>
+    <circle cx="44" cy="26" r="1.8"></circle>
+  </g>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: contrast(1) brightness(0.6); } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
--- a/static/favicon/site.webmanifest
+++ b/static/favicon/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "Valknar's Pivoine.Art",
+  "short_name": "Valknar's",
+  "icons": [
+    {
+      "src": "/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#0a0a0a",
+  "background_color": "#0a0a0a",
+  "display": "standalone"
+}
--- a/static/favicon/web-app-manifest-192x192.png
+++ b/static/favicon/web-app-manifest-192x192.png
--- a/static/favicon/web-app-manifest-512x512.png
+++ b/static/favicon/web-app-manifest-512x512.png
--- a/static/icon-large.svg
+++ b/static/icon-large.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <!-- Logo: dots arranged in a ring with larger sizes -->
+  <g fill="#e8e8e8">
+    <!-- Outer ring - larger dots -->
+    <circle cx="50" cy="10" r="4"/>
+    <circle cx="62" cy="11" r="3"/>
+    <circle cx="73" cy="16" r="3.5"/>
+    <circle cx="82" cy="24" r="2.5"/>
+    <circle cx="88" cy="35" r="3.2"/>
+    <circle cx="90" cy="47" r="3"/>
+    <circle cx="89" cy="59" r="3.8"/>
+    <circle cx="84" cy="70" r="2.6"/>
+    <circle cx="76" cy="79" r="3.2"/>
+    <circle cx="65" cy="86" r="3"/>
+    <circle cx="52" cy="90" r="3.5"/>
+    <circle cx="39" cy="88" r="2.5"/>
+    <circle cx="27" cy="82" r="3.2"/>
+    <circle cx="18" cy="73" r="3"/>
+    <circle cx="12" cy="62" r="3.8"/>
+    <circle cx="10" cy="49" r="2.6"/>
+    <circle cx="12" cy="36" r="3.2"/>
+    <circle cx="18" cy="25" r="3"/>
+    <circle cx="28" cy="16" r="3.5"/>
+    <circle cx="40" cy="11" r="2.5"/>
+
+    <!-- Middle ring - medium dots -->
+    <circle cx="50" cy="18" r="2.5"/>
+    <circle cx="60" cy="20" r="2"/>
+    <circle cx="69" cy="26" r="2.6"/>
+    <circle cx="76" cy="34" r="2.2"/>
+    <circle cx="80" cy="44" r="2.5"/>
+    <circle cx="81" cy="55" r="2"/>
+    <circle cx="78" cy="65" r="2.6"/>
+    <circle cx="72" cy="73" r="2.2"/>
+    <circle cx="63" cy="79" r="2.5"/>
+    <circle cx="52" cy="82" r="2"/>
+    <circle cx="41" cy="80" r="2.6"/>
+    <circle cx="31" cy="75" r="2.2"/>
+    <circle cx="24" cy="66" r="2.5"/>
+    <circle cx="20" cy="56" r="2"/>
+    <circle cx="20" cy="45" r="2.6"/>
+    <circle cx="23" cy="35" r="2.2"/>
+    <circle cx="30" cy="26" r="2.5"/>
+    <circle cx="40" cy="20" r="2"/>
+
+    <!-- Inner scattered dots - small -->
+    <circle cx="55" cy="25" r="1.8"/>
+    <circle cx="65" cy="32" r="1.5"/>
+    <circle cx="72" cy="42" r="1.9"/>
+    <circle cx="73" cy="54" r="1.6"/>
+    <circle cx="68" cy="64" r="1.8"/>
+    <circle cx="60" cy="72" r="1.5"/>
+    <circle cx="48" cy="75" r="1.9"/>
+    <circle cx="37" cy="71" r="1.6"/>
+    <circle cx="30" cy="63" r="1.8"/>
+    <circle cx="27" cy="52" r="1.5"/>
+    <circle cx="28" cy="41" r="1.9"/>
+    <circle cx="34" cy="32" r="1.6"/>
+    <circle cx="44" cy="26" r="1.8"/>
+  </g>
+</svg>
--- a/static/icon.svg
+++ b/static/icon.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <!-- Logo: dots arranged in a ring with varying sizes -->
+  <g fill="#e8e8e8">
+    <!-- Outer ring - larger dots -->
+    <circle cx="50" cy="10" r="2.5"/>
+    <circle cx="62" cy="11" r="1.8"/>
+    <circle cx="73" cy="16" r="2.2"/>
+    <circle cx="82" cy="24" r="1.5"/>
+    <circle cx="88" cy="35" r="2"/>
+    <circle cx="90" cy="47" r="1.8"/>
+    <circle cx="89" cy="59" r="2.3"/>
+    <circle cx="84" cy="70" r="1.6"/>
+    <circle cx="76" cy="79" r="2"/>
+    <circle cx="65" cy="86" r="1.8"/>
+    <circle cx="52" cy="90" r="2.2"/>
+    <circle cx="39" cy="88" r="1.5"/>
+    <circle cx="27" cy="82" r="2"/>
+    <circle cx="18" cy="73" r="1.8"/>
+    <circle cx="12" cy="62" r="2.3"/>
+    <circle cx="10" cy="49" r="1.6"/>
+    <circle cx="12" cy="36" r="2"/>
+    <circle cx="18" cy="25" r="1.8"/>
+    <circle cx="28" cy="16" r="2.2"/>
+    <circle cx="40" cy="11" r="1.5"/>
+
+    <!-- Middle ring - medium dots -->
+    <circle cx="50" cy="18" r="1.5"/>
+    <circle cx="60" cy="20" r="1.2"/>
+    <circle cx="69" cy="26" r="1.6"/>
+    <circle cx="76" cy="34" r="1.3"/>
+    <circle cx="80" cy="44" r="1.5"/>
+    <circle cx="81" cy="55" r="1.2"/>
+    <circle cx="78" cy="65" r="1.6"/>
+    <circle cx="72" cy="73" r="1.3"/>
+    <circle cx="63" cy="79" r="1.5"/>
+    <circle cx="52" cy="82" r="1.2"/>
+    <circle cx="41" cy="80" r="1.6"/>
+    <circle cx="31" cy="75" r="1.3"/>
+    <circle cx="24" cy="66" r="1.5"/>
+    <circle cx="20" cy="56" r="1.2"/>
+    <circle cx="20" cy="45" r="1.6"/>
+    <circle cx="23" cy="35" r="1.3"/>
+    <circle cx="30" cy="26" r="1.5"/>
+    <circle cx="40" cy="20" r="1.2"/>
+
+    <!-- Inner scattered dots - small -->
+    <circle cx="55" cy="25" r="1"/>
+    <circle cx="65" cy="32" r="0.8"/>
+    <circle cx="72" cy="42" r="1.1"/>
+    <circle cx="73" cy="54" r="0.9"/>
+    <circle cx="68" cy="64" r="1"/>
+    <circle cx="60" cy="72" r="0.8"/>
+    <circle cx="48" cy="75" r="1.1"/>
+    <circle cx="37" cy="71" r="0.9"/>
+    <circle cx="30" cy="63" r="1"/>
+    <circle cx="27" cy="52" r="0.8"/>
+    <circle cx="28" cy="41" r="1.1"/>
+    <circle cx="34" cy="32" r="0.9"/>
+    <circle cx="44" cy="26" r="1"/>
+  </g>
+</svg>