JZ
JZUOB Kotor
Website Development Report
Phase 1 Complete — Production-Ready

General Hospital Kotor
Full Website Development

Complete multilingual web platform for Javna zdravstvena ustanova opΕ‘ta bolnica Kotor — serving 70,000+ residents across Kotor, Tivat and Herceg Novi municipalities.

8 Languages
177 Pages
8,496 Lines of Code
177
Static Pages
25
Components
3,656
Translation Lines
8
Languages
Project Overview

What Was Built

A fully functional, production-ready public website for the General Hospital of Kotor — a state healthcare institution in Montenegro.

Complete Public Website

13 unique page types covering all essential hospital information: departments, clinics, patient guides, insurance, laboratory, news, FAQ, contacts, careers, prices, and the Meljine rehabilitation branch.

8 Language Versions

Full localization into Montenegrin, English, Russian, Ukrainian, Turkish, German, Spanish, and French. 457 translation keys per language, 3,656 translation lines total. Automatic browser language detection.

Production Infrastructure

Docker containerization, Nginx with advanced caching and security, Kubernetes manifests, Let's Encrypt TLS, rate limiting, bot protection, gzip compression. Ready for deployment.

Technology

Modern Tech Stack

πŸš€
Astro 5
Static Site Generator
🎨
Tailwind CSS 3
Utility-First Styling
πŸ“
TypeScript
Type-Safe Code
🌐
YAML i18n
Flat-Key Translations
🐳
Docker
Containerized Build
☸️
Kubernetes
Orchestration & Scaling
⚑
Nginx
Web Server & Caching
πŸ”’
Let's Encrypt
TLS Certificates
Site Map

177 Pages Across 8 Languages

Every page is fully localized with proper hreflang tags, Open Graph metadata, and Schema.org structured data.

Core Pages — 8 language versions each

Home Page
Emergency banner, quick access grid, departments & clinics overview, about section, leadership, contacts, Google Maps
About
Photo gallery, hospital stats, mission statement, expansion projects (€9M + €1.1M TELE.DOC), leadership team, Meljine branch
Contact
Contact cards by department, working hours table, three route descriptions (from Kotor/Tivat/Herceg Novi), embedded Google Maps
For Patients
Required documents checklist, patient rights, visiting hours, insurance summary with link to full insurance page
Insurance
Four coverage models: state fund (FZOCG), EKZO/EHIC European card, private insurance, self-pay patients
Laboratory
Test types, preparation instructions, blood draw hours, results turnaround times, eZdravlje portal integration
Meljine Branch
Rehabilitation services, location with photo and Google Maps embed, working hours, direct phone line
FAQ
7 static Q&A items: referrals, booking, uninsured patients, foreigners, parking, hours, WiFi
News
3 news items: €9M expansion project, TELE.DOC EU telemedicine project (€1.1M), new medical equipment
Prices
Fund patients (free), self-pay price information, how to inquire about specific service costs
Careers
About working at JZUOB, open positions (external job board link), HR contact information
404 Error Page
Client-side language detection, friendly error message, navigation back to homepage

Dynamic Slug Pages — generated from data, 8 languages each

5 Hospital Departments
40 pages total (5 × 8 languages)
Emergency — 24/7 service, dedicated emergency phone panel
Surgery — general, orthopedic, urological; 3-tier team hierarchy
Gynecology — obstetrics and gynecological services
Internal Medicine — diagnostics, cardiology, pulmonology
Radiology — X-ray, ultrasound, CT, mammography
6 Outpatient Clinics
48 pages total (6 × 8 languages)
Surgery Clinic — outpatient surgical consultations
Internal Medicine — specialist consultations
Dermatology — skin conditions, cosmetic dermatology
Ophthalmology — eye exams and treatments
Endocrinology — hormonal and metabolic disorders
Gastroenterology — digestive system specialist care
Architecture

25 Reusable Components

Modular Astro component architecture. Each component is self-contained with its own styles, translations, and responsive behavior.

Navigation & Layout

BaseLayout
Meta, OG, hreflang, Schema.org, fonts
Header
Sticky nav, cross logo, two-line name, phone, emergency CTA
MobileMenu
Full overlay, 8 language flags, animated
LanguageSwitcher
Dropdown, preserves path, sets cookie
Footer
5-column grid, all pages, contacts, credits
DemoBanner
Amber demo environment indicator
SectionBadge
Reusable pill badge with icon

Homepage Sections

EmergencyBanner
Pulsing red strip, 24/7 phone
QuickAccess
Hero title + 6-card service grid
Departments
5 department cards with links
Clinics
6 clinic cards with links
About
Text, stats grid, project highlights
Leadership
4-card team grid with roles
Contact
3-column: info, hours, map

Full Page Components

DepartmentPage
Services, 3-tier team, hours sidebar, CTA
ClinicPage
Services, hours sidebar, appointment
AboutPage
Gallery, stats, mission, projects
ContactPage
Cards, hours, directions, maps
PatientsPage
Documents, rights, visiting hours
InsurancePage
4 insurance models explained
LaboratoryPage
Tests, preparation, hours, results
MeljinePage
Rehab services, location, hours
FaqPage
Static Q&A, white background
NewsPage
News cards with project details
PricesPage
Pricing info by patient type
Internationalization

Full i18n System

457 translation keys per language, 8 complete language files, 3,656 lines of translations. Custom YAML-based system with Vite-native imports.

Language Code URL Prefix Keys Status
Crnogorski (Montenegrin)cnr/ (default)457Complete
Englishen/en/457Complete
Russianru/ru/457Complete
Ukrainianuk/uk/457Complete
Turkishtr/tr/457Complete
Germande/de/457Complete
Spanishes/es/457Complete
Frenchfr/fr/457Complete
Total 3,656
Auto-Detection

Browser language detection on first visit. Serbian, Bosnian, Croatian automatically mapped to Montenegrin. Language preference saved in cookie for 1 year.

Hreflang Tags

Every page includes <link rel="alternate"> tags for all 8 language versions. Critical for SEO in multilingual environments.

YAML + Vite

Flat key/value YAML files imported natively via Vite's import.meta.glob. Zero runtime overhead — all translations resolved at build time.

SEO & Accessibility

Search Engine Optimization

Technical SEO

  • Schema.org JSON-LD structured data (@type: Hospital)
  • Open Graph meta tags (title, description, type, locale) for social sharing
  • Hreflang alternate links for all 8 locales on every page
  • Auto-generated XML sitemap via @astrojs/sitemap
  • Clean URL structure with semantic paths (/departments/emergency)
  • Configurable X-Robots-Tag header for demo/production mode

Performance & UX

  • 100% static HTML — zero JavaScript frameworks, instant page loads
  • Gzip compression (level 6) for all text-based assets
  • 30-day cache for static assets, 1-hour cache for HTML with revalidation
  • Font preconnect for Google Fonts, optimized loading (Inter 400–800)
  • Fully responsive design: mobile, tablet, desktop breakpoints
  • Scroll-reveal animations via IntersectionObserver
Design

Visual Identity

Deconstructed Cross Logo
Four separate emerald/teal squares forming a medical cross with deliberate gaps
Emerald/Teal Gradients
emerald-600 to teal-600 gradient accents, stone backgrounds, white cards
Two-Line Header
Hospital name + "opsta bolnica Kotor" subtitle with gradient underline accent
Scroll-Reveal Animations
Sections fade up on scroll via IntersectionObserver, staggered delays
3-Tier Team Hierarchy
Department pages show chief → surgeons → residents in distinct visual tiers
Photo Gallery
4 real hospital photos on About page, expansion renderings, Meljine branch
Infrastructure

Production-Grade Deployment

Docker Containerization

Alpine-based Nginx image (nginx:1.25-alpine). Multi-stage build with rsync for atomic deploys. Environment-driven ROBOTS_NOINDEX flag for demo/production toggle.

Kubernetes Orchestration

Full K8s manifest: Deployment, Service (ClusterIP), PersistentVolumeClaim (5Gi), Ingress with cert-manager for automatic Let's Encrypt TLS. WWW-to-non-WWW redirect. Environment variables via Secrets.

Nginx Configuration

Clean URL routing (try_files $uri $uri.html $uri/ /index.html). Tiered caching: 30-day immutable for assets, 1-hour revalidate for HTML. Rate limiting: 10r/s for HTML, 30r/s for static. Server tokens disabled.

Security Hardening

HTTP Security Headers
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Bot Protection
User-Agent blocklist for 15+ known bots: GPTBot, ChatGPT, CCBot, Bytespider, anthropic-ai, AhrefsBot, SemrushBot, Scrapy, python-requests, and more. Dotfiles access blocked. Rate limiting with burst protection.

TLS & DNS

Automatic TLS certificates via cert-manager with Let's Encrypt cluster issuer. WWW-to-non-WWW permanent redirect. Configured for jzuobkotor.me domain.

Codebase

Project at a Glance

File Structure

jzuob-kotor/
src/
components/ ...... 25 .astro files
pages/ ............ 105 .astro files
layouts/ .......... BaseLayout.astro
i18n/ .............. 8 .yaml + utils.ts
styles/ ........... global.css
public/
images/ ........... 4 hospital photos
favicon.svg, logo.svg
dockerfile
nginx.conf
k8s.yaml
astro.config.mjs
tailwind.config.mjs
package.json

By the Numbers

Source files140+
Lines of code8,496
Translation lines3,656
Translation keys per language457
Generated HTML pages177

Dependencies

astro^5.7.0
@astrojs/tailwind^6.0.2
@astrojs/sitemap^3.7.1
tailwindcss^3.4.0
js-yaml^4.1.1
Minimal dependency footprint — only 5 production dependencies
Phase 2

Portal Expansion Roadmap

The current website provides a solid foundation. Below are the recommended next phases for evolving into a full-featured hospital portal.

Online Appointment Booking

Patient registration, clinic/department selection, time slot picker, booking confirmation, reminders via SMS/email.

Patient Portal

Personal medical records, lab results integration with eZdravlje, appointment history, document management.

Staff Directory

Doctor profiles with photos, specializations, qualifications, schedules. Searchable by department and specialty.

News & Announcements CMS

Admin panel for publishing news, service announcements, schedule changes. Multilingual content management.

Analytics Dashboard

Visitor statistics, popular pages, language distribution, device breakdown. Privacy-friendly, GDPR-compliant analytics.

TELE.DOC Integration

Video consultations powered by the €1.1M EU-funded Montenegro-Croatia telemedicine project. Real-time patient-doctor communication.