diff --git a/package-lock.json b/package-lock.json index d25873b..578ae08 100644 --- a/package-lock.json +++ b/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==", - "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", diff --git a/package.json b/package.json index e29ce49..9ddeb65 100644 --- a/package.json +++ b/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", diff --git a/src/AboutMe.tsx b/src/AboutMe.tsx new file mode 100644 index 0000000..7b00fb2 --- /dev/null +++ b/src/AboutMe.tsx @@ -0,0 +1,17 @@ +import { useState } from "react"; + +function AboutMe() { + return ( +
+
+

Card title!

+

If a dog chews shoes whose shoes does he choose?

+
+ +
+
+
+ ); +} + +export default AboutMe; diff --git a/src/App.css b/src/App.css index 6f7fd36..a1b69bd 100644 --- a/src/App.css +++ b/src/App.css @@ -6,4 +6,57 @@ html, body { height: 100vh; overflow: hidden; -} \ No newline at end of file +} + +.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); */ +} diff --git a/src/App.tsx b/src/App.tsx index b07079c..39c0190 100644 --- a/src/App.tsx +++ b/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[]) { - 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 ( -
-
- {messages.map(function (message, i) { - return ( -
-
-
-
-

{message}

-

- Provident cupiditate voluptatem et in. Quaerat fugiat ut - assumenda excepturi exercitationem quasi. In deleniti - eaque aut repudiandae et a id nisi. -

-
-
-
-
-
- - - - - - -
-
+
+
+ ( +
+

Noah Paige

+

Web Developer, Game Designer

- ); - })} - -