skip to content
reelikklemind

Michelangelo-Grocery-List

Michelangelo-Grocery-List

Last Updated:
🌱 Seedling Information

Michelangelo's Grocery List


Overview

This project is an interactive webpage that showcases a historical grocery list created by the Renaissance artist Michelangelo Buonarroti. The list, featuring hand-drawn illustrations of food items, provides a glimpse into the daily life of one of history's greatest artists. Users can explore the list by interacting with hotspots on the document, revealing details about each item, and toggle between original and translated views. The webpage is designed to be responsive, accessible, and engaging on both desktop and mobile browsers.

The document is based on an artifact from Casa Buonarroti, Michelangelo's family home turned museum in Florence, Italy.

Features

  • Interactive Hotspots: Click or tap on hotspots over the grocery list to learn about items like bread, wine, and fish.
  • Responsive Design: Optimized for both desktop and mobile devices with smooth touch interactions.
  • Translation Toggle: Switch between the original view and a translated view with highlighted hotspots.
  • Accessibility: Includes keyboard navigation, screen reader support, and ARIA attributes for better usability.
  • Educational Content: An info panel provides historical context about Michelangelo and the Renaissance diet.
  • Subtle Animations: Hotspots and tooltips feature animations for a more engaging user experience.

Demo

You can view a live demo of the project here

Usage

Explore the List: Hover over (desktop) or tap (mobile) the hotspots on the grocery list image to see tooltips with item descriptions.
Interact with the Item List: Click or tap on items in the list on the right to highlight their corresponding hotspot on the document.
Toggle Views: Use the "Switch to Translation View" button to toggle between the original and translated views of the hotspots.
Learn More: Scroll down to the info panel to read about the historical context of the document and Michelangelo's life.

Project Structure

michelangelo-grocery-list/
│
├── images/
│   └── michelangelo-list.jpg   # The grocery list image
├── styles.css                 # CSS styles for the webpage
├── script.js                  # JavaScript for interactivity
├── index.html                 # Main HTML file
└── README.md                  # This README file

Technologies Used

  • HTML5: Structure of the webpage.
  • CSS3: Styling, including responsive design and animations.
    -JavaScript: Interactivity for hotspots, tooltips, and toggle functionality.
  • Responsive Design: Media queries and flexible layouts for cross-device compatibility.

Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

  • Fork the repository.
  • Create a new branch (git checkout -b feature/your-feature).
  • Make your changes and commit them (git commit -m "Add your feature").
  • Push to the branch (git push origin feature/your-feature).
  • Open a pull request.
  • Please ensure your code follows the existing style and includes appropriate comments.

Credits

License

Distributed under the GNU Affero General Public License v3.0 License. See LICENSE for more information.