Update images sizes

salimi-my · Apr 22, 2024 · e0059e1 · e0059e1
1 parent 4d164d7
commit e0059e1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/components/landing/about.tsx b/components/landing/about.tsx
@@ -49,7 +49,12 @@ export default function About({ about }: AboutProps) {
             className='lg:col-span-3 w-4/5 md:w-1/2 mx-auto lg:w-full aspect-square rounded-2xl bg-gradient-to-tr from-transparent via-primary to-transparent'
           >
             <div className='rounded-2xl overflow-hidden rotate-[10deg] transition duration-300 ease-in-out hover:rotate-0 relative'>
-              <Image src={tilted} alt='about' placeholder='blur' />
+              <Image
+                src={tilted}
+                alt='about'
+                placeholder='blur'
+                sizes='(max-width: 768px) 50vw, 100vw'
+              />
             </div>
           </m.div>
           <div className='lg:col-span-4 flex flex-col gap-8'>

diff --git a/components/landing/header.tsx b/components/landing/header.tsx
@@ -106,7 +106,13 @@ export default function Header({ miscellaneous }: HeaderProps) {
             </div>
             <div className='grow flex justify-center'>
               <div className='me w-60 h-96 xs:w-72 xs:h-96 md:w-[22rem] md:h-[30rem]'>
-                <Image src={profile} alt='me' placeholder='blur' priority />
+                <Image
+                  src={profile}
+                  alt='me'
+                  placeholder='blur'
+                  sizes='(max-width: 768px) 50vw, 100vw'
+                  priority
+                />
               </div>
             </div>
             <div className='flex flex-col items-center justify-center gap-4'>

diff --git a/components/landing/portfolio-card.tsx b/components/landing/portfolio-card.tsx
@@ -43,15 +43,15 @@ export default function PortfolioCard({
             fill
             placeholder='blur'
             blurDataURL={portfolio.blurDataUrl}
-            sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
+            sizes='(max-width: 1024px) 50vw, 30vw'
             className='object-cover object-top group-hover:object-bottom transition-all duration-6000 ease-in-out rounded-t-2xl border-t border-x'
           />
         ) : portfolio.image ? (
           <Image
             src={portfolio.image}
             alt='portfolio'
             fill
-            sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
+            sizes='(max-width: 1024px) 50vw, 30vw'
             className='object-cover object-top group-hover:object-bottom transition-all duration-6000 ease-in-out rounded-t-2xl border-t border-x'
           />
         ) : null}