Preskoči na sadržaj

Analitičke kolačiće koristimo samo uz vašu privolu. Bez oglašavanja i bez praćenja izvan ove stranice. Više o privatnosti

HREN · English
Pokrenimo projekt

Kolofon

Kako je složena ova stranica.

Kolofon je stara tiskarska navika: na kraju knjige zapisati čime je i kako složena. Ovo je naš.

Pismo

Mona Sans

Sav tekst i naslovi

Varijabilno pismo s osima širine (75–125) i debljine (200–900). Kad se naslov pojavi, slaže se iz uže u punu širinu.

Autor
GitHub

Fragment Mono

Oznake, indeksi i metapodaci

Jednoširinsko pismo za sve što je oznaka, a ne rečenica.

Test-niz
wdth 75

Đurđevac Čakovec Šibenik Žminj

wdth 100

Đurđevac Čakovec Šibenik Žminj

wdth 125

Đurđevac Čakovec Šibenik Žminj

Oba pisma poslužujemo s vlastite domene, s punim skupom hrvatskih dijakritičkih znakova.

Tehnologija

Okvir
Next.js 16.3 i React 19.2
Jezik
TypeScript
Stilovi
Tailwind CSS 4
Prijevodi
next-intl, hrvatski i engleski
Pokret
GSAP sa ScrollTriggerom i SplitTextom; three.js (WebGL) za scenu od čestica na naslovnici; Lenis za glatko pomicanje na računalu
E-pošta
Resend
Hosting
Vercel

Stranice se generiraju unaprijed i poslužuju s CDN-a. JavaScript dobivaju samo dijelovi koji su stvarno interaktivni.

Brzina

Brzinu ne obećavamo, nego je planiramo. Ovo je proračun koji si zadajemo za mobitele, na 75. percentilu stvarnih posjeta:

LCPNajveći prikaz sadržaja
≤ 2,0 s
INPOdziv na interakciju
≤ 150 ms
CLSPomak rasporeda
≤ 0,05
  • Naslov je u HTML-u od prvog kadra i nikad ne čeka animaciju.
  • Slike u formatima AVIF i WebP, uvijek s dimenzijama, da se ništa ne pomiče.
  • Pisma učitavamo samo s latiničnim podskupovima koje stranica stvarno koristi.
  • Animiramo samo pomak, prozirnost i izrez, da preglednik ne mora ponovno slagati stranicu.

Mjerimo Googleovim alatima (PageSpeed Insights i Chrome UX Report), a ne vlastitima.

Pristupačnost

Cilj je razina AA smjernica WCAG 2.2.

  • Sve radi tipkovnicom, a fokus je uvijek vidljiv.
  • Tekst ima kontrast najmanje 4,5 : 1, a sitni tekst nikad nije manji od 14 px.
  • Poveznica za preskakanje na sadržaj, jasni orijentiri i jedan naslov H1 po stranici.
  • Mete za dodir velike su najmanje 44 px.
  • Ništa nije dostupno samo pokretom ili samo mišem.

Ako nešto ne radi kako treba, javite nam na info@emnaweb.com. Popravljamo to kao grešku, ne kao želju.

Pokret

Pokret pokazuje, ne ukrašava. Naslovi se slažu, linije se crtaju, a sadržaj se otkriva jednom, kad do njega dođete. Ako ste u sustavu uključili smanjeno kretanje, animacije se ne pokreću.

Možete ih isključiti i ovdje. Izbor pamtimo samo u vašem pregledniku.

Bez animacija stranica je potpuna: ništa se ne skriva i ništa ne čeka.

Mreža

Sve stoji na mreži od 12 stupaca, 8 na tabletu i 4 na mobitelu, s marginama koje rastu sa zaslonom.

Zasluge

Dizajn i razvoj
EMNA Web Solutions, Hrvatska
Pisma
Mona Sans (GitHub) i Fragment Mono
Animacije
GSAP, three.js
Glatko pomicanje
Lenis (darkroom.engineering)
Slike
Bez stock fotografija i ilustracija
Znakovi
Samo jedan, Λ. Strelice dolaze iz pisma.