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

109
components/Hr.jsx
View file

@ -1,38 +1,79 @@
import { motion } from "framer-motion";
export default function Hr() {
import PropTypes from "prop-types";
export default function Hr({ variant }) {
return (
<div className="flex justify-center items-center flex-col my-5 ">
<motion.div
className="bg-gray-700 w-20 h-1 rounded-full mb-2"
initial={{
opacity: 0,
x: -45,
}}
whileInView={{
opacity: 1,
x: 0,
}}
transition={{
delay: 0.2,
type: "spring",
}}></motion.div>
<motion.div
className="bg-gray-700 w-20 h-1 rounded-full "
initial={{
opacity: 0,
x: 150,
}}
whileInView={{
opacity: 1,
x: 40,
}}
transition={{
delay: 0.3,
type: "spring",
}}></motion.div>
</div>
<>
{variant === "long" ? (
<>
<motion.div
className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
initial={{
opacity: 0,
x: -100,
}}
whileInView={{
opacity: 1,
x: 0,
}}
transition={{
delay: 0.3,
type: "spring",
}}></motion.div>
<motion.div
className="bg-gray-700 w-28 h-1 rounded-full"
initial={{
opacity: 0,
x: 200,
}}
whileInView={{
opacity: 1,
x: -50,
}}
transition={{
delay: 0.4,
type: "spring",
}}></motion.div>
</>
) : (
<div className="flex justify-center items-center flex-col my-5">
<motion.div
className="bg-gray-700 w-20 h-1 rounded-full mb-2"
initial={{
opacity: 0,
x: -45,
}}
whileInView={{
opacity: 1,
x: 0,
}}
transition={{
delay: 0.2,
type: "spring",
}}></motion.div>
<motion.div
className="bg-gray-700 w-20 h-1 rounded-full"
initial={{
opacity: 0,
x: 150,
}}
whileInView={{
opacity: 1,
x: 40,
}}
transition={{
delay: 0.3,
type: "spring",
}}></motion.div>
</div>
)}
</>
);
}
Hr.propTypes = {
variant: PropTypes.oneOf(["short", "long"]),
};
Hr.defaultProps = {
variant: "short",
};