The page displays the contents of a .json file and allows filtering by category. Filter transitions are implemented using the startViewTransition API, while images are lazily loaded through the intersectionObserver API.

This template has been assembled from a combination of online tutorials (see Sources section) and has been extended and customized.

• The HTML uses the template tag to generate individual items.

ES6 Modules are used without transpilation to ES5.

• js/modules/items/items-filter.js - Filters items based on their category, wrapped in a startViewTransition function. Note: There is a fallback for non-supporting browsers; however, Firefox may log startViewTransition as a type error without affecting the page display.
• js/modules/observers/lazy-load-images-intersection-observer.js - Lazy-loads images upon entering the viewport.
• js/modules/items/items-display.js - Outputs content from items.json into the HTML template.
• js/modules/observers/article-header-intersection-observer - Handles the visibility of 'Back to filters' when scrolling past the article header.
• Additionally, js/modules/theme-switcher.js provides functionality for toggling dark mode, saving the selected mode to local storage.

• grid is used for page layout, while flexbox is used for page elements.
• File organization is done using @import to pull modules into index.css.
• CSS nesting is used for internal file organization.
• Dark theme option is available.

• Automated accessibility analysis results

Tested on Windows 10 with:

• Chrome
• Firefox
• Microsoft Edge

The page has been tested in both browser and device views.

• Index of Git Pages. A directory of all of my Git Pages websites built from this template.

• Awesome filtering animation with vanilla JS!
• Image Lazy Loading Using Browser's Intersection Observer API by Roy (Codepen)
• A directory containing all my Git Pages websites built from this template.