diff --git a/README.md b/README.md index e725554..8fae59a 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,7 @@ _Products_ * [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support) * [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io) * [Form Validation - The best validation library for JavaScript](https://formvalidation.io) +* [Intersection Observer Examples - Practical, real world examples of Intersection Observer](https://intersectionobserver.io) * [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev) _Resources_ diff --git a/client/constants/ProductList.ts b/client/constants/ProductList.ts index 2a90ea5..0ab51a8 100644 --- a/client/constants/ProductList.ts +++ b/client/constants/ProductList.ts @@ -6,6 +6,12 @@ import ProductModel from './ProductModel'; const ProductList: ProductModel[] = [ + { + name: 'Intersection Observer Examples', + url: 'https://intersectionobserver.io', + description: 'Practical, real world examples of Intersection Observer', + themeColor: '#024ca9', + }, { name: 'Blur Page', url: 'https://blur.page', diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx index caabde2..768833e 100644 --- a/client/layouts/Footer.tsx +++ b/client/layouts/Footer.tsx @@ -41,36 +41,39 @@ const Footer: React.FC<{}> = () => { Fake Numbers
  • - Form Validation -
  • + Intersection Observer Examples +
    diff --git a/public/assets/intersection-observer-examples.png b/public/assets/intersection-observer-examples.png new file mode 100644 index 0000000..46d915a Binary files /dev/null and b/public/assets/intersection-observer-examples.png differ