Initial commit
This commit is contained in:
21
.claude/settings.local.json
Normal file
21
.claude/settings.local.json
Normal file
@@ -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": []
|
||||||
|
}
|
||||||
|
}
|
||||||
28
.dockerignore
Normal file
28
.dockerignore
Normal file
@@ -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
|
||||||
32
.gitignore
vendored
Normal file
32
.gitignore
vendored
Normal file
@@ -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/
|
||||||
33
Dockerfile
Normal file
33
Dockerfile
Normal file
@@ -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;"]
|
||||||
108
README.md
Normal file
108
README.md
Normal file
@@ -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
|
||||||
5
archetypes/default.md
Normal file
5
archetypes/default.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
+++
|
||||||
|
date = '{{ .Date }}'
|
||||||
|
draft = true
|
||||||
|
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
|
||||||
|
+++
|
||||||
17
archetypes/tracks.md
Normal file
17
archetypes/tracks.md
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
title: "{{ replace .File.ContentBaseName "-" " " | title }}"
|
||||||
|
date: {{ .Date }}
|
||||||
|
draft: true
|
||||||
|
description: ""
|
||||||
|
|
||||||
|
# Audio
|
||||||
|
audio: ""
|
||||||
|
duration: ""
|
||||||
|
|
||||||
|
# Metadata
|
||||||
|
artist: "Valknar"
|
||||||
|
genre: ""
|
||||||
|
|
||||||
|
# Taxonomies
|
||||||
|
tags: []
|
||||||
|
---
|
||||||
299
assets/css/main.css
Normal file
299
assets/css/main.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
181
assets/js/logo/reactive-logo.js
Normal file
181
assets/js/logo/reactive-logo.js
Normal file
@@ -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;
|
||||||
257
assets/js/main.js
Normal file
257
assets/js/main.js
Normal file
@@ -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 };
|
||||||
145
assets/js/visualizer/particles.js
Normal file
145
assets/js/visualizer/particles.js
Normal file
@@ -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;
|
||||||
110
assets/js/visualizer/scene.js
Normal file
110
assets/js/visualizer/scene.js
Normal file
@@ -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;
|
||||||
10
assets/jsconfig.json
Normal file
10
assets/jsconfig.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"*": [
|
||||||
|
"*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
29
config/_default/hugo.toml
Normal file
29
config/_default/hugo.toml
Normal file
@@ -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"
|
||||||
14
config/_default/menus.toml
Normal file
14
config/_default/menus.toml
Normal file
@@ -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
|
||||||
16
config/_default/params.toml
Normal file
16
config/_default/params.toml
Normal file
@@ -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
|
||||||
4
config/development/hugo.toml
Normal file
4
config/development/hugo.toml
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
baseURL = "http://localhost:1313/"
|
||||||
|
|
||||||
|
[params.umami]
|
||||||
|
enabled = false
|
||||||
7
config/production/hugo.toml
Normal file
7
config/production/hugo.toml
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
baseURL = "https://pivoine.art/"
|
||||||
|
|
||||||
|
[minify]
|
||||||
|
minifyOutput = true
|
||||||
|
|
||||||
|
[params.umami]
|
||||||
|
enabled = true
|
||||||
4
content/_index.md
Normal file
4
content/_index.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: "Valknar's"
|
||||||
|
description: "Valknar's audio"
|
||||||
|
---
|
||||||
21
content/about.md
Normal file
21
content/about.md
Normal file
@@ -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**
|
||||||
20
content/imprint.md
Normal file
20
content/imprint.md
Normal file
@@ -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.
|
||||||
4
content/tracks/_index.md
Normal file
4
content/tracks/_index.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: "Tracks"
|
||||||
|
description: "All audio"
|
||||||
|
---
|
||||||
BIN
content/tracks/changed-her-mind-again/cover.png
Normal file
BIN
content/tracks/changed-her-mind-again/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
17
content/tracks/changed-her-mind-again/index.md
Normal file
17
content/tracks/changed-her-mind-again/index.md
Normal file
@@ -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
|
||||||
|
---
|
||||||
BIN
content/tracks/changed-her-mind-again/preview.mp4
Normal file
BIN
content/tracks/changed-her-mind-again/preview.mp4
Normal file
Binary file not shown.
BIN
content/tracks/shadow/cover.png
Normal file
BIN
content/tracks/shadow/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
17
content/tracks/shadow/index.md
Normal file
17
content/tracks/shadow/index.md
Normal file
@@ -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
|
||||||
|
---
|
||||||
BIN
content/tracks/shadow/preview.mp4
Normal file
BIN
content/tracks/shadow/preview.mp4
Normal file
Binary file not shown.
BIN
content/tracks/the-end-of-all/cover.png
Normal file
BIN
content/tracks/the-end-of-all/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
17
content/tracks/the-end-of-all/index.md
Normal file
17
content/tracks/the-end-of-all/index.md
Normal file
@@ -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
|
||||||
|
---
|
||||||
BIN
content/tracks/the-end-of-all/preview.mp4
Normal file
BIN
content/tracks/the-end-of-all/preview.mp4
Normal file
Binary file not shown.
BIN
content/tracks/the-moon/cover.png
Normal file
BIN
content/tracks/the-moon/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
17
content/tracks/the-moon/index.md
Normal file
17
content/tracks/the-moon/index.md
Normal file
@@ -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
|
||||||
|
---
|
||||||
BIN
content/tracks/the-moon/preview.mp4
Normal file
BIN
content/tracks/the-moon/preview.mp4
Normal file
Binary file not shown.
138
layouts/_default/baseof.html
Executable file
138
layouts/_default/baseof.html
Executable file
@@ -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>
|
||||||
113
layouts/_default/home.html
Executable file
113
layouts/_default/home.html
Executable file
@@ -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 }}
|
||||||
26
layouts/_default/list.html
Executable file
26
layouts/_default/list.html
Executable file
@@ -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 }}
|
||||||
18
layouts/_default/single.html
Executable file
18
layouts/_default/single.html
Executable file
@@ -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 }}
|
||||||
8
layouts/partials/analytics.html
Executable file
8
layouts/partials/analytics.html
Executable file
@@ -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 }}
|
||||||
34
layouts/partials/footer.html
Executable file
34
layouts/partials/footer.html
Executable file
@@ -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">
|
||||||
|
© {{ 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>
|
||||||
15
layouts/partials/head/favicon.html
Normal file
15
layouts/partials/head/favicon.html
Normal file
@@ -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" />
|
||||||
47
layouts/partials/head/json-ld.html
Executable file
47
layouts/partials/head/json-ld.html
Executable file
@@ -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 }}
|
||||||
29
layouts/partials/head/meta.html
Executable file
29
layouts/partials/head/meta.html
Executable file
@@ -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 }}">
|
||||||
30
layouts/partials/head/opengraph.html
Executable file
30
layouts/partials/head/opengraph.html
Executable file
@@ -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 }}
|
||||||
16
layouts/partials/head/preload.html
Executable file
16
layouts/partials/head/preload.html
Executable file
@@ -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 }}
|
||||||
21
layouts/partials/head/twitter.html
Executable file
21
layouts/partials/head/twitter.html
Executable file
@@ -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 }}
|
||||||
44
layouts/partials/header.html
Executable file
44
layouts/partials/header.html
Executable file
@@ -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>
|
||||||
122
layouts/partials/player.html
Executable file
122
layouts/partials/player.html
Executable file
@@ -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>
|
||||||
70
layouts/partials/track-card.html
Executable file
70
layouts/partials/track-card.html
Executable file
@@ -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>
|
||||||
43
layouts/tracks/list.html
Executable file
43
layouts/tracks/list.html
Executable file
@@ -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 }}
|
||||||
138
layouts/tracks/single.html
Executable file
138
layouts/tracks/single.html
Executable file
@@ -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 }}
|
||||||
48
nginx.conf
Normal file
48
nginx.conf
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
package.json
Normal file
23
package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
1011
pnpm-lock.yaml
generated
Normal file
1011
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
'@tailwindcss/postcss': {}
|
||||||
|
}
|
||||||
|
}
|
||||||
1466
static/css/main.css
Normal file
1466
static/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
static/favicon/apple-touch-icon.png
Normal file
BIN
static/favicon/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/favicon/favicon-96x96.png
Normal file
BIN
static/favicon/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/favicon/favicon.ico
Normal file
BIN
static/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
63
static/favicon/favicon.svg
Normal file
63
static/favicon/favicon.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
21
static/favicon/site.webmanifest
Normal file
21
static/favicon/site.webmanifest
Normal file
@@ -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"
|
||||||
|
}
|
||||||
BIN
static/favicon/web-app-manifest-192x192.png
Normal file
BIN
static/favicon/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
static/favicon/web-app-manifest-512x512.png
Normal file
BIN
static/favicon/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
61
static/icon-large.svg
Normal file
61
static/icon-large.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
61
static/icon.svg
Normal file
61
static/icon.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
Reference in New Issue
Block a user