feat(img, navbar): make the animation smoother
This commit is contained in:
Alvalen
parent
231488859c
commit
e77b3b9d42
5 changed files with 47 additions and 43 deletions
|
|
@ -45,7 +45,7 @@ const MyPage = () => {
|
|||
type: "spring",
|
||||
}}>
|
||||
<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
|
||||
src={Me}
|
||||
width={500}
|
||||
|
|
@ -100,7 +100,9 @@ const MyPage = () => {
|
|||
type: "spring",
|
||||
}}>
|
||||
<Button variation="primary">
|
||||
<Link href={"/docs/cv.pdf"}>Download CV</Link>
|
||||
<Link href={"/docs/cv.pdf"}>
|
||||
Download CV
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variation="secondary">
|
||||
<a href="#contact">Contact Me</a>
|
||||
|
|
@ -115,7 +117,7 @@ const MyPage = () => {
|
|||
delay: 0.7,
|
||||
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
|
||||
src={Me}
|
||||
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="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||
<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={{
|
||||
x: 300,
|
||||
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="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||
<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={{
|
||||
x: 300,
|
||||
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="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
|
||||
<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={{
|
||||
x: 300,
|
||||
opacity: 0,
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default function Page() {
|
|||
initial={{ scale: 1 }}
|
||||
animate={{ scale: 1.6 }}
|
||||
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
|
||||
src={Me2}
|
||||
alt="Alvalens"
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default function Page() {
|
|||
initial={{ scale: 1 }}
|
||||
animate={{ scale: 1.6 }}
|
||||
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
|
||||
src={ProjectAll}
|
||||
alt="Alvalens"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
const FixedButton = ({ children, onClick }) => (
|
||||
<button
|
||||
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">
|
||||
{children}
|
||||
</button>
|
||||
<button
|
||||
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">
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
export default FixedButton;
|
||||
|
|
@ -80,15 +80,26 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
|
|||
});
|
||||
}
|
||||
const itemVariants = {
|
||||
open: {
|
||||
open: (custom) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
x: 0,
|
||||
rotate: 0,
|
||||
},
|
||||
transition: {
|
||||
delay: custom,
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 40,
|
||||
},
|
||||
}),
|
||||
closed: {
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
x: -80,
|
||||
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">
|
||||
{/* title */}
|
||||
<motion.h1
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ delay: 0.5, duration: 1 }}
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
className="text-6xl font-bold text-white ">
|
||||
Menu
|
||||
</motion.h1>
|
||||
<a href="/#home">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1}>
|
||||
onClick={handleItemClick}>
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
custom={0.1}>
|
||||
Home
|
||||
</motion.h2>
|
||||
</div>
|
||||
|
|
@ -127,14 +135,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
|
|||
<Link href="/about">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1.2}>
|
||||
className="text-2xl font-bold text-white">
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
custom={0.2}>
|
||||
About
|
||||
</motion.h2>
|
||||
</div>
|
||||
|
|
@ -142,14 +148,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
|
|||
<Link href="/projects">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1.3}>
|
||||
className="text-2xl font-bold text-white">
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
custom={0.3}>
|
||||
Projects
|
||||
</motion.h2>
|
||||
</div>
|
||||
|
|
@ -157,14 +161,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
|
|||
<a href="/#contact">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1.4}>
|
||||
className="text-2xl font-bold text-white">
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
custom={0.4}>
|
||||
Contact
|
||||
</motion.h2>
|
||||
</div>
|
||||
|
|
@ -190,12 +192,12 @@ const Navbar = () => {
|
|||
ref={navRef}
|
||||
className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
|
||||
isNavOpen
|
||||
? "bg-transparent"
|
||||
? "backdrop-filter backdrop-blur-md bg-gray-700 bg-opacity-50"
|
||||
: "backdrop-filter backdrop-blur-md"
|
||||
} inset-0 bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
|
||||
<div>
|
||||
<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" : ""
|
||||
}`}>
|
||||
Alvalens
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue