mirror of
https://github.com/noahpaige/portfolio-website.git
synced 2026-06-09 00:28:02 -06:00
add for loop for sections
This commit is contained in:
Noah Paige
+51
-164
@@ -1,8 +1,16 @@
|
|||||||
import { useState } from "react";
|
import { useState, useRef } from "react";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0);
|
const [count, setCount] = useState(0);
|
||||||
|
const scrollRef = useRef(null);
|
||||||
|
const messages = [
|
||||||
|
"It's over Anakin! I have the high ground.",
|
||||||
|
"YoU uNdErEsTiMaTe My PoWeR!!",
|
||||||
|
"It was said that you would, destroy the Sith, not join them.",
|
||||||
|
"You were my brother, Anakin.",
|
||||||
|
];
|
||||||
|
|
||||||
const curves = [
|
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,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,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",
|
||||||
@@ -16,172 +24,51 @@ function App() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="overflow-scroll">
|
<div ref={scrollRef} className="overflow-scroll">
|
||||||
<div className="snap-mandatory snap-y overflow-scroll h-screen bg-base-200">
|
<div className="snap-mandatory snap-y overflow-scroll h-screen bg-base-200">
|
||||||
<div className="snap-center h-screen">
|
{messages.map(function (message, i) {
|
||||||
<div className="relative h-screen w-screen">
|
return (
|
||||||
<div className="absolute top-0 bg-blue-500 h-12 w-screen" />
|
<div className="snap-center h-screen" key={message}>
|
||||||
<svg
|
<div className="hero h-screen relative ">
|
||||||
className="drop-shadow-xl absolute top-11 fill-blue-500 "
|
<div className="hero-content text-center">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<div className="max-w-md">
|
||||||
viewBox="0 0 1440 320"
|
<h1 className="text-5xl font-bold">{message}</h1>
|
||||||
preserveAspectRatio="none"
|
<p className="py-6">
|
||||||
height="6rem"
|
Provident cupiditate voluptatem et in. Quaerat fugiat ut
|
||||||
width="100%"
|
assumenda excepturi exercitationem quasi. In deleniti
|
||||||
>
|
eaque aut repudiandae et a id nisi.
|
||||||
<path className="" fill-opacity="1" d={curves[0]}></path>
|
</p>
|
||||||
</svg>
|
</div>
|
||||||
<svg
|
</div>
|
||||||
className="drop-shadow-xl absolute bottom-11 fill-blue-500"
|
</div>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<div className="relative h-screen w-screen -translate-y-full">
|
||||||
viewBox="0 0 1440 320"
|
<div className="absolute top-0 bg-blue-500 h-12 w-screen" />
|
||||||
preserveAspectRatio="none"
|
<svg
|
||||||
height="6rem"
|
className="drop-shadow-xl absolute top-11 fill-blue-500 "
|
||||||
width="100%"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
viewBox="0 0 1440 320"
|
||||||
<path fill-opacity="1" d={curves[1]}></path>
|
preserveAspectRatio="none"
|
||||||
</svg>
|
height="100"
|
||||||
<div className="absolute bottom-0 bg-blue-500 h-12 w-screen" />
|
width="100%"
|
||||||
</div>
|
>
|
||||||
<div className="hero h-screen relative -translate-y-full ">
|
<path fillOpacity="1" d={curves[i * 2]}></path>
|
||||||
<div className="hero-content text-center">
|
</svg>
|
||||||
<div className="max-w-md">
|
<svg
|
||||||
<h1 className="text-5xl font-bold">
|
className="drop-shadow-xl absolute bottom-11 fill-blue-500"
|
||||||
It's over Anakin! I have the high ground.
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</h1>
|
viewBox="0 0 1440 320"
|
||||||
<p className="py-6">
|
preserveAspectRatio="none"
|
||||||
Provident cupiditate voluptatem et in. Quaerat fugiat ut
|
height="100"
|
||||||
assumenda excepturi exercitationem quasi. In deleniti eaque
|
width="100%"
|
||||||
aut repudiandae et a id nisi.
|
>
|
||||||
</p>
|
<path fillOpacity="1" d={curves[i * 2 + 1]}></path>
|
||||||
<button className="btn btn-primary">Get Started</button>
|
</svg>
|
||||||
|
<div className="absolute bottom-0 bg-blue-500 h-12 w-screen" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
})}
|
||||||
<div className="snap-center h-screen">
|
|
||||||
<div className="relative h-screen w-screen">
|
|
||||||
<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="6rem"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<path fill-opacity="1" d={curves[2]}></path>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
className="drop-shadow-xl absolute bottom-10 fill-blue-500"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
height="6rem"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<path fill-opacity="1" d={curves[3]}></path>
|
|
||||||
</svg>
|
|
||||||
<div className="absolute bottom-0 bg-blue-500 h-11 w-screen" />
|
|
||||||
</div>
|
|
||||||
<div className="hero h-screen relative -translate-y-full ">
|
|
||||||
<div className="hero-content text-center">
|
|
||||||
<div className="max-w-md">
|
|
||||||
<h1 className="text-5xl font-bold">
|
|
||||||
YoU uNdErEsTiMaTe My PoWeR!!
|
|
||||||
</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>
|
|
||||||
<button className="btn btn-primary">Get Started</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="snap-center h-screen">
|
|
||||||
<div className="relative h-screen w-screen">
|
|
||||||
<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="6rem"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<path fill-opacity="1" d={curves[4]}></path>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
className="drop-shadow-xl absolute bottom-10 fill-blue-500"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
height="6rem"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<path fill-opacity="1" d={curves[5]}></path>
|
|
||||||
</svg>
|
|
||||||
<div className="absolute bottom-0 bg-blue-500 h-11 w-screen" />
|
|
||||||
</div>
|
|
||||||
<div className="hero h-screen relative -translate-y-full ">
|
|
||||||
<div className="hero-content text-center">
|
|
||||||
<div className="max-w-md">
|
|
||||||
<h1 className="text-5xl font-bold">
|
|
||||||
It was said that you would, destroy the Sith, not join them.
|
|
||||||
</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>
|
|
||||||
<button className="btn btn-primary">Get Started</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="snap-center h-screen">
|
|
||||||
<div className="relative h-screen w-screen">
|
|
||||||
<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="6rem"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<path fill-opacity="1" d={curves[6]}></path>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
className="drop-shadow-xl absolute bottom-10 fill-blue-500"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
height="6rem"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<path fill-opacity="1" d={curves[7]}></path>
|
|
||||||
</svg>
|
|
||||||
<div className="absolute bottom-0 bg-blue-500 h-11 w-screen" />
|
|
||||||
</div>
|
|
||||||
<div className="hero h-screen relative -translate-y-full ">
|
|
||||||
<div className="hero-content text-center">
|
|
||||||
<div className="max-w-md">
|
|
||||||
<h1 className="text-5xl font-bold">
|
|
||||||
You were my brother, Anakin.
|
|
||||||
</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>
|
|
||||||
<button className="btn btn-primary">Get Started</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer className="footer p-10 bg-blue-500 text-neutral-content snap-center">
|
<footer className="footer p-10 bg-blue-500 text-neutral-content snap-center">
|
||||||
<div>
|
<div>
|
||||||
<span className="footer-title">Services</span>
|
<span className="footer-title">Services</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user