more progress on animation

package-lock.json

@@ -8,9 +8,12 @@
       "name": "portfolio-site",
       "version": "0.0.0",
       "dependencies": {
+        "@types/react-transition-group": "^4.4.5",
         "daisyui": "^2.41.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-intersection-observer": "^9.4.3",
+        "react-transition-group": "^4.4.5"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.8",
@@ -390,6 +393,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -581,14 +595,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
-      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.0.25",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz",
       "integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -604,11 +616,18 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
-      "dev": true
     },
     "node_modules/@vitejs/plugin-react": {
       "version": "2.2.0",
@@ -921,8 +940,7 @@
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-      "dev": true
     },
     "node_modules/daisyui": {
       "version": "2.41.0",
@@ -990,6 +1008,15 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.284",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
@@ -1696,6 +1723,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -1853,6 +1888,16 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1906,6 +1951,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
+      "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -1915,6 +1973,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -1934,6 +2007,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",

package.json

@@ -9,9 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/react-transition-group": "^4.4.5",
     "daisyui": "^2.41.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.4.3",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.8",

src/AboutMe.tsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+function AboutMe() {
+  return (
+    <div className="card w-96 bg-base-100 shadow-xl">
+      <div className="card-body">
+        <h2 className="card-title">Card title!</h2>
+        <p>If a dog chews shoes whose shoes does he choose?</p>
+        <div className="card-actions justify-end">
+          <button className="btn btn-primary">Buy Now</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AboutMe;

src/App.css

@@ -6,4 +6,57 @@ html,
 body {
   height: 100vh;
   overflow: hidden;
-}
+}
+
+.gpu-accelerate{
+
+   -webkit-backface-visibility: hidden;
+   -moz-backface-visibility: hidden;
+   -ms-backface-visibility: hidden;
+   backface-visibility: hidden;
+
+   -webkit-perspective: 1000;
+   -moz-perspective: 1000;
+   -ms-perspective: 1000;
+   perspective: 1000;
+}
+
+.top-curve{
+  position: absolute;
+  top: 0;
+  transition: all 1s ease-out;
+  -webkit-transition: all 1s ease-out;
+}
+.top-curve-in-view{
+  /* transform: translateY(-80%);
+  -webkit-transform: translateY(-80%); */
+
+  -webkit-transform: translate3d(0, -80%, 0);
+  -moz-transform: translate3d(0, -80%, 0);
+  -ms-transform: translate3d(0, -80%, 0);
+  transform: translate3d(0, -80%, 0);
+  /* -webkit-transform: scale3d(1, 0.2, 1);
+  -moz-transform: scale3d(1, 0.2, 1);
+  -ms-transform: scale3d(1, 0.2, 1);
+  transform: scale3d(1, 0.2, 1); */
+}
+.bottom-curve{
+  position: absolute;
+  bottom: 0;
+  transition: all 1s ease-out;
+  -webkit-transition: all 1s ease-out;
+}
+.bottom-curve-in-view{
+  /* transform: translateY(80%);
+  -webkit-transform: translateY(80%); */
+
+  -webkit-transform: translate3d(0, 80%, 0);
+  -moz-transform: translate3d(0, 80%, 0);
+  -ms-transform: translate3d(0, 80%, 0);
+  transform: translate3d(0, 80%, 0);
+/* 
+  -webkit-transform: scale3d(1, 0.2, 1);
+  -moz-transform: scale3d(1, 0.2, 1);
+  -ms-transform: scale3d(1, 0.2, 1);
+  transform: scale3d(1, 0.2, 1); */
+}

src/App.tsx

@@ -1,27 +1,28 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useMemo } from "react";
 import "./App.css";
+import PageSection from "./PageSection";
 
 function App() {
   const [count, setCount] = useState(0);
 
-  const callback = function (entries: IntersectionObserverEntry[]) {
+  // const callback = function (entries: IntersectionObserverEntry[]) {
-    entries.forEach((entry) => {
+  //   entries.forEach((entry) => {
-      console.log(entry);
+  //     console.log(entry);
-      if (entry.isIntersecting) {
+  //     if (entry.isIntersecting) {
-        entry.target.classList.add("animate-fadeIn");
+  //       entry.target.classList.add("animate-fadeIn");
-      } else {
+  //     } else {
-        entry.target.classList.remove("animate-fadeIn");
+  //       entry.target.classList.remove("animate-fadeIn");
-      }
+  //     }
-    });
+  //   });
-  };
+  // };
 
-  const observer = new IntersectionObserver(callback);
+  // const observer = new IntersectionObserver(callback);
 
-  const targets = document.querySelectorAll(".js-show-on-scroll");
+  // const targets = document.querySelectorAll(".js-show-on-scroll");
-  targets.forEach(function (target) {
+  // targets.forEach(function (target) {
-    target.classList.add("opacity-0");
+  //   target.classList.add("opacity-0");
-    observer.observe(target);
+  //   observer.observe(target);
-  });
+  // });
 
   const scrollRef = useRef(null);
   const messages = [
@@ -30,66 +31,103 @@ function App() {
     "It was said that you would, destroy the Sith, not join them.",
     "You were my brother, Anakin.",
   ];
-
+  const colors = ["#F7B267", "#F79D65", "#F4845F", "#F27059", "#F25C54"];
-  const curves = [
+  const curves = useMemo(
-    "M0,192L48,176C96,160,192,128,288,112C384,96,480,96,576,101.3C672,107,768,117,864,138.7C960,160,1056,192,1152,181.3C1248,171,1344,117,1392,90.7L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+    () => ({
-    "M0,192L48,202.7C96,213,192,235,288,213.3C384,192,480,128,576,122.7C672,117,768,171,864,181.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+      tops: [
-    "M0,256L48,261.3C96,267,192,277,288,245.3C384,213,480,139,576,101.3C672,64,768,64,864,85.3C960,107,1056,149,1152,160C1248,171,1344,149,1392,138.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+        {
-    "M0,32L48,64C96,96,192,160,288,165.3C384,171,480,117,576,112C672,107,768,149,864,176C960,203,1056,213,1152,192C1248,171,1344,117,1392,90.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+          path: "M 0 2032 L 10.4 2037.3 C 20.9 2043 42 2053 63 2096 C 83.5 2139 104 2213 125 2234.7 C 146.1 2256 167 2224 188 2224 C 208.7 2224 230 2256 253 2248 C 271.3 2235 292 2181 313 2138.7 C 333.9 2096 355 2064 376 2080 C 396.5 2096 417 2160 438 2197.3 C 459.1 2235 480 2245 501 2240 C 521.7 2235 543 2213 563 2181.3 C 584.3 2149 605 2107 626 2085.3 C 647 2064 668 2064 689 2064 C 709.6 2064 730 2064 751 2106.7 C 772.2 2149 793 2235 814 2234.7 C 834.8 2235 856 2149 877 2138.7 C 897.4 2128 918 2192 939 2213.3 C 960 2235 981 2213 1002 2181.3 C 1022.6 2149 1043 2107 1064 2090.7 C 1085.2 2075 1106 2085 1127 2085.3 C 1147.8 2085 1169 2075 1190 2064 C 1210.4 2053 1231 2043 1252 2074.7 C 1273 2107 1294 2181 1315 2202.7 C 1335.7 2224 1357 2192 1377 2176 C 1398.3 2160 1419 2160 1430 2160 L 1440 2160 L 1440 0 L 0 0 Z",
-    "M0,96L48,122.7C96,149,192,203,288,229.3C384,256,480,256,576,240C672,224,768,192,864,165.3C960,139,1056,117,1152,144C1248,171,1344,245,1392,282.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+          viewBox: "0 0 1440 2249",
-    "M0,160L48,170.7C96,181,192,203,288,186.7C384,171,480,117,576,112C672,107,768,149,864,186.7C960,224,1056,256,1152,250.7C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+        },
-    "M0,64L48,101.3C96,139,192,213,288,218.7C384,224,480,160,576,128C672,96,768,96,864,133.3C960,171,1056,245,1152,250.7C1248,256,1344,192,1392,160L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+        {
-    "M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,186.7C672,181,768,139,864,149.3C960,160,1056,224,1152,234.7C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",
+          path: "M 0 2224 L 15 2197.3 C 30 2171 60 2117 90 2117.3 C 120 2117 150 2171 180 2197.3 C 210 2224 240 2224 270 2208 C 300 2192 330 2160 360 2160 C 390 2160 420 2192 450 2192 C 480 2192 510 2160 540 2160 C 570 2160 600 2192 630 2181.3 C 660 2171 690 2117 720 2122.7 C 750 2128 780 2192 810 2224 C 840 2256 870 2256 900 2234.7 C 930 2213 960 2171 990 2133.3 C 1020 2096 1050 2064 1080 2074.7 C 1110 2085 1140 2139 1170 2154.7 C 1200 2171 1230 2149 1260 2133.3 C 1290 2117 1320 2107 1350 2133.3 C 1380 2160 1410 2224 1425 2256 L 1440 2288 L 1440 0 L 0 0 Z",
-    "M0,192L48,202.7C96,213,192,235,288,213.3C384,192,480,128,576,122.7C672,117,768,171,864,181.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z",
+          viewBox: "0 0 1440 2288",
-  ];
+        },
+        {
+          path: "M 0 2192 L 15 2186.7 C 30 2181 60 2171 90 2149.3 C 120 2128 150 2096 180 2101.3 C 210 2107 240 2149 270 2181.3 C 300 2213 330 2235 360 2229.3 C 390 2224 420 2192 450 2160 C 480 2128 510 2096 540 2096 C 570 2096 600 2128 630 2165.3 C 660 2203 690 2245 720 2245.3 C 750 2245 780 2203 810 2202.7 C 840 2203 870 2245 900 2229.3 C 930 2213 960 2139 990 2122.7 C 1020 2107 1050 2149 1080 2181.3 C 1110 2213 1140 2235 1170 2250.7 C 1200 2267 1230 2277 1260 2240 C 1290 2203 1320 2117 1350 2101.3 C 1380 2085 1410 2139 1425 2165.3 L 1440 2192 L 1440 0 L 0 0 Z",
+          viewBox: "0 0 1440 2265",
+        },
+        {
+          path: "M 0 2160 L 15 2133.3 C 30 2107 60 2053 90 2037.3 C 120 2021 150 2043 180 2085.3 C 210 2128 240 2192 270 2202.7 C 300 2213 330 2171 360 2138.7 C 390 2107 420 2085 450 2112 C 480 2139 510 2213 540 2250.7 C 570 2288 600 2288 630 2250.7 C 660 2213 690 2139 720 2133.3 C 750 2128 780 2192 810 2186.7 C 840 2181 870 2107 900 2101.3 C 930 2096 960 2160 990 2170.7 C 1020 2181 1050 2139 1080 2133.3 C 1110 2128 1140 2160 1170 2149.3 C 1200 2139 1230 2085 1260 2090.7 C 1290 2096 1320 2160 1350 2170.7 C 1380 2181 1410 2139 1425 2117.3 L 1440 2096 L 1440 0 L 0 0 Z",
+          viewBox: "0 0 1440 2279",
+        },
+      ],
+      bottoms: [
+        {
+          path: "M 0 32 L 15 37.3 C 30 43 60 53 90 69.3 C 120 85 150 107 180 144 C 210 181 240 235 270 213.3 C 300 192 330 96 360 58.7 C 390 21 420 43 450 90.7 C 480 139 510 213 540 240 C 570 267 600 245 630 208 C 660 171 690 117 720 85.3 C 750 53 780 43 810 85.3 C 840 128 870 224 900 234.7 C 930 245 960 171 990 149.3 C 1020 128 1050 160 1080 197.3 C 1110 235 1140 277 1170 245.3 C 1200 213 1230 107 1260 53.3 C 1290 0 1320 0 1350 16 C 1380 32 1410 64 1425 80 L 1440 96 L 1440 2320 L 0 2320 Z",
+          viewBox: "0 6.67787 1440 2313",
+        },
+        {
+          path: "M 0 32 L 15 69.3 C 30 107 60 181 90 208 C 120 235 150 213 180 192 C 210 171 240 149 270 122.7 C 300 96 330 64 360 48 C 390 32 420 32 450 64 C 480 96 510 160 540 192 C 570 224 600 224 630 229.3 C 660 235 690 245 720 240 C 750 235 780 213 810 181.3 C 840 149 870 107 900 106.7 C 930 107 960 149 990 154.7 C 1020 160 1050 128 1080 144 C 1110 160 1140 224 1170 234.7 C 1200 245 1230 203 1260 165.3 C 1290 128 1320 96 1350 106.7 C 1380 117 1410 171 1425 197.3 L 1440 224 L 1440 2320 L 0 2320 Z",
+          viewBox: "0 32 1440 2288",
+        },
+        {
+          path: "M 0 288 L 15 282.7 C 30 277 60 267 90 256 C 120 245 150 235 180 202.7 C 210 171 240 117 270 128 C 300 139 330 213 360 213.3 C 390 213 420 139 450 117.3 C 480 96 510 128 540 133.3 C 570 139 600 117 630 106.7 C 660 96 690 96 720 133.3 C 750 171 780 245 810 234.7 C 840 224 870 128 900 85.3 C 930 43 960 53 990 90.7 C 1020 128 1050 192 1080 208 C 1110 224 1140 192 1170 192 C 1200 192 1230 224 1260 229.3 C 1290 235 1320 213 1350 202.7 C 1380 192 1410 192 1425 192 L 1440 192 L 1440 2320 L 0 2320 Z",
+          viewBox: "0 57.7248 1440 2262",
+        },
+        {
+          path: "M 0 64 L 15 53.3 C 30 43 60 21 90 37.3 C 120 53 150 107 180 154.7 C 210 203 240 245 270 240 C 300 235 330 181 360 138.7 C 390 96 420 64 450 80 C 480 96 510 160 540 197.3 C 570 235 600 245 630 218.7 C 660 192 690 128 720 128 C 750 128 780 192 810 192 C 840 192 870 128 900 112 C 930 96 960 128 990 149.3 C 1020 171 1050 181 1080 160 C 1110 139 1140 85 1170 101.3 C 1200 117 1230 203 1260 202.7 C 1290 203 1320 117 1350 85.3 C 1380 53 1410 75 1425 85.3 L 1440 96 L 1440 2320 L 0 2320 Z",
+          viewBox: "0 31.4728 1440 2289",
+        },
+      ],
+    }),
+    undefined
+  );
 
   return (
-    <div ref={scrollRef} className="overflow-scroll">
+    <div ref={scrollRef} className="overflow-y-scroll overflow-x-hidden">
-      <div className="snap-mandatory snap-y overflow-scroll h-screen bg-base-200">
+      <div className=" overflow-scroll h-screen bg-base-200 snap-y snap-mandatory">
-        {messages.map(function (message, i) {
+        <PageSection
-          return (
+          topCurve={curves.tops[0]}
-            <div className="snap-center h-screen" key={message}>
+          bottomCurve={curves.bottoms[0]}
-              <div className="hero h-screen relative js-show-on-scroll animate-fadeIn">
+          topColor={colors[0]}
-                <div className="hero-content text-center">
+          bottomColor={colors[1]}
-                  <div className="max-w-md">
+          name="section 1"
-                    <h1 className="text-5xl font-bold">{message}</h1>
+          render={() => (
-                    <p className="py-6">
+            <div>
-                      Provident cupiditate voluptatem et in. Quaerat fugiat ut
+              <h1 className="text-8xl font-bold">Noah Paige</h1>
-                      assumenda excepturi exercitationem quasi. In deleniti
+              <p className="py-6">Web Developer, Game Designer</p>
-                      eaque aut repudiandae et a id nisi.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="relative h-screen w-screen -translate-y-full">
-                <div className="absolute top-0 bg-blue-500 h-12 w-screen" />
-                <svg
-                  className="drop-shadow-xl absolute top-11 fill-blue-500 "
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 1440 320"
-                  preserveAspectRatio="none"
-                  height="100"
-                  width="100%"
-                >
-                  <path fillOpacity="1" d={curves[i * 2]}></path>
-                </svg>
-                <svg
-                  className="drop-shadow-xl absolute bottom-11 fill-blue-500"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 1440 320"
-                  preserveAspectRatio="none"
-                  height="100"
-                  width="100%"
-                >
-                  <path fillOpacity="1" d={curves[i * 2 + 1]}></path>
-                </svg>
-                <div className="absolute bottom-0 bg-blue-500 h-12 w-screen" />
-              </div>
             </div>
-          );
+          )}
-        })}
+        />
-
+        <PageSection
-        <footer className="footer p-10 bg-blue-500 text-neutral-content snap-center">
+          topCurve={curves.tops[1]}
+          bottomCurve={curves.bottoms[1]}
+          topColor={colors[1]}
+          bottomColor={colors[2]}
+          name="section 2"
+          render={() => (
+            <div>
+              <h1 className="text-5xl font-bold">{messages[1]}</h1>
+              <p className="py-6">
+                Provident cupiditate voluptatem et in. Quaerat fugiat ut
+                assumenda excepturi exercitationem quasi. In deleniti eaque aut
+                repudiandae et a id nisi.
+              </p>
+            </div>
+          )}
+        />
+        <PageSection
+          topCurve={curves.tops[2]}
+          bottomCurve={curves.bottoms[2]}
+          topColor={colors[2]}
+          bottomColor={colors[3]}
+          name="section 3"
+          render={() => (
+            <div>
+              <h1 className="text-5xl font-bold">{messages[2]}</h1>
+              <p className="py-6">
+                Provident cupiditate voluptatem et in. Quaerat fugiat ut
+                assumenda excepturi exercitationem quasi. In deleniti eaque aut
+                repudiandae et a id nisi.
+              </p>
+            </div>
+          )}
+        />
+        <footer
+          style={{ backgroundColor: colors[3] }}
+          className="footer p-10 text-neutral-content snap-center"
+        >
           <a className="link link-hover footer-title w-1/3">Contact</a>
           <a className="link link-hover footer-title w-1/3">LinkedIn</a>
           <a className="link link-hover footer-title w-1/3">GitHub</a>

src/PageSection.tsx

@@ -0,0 +1,61 @@
+import { memo, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+
+function PageSection({
+  render,
+  topCurve,
+  bottomCurve,
+  topColor,
+  bottomColor,
+  name,
+}) {
+  const [outerRef, inView, entry] = useInView({
+    /* Optional options */
+    threshold: 0.3,
+  });
+  useEffect(() => {
+    if (inView) console.log(`${name} in view: ${inView}`);
+  }, [inView]);
+  return (
+    <div ref={outerRef} className="snap-center h-screen">
+      <div className="hero h-screen relative">
+        <div className="hero-content text-center">
+          <div className="max-w-md">{render()}</div>
+        </div>
+      </div>
+      <div className="relative h-screen w-screen top-[-100%] overflow-hidden">
+        <svg
+          className={
+            "top-curve gpu-accelerate drop-shadow-xl " +
+            (inView ? " top-curve-in-view" : "")
+          }
+          style={{ fill: topColor }}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox={topCurve.viewBox}
+          preserveAspectRatio="none"
+          height="60%"
+          width="100%"
+        >
+          <path fillOpacity="1" d={topCurve.path}></path>
+        </svg>
+
+        <svg
+          className={
+            "bottom-curve gpu-accelerate drop-shadow-xl transform-gpu" +
+            (inView ? " bottom-curve-in-view" : "")
+          }
+          style={{ fill: bottomColor }}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox={bottomCurve.viewBox}
+          preserveAspectRatio="none"
+          height="60%"
+          width="100%"
+        >
+          <path fillOpacity="1" d={bottomCurve.path}></path>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+export default memo(PageSection);

src/utils.tsx

@@ -0,0 +1,22 @@
+import { RefObject, useEffect, useMemo, useState } from "react";
+
+function useOnScreen(ref: RefObject<HTMLElement>) {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) =>
+        setIntersecting(entry.isIntersecting)
+      ),
+    [ref]
+  );
+
+  useEffect(() => {
+    observer.observe(ref.current as Element);
+    return () => observer.disconnect();
+  }, []);
+
+  return isIntersecting;
+}
+
+export { useOnScreen };

tailwind.config.cjs

@@ -8,12 +8,17 @@ module.exports = {
   theme: {
     extend: {
       animation: {
-        fadeIn: "fadeIn 1s ease-in forwards"
+        fadeIn: "fadeIn 1s ease-in forwards",
+        slideDown: "slideDown 1s ease-in forwards"
       },
       keyframes: {
         fadeIn: {
           "0%": { opacity: 0 },
           "100%": {  opacity: 1 }
+        },
+        slideDown: {
+          "0%": { position: 'absolute', display: 'none', transform: 'translateY(100%)' },
+          "100%": { position: 'relative', display: 'block', transform: 'translateY(0%)'}
         }
       },
     },