Tasteology is a web application that focuses on the science of cooking and food colours. It includes various images that can be displayed in modals, with content extracted from a Figma design. The app is fully responsive and works down to a 320px mobile device, ensuring a seamless experience on both desktop and mobile.

• Features
• Technologies Used
• Setup
• Usage

• Image Modals: Click on any image to open it in a modal.
• Lazy Loading: Images load only when they are about to enter the viewport.
• Responsive Design: Fully responsive layout, optimized for mobile devices (320px and up).
• Smooth Animations: Visual animations on elements like titles and images for an engaging user experience.
• Custom Hover Effects: Hover brightness effects are implemented to all images.

• HTML5: Structure and content of the web pages.
• SCSS/CSS: Styling, with a modular approach using SCSS.
• JavaScript (ES6+): For interactive features and animations.
• Webpack: Bundling and transpiling assets.
• Lozad.js: Lazy loading for images.
• Babel: A JavaScript compiler that allows using the latest ES features.
• ESLint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code to make code more consistent and avoid bugs.
• Prettier: An opinionated code formatter that ensures consistent code style across the project.
• Google Fonts: For custom fonts (Open Sans).

1. Simplicity: Using plain JavaScript ensures a straightforward and minimalistic approach to the project. This makes it easier to understand and debug without introducing additional complexities.
2. Simplicity: Using plain JavaScript allows for a more straightforward and minimal approach, which makes it easier to understand and debug.
3. Performance: A smaller, framework-free project tends to have better performance because there’s

That said, if I were to implement this project using React or Vue, I would be fully capable of doing so. The skills I used here are easily transferable, and I understand the concepts and patterns involved in working with modern JavaScript frameworks.

Follow these steps to set up the project on your local machine:

• Install Node.js (version 20.x or later).
• Install npm (comes with Node.js).

1. Clone the repository:

   git clone https://github.com/arisweb101/tasteology.git
   

2. Navigate to the project directory:

   cd tasteology

3. Install dependencies:

   npm install

4. Build the project:

   npm run build

5. Start the development server:

   npm start

Visit the homepage to see the layout and interact with the images.

Click on any image to open it in a modal.

The app is fully responsive, so try resizing the browser window or testing on mobile devices.

I hope you like it. Thank you!

Made by Aristotle Espiritu 😊