Podstron utworów w katalogu
Każdy utwór miał dedykowaną podstronę na Jimdo. Klasyka literatury akordeonowej (Krzanowski, Olczak, Powroźniak), pop (Beatles, Elvis, Shakin' Stevens), film (Mission Impossible, Speak Softly Love), kolędy, tango.
Case study · strona artysty · 2026
MUZYK TEDI — strona artysty muzyka z katalogiem 172 utworów i lightboxem demo (PL+EN)
Tedi prowadzi niszową, ale realną działalność: profesjonalne opracowanie nut w programie Finale (akordeon, fortepian, duety kameralne) z międzynarodowym targetem (akceptuje PayPal, EN klienci). Jego stara strona to darmowy Jimdo na subdomenie muzyktedi.jimdofree.com — 172 podstrony z utworami, ale bez własnej domeny, bez SEO, bez nowoczesnego UX. Zmigrowałem wszystkie 172 utwory + 150 wykonań YouTube + 139 próbek PDF na własny stack, dodałem ambient music tła z Web Audio API, lightbox per utwór z lazy-loaded iframe i kategoryzowany grid demo z filtrami.
Kontekst biznesowy
Artysta z międzynarodowym targetem zamknięty w darmowym Jimdo
Klient miał stronę zrobioną na darmowym planie Jimdo Creator: template z 2010, subdomena *.jimdofree.com, brak własnej domeny, generyczny meta (twitter:description = "-"), brak Schema.org, brak responsive (template oparty o stałą szerokość 850px). Mimo to udało mu się zbudować realny katalog 172 podstron utworów z embedami YouTube i Google Drive PDF — to było główne assety do uratowania w migracji.
Wykonań na YouTube
Tedi nagrywa demo karaoke na keyboardzie Roland FP-E50. 96 ze 172 utworów (56%) ma minimum 1 wykonanie video. Topowy "Akordeon Solo (Stare nagrania)" ma 13 nagrań.
Próbek PDF nut (Google Drive)
Próbki nut PDF (różne instrumenty per utwór: piano, akordeon F-dur, akordeon C-dur, duety) udostępnione publicznie na Google Drive. Możesz podejrzeć zanim zamówisz pełne opracowanie.
Wyzwanie
Jak pokazać 172 utwory bez budowania sklepu z 172 produktami
Naturalna pokusa: zaprojektować sklep e-commerce z każdym utworem jako osobny produkt. Ale klient sprzedaje opracowania na zamówienie, nie z półki — utwory różnią się wariantem (prawa ręka 40 PLN / z basami 50 PLN / + karaoke MP4 60 PLN), instrumentem (akordeon w różnych tonacjach, fortepian, duety) i czasem trzeba zrobić nowe opracowanie ze skanu odręcznego. Sklep z 172 produktami × 4 warianty = 688 SKU które trzeba synchronizować ręcznie. Wybrałem inną drogę: katalog + lightbox.
- Pełen scrape Jimdo — 172 podstron w paraleli (Python ThreadPoolExecutor, 16 wątków, ~30s). Wyciągnięte: tytuły, opisy, embeddowane YouTube IDs (
youtube-nocookie.com/embed/), Google Drive PDF IDs. - Single JSON jako źródło prawdy —
assets/repertoire-data.json(68 KB) z 172 rekordami: slug, title, desc, category, yt[], pdf[]. - Kategoryzacja heurystyczna — klasyfikacja na 7 kategorii (Klasyka, Pop, Akordeon, Edukacja, Film, Kolędy, Tango/Walc) na bazie keywordów w sluga (Bach, Beatles, Powroźniak, Mission, kolęd, czardasz).
- Dwie sekcje, dwie funkcje — "Demo video" (grid 96 kart z filtrami, browse visual) + "Repertuar" (lista 172 utworów z badge ▶/📄, browse textual).
- Lightbox modal per utwór — klik na kartę otwiera modal z wszystkimi YT embedami + lista linków PDF dla tego utworu. Iframe loadowany dopiero przy otwarciu (oszczędność requestów).
- Ambient music tła — Web Audio API generuje slow chord progression (Cmaj7 → Am7 → Fmaj7 → G7) z FM-style sine+triangle oscillators i delay-feedback reverb. Zero plików MP3, zero licensingu.
- PL+EN z
hreflang— Tedi ma międzynarodowych klientów przez PayPal. Osobneindex.htmlper język + osobne JSON-LD schema per locale.
Rozwiązanie
Moduły strony — co konkretnie powstało
Concert hall aesthetic
Kremowy paper (#FAF7F0) + wine accent (#7A1F2B) + Cormorant Garamond display. Hero ma pulsujący treble clef 𝄞 jako watermark, drifting staff lines w tle, shimmer accent na headline.
Grid 96 utworów z filtrami
Wszystkie utwory z media (YT thumbnail z i.ytimg.com/vi/{id}/hqdefault.jpg lazy-loaded). Filtry kategorii (pigułki): All / Pop & rock 69 / Klasyka 15 / Film 6 / Tango 3 / Kolędy 2 / Akordeon 1. Pure JS show/hide, instant.
Modal per utwór
Klik na kartę otwiera fullscreen modal z backdrop blur, slide-up animation, wszystkie YT embedy + lista linków Google Drive PDF dla danego utworu, CTA "Zamów opracowanie". Esc + click backdrop = close.
Ambient music (Web Audio)
Floating toggle button ♪/♫ (bottom-right) odpala generator: 4-akordowy progression z arpeggio attack, sine+triangle oscillators + lowpass filter + delay feedback. Zero plików, zero licensingu — czysty synth.
Micro-interactions
Scroll progress bar (gradient wino-złoto), fade-in IntersectionObserver, magnetic CTA na hover, cursor notes (♪♫♬♩ pojawiają się przy ruchu myszy, throttle 180ms, desktop only). Wszystko respektuje prefers-reduced-motion.
PL+EN z hreflang
Osobne /index.html (pl) i /en/index.html z hreflang alternates, language switcher w nav, osobne meta + osobne Schema.org per locale (Service.inLanguage="en" dla EN). EN target: PayPal-paying clients zagranicy.
Proces
Jak powstała strona — od scrape'u do deploya
- Audyt Jimdo — przeczytanie głównej strony + przeglądnięcie 172 linków podstron z homepage. Identyfikacja: artysta = akordeonista (klasyka literatury akordeonowej), nie ogólne "music engraving".
- Repozycjonowanie hero — z generic "Your sheet music. Play anything" na "Twoje nuty. Zagraj każdy utwór" + akordeon-first. Dodanie sekcji "Specjalizacja" (akordeon / fortepian / duety / karaoke MP4 Roland FP-E50).
- Scrape 172 podstron — Python ThreadPoolExecutor z 16 wątkami, fetch parallel, ~30 sekund. Każda podstrona ma 45-60 KB HTML.
- Extract media z każdej — regex na
youtube-nocookie.com/embed/{id}+drive.google.com/file/d/{id}. Wynik: 150 YT + 139 PDF, 96/172 utworów z media. - Cleanup tytułów — z slugów typu "j-s-bach-preludium-f-dur" → "J.S. Bach Preludium F-dur" (regex: single-letter initials, klucze, op., BWV).
- Generacja HTML — kategoryzacja + sort, generacja grid kart demo + repertuar tree z details/summary, lightbox JS, JSON jako single source of truth.
- Deploy — Vercel z auto-deploy z GitHub, alias na
muzyktedi.vercel.app, SSO Protection disabled, immutable cache headers.
Decyzje techniczne
- Vanilla zamiast Reacta — strona jest 90% statyczna, jeden interactive component (lightbox), użycie Reacta podniosłoby weight z ~30 KB do 200+ KB bez benefitu.
- Single JSON zamiast 172 osobnych HTML — łatwiej updatować, mniejszy total weight, klient (Tedi) może w przyszłości edytować jeden plik.
- Lazy iframe loading — YouTube embeds są najcięższe assety na stronie (każdy iframe = ~500 KB JS).
loading="lazy"+ dynamic insert dopiero przy otwarciu modal = strona ładuje się szybko, video pojawia się on-demand. - Web Audio synthesis zamiast MP3 — uniknięcie pytania o licensing background music (CC-BY, public domain, royalty-free) + zero downloadu pliku audio.
- youtube-nocookie.com zamiast youtube.com — privacy-enhanced mode, GDPR friendly, brak cookie tracking dopóki user nie odpali video.
Rezultaty
Co dostarczyłem (i jak to mierzyć)
Katalog utworów + filtry
172 pozycji w sekcji Repertuar (długa lista textual) + 96 z media w sekcji Demo (visual grid z filtrami kategorii). Dwa różne tryby przeglądania, jeden JSON jako źródło.
Embed YT + GDrive PDF
150 video YouTube + 139 próbek Google Drive PDF dostępnych przez lightbox per utwór. Iframe lazy-loaded — strona główna pobiera ~50 KB zamiast 75+ MB iframe assetów.
Dwujęzyczność z hreflang
Osobne strony per locale, language switcher w nav, osobne Schema.org per język. EN target: zagraniczni klienci PayPal (główne źródło wyższych marż dla artysty).
JS bundle (vanilla)
Cały interactive layer: lightbox + filter + ambient music + animations + form mailto — w jednym script.js bez frameworków. Plus styles.css ~17 KB.
Ambient music bez licensingu
Generator akordów na bazie sine+triangle oscillators z delay feedback reverb. Zero plików MP3, zero copyright headache, zero downloadu — czysty synth via JS.
Polityka prywatności + accessibility
9-sekcyjna polityka RODO (formularz zbiera email, telefon, tytuły zamówień), skip-link, focus rings, ARIA-labels, prefers-reduced-motion compliance, keyboard nav w lightboxie.
Co dalej
Po kickoff call z klientem
Strona jest live i czeka na cztery decyzje:
- Akceptacja designu — Tedi ogląda na telefonie i laptopie, feedback na iteracje.
- Zakup domeny — rekomendacja:
muzyktedi.pl(PL klient) + opcjonalnietedimusic.comalias dla EN. - SMTP / Resend setup — żeby formularz wysyłał leady do
muzac@wp.pl(zamiast obecnegomailto:fallback). - Real bio do "O mnie" — placeholder ma disclaimer, że pełna bio (lata doświadczenia, klienci, zdjęcia) zostanie uzupełniona po rozmowie.
Po tym: DNS na Cloudflare, Google Search Console, sprawdzenie czy YouTube ma Tedi'ego jako verified channel (możliwe linkowanie z LocalBusiness schema), faza 2 = osobne podstrony per utwór (SEO long-tail) lub Stripe checkout dla zagranicy.
Strony artystów i twórców
Masz duży katalog treści, ale strona go nie pokazuje?
Jeśli prowadzisz działalność z dużym portfolio (utwory, kursy, projekty, klienci) — strona powinna umożliwiać szybkie filtrowanie i preview, a nie wrzucać wszystko w jeden plik tekstowy. Opisz swoją niszę i zakres treści — przygotuję strategię.