Javascript Html5 CSS

@Parsons, New School of Design September, 2023

This website showcases a curated collection of my dad’s souvenirs from his travels around the world. Many of these items were collected during his college years while traveling with his best friend, Steve. Together, these objects turn our home into a personal museum of memories and stories. 
This project is entirely exploratory in order to learn Javascript Json.

The first section of the website features an interactive world map that visually plots souvenirs in the countries where they were collected. Each item is represented by an image of the souvenir, and when hovered over, the name of the object appears. This map provides a playful and engaging way to explore the global journey behind each artifact.

This HTML code structures the interactive map section of the website. It includes a title bar, an embedded SVG map for plotting souvenirs, and div elements to display images with captions. The use of semantic tags like <section> and <article>, along with custom classes, helps organize content and style elements consistently across the page.

The second section of the website displays a dynamic list of souvenirs pulled from a JSON file. Each entry shows a photo of the item along with its name, the location it was collected, the type of medium, and the companion who traveled with the user's dad at that time. This section gives context to each object, making the collection feel personal and historically rich.

This JavaScript code fetches data from a collection.json file and dynamically displays each souvenir as a list item with an image and details like name, year, location, and type. It also includes a toggle function to expand or collapse the list view based on scroll height.