J3ZZ

Architecture

Site Structure

Core Files:

Pages: All page files are located in the _pages/ directory:

The _pages/ directory is configured as a Jekyll collection in _config.yml to organize all site pages in one location.

Layouts:

Collections:

File Naming Conventions:

Portfolio works use a dual naming system for flexible organization:

  1. Filename Date (YYYY-MM-DD-work-slug.md):
    • Use the actual release/creation date of the work
    • Examples: 2026-01-01-vibrotanica.md, 2023-09-22-racines-et-resonances.md
    • Provides chronological organization in the file system
    • Template/placeholder works use 1900-01-01- prefix
  2. Order Field (in front matter):
    • Controls the display position in the portfolio grid
    • Higher numbers appear first (e.g., order: 31 appears before order: 30)
    • Independent of filename date - allows custom sorting

This dual system allows you to:

Example:

# File: _portfolio/2023-04-20-biosonification.md
---
title: "Biosonification"
order: 29  # Displayed after works with order 30+, before works with order 28-
# ... rest of front matter
---

Assets:

Includes:

Main Navigation (appears on all pages):

Works Page Sub-Navigation:

All pages (BIO, BIO GALLERY, WORKS, EVENTS, CONTACT) are optimized for A4 print with professional layouts and automatic QR code generation. Print PDFs are maintained in the docs/ folder.

Universal Print Features (All Pages):

WORKS Page Print Layout:

BIO Page Print Layout:

BIO GALLERY Page Print Layout:

EVENTS Page Print Layout:

CONTACT Page Print Layout:

Print CSS Architecture:

Portfolio System

Collection Configuration (_config.yml):

collections:
  portfolio:
    output: true
    permalink: /works/:name/
    sort_by: order

Portfolio Item Structure: Each file in _portfolio/ follows this format:

---
layout: work
title: Work Title
category: installations|live-acts|releases
image: /assets/img/filename.jpg
order: 1
---
Optional work description content in markdown.

Display Order:

Styling Features

Portfolio Grid:

Individual Work Pages:

Active Navigation States:

Color Scheme

Configuration Variables (_config.yml)

Site Settings:

SEO Configuration:

Analytics:

Social Media:

Newsletter:

SEO Architecture

The site includes comprehensive SEO optimization using the jekyll-seo-tag plugin with custom enhancements.

Jekyll Plugins:

SEO Components:

  1. _includes/seo.html - Main SEO include with:
    • `
Architecture | J3ZZ

` tag from jekyll-seo-tag plugin

  1. Structured Data (Schema.org):
    • Portfolio works automatically get CreativeWork structured data
    • Includes: name, description, image, URL, author, datePublished, dateModified, genre
    • Uses page.metadata.release_date for publication date
    • Uses page.last_modified_at (from jekyll-last-modified-at plugin) for modification date
  2. Open Graph Tags:
    • Standard Open Graph tags for all pages (title, description, image, URL)
    • Enhanced tags for portfolio works:
      • og:type set to “article”
      • article:published_time from release_date
      • article:modified_time from last_modified_at
      • article:author from site author
      • article:section from work category
      • article:tag for each category in multi-category works
  3. robots.txt:
    • Located at site root
    • Allows all crawlers: User-agent: * / Allow: /
    • Declares sitemap location: Sitemap: https://www.j3zz.com/sitemap.xml

SEO Configuration in _config.yml:

author:
  name: J3ZZ
  email: hello@j3zz.com
  twitter: j3zz

social:
  name: J3ZZ
  links:
    - https://bandcamp.com/iamj3zz
    - https://soundcloud.com/j3zz
    # ... additional social profile URLs

tagline: "Experimental sound art merging music, generative systems, and immersive installations"
default_image: /assets/img/J3ZZ-logo-black-300px.png
lang: en_US

Benefits:

Analytics & Cookie Consent

The site implements privacy-compliant analytics with GDPR-compliant cookie consent management.

Google Analytics 4 Integration:

  1. _includes/analytics.html - Privacy-compliant GA4 implementation:
    • Only loads after user consent via cookie consent system
    • Checks localStorage.getItem('cookieConsent') for user preferences
    • Loads GA4 script dynamically only if consent.analytics === true
    • IP anonymization enabled: anonymize_ip: true
    • Secure cookie flags: SameSite=None;Secure
    • Listens for cookieConsentUpdated events to reload analytics when consent changes
    • Prevents duplicate loading with window.gaLoaded flag
  2. Configuration:
    • Set google_analytics in _config.yml with GA4 measurement ID
    • Format: G-XXXXXXXXXX
    • If not configured, no analytics code is loaded

Cookie Consent System:

  1. assets/js/cookie-consent.js - GDPR-compliant cookie consent manager:
    • Cookie Categories:
      • Essential cookies (always enabled)
      • Analytics cookies (Google Analytics, requires consent)
      • Embedded content cookies (YouTube, Vimeo, Bandcamp, requires consent)
    • User Interface:
      • Cookie consent banner shown on first visit
      • Three options: “Accept All”, “Accept Selected” (customize), “Reject All”
      • Cookie settings button (visible after initial consent) to modify preferences anytime
    • Preference Storage:
      • Stored in browser localStorage as JSON
      • Format: {analytics: boolean, embedded: boolean, timestamp: ISO8601}
      • Persists across sessions
    • Event System:
      • Dispatches cookieConsentUpdated custom event when preferences change
      • Analytics and other scripts listen for this event to load/reload appropriately
    • Functions:
      • hasConsent() - Check if consent has been given
      • getConsent() - Get current consent preferences
      • saveConsent(analytics, embedded) - Save preferences and dispatch event
      • showBanner() / hideBanner() - Control banner visibility
      • loadPreferences() - Load saved preferences into UI
      • acceptAll() / acceptSelected() / rejectAll() - Handle user choices
  2. UI Integration:
    • Cookie consent banner integrated in default layout
    • Banner displays at bottom of viewport on first visit
    • Settings button (cookie icon) available after initial consent
    • Styled in assets/css/style.css (.cookie-consent-banner class)

Privacy Features:

Compliance:

Deployment

Site deploys to GitHub Pages automatically when pushed to the main branch. The custom domain www.j3zz.com is configured via the CNAME file and GitHub Pages settings.

Note: This site uses the github-pages gem instead of a specific Jekyll version to ensure compatibility with GitHub Pages infrastructure.

Modifying Page Content

All page files are located in the _pages/ directory:

Bio Gallery Front Matter Structure:

---
layout: bio-gallery
title: Bio Gallery
permalink: /bio-gallery/
gallery_images:
  - filename: photo-01.jpg
    caption: Descriptive caption with event and equipment details
  - filename: photo-02.jpg
    caption: Another descriptive caption
---

Gallery images should be placed in assets/img/bio-gallery/ directory.

Change the logo path in _config.yml:

logo: /assets/img/your-logo.png

Restart Jekyll server after config changes.