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

feat(img, navbar): make the animation smoother

Browse source
This commit is contained in:
Alvalen 2024-04-19 19:44:46 +07:00
parent 231488859c
commit e77b3b9d42
5 changed files with 47 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/(root)/page.jsx
View file

@ -45,7 +45,7 @@ const MyPage = () => {
type: "spring", type: "spring",
}}> }}>
<div className="block md:hidden col-span-1 mx-auto my-10"> <div className="block md:hidden col-span-1 mx-auto my-10">
<div className="bg-slate-500 rounded-full h-60 w-60 grayscale hover:grayscale-0"> <div className="bg-slate-500 rounded-full h-60 w-60 grayscale hover:grayscale-0 transition-all ease duration-300">
<Image <Image
src={Me} src={Me}
width={500} width={500}
@ -100,7 +100,9 @@ const MyPage = () => {
type: "spring", type: "spring",
}}> }}>
<Button variation="primary"> <Button variation="primary">
<Link href={"/docs/cv.pdf"}>Download CV</Link> <Link href={"/docs/cv.pdf"}>
Download CV
</Link>
</Button> </Button>
<Button variation="secondary"> <Button variation="secondary">
<a href="#contact">Contact Me</a> <a href="#contact">Contact Me</a>
@ -115,7 +117,7 @@ const MyPage = () => {
delay: 0.7, delay: 0.7,
type: "spring", type: "spring",
}}> }}>
<div className="rounded-full h-auto w-auto lg:px-12 grayscale hover:grayscale-0"> <div className="rounded-full h-auto w-auto lg:px-12 grayscale hover:grayscale-0 transition-all ease duration-300">
<Image <Image
src={Me} src={Me}
width={400} width={400}
@ -132,7 +134,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden"> <div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0" className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
initial={{ initial={{
x: 300, x: 300,
opacity: 0, opacity: 0,
@ -201,7 +203,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden"> <div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0" className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
initial={{ initial={{
x: 300, x: 300,
opacity: 0, opacity: 0,
@ -274,7 +276,7 @@ const MyPage = () => {
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden"> <div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0" className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
initial={{ initial={{
x: 300, x: 300,
opacity: 0, opacity: 0,

2
app/about/page.jsx
View file

@ -38,7 +38,7 @@ export default function Page() {
initial={{ scale: 1 }} initial={{ scale: 1 }}
animate={{ scale: 1.6 }} animate={{ scale: 1.6 }}
transition={{ ease: "circOut", duration: 1 }} transition={{ ease: "circOut", duration: 1 }}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300">
<Image <Image
src={Me2} src={Me2}
alt="Alvalens" alt="Alvalens"

2
app/projects/page.jsx
View file

@ -114,7 +114,7 @@ export default function Page() {
initial={{ scale: 1 }} initial={{ scale: 1 }}
animate={{ scale: 1.6 }} animate={{ scale: 1.6 }}
transition={{ duration: 1, ease: "circOut" }} transition={{ duration: 1, ease: "circOut" }}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300">
<Image <Image
src={ProjectAll} src={ProjectAll}
alt="Alvalens" alt="Alvalens"

12
components/FixedButton.jsx
View file

@ -1,9 +1,9 @@
const FixedButton = ({ children, onClick }) => ( const FixedButton = ({ children, onClick }) => (
<button <button
onClick={onClick} onClick={onClick}
className="fixed top-2 -left-2 md:left-10 flex justify-center items-center rounded-full p-4 transition duration-300 ease-in-out z-50 transparent"> className="fixed top-2 -left-2 md:left-10 flex justify-center items-center rounded-full p-4 transition duration-300 ease-in-out z-50 transparent">
{children} {children}
</button> </button>
); );
export default FixedButton; export default FixedButton;

60
components/Navbar.jsx
View file

@ -80,15 +80,26 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
}); });
} }
const itemVariants = { const itemVariants = {
open: { open: (custom) => ({
opacity: 1, opacity: 1,
y: 0, x: 0,
rotate: 0, rotate: 0,
}, transition: {
delay: custom,
type: "spring",
stiffness: 400,
damping: 40,
},
}),
closed: { closed: {
opacity: 0, opacity: 0,
y: -40, x: -80,
rotate: 0, rotate: 0,
transition: {
type: "spring",
stiffness: 400,
damping: 40,
},
}, },
}; };
@ -103,23 +114,20 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
<div className="flex flex-col items-center space-y-8 my-auto mx-0"> <div className="flex flex-col items-center space-y-8 my-auto mx-0">
{/* title */} {/* title */}
<motion.h1 <motion.h1
animate={{ opacity: 1 }} variants={itemVariants}
initial={{ opacity: 0 }} animate={isNavOpen ? "open" : "closed"}
transition={{ delay: 0.5, duration: 1 }}
className="text-6xl font-bold text-white "> className="text-6xl font-bold text-white ">
Menu Menu
</motion.h1> </motion.h1>
<a href="/#home"> <a href="/#home">
<div <div
onClick={handleItemClick}
className="text-2xl font-bold text-white" className="text-2xl font-bold text-white"
variants={itemVariants} onClick={handleItemClick}>
animate={isNavOpen ? "open" : "closed"}
delay={1}>
<motion.h2 <motion.h2
className="text-white" className="text-white"
variants={itemVariants} variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}> animate={isNavOpen ? "open" : "closed"}
custom={0.1}>
Home Home
</motion.h2> </motion.h2>
</div> </div>
@ -127,14 +135,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
<Link href="/about"> <Link href="/about">
<div <div
onClick={handleItemClick} onClick={handleItemClick}
className="text-2xl font-bold text-white" className="text-2xl font-bold text-white">
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}
delay={1.2}>
<motion.h2 <motion.h2
className="text-white" className="text-white"
variants={itemVariants} variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}> animate={isNavOpen ? "open" : "closed"}
custom={0.2}>
About About
</motion.h2> </motion.h2>
</div> </div>
@ -142,14 +148,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
<Link href="/projects"> <Link href="/projects">
<div <div
onClick={handleItemClick} onClick={handleItemClick}
className="text-2xl font-bold text-white" className="text-2xl font-bold text-white">
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}
delay={1.3}>
<motion.h2 <motion.h2
className="text-white" className="text-white"
variants={itemVariants} variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}> animate={isNavOpen ? "open" : "closed"}
custom={0.3}>
Projects Projects
</motion.h2> </motion.h2>
</div> </div>
@ -157,14 +161,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
<a href="/#contact"> <a href="/#contact">
<div <div
onClick={handleItemClick} onClick={handleItemClick}
className="text-2xl font-bold text-white" className="text-2xl font-bold text-white">
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}
delay={1.4}>
<motion.h2 <motion.h2
className="text-white" className="text-white"
variants={itemVariants} variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}> animate={isNavOpen ? "open" : "closed"}
custom={0.4}>
Contact Contact
</motion.h2> </motion.h2>
</div> </div>
@ -190,12 +192,12 @@ const Navbar = () => {
ref={navRef} ref={navRef}
className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${ className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
isNavOpen isNavOpen
? "bg-transparent" ? "backdrop-filter backdrop-blur-md bg-gray-700 bg-opacity-50"
: "backdrop-filter backdrop-blur-md" : "backdrop-filter backdrop-blur-md"
} inset-0 bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}> } inset-0 bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
<div> <div>
<h1 <h1
className={`text-2xl ml-2 md:ml-0 ${ className={`text-2xl ml-2 md:ml-0 transition-colors ease duration-500 ${
isNavOpen ? "text-white" : "" isNavOpen ? "text-white" : ""
}`}> }`}>
Alvalens Alvalens