← All work

Cartographies of
Cultural Exchange

An online exhibition for the HOA 03 studio at the Wadiyar Centre for Architecture, mapping how crafts and buildings travelled between cultures.

Role
Design and development
Client
Julie Ann Tharakan, WCFA
Year
2024
Platform
Web app with a 3D globe
Visit hoa.julieanntharakan.com ↗
Exhibition home screen: a pale 3D globe centred on Asia with rust markers and arcs, title in a left rail.
Exhibition on a phone: the globe sits above the title and the opening quote.

The brief

The studio asked students to trace how crafts and buildings changed when cultures met, through trade, migration, conquest and technology. That produced six research projects across Asia and the Middle East. The site had to show them as an exhibition rather than a folder of PDFs, and make the movement itself visible.

What I built

The home page opens on a 3D globe. Each marker is a student project, and arcs draw the route an idea travelled. Click a marker to open its project. Below the globe, the studio brief is laid out in four chapters (Brief, Factors, Crafts, Buildings), with a fixed side rail that shows where you are. A separate gallery page lists every project with search and filters.

  • The globe is drawn with Three.js, with D3 handling the geographic data.
  • Markers and arcs share one rust colour, so routes stay readable over the pale map.
  • Gallery search covers title, craft, building, country and author, with filters for craft, country, building and semester.
  • A light and dark mode toggle sits in the corner of the globe.
  • Built as a React app with routing, so the gallery has its own URL.
Overview: exhibition title in serif with a quote and a button to the gallery.
Overview: the exhibition statement and the way into the gallery.
Factors chapter: the brief objective above cards for trade and migration.
Factors: the four forces that move culture.
Crafts chapter: a large faint chapter number beside the stage one text.
Crafts: stage one of the brief.
Buildings chapter with the side rail, above a black marquee band.
Buildings: stage two, with the side rail tracking position.
Gallery page: serif title, search field and four filter dropdowns above project cards.
Gallery: search and four filters over the student projects.
Footer: marquee of origin, influence, evolution, adaptation above credits.
Footer: origin, influence, evolution, adaptation, on loop.
Exhibition on a phone: the globe sits above the title and the opening quote.
Gallery on a phone: filters stacked above a project card for Immortal Bones and Rumi Darwaza.
On a phone, the globe stacks above the text and the gallery filters stack into one column.

Outcome

The students' research is public and browsable as one exhibition. Because the gallery filters by semester, each new batch of projects can join the same site instead of starting a new one.

Built with

React React Router Three.js D3 Vite
Next project Julie Ann Tharakan