Klotter

Overview

Klotter is a portfolio and services website built for a freelance music arranger and notation specialist. Hosted at klotter.xyz, it showcases orchestral arrangements, sheet music samples, and audio recordings — giving potential clients a clear picture of the work before reaching out. The site is built on Hugo with a heavily customized theme, automated CI/CD deployment, and a suite of custom shortcodes tailored for presenting musical content.

This was a client project: build a professional web presence for someone whose work lives in sheet music and audio recordings, not code. The challenge was making rich media — score images, embedded audio, YouTube performances — feel native and easy for a non-technical person to manage through simple Markdown files.

Features

• Custom Audio Shortcodes — Two audio embed components: a simple audio shortcode for basic HTML5 playback with automatic MIME type detection (MP3/M4A), and an advanced audioPlus shortcode with metadata support for title, artist, album art, and attribution links
• Interactive Image Gallery — A full-featured 16-image lightbox gallery (gallery.html, 415 lines) with modal overlay, slide navigation, thumbnail strip, keyboard-style prev/next controls, and hover effects — all built from scratch in vanilla JS and CSS
• YouTube Embedding — Clean shortcode for embedding YouTube videos by ID, extracted from the video URL
• Image Shortcode with Figures — A bild shortcode supporting captions, alt text, links, and HTML <figure> semantics for accessible image presentation
• Contact CTA Button — Styled inquiry button (skicka_forfrogan) with custom hover/press states in the brand’s purple palette (#2B0047 / #7314FF / #BB8DFF), linking to email contact
• Automated Deployment — GitHub Actions workflow builds with Hugo v0.79.1 and deploys to GitHub Pages on every push to main
• Custom Theme Variant — A mine theme variant on top of Hugo Learn, with custom fonts (Abril Fatface for headings, Raleway for body), a bespoke SVG logo, and Google Analytics integration

How It Works

The site content is managed entirely in Markdown. Each page lives under content/ with YAML frontmatter, and Hugo shortcodes handle all the rich media. For example, the arranger adds audio samples to a page like this:

{{</* audio src="rentreeClarinetQuartet.mp3" */>}}

The audio.html shortcode resolves the file path, detects the MIME type from the extension, and renders an HTML5 <audio> element:

{{ $audio_type := strings.TrimPrefix "." (path.Ext (.Get "src")) | lower }}
{{ $audio_type = replace $audio_type "mp3" "mpeg" }}

<audio controls>
  <source src="{{$audio}}" type="audio/{{$audio_type}}">
</audio>

The gallery shortcode is more involved — it generates a 4-column responsive grid of clickable thumbnails that open into a full-screen modal slideshow with navigation arrows and a thumbnail strip at the bottom. All state management is handled in vanilla JavaScript with showSlides() managing active slide index, thumbnail highlighting, and caption text.

Project Structure

klotter/
├── config.toml              # Hugo config (base URL, theme, analytics)
├── content/
│   ├── Start/_index.md      # Landing page with service description
│   ├── Exempel/_index.md    # Portfolio: videos, gallery, audio samples
│   ├── Om mig/_index.md     # About the arranger
│   └── Kontakt/_index.md    # Contact page with email CTA
├── layouts/
│   ├── shortcodes/          # 13 custom shortcodes
│   │   ├── audio.html       # Basic audio player
│   │   ├── audioPlus.html   # Enhanced audio with metadata
│   │   ├── bild.html        # Image with figure/caption
│   │   ├── gallery.html     # Lightbox image gallery
│   │   └── epost.html       # Email contact button
│   └── partials/            # Header, footer, logo, meta
├── static/
│   ├── css/                 # Theme CSS, Font Awesome, syntax highlighting
│   └── js/                  # jQuery, clipboard, search, scrollbar
└── .github/workflows/       # CI/CD pipeline

Tech Stack

Platform	Hugo (static site generator, v0.79.1)
Theme	Hugo Learn (customized variant)
Languages	HTML, CSS, JavaScript, Go templates
Fonts	Abril Fatface, Raleway (Google Fonts)
Analytics	Google Analytics (gtag.js)
Deployment	GitHub Actions → GitHub Pages
Domain	klotter.xyz (custom CNAME)

Source Code

The source code is available on the project’s GitHub repository.