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

[feat] changed image size

Browse source
This commit is contained in:
Alvalen 2023-09-03 14:51:08 +07:00
parent 3b91699865
commit c6aab9074d
1 changed files with 22 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/(root)/page.js
View file

@ -45,10 +45,11 @@ 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-full"> <div className="bg-slate-500 rounded-full h-60 w-60">
<Image <Image
src={Me} src={Me}
layout="fill" width={500}
height={500}
className="rounded-full w-full h-full object-cover " className="rounded-full w-full h-full object-cover "
alt="Alvalens" alt="Alvalens"
placeholder="blur" placeholder="blur"
@ -114,15 +115,17 @@ const MyPage = () => {
delay: 0.7, delay: 0.7,
type: "spring", type: "spring",
}}> }}>
<div className=" rounded-full h-auto w-auto aspect-square md:px-12"> <div className=" rounded-full h-auto w-auto md:px-12">
<Image <div className="h-[300px] w-auto">
src="/img/me.jpg" <Image
layout="intrinsic" src={Me}
width={500} layout="fill"
height={500} objectFit="cover"
className="rounded-full w-full h-full object-cover grayscale hover:grayscale-0" placeholder="blur"
alt="Alvalens" className="grayscale hover:grayscale-0"
/> alt="Alvalens"
/>
</div>
</div> </div>
</motion.div> </motion.div>
</div> </div>
@ -146,14 +149,14 @@ const MyPage = () => {
type: "spring", type: "spring",
}} }}
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 ">
<Image <Image
src={MeAbout} src={MeAbout}
layout="fill" layout="fill"
className="object-cover" className="object-cover"
alt="Alvalens" alt="Alvalens"
placeholder="blur" placeholder="blur"
/> />
</motion.div> </motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5">
<motion.h1 <motion.h1