dragandoncic.com
ENME
Nazad na projekte

Dvojezični sajt · Ronilačka akademija

Boka Diving Academy

Boka Diving Academy pruža ronilačku obuku i podržava aktivnosti očuvanja mora u Boki. Dizajnirao sam i izradio njen dvojezični sajt za predstavljanje kurseva, aktivnosti, članaka i kontakt informacija na računarima i telefonima.

Otvori sajt
Početna strana sajta Boka Diving Academy — naziv akademije preko podvodne fotografije, sa dvojezičnom navigacijom.
Tip
Dvojezični sajt · Ronilačka akademija
Sajt uživo
bokadive.com

Moja uloga

Dizajn, frontend razvoj, sistem dvojezičnog sadržaja, SEO i objavljivanje.

Cilj

Dati akademiji jasno prisustvo na internetu koje objašnjava ponudu, pokriva rad na zaštiti mora i olakšava posjetiocima da stupe u kontakt — na crnogorskom i engleskom.

Šta je napravljeno

  • Višestranični sajt (početna, o nama, kursevi, zaštita mora sa posebnim stranicama za akcije, galerija i kontakt) napravljen uz React, TypeScript i React Router.
  • Lokalizovani URL-ovi na oba jezika: svaka stranica ima crnogorsku adresu i englesku adresu pod /en (na primjer /tecajevi i /en/courses), svaka samostalno indeksabilna.
  • Responzivan interfejs sa animacijama na GSAP-u i Lenis-u koje poštuju podešavanje za smanjene animacije, stilizovan uz Tailwind CSS.
  • Self-hosted WOFF2 fontovi i responzivni cjevovod slika koji servira AVIF/WebP/JPEG uz srcset — bez zavisnosti od stranih fontova ili CDN-a.
  • Sadržaj o zaštiti mora i akcijama — eko akcije, čišćenja podmorja i akcija Glavati 2026 — uz kurseve ronjenja, sa dvojezičnom kontakt sekcijom povezanom sa Netlify Forms.

Tehnički pristup

  • Napravljen kao višestranična React Router aplikacija, a ne kao jednostranični prezentacioni sajt, tako da je jezik dio URL-a i svaka stranica može biti zasebno otvorena i indeksirana.
  • Kanonski URL-ovi, recipročan sr-Latn-ME / en / x-default hreflang, Open Graph i Twitter metapodaci, sitemap i LocalBusiness strukturirani podaci generisani su iz jedne tabele ruta, pa ne mogu da se raziđu.
  • Pristupačnost je provjerena axe-om, a rute su pokrivene unit i end-to-end testovima.
  • Objavljen na Netlify-u sa SPA rutiranjem, dugotrajnim keširanjem statičkih fajlova i bezbjednosnim zaglavljima uključujući CSP i HSTS, uz kontinuirano ažuriranje sadržaja.

Snimci ekrana

Stranica kurseva sajta Boka Diving Academy — „Od prvog zarona do naprednog ronioca“, sa stvarnom podvodnom fotografijom.
Stranica kurseva (CMAS program) sa stvarnom podvodnom fotografijom.
Početna strana Boka Diving Academy na telefonu, responzivni mobilni raspored.
Responzivan mobilni raspored.

Tehnologije

  • React
  • TypeScript
  • Vite
  • React Router
  • Tailwind CSS
  • GSAP
  • Lenis
  • Dvojezični URL-ovi (ME/EN)
  • hreflang i strukturirani podaci
  • Self-hosted fontovi
  • Responzivne slike
  • Netlify