VISITALBANIA

The Idea

Albania has some of the most photographed coastline and mountains in Europe, but information for visitors is scattered across booking sites, blogs and social media, and much of it only in one language. Drin and I wanted a single place where a traveller can see what the country offers, from beaches and national parks to food and festivals, and read it in their own language.

What We Built

The homepage opens on a full-screen hero slider and leads into seven destination categories, six outdoor activities, a food and culture carousel, upcoming events, a tourism overview with video, a map and a statistics table, and a contact form. Each destination and activity card opens a detail page with photos, descriptions and, for beaches, a direct link to book a stay. Privacy, terms and cookie pages round it off.

• Full-screen hero slider
• Five languages: Albanian, English, German, French, Italian
• Seven destination categories
• Six outdoor activities
• Food and culture carousel
• Events calendar with expandable cards
• Booking links for beach stays
• Promotional video and embedded map
• Tourism statistics table
• Validated contact form
• Privacy, terms and cookie pages

User Experience

The site is built for browsing, not searching. Big photographic cards invite a visitor to wander from beaches to mountains to rivers, and the navigation has dropdowns that jump straight to any category or activity. Event cards stay compact and expand on tap, so the page does not become a wall of text. The chosen language is remembered, so a German visitor who switches once keeps reading in German on every page.

Design Decisions

Tourism sells with images, so the photography leads and the interface stays out of the way: a transparent navigation bar that turns solid on scroll, white type over darkened photos, and rounded cards with a single call to action each. A custom display font for the logo and headings, paired with Poppins and Montserrat for body text, gives the site its own character. The layout is tuned at seven breakpoints, down to 320px wide screens, with a hamburger menu on mobile.

Technical Approach

A static site deployed on Netlify. Bootstrap 5 provides the grid, the carousel and the icon set, while each section has its own stylesheet using CSS Grid, Flexbox and keyframe animations. Destinations and activities are stored as JavaScript data objects with text in all five languages and rendered into the page on demand, so adding a new beach means adding one entry, not a new page. Translations work through data-translate attributes and a shared dictionary, with the language saved in localStorage. The contact form is a React component with hooks, controlled inputs and client-side validation that also follows the selected language.

• HTML5
• CSS3
• JavaScript (ES6+)
• Bootstrap 5
• Bootstrap Icons
• React 18
• localStorage
• IntersectionObserver
• WebP images
• Netlify

SEO Perspective

The markup is semantic throughout: header, nav, main, section and footer, figure and figcaption in the carousel, and a statistics table with a caption, column and row headers. Every image has descriptive alt text, photos are served as WebP and load lazily, and the video only loads when played. Translation currently swaps text in the browser, so the next step for search is giving each language its own URL with hreflang tags, so that German and Italian searchers can find their version directly.

What I Learned

This was the first project I built with a partner, and the biggest lesson was structure. Giving every section its own stylesheet and every feature its own script let Drin and I work at the same time without overwriting each other. Five languages also taught me to agree on translation keys early: one renamed key breaks the text on every page that uses it. And mixing plain JavaScript with a React component showed me that a framework does not have to own the whole site to be useful in one part of it.