DJ Njace — jednostrani sajt za DJ-a, film koji se pomera skrolom
Sopstveni demo, ne klijentski posao. Sajt za DJ-a koji atmosferu prodaje filmom što se pomera skrolom, a posao zaključuje sa tri odgovora na istoj strani: da li je datum slobodan, koliko košta i šta je uključeno. Bez 3D scene koja je tu stajala pre i bez ijednog dodatka koji bi trebalo održavati.
- Klijent
- Sopstveni demo — nema naručioca
- Delatnost
- DJ za rođendane, slave, žurke, svadbe i maturske
- Područje
- Vranje i jug Srbije, u priči demoa cela Srbija
- Tip
- Jednostrani scroll-film sajt sa booking formom
- Strane
- 23 adrese u mapi sajta, sve vraćaju 200
- Tehnologije
- Next.js 16 · React 19 · Tailwind · nginx · systemd
- Status
- Živ demo na našem poddomenu
U ovom tekstu
- Šta je DJ Njace i zašto ovaj sajt postoji
- Šta je trebalo rešiti
- Jedna strana koja se skroluje
- Film koji se pomera skrolom
- Kako je film napravljen
- Šta je bilo pre: 3D scena koja je izbačena
- Cenovnik koji se ne krije
- Booking forma i mejl koji bi otišao u prazno
- Tehnička izvedba, keš i deploy
- SEO, schema i ono što je ostalo otvoreno
- Šta ovaj rad pokazuje
Šta je DJ Njace i zašto ovaj sajt postoji
DJ Njace nije klijent. To je naš sopstveni demo — sajt napravljen da pokaže kako izgleda cela internet prezentacija za DJ-a i izvođača, od prvog kadra do popunjene forme. Iza imena ne stoji aktivan nastup, i to piše u podnožju samog sajta: prikazani kontakt, brojke i lokacije su ilustrativni.
Priča demoa je namerno obična, ne premium. DJ iz Vranja koji svira rođendane, krsne slave, kućne žurke, svadbe, maturske i firmske proslave, sa bazom na jugu Srbije i izlascima do Leskovca, Niša, Beograda, Kragujevca i Novog Sada. Repertoar: narodnjaci i starogradska, domaća komercijala, pop i dance, klupski blok za vrhunac večeri, kolo kada ekipa zatraži. Razglas, bežični mikrofon, LED rasveta i rezervna oprema idu uz nastup, tako da domaćin ne iznajmljuje ništa posebno.
Ta pozicija je birana zato što je najteža za sajt. Prezentacije DJ-eva po pravilu izgledaju kao klupski flajer: crna strana, logo, Instagram i broj telefona. Čovek koji traži nekoga za slavu ili osamnaesti rođendan ne kupuje estetiku festivala. On ima tri pitanja — da li si slobodan tog datuma, koliko košta i da li dolaziš sa opremom. Ceo demo je sklopljen oko ta tri pitanja, a atmosfera je tu da ga zadrži dok do njih ne stigne.
Šta je trebalo rešiti
Zadatak prema samom sebi bio je uzak, ali sa četiri tvrde tačke:
- Atmosfera pre teksta — posao izvođača se prodaje osećajem. Prvi ekran mora da prenese kako izgleda pun parket, a ne da nabraja usluge.
- Ista atmosfera na telefonu — najveći deo posetilaca dolazi sa telefona, preko Instagrama. Efekat koji radi samo na desktopu je efekat koji ne radi.
- Cena vidljiva odmah — konkurencija je krije i tera na poruku. Vidljiva polazna cena po tipu proslave odmah odbija pogrešne upite i skraćuje prepisku.
- Upit koji negde sleti — forma mora da ima pravu obradu na serveru, sa proverom i zaštitom od automata, a ne dugme koje ispiše poruku o uspehu.
Uz to je stajao uslov koji sam sebi postavljam na svakom projektu: bez platforme, bez dodataka koji se raspadnu pri sledećem ažuriranju, i bez ijednog megabajta koji se učitava zato što je bio lakši od razmišljanja.
Jedna strana koja se skroluje
Naslovna je duga oko devet hiljada piksela i podeljena je na šest traka: uvod, pult, selekcija, parket, svetla i booking. Pozadina je zalepljena za ekran dok se traka smenjuje, pa se ne dobija utisak da se strana lista, nego da se scena pomera.
Levo, na desktopu, ide tanka vodilja — kriva provučena kroz sedam čvorova, koja se iscrtava po skrolu i pali čvorove kako se prolazi kroz sekcije. Na telefonu se pretvara u pravu šinu uz ivicu. Cela stvar je pisana ručno, bez biblioteke za animaciju, jer je posao svega jedna Catmull-Rom kriva i jedan pomeraj isprekidane linije.
Naslovi u trakama su pravi HTML, ne tekst upečen u video. To zvuči kao sitnica dok se ne setite da je alternativa strana koja za pretraživač i za čitač ekrana ne piše ništa. Ovde se svaka traka čita i bez slike.
Oko te jedne strane stoji petnaestak dodatnih adresa koje pokrivaju ono što ljudi zaista kucaju u pretragu — po tipu proslave, po gradu i po žanru. Tako DJ za slavu ima svoju stranu sa narodnjacima, kućnim slavama i glasnoćom koja ne diže komšiluk, umesto da bude jedan pasus na naslovnoj. Ukupno je 23 adrese u mapi sajta i sve vraćaju ispravan odgovor.
Film koji se pomera skrolom
Umesto animacije koja se sama vrti, pozadina je film kroz koji se posetilac kreće sam. Na desktopu se skrolom pomera trenutak u videu: petlja prati poziciju strane i meko je sustiže, pa kadar ide napred i nazad tačno onoliko koliko se skroluje.
Na telefonu isti trik ne radi. Mobilni pregledači ne dozvoljavaju precizno premotavanje videa bez interakcije, pa je prvo rešenje bila petlja koja se sama pušta. Vlasnik demoa je to odbio, i to sa pravom — video koji krene sam je tačno ono što se na telefonu doživljava kao smetnja. Zamena je sekvenca kadrova na platnu: 84 slike u WebP formatu, ukupno 2,8 megabajta, prvih deset se učitava odmah, ostatak se dovlači u pozadini dok je uređaj miran, a crta se samo kada se kadar stvarno promeni. Rezultat je isti osećaj premotavanja, samo bez videa.
Ispod toga stoje dva izlaza. Ako je uključeno smanjenje animacija ili štednja podataka, prikazuje se nepomična slika. Ako video ili sekvenca iz bilo kog razloga otkažu, sekcija se sama vraća na gradijent i tekst ostaje čitljiv. Nijedna od tih putanja ne ostavlja praznu stranu.
Da to nije teorija, provereno je na pravom telefonu: video element nema izvor i stoji pauziran, a platno na tri različite pozicije skrola daje tri različite slike, koje se pri povratku vraćaju istim redom. Sitnica koju vredi zapamtiti — ovaj sajt se ne da uslikati alatima koji rade kroz prozor pregledača, jer neprekidna petlja crtanja stranu drži zauzetom. Merodavan je server sa pregledačem bez prozora.
Kako je film napravljen
Film nije snimljen i nije kupljen. Napravljen je iz jedne jedine slike. Prvo je generisan master kadar kluba u brend paleti, pa je na njemu izmenjen lik za pultom uz nalog da sve ostalo ostane netaknuto — tako kompozicija ostaje identična. Kretanje kamere je onda dodato lokalno, kroz osam tačaka po slici, sa mekim prelazima i bez ijednog reza, na slici uvećanoj dva puta da pomeraj ne bude stepenast.
Razlog za taj postupak je banalan: generisanje pravog videa košta kredite kojih tada nije bilo dovoljno. Ispalo je da ograničenje ima i dobru stranu — kamera koja se kreće po jednom kadru nikada ne preskoči i nikada ne trepne, što je za premotavanje skrolom važnije nego za običan video.
Kodiranje je posebna priča. Video koji se premotava mora da bude sastavljen od samih ključnih kadrova, jer se inače pri svakom skoku dekodira unazad do najbližeg ključa i slika kasni. Ovaj film ima 192 kadra i svih 192 su ključni, u rezoluciji 1440 piksela širine, i staje u 7,4 megabajta. Do te brojke se stizalo probama: gust računarski kadar sa LED zidovima, konfetama i disko kuglom kompresuje se lošije od fotorealne snimke, pa su prve verzije bile dvostruko teže. Sekvenca za telefon je izvučena iz istog filma, na manjoj rezoluciji i sa manje kadrova.
Šta je bilo pre: 3D scena koja je izbačena
Prva verzija ovog sajta imala je pravu 3D scenu u pregledaču — gramofon, mikser, ekvilajzer, binu i slušalice, kroz koje je kamera prolazila po skrolu. Izgledalo je impresivno na opisu i loše u praksi, i vredi reći zašto, jer je to lekcija koja se ponavlja.
- Zastoji pri ulasku u novi objekat. Grafička kartica priprema materijale tek kada nešto prvi put postane vidljivo, pa je svaki novi deo scene donosio kratko kočenje. Rešeno je zagrevanjem svih materijala pre prikaza i zavesom koja to sakrije — ali to je već sloj koda koji postoji samo da bi pokrio problem.
- Telefon je video samo srednju traku. Ugao kamere podešen za širok ekran na uspravnom telefonu seče scenu na uzak pojas. Popravljeno je time što kamera čita odnos stranica svakog kadra, ali je i to dodatna složenost.
- Osvetljenje bez mape okruženja. Gotova biblioteka za ambijentalno svetlo povlači datoteku sa tuđeg servera, što naša bezbednosna politika ne dozvoljava, pa je scena znala da ostane crna. Rešenje je bilo ručno postavljeno svetlo i svetliji materijali.
Svaka od tih stvari je popravljena, i sajt je radio. Ali zbir je bio jasan: za sajt koji treba da zaključi termin, 3D je bio trošak bez uzvrata. Pri redizajnu je ceo taj sloj obrisan — biblioteke za 3D, za animaciju i za meko skrolovanje otišle su iz projekta i nisu ničim zamenjene. Ostali su samo okvir, React i jedan pomoćni paket za klase.
Film daje isti utisak za deo cene, radi na svakom telefonu i ne troši grafiku dok posetilac čita cenovnik.
Cenovnik koji se ne krije
Strana Cenovnik DJ nastupa postoji zato što je pretraga puna upita koji počinju sa „koliko košta", a skoro niko na njih ne odgovara. Ovde je polazna cena ispisana po tipu proslave — rođendan, slava, žurka, svadba, maturska, firmska proslava — uz jasnu napomenu da konačan iznos zavisi od trajanja, lokacije, broja gostiju i tehničkih zahteva. Iznosi na demou su ilustrativni, kao i sve ostalo na njemu.
Ispod cena ide spisak onoga što je uključeno u svaku, pa odeljak o tome kako se termin zaključava, pa pitanja postavljena tačno onako kako se kucaju u pretragu, sa kratkim odgovorima. Kratki odgovori nisu stilski izbor — to je oblik koji pretraživač ume da izvuče i prikaže kao izdvojen odgovor.
Svaka usluga nosi i strukturirani podatak o ponudi, koji se generiše iz istog zapisa iz koga se ispisuje i prikazana cena. To je najlakše mesto da se sajt razmine sam sa sobom — cena se promeni na strani, a u strukturiranim podacima ostane stara verzija, pa pretraživač mesecima prikazuje pogrešan iznos.
Booking forma i mejl koji bi otišao u prazno
Strana Kontakt i booking traži ono što je za ponudu zaista potrebno: ime, telefon, mejl, datum, tip proslave, grad i procenjen broj gostiju. Poruka je opciona, saglasnost za obradu podataka nije.
Iza forme stoji prijemnik na serveru sa proverom polja, skrivenim poljem kao zamkom za automate i ograničenjem broja slanja po IP adresi u jedinici vremena. Kontakt-forma je najlakša meta za masovno slanje i najčešće mesto gde se sajt pretvori u kanal za smeće.
Pošto je ovo demo, prijemnik upit trenutno samo zapisuje i ne šalje ga nikome — nema smisla praviti pravi tok poruka za izvođača koji ne postoji. Kod pravog izvođača tu ide isti redosled koji koristimo svuda: upit se prvo upiše, pa se tek onda pokušava mejl, da otkazan mejl ne znači i izgubljen posao.
Jedan nalaz sa ovog projekta vredi više od svega ostalog u ovoj sekciji. Sajt je u kontaktu i u politici privatnosti nosio adrese oblika booking@djnjace.svilenkovic.rs. Izgledale su uredno i bile su potpuno mrtve: poddomen nije poštanski domen, nema zapisa za prijem pošte, pa bi svaka poruka poslata na te adrese tiho odbila. Da je iza demoa stajao pravi izvođač, izgubio bi svaki zahtev za brisanje podataka i svaki upit koji stigne mimo forme. Adrese su prebačene na pravo sanduče, a pravilo je od tada isto na svakom sajtu: kontakt adresa mora da postoji na domenu koji zaista prima poštu.
Tehnička izvedba, keš i deploy
Sajt je pisan u Next.js-u 16 sa React-om 19 i Tailwind-om, radi kao trajan proces na svom portu, a ispred njega stoji nginx koji prosleđuje saobraćaj i drži sertifikat. Servis se sam podiže posle restarta servera i ima svoj dnevnik. Bez baze, jer je sadržaj demoa u kodu.
Najskuplja lekcija ovde je bila o kešu. Posle jedne izmene vlasnik je dva puta prijavio da mu se na telefonu video i dalje sam pušta, iako je server dokazano služio novu verziju. Uzrok je bio stari paket zaostao u kešu telefona, koji se sa naše strane ne može obrisati. Iz toga su izašla dva pravila koja i dalje važe. Prvo: HTML se šalje sa zabranom keširanja, a mediji dobijaju svoje pravilo sa rokom od jednog dana, jer bi ih inače opšte pravilo zaključalo na mesec dana. Drugo: nova verzija filma dobija novo ime datoteke, jer je preimenovanje jedini pouzdan način da se tuđi keš zaobiđe.
Deploy ima svoje zamke i one su zapisane. Građenje projekta se nikada ne radi kao administrator — dovoljno je da jedna datoteka u radnom direktorijumu ostane u vlasništvu administratora pa da sledeće građenje pukne na dozvolama, a pošto skripta tada ne restartuje servis, sajt neko vreme radi na staroj verziji i tek pri sledećem restartu pada u petlju grešaka. Zato ide isti redosled svaki put: rezervna kopija, brisanje starog izlaza, građenje pod pravim korisnikom, pa restart.
Bezbednosna zaglavlja su postavljena u punom setu i mogu se proveriti jednim zahtevom: prinudni HTTPS sa dugim rokom, politika sadržaja, zabrana ugnježdavanja u tuđe strane i zatvorene dozvole za kameru, mikrofon i lokaciju.
SEO, schema i ono što je ostalo otvoreno
Naslovna nosi pet blokova strukturiranih podataka — muzički izvođač, lokalni posao iz oblasti zabave, osoba, sajt i najčešća pitanja. Servisne i lokacijske strane imaju svoje, sa opisom usluge i ponudom.
Jedna greška je nađena taman na vreme. U zaglavlju je stajala tvrdo upisana kanonska adresa naslovne, koja se ispisivala na svakoj strani pored one ispravne. Dok je sajt bio zatvoren za indeksiranje, to nije smetalo nikome. Da je tako ušao u pretragu, pretraživač bi sve podstrane spojio na naslovnu i petnaest pažljivo pisanih landing strana ne bi postojalo. Uklonjeno je, i sada svaka strana ima tačno jednu kanonsku adresu — svoju.
Mapa sajta ima 23 adrese i nijedna ne vodi na preusmerenje ni na grešku, što je najčešći tihi propust posle većih izmena. Traka za kolačiće radi po standardu za pristanak, sa mogućnošću odbijanja i pamćenjem izbora; analitika na demou nije uključena i u politici kolačića tako i piše, umesto da se opisuje merenje koje ne postoji.
Dve stvari su ostale otvorene i pošteno je da stoje ovde. Prva: demo je namerno pušten u indeks, da bi se videlo kako se ovakva struktura ponaša u pretrazi za upite tipa DJ za slavu — a u podnožju istovremeno stoji jasna oznaka da je reč o portfolio prikazu. To dvoje se ne slaže savršeno i to je svesna odluka, ne previd. Druga: u strukturiranim podacima još stoji ocena sa brojem recenzija iz demo skupa. Na sajtu pravog izvođača to ide napolje istog dana ili se zamenjuje pravim recenzijama, jer je izmišljena ocena u strukturiranim podacima najbrži način da strana ispadne iz rezultata.
Šta ovaj rad pokazuje
Izvođač koji bi dobio ovakav sajt dobija jednu stranu koja prodaje osećaj i u istom dahu odgovara na datum, cenu i opremu, cenovnik koji skraćuje prepisku, formu koja stvarno prima upit, i petnaestak strana koje pokrivaju tip proslave, grad i žanr. Sve to u sopstvenom kodu, bez mesečne pretplate i bez dodataka.
Provera je rađena sa servera, sa pregledačem bez prozora: naslovna i ključne podstrane, širok ekran i telefon, bez ijedne greške u konzoli i bez vodoravnog prelivanja, sa proverenim ponašanjem forme i trake za kolačiće. Za sajt ovog tipa to je jedini merodavan način, jer se film ne da uslikati kroz običan prozor pregledača.
Ono što se na demou zamenjuje kod pravog posla je sadržaj, ne kod: prave fotografije i snimci umesto generisanog filma, pravi broj i sanduče, prave cene, prave preporuke. Struktura ostaje ista, jer je i pravljena da bude ponovljiva — ista shema radi za bend, voditelja, fotografa i svakoga ko prodaje termin, a ne proizvod. Više o tome kako radim i šta je sve u portfoliju stoji na strani o izvođaču, koja je na demou napisana tačno onako kako bi bila napisana za pravog čoveka.
Sajt u slikama
DJ Njace (sopstveni demo)
Jedna strana koja se skroluje kroz film, cenovnik po tipu proslave i forma za upit.
djnjace.svilenkovic.rsČesto postavljana pitanja
Da li je DJ Njace pravi izvođač?
Zašto film umesto 3D scene u pregledaču?
Kako scroll-film radi na telefonu?
Može li se ovakav sajt napraviti za pravog izvođača?
Zašto su cene vidljive kada ih konkurencija krije?
Da li forma na demou stvarno šalje upit?
Treba vam ovakav sajt?
Recite mi čime se bavite i šta sajt treba da uradi za vas — dobijate fiksnu ponudu i rok, u pisanoj formi.