v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: separating each section of pages in about

Browse source
This commit is contained in:
Alvalen 2025-01-15 12:08:54 +07:00
parent 43a3d944ea
commit e89217aad8
13 changed files with 672 additions and 724 deletions
Download patch file Download diff file Expand all files Collapse all files

126
app/about/components/quote/quote.jsx
View file

@ -3,6 +3,30 @@ import "./style.css";
import { motion } from "framer-motion";
import { useIntersectionObserver } from "./useIntersectionObserver";
function Wrapper({ children }) {
return (
<div className="min-h-[80vh] mx-auto container p-10 grid grid-cols-1 mt-10 ">
<motion.div
className="flex justify-center items-center flex-col mb-5 "
initial={{
opacity: 0,
scale: 0.9,
}}
whileInView={{
opacity: 1,
scale: 1,
}}
transition={{
delay: 0.6,
duration: 2,
ease: [0.22, 1, 0.36, 1],
}}>
{children}
</motion.div>
</div>
);
}
export default function Quote() {
const text1 = '"There are no limits to what you can accomplish'.split(" ");
const text2 = 'except the limits you place on your own thinking."'.split(
@ -11,53 +35,59 @@ export default function Quote() {
const [ref, isIntersecting] = useIntersectionObserver();
return (
<div ref={ref} className="text-center">
<h3 className="text-[2rem]">
{text1.map((word, index) => (
<motion.span
key={index}
initial={{
opacity: 0,
filter: "blur(4px)",
scale: 0.92,
}}
animate={{
opacity: isIntersecting ? 1 : 0,
filter: isIntersecting ? "blur(0px)" : "blur(4px)",
scale: isIntersecting ? 1 : 0.92,
}}
transition={{
delay: isIntersecting ? index * 0.1 : 0,
duration: 0.5,
}}>
{word}{" "}
</motion.span>
))}
</h3>
<h3 className="text-xl">
{text2.map((word, index) => (
<motion.span
key={index + text1.length}
initial={{
opacity: 0,
filter: "blur(4px)",
scale: 0.92,
}}
animate={{
opacity: isIntersecting ? 1 : 0,
filter: isIntersecting ? "blur(0px)" : "blur(4px)",
scale: isIntersecting ? 1 : 0.92,
}}
transition={{
delay: isIntersecting
? (text1.length + index) * 0.1
: 0,
duration: 0.5,
}}>
{word}{" "}
</motion.span>
))}
</h3>
</div>
<Wrapper>
<div ref={ref} className="text-center">
<h3 className="text-[2rem]">
{text1.map((word, index) => (
<motion.span
key={index}
initial={{
opacity: 0,
filter: "blur(4px)",
scale: 0.92,
}}
animate={{
opacity: isIntersecting ? 1 : 0,
filter: isIntersecting
? "blur(0px)"
: "blur(4px)",
scale: isIntersecting ? 1 : 0.92,
}}
transition={{
delay: isIntersecting ? index * 0.1 : 0,
duration: 0.5,
}}>
{word}{" "}
</motion.span>
))}
</h3>
<h3 className="text-xl">
{text2.map((word, index) => (
<motion.span
key={index + text1.length}
initial={{
opacity: 0,
filter: "blur(4px)",
scale: 0.92,
}}
animate={{
opacity: isIntersecting ? 1 : 0,
filter: isIntersecting
? "blur(0px)"
: "blur(4px)",
scale: isIntersecting ? 1 : 0.92,
}}
transition={{
delay: isIntersecting
? (text1.length + index) * 0.1
: 0,
duration: 0.5,
}}>
{word}{" "}
</motion.span>
))}
</h3>
</div>
</Wrapper>
);
}