The Hayat is social impact business which I previosuly ran. The business aimed to work with small communities of artisans around the world to bring their products to a wider audience.
The Hayat launched in 2018 with a website created through Squarespace. At the time, I wanted to incorporate an interactive world map showing the countries our artisanal products come from but at the time I did not know how to produce this. Therefore, it felt right to create this as a front-end project.
Currently, this is an informative website giving imformation around the products, cultures and traditions of the artisans that create the Hayat products. However, this is a work in progress project with the aim of being built into a full ecommerce site.
To create the interactive world map, I used a SVG file which I turned into XML code and added to HTML file. I then used an Add Event Listener tool in JavaScript to create the functionality that allows country names to appear when the mouse hovers over each country. When the user clicks on a country which is coloured green, it takes the user to a blog post highlighting information about the artisans and products from that region.
HTML & CSS & JavaScript
