Landing page & Audio Guide, Van Gogh's exhibition

Project Overview

The “Van Gogh - Un’immersione Multimediale” exhibition in Racalmuto, Agrigento, Italy, is an immersive art experience dedicated to the life and work of Vincent van Gogh. My role in this project was to develop a high-performance, multilingual landing page that also featured an integrated audio guide, ensuring visitors had an engaging and informative experience both before and during their visit.

Visit Van Gogh - Un’immersione Multimediale

Project Requirements

The website needed to fulfill several key requirements:

• SEO-optimized: Ensuring high visibility in search engines.
• High performance: Fast load times and optimized assets.
• Integrated ticketing system: Providing a seamless purchase experience.
• Audio guide functionality: Enhancing the visitor experience.
• Multilingual support: Italian and English versions of the site.

Tech Stack

To meet these needs, I chose Astro, a modern meta-framework designed for static sites with exceptional performance. One of the reasons Astro stood out was its compatibility with multiple frontend frameworks, including Vue, Svelte, Preact, and React. This flexibility allowed me to integrate React.js, which I used for the interactive elements of the site, particularly the audio guide. Astro also offers a fantastic developer experience, with built-in optimizations, a well-structured component system, and smooth handling of internationalization (i18n), making it an ideal choice for this project.

For styling, I utilized TailwindCSS v4, which provided a highly efficient and flexible way to design components while keeping the CSS footprint minimal. Tailwind’s utility-first approach allowed for rapid development and ensured consistency throughout the site.

Development Process

The development journey began with the design phase, where I received a brand manual detailing the exhibition’s colors, typography, and reference images. Using these assets, I created a prototype that not only adhered to the exhibition’s identity but also provided a seamless user experience. Once the design was finalized, I moved on to building the UI components, ensuring reusability and consistency across the site.

With the foundation set, I shifted focus to constructing the pages, paying special attention to SEO and performance optimizations. Implementing lazy loading, optimizing assets, and ensuring smooth navigation were all key aspects of this phase. The integration of the ticketing system was another crucial step, allowing users to purchase tickets directly from the website. Finally, the audio guide development presented a unique challenge, which I tackled by building a custom media player with accessibility features.

Throughout the process, I conducted extensive testing to ensure the site was fully responsive, accessible, and performant across different devices and screen sizes. The result was a visually appealing, high-performance website that met all project requirements.

Ticketing System

For ticket sales, I integrated Weezevent, a specialized ticketing application that provides embeddable widgets. I developed a dedicated component to seamlessly incorporate the Weezevent widget into the website, ensuring a smooth purchase flow for visitors.

Internationalization

Astro’s built-in i18n features simplified content localization. I configured language-specific routes and dynamically loaded translated content, ensuring a consistent experience for both Italian- and English-speaking users.

Audio Guide

Developing the audio guide was one of the most engaging aspects of the project. I wanted it to be more than just a simple audio player; it had to be accessible, easy to use, and immersive. Using v0 as a foundation, I created a custom player that supported synchronized subtitles via .lrc files, ensuring visitors could follow the narration visually if needed. The player also featured an intuitive navigation menu, allowing users to easily switch between different sections of the guide without losing context.

To generate high-quality narrations, I utilized ElevenLabs, ensuring the voiceovers felt natural and engaging. This combination of elements resulted in a fully immersive, user-friendly audio experience, enhancing visitors’ engagement with the exhibition.

Final Results

The website has significantly contributed to the exhibition’s success:

• 40% of visitors use the integrated ticketing system to purchase entries.
• 70% of attendees engage with the audio guide during their visit.

This project was a valuable opportunity to create an engaging, high-performance web experience while leveraging modern web technologies to enhance accessibility and usability.

References

• Van Gogh - Un’immersione Multimediale
• Astro.build
• v0.dev
• Weezevent