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",
}}>
<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,

2
app/about/page.jsx
View file

@ -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"

2
app/projects/page.jsx
View file

@ -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"