dragandoncic.com
ENME
Back to projects

Bilingual website · Diving academy

Boka Diving Academy

Boka Diving Academy provides diving training and supports marine-conservation activities in Boka Bay. I designed and built its bilingual website to present courses, activities, articles and contact information across desktop and mobile devices.

Visit live site
Boka Diving Academy homepage — the academy name over an underwater diving photo, with bilingual navigation.
Type
Bilingual website · Diving academy
Live site
bokadive.com

My role

Design, frontend development, bilingual content system, SEO and deployment.

Goal

Give the academy a clear online presence that explains what it offers, covers its marine-conservation work, and makes it easy for visitors to get in touch — in Montenegrin and English.

What was built

  • A multi-page site (home, about, courses, conservation with dedicated campaign pages, gallery and contact) built with React, TypeScript and React Router.
  • Localized URLs in both languages: every page has a Montenegrin address and an English address under /en (for example /tecajevi and /en/courses), each independently indexable.
  • A responsive interface with GSAP and Lenis motion that respects reduced-motion preferences, styled with Tailwind CSS.
  • Self-hosted WOFF2 fonts and a responsive image pipeline serving AVIF/WebP/JPEG with srcset — no third-party font or CDN dependencies.
  • Conservation and campaign content — eco-actions, underwater clean-ups and the Glavati 2026 campaign — alongside the diving courses, with a bilingual Netlify Forms contact section.

Technical approach

  • Built as a multi-page React Router application rather than a single-page brochure, so the URL carries the language and each page is served and indexed at its own address.
  • Generated canonical URLs, reciprocal sr-Latn-ME / en / x-default hreflang, Open Graph and Twitter metadata, the sitemap and LocalBusiness structured data from one route table, so they cannot drift apart.
  • Checked accessibility with axe and covered the routes with unit and end-to-end tests.
  • Deployed on Netlify with SPA routing, long-lived asset caching and a security-header set including CSP and HSTS, with ongoing content updates.

Screenshots

Boka Diving Academy courses section titled “Od prvog zarona do naprednog ronioca”, with a real underwater course photo.
The courses page (CMAS program) with real underwater photography.
Boka Diving Academy homepage on a phone, showing the responsive mobile layout.
Responsive mobile layout.

Technologies

  • React
  • TypeScript
  • Vite
  • React Router
  • Tailwind CSS
  • GSAP
  • Lenis
  • Bilingual URLs (ME/EN)
  • hreflang & structured data
  • Self-hosted fonts
  • Responsive images
  • Netlify