Izazov
Drazen "Just Draze" Dzambo je međunarodni DJ i organizator događanja s više od 20 godina iskustva diljem Hrvatske, Azije i Sjedinjenih Država. Od vjenčanja i korporativnih evenata do klupskih večeri, festivala i dance battle natjecanja — njegov raspon je širok koliko i njegov glazbeni ukus. Trebao je profesionalnu portfolio web stranicu gdje potencijalni klijenti mogu:
- Vidjeti njegov rad — događanja, nastupe, suradnje
- Čuti njegovu glazbu — playliste, mixeve i live setove raspršene po više platformi
- Poslati upite za rezervacije s detaljima i preferencijama događanja
- Preuzeti njegov Elektronički Press Kit (EPK) za promotore događanja
Ključni izazov: Drazenova glazba živi na pet različitih platformi — Spotify, YouTube, Mixcloud, SoundCloud i njegovi vlastiti snimljeni video setovi. Želio je da posjetitelji sve to iskuse na jednom mjestu, bez skakanja između tabova i servisa.
Rješenje
Izgradili smo prilagođeni single-page portfolio od nule — bez frameworka, bez WordPressa, bez predložaka. Čisti HTML, CSS i vanilla JavaScript. Svaki piksel namjenski izrađen za DJ-eve potrebe. Istaknuta značajka: plutajući glazbeni widget koji ujedinjuje pet streaming platformi u jedno besprijekorno sučelje.
Glazbeni Widget
Ovo je srce stranice. Dizajnirali smo i izgradili plutajući panel nalik Windows prozoru koji posjetiteljima omogućuje pregledavanje i reprodukciju glazbe s pet različitih izvora — sve bez napuštanja stranice:
- 5 integriranih platformi — Spotify playliste, YouTube nastupi, Mixcloud live mixevi, SoundCloud zapisi i lokalno hostirani video setovi — sve u organiziranim tabovima
- Pametno međusobno isključivanje — samo jedan player može biti aktivan u isto vrijeme. Pokrenete Spotify playlistu, pa prebacite na YouTube video? Prethodni player se automatski pauzira. Ovo funkcionira kroz potpuno različite API-je s različitim sustavima događaja
- Pomični i promjenjive veličine — widget pluta preko stranice poput desktop prozora. Korisnici ga mogu povlačiti za naslovnu traku, mijenjati veličinu iz kuta, minimizirati ili prebaciti u puni zaslon
- Animirani vizualizer — kada glazba svira, animirane trake pulsiraju na minimiziranom gumbu, pružajući vizualnu povratnu informaciju čak i kada je widget skupljen
- Lijeno učitavanje API-ja — YouTube, SoundCloud i Mixcloud API-ji se učitavaju tek kada korisnik prvi put otvori taj tab, držeći inicijalno učitavanje stranice brzim
- Nula ovisnosti — cijeli widget je izgrađen s vanilla JavaScriptom. Bez Reacta, bez Vuea, bez jQueryja. Samo čist, namjenski izrađen kod koji upravlja s pet različitih player API-ja kroz unificirano sučelje
Što smo izgradili
- Dvojezična podrška (EN/HR) — trenutno prebacivanje jezika bez ponovnog učitavanja stranice, koristeći data atribute i localStorage pohranu
- Višekoračni obrazac za rezervacije — trostupanjski tok upita koji pokriva osnove događanja, detalje i glazbene preferencije, sa sigurnom dostavom e-pošte putem Brevo API-ja
- Sigurnosno ojačana obrada obrazaca — CSRF tokeni, ograničenje broja zahtjeva (3 slanja/sat), detekcija SQL injection i XSS obrazaca, validacija i sanitizacija unosa
- Carousel prikaz događanja — automatski rotirajući carousel koji ističe vjenčanja, korporativne evente, klupske večeri i dance battle natjecanja
- Filtrirajuća foto galerija — organizirana po tipu događanja (klubovi, festivali, vjenčanja, korporativni, ples)
- EPK za preuzimanje — Elektronički Press Kit s biografijom, fotografijama i logotipima za promotore događanja
- Schema.org strukturirani podaci — Person i Offer markup za poboljšanu vidljivost u pretraživanju
- Samostalno hostirani fontovi — Bebas Neue i Space Grotesk u WOFF2 formatu za brzo učitavanje tipografije
- Optimizirane WebP slike — lijeno učitavanje, responsivni srcset i optimizirane veličine datoteka
- Bez vanjskih ovisnosti — cijela stranica radi na vanilla HTML, CSS i JavaScript. Nula frameworkovskog opterećenja
Pregled
Rezultati
Just Draze sada ima profesionalnu online prisutnost koja odgovara 20+ godina iskustva iza DJ pulta:
- Unificirano glazbeno iskustvo — pet platformi, jedno sučelje. Posjetitelji mogu istraživati Drazenov cijeli katalog bez napuštanja stranice
- Profesionalni tok rezervacija — strukturirani obrazac za upite koji unaprijed prikuplja detalje događanja, štedeći vrijeme i Drazenu i potencijalnim klijentima
- Dvojezični doseg — hrvatska i engleska publika servirana s trenutnim prebacivanjem jezika
- Performanse bez frameworka — nula ovisnosti, brzo učitavanje i čist kod koji dokazuje da vam ne treba React za izgradnju nečeg sofisticiranog
- Kompletni alat za umjetnika — portfolio, galerija, glazba, EPK preuzimanja i rezervacije — sve što DJ treba na jednom mjestu
