JUST DRAZE - DJ Portfolio

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