mirror of
https://github.com/noahpaige/portfolio-website.git
synced 2026-06-09 00:28:02 -06:00
more progress on animation
This commit is contained in:
Noah Paige
Generated
+86
-8
@@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
|
||||
},
|
||||
"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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
},
|
||||
"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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
|
||||
},
|
||||
"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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
+53
@@ -7,3 +7,56 @@ 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); */
|
||||
}
|
||||
|
||||
+107
-69
@@ -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[]) {
|
||||
entries.forEach((entry) => {
|
||||
console.log(entry);
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("animate-fadeIn");
|
||||
} else {
|
||||
entry.target.classList.remove("animate-fadeIn");
|
||||
}
|
||||
});
|
||||
};
|
||||
// const callback = function (entries: IntersectionObserverEntry[]) {
|
||||
// entries.forEach((entry) => {
|
||||
// console.log(entry);
|
||||
// if (entry.isIntersecting) {
|
||||
// entry.target.classList.add("animate-fadeIn");
|
||||
// } else {
|
||||
// entry.target.classList.remove("animate-fadeIn");
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
|
||||
const observer = new IntersectionObserver(callback);
|
||||
// const observer = new IntersectionObserver(callback);
|
||||
|
||||
const targets = document.querySelectorAll(".js-show-on-scroll");
|
||||
targets.forEach(function (target) {
|
||||
target.classList.add("opacity-0");
|
||||
observer.observe(target);
|
||||
});
|
||||
// const targets = document.querySelectorAll(".js-show-on-scroll");
|
||||
// targets.forEach(function (target) {
|
||||
// target.classList.add("opacity-0");
|
||||
// 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 curves = [
|
||||
"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",
|
||||
"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",
|
||||
"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",
|
||||
"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",
|
||||
"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",
|
||||
];
|
||||
const colors = ["#F7B267", "#F79D65", "#F4845F", "#F27059", "#F25C54"];
|
||||
const curves = useMemo(
|
||||
() => ({
|
||||
tops: [
|
||||
{
|
||||
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",
|
||||
viewBox: "0 0 1440 2249",
|
||||
},
|
||||
{
|
||||
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",
|
||||
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 className="snap-mandatory snap-y overflow-scroll h-screen bg-base-200">
|
||||
{messages.map(function (message, i) {
|
||||
return (
|
||||
<div className="snap-center h-screen" key={message}>
|
||||
<div className="hero h-screen relative js-show-on-scroll animate-fadeIn">
|
||||
<div className="hero-content text-center">
|
||||
<div className="max-w-md">
|
||||
<h1 className="text-5xl font-bold">{message}</h1>
|
||||
<div ref={scrollRef} className="overflow-y-scroll overflow-x-hidden">
|
||||
<div className=" overflow-scroll h-screen bg-base-200 snap-y snap-mandatory">
|
||||
<PageSection
|
||||
topCurve={curves.tops[0]}
|
||||
bottomCurve={curves.bottoms[0]}
|
||||
topColor={colors[0]}
|
||||
bottomColor={colors[1]}
|
||||
name="section 1"
|
||||
render={() => (
|
||||
<div>
|
||||
<h1 className="text-8xl font-bold">Noah Paige</h1>
|
||||
<p className="py-6">Web Developer, Game Designer</p>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<PageSection
|
||||
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.
|
||||
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>
|
||||
</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%"
|
||||
)}
|
||||
/>
|
||||
<footer
|
||||
style={{ backgroundColor: colors[3] }}
|
||||
className="footer p-10 text-neutral-content snap-center"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
|
||||
<footer className="footer p-10 bg-blue-500 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>
|
||||
|
||||
@@ -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);
|
||||
@@ -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 };
|
||||
+6
-1
@@ -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%)'}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user