codemode

Author: kochie

src/components/Awards/index.tsx

@@ -1,4 +1,4 @@
-import Image from "next/legacy/image";
+import Image from "next/image";
 import Link from 'next/link'
 import React, { forwardRef } from 'react'
 
@@ -15,7 +15,10 @@ const Img = (props, ref) => (
       height={764}
       placeholder="blur"
       blurDataURL={`data:image/png;base64,${placeholder}`}
-    />
+      style={{
+        maxWidth: "100%",
+        height: "auto"
+      }} />
   </div>
 )
 

src/components/GetInTouch/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Image from "next/legacy/image";
+import Image from "next/image";
 
 import XPS from '@/images/xps-6uneKLGrJPs-unsplash.jpg'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -18,11 +18,13 @@ const GetInTouch = () => {
         <Image
           src={XPS}
           alt="XPS laptop on bench"
-          layout="fill"
-          objectFit="cover"
           placeholder="blur"
           className="group-hover:scale-110 transition transform-gpu duration-100"
-        />
+          fill
+          sizes="100vw"
+          style={{
+            objectFit: "cover"
+          }} />
       </div>
       <div className="ml-6">
         <h2 className="text-gray-900 dark:text-white font-bold text-2xl mt-6 mb-4">
@@ -92,7 +94,7 @@ const GetInTouch = () => {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default GetInTouch

src/components/Middle/Middle.tsx

@@ -6,7 +6,7 @@ import { MDXProvider } from '@mdx-js/react'
 import Hello from './intro.mdx'
 import GetInTouch from '@/components/GetInTouch'
 import Awards from '@/components/Awards'
-import Image from "next/legacy/image";
+import Image from "next/image";
 
 export default function Middle(): ReactElement {
   return (
@@ -33,10 +33,14 @@ export default function Middle(): ReactElement {
               </a>
             ),
             img: ({ src, alt }) => (
-              <Image src={src} alt={alt} className="my-10 rounded-xl" />
-              // <div className="h-96">
-              //   <Image src={src} layout="fill" />
-              // </div>
+              <Image
+                src={src}
+                alt={alt}
+                className="my-10 rounded-xl"
+                style={{
+                  maxWidth: "100%",
+                  height: "auto"
+                }} />
             ),
           }}
         >
@@ -48,5 +52,5 @@ export default function Middle(): ReactElement {
         <RecentArticles />
       </div>
     </div>
-  )
+  );
 }

src/components/Portfolio/Portfolio.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import Image from "next/legacy/image";
+import Image from "next/image";
 
 import Space from '@/images/space.png'
 import Particlez from '@/images/particlez.png'
@@ -73,13 +73,15 @@ export default function Portfolio(): ReactElement {
             >
               <a href={project.link}>
                 <Image
-                  layout="fill"
                   src={project.image}
                   alt={project.title}
-                  objectFit="cover"
                   placeholder="blur"
                   className="absolute top-0 left-0 w-full h-full group-hover:scale-110 transform-gpu transition duration-100"
-                />
+                  fill
+                  sizes="100vw"
+                  style={{
+                    objectFit: "cover"
+                  }} />
                 {/* <span className="portfolio-text">View</span> */}
               </a>
             </div>
@@ -97,5 +99,5 @@ export default function Portfolio(): ReactElement {
         ))}
       </div>
     </div>
-  )
+  );
 }

src/components/RecentArticles/RecentArticles.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import Image from "next/legacy/image";
+import Image from "next/image";
 import useSWR from 'swr'
 import Link from 'next/link'
 
@@ -56,14 +56,16 @@ export default function RecentArticles(): ReactElement {
               <a href={article.url}>
                 <Image
                   className="group-hover:scale-110 transition transform-gpu duration-100"
-                  layout="fill"
-                  objectFit="cover"
-                  objectPosition="center"
                   alt={article.title}
                   src={article.image}
                   placeholder="blur"
                   blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAKABIDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAYEBQcI/8QAKBAAAQMDAwMDBQAAAAAAAAAAAQIDBBEFABIhBgcjMRQiEzJCUXGR/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAIEBf/EABwRAAEEAwEAAAAAAAAAAAAAAAEAQQIhE9HwA//aAAwDAQACEQMRAD8AaLZceON9VUT4txmRum1FMszi6ta3wNtKSRXcmtCk/UP3lnJ5d0yb6d8kXeEwWJchC2rEw++4j1CiSEgJAAVt7qHb20ziPgFwlVvSfUvaWk1QPkNEdsePxk2Dc5l4F4M+W/OKEVSZLhc00QkClSabE/3FHnKJMqdloEihbOtEcfiuOLWu4nWo1PeT5wxFXHa1q7aPJ+0YZPjHE7RkPAaX/9k="
-                />
+                  fill
+                  sizes="100vw"
+                  style={{
+                    objectFit: "cover",
+                    objectPosition: "center"
+                  }} />
               </a>
             </div>
             <div className="ml-5">

src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, ReactElement, useCallback } from 'react'
-import NextImage from "next/legacy/image";
+import NextImage from "next/image";
 
 import Connections from '@/components/Connections/Connections'
 
@@ -90,11 +90,14 @@ const Sidebar = (): ReactElement => {
       <div className="flex flex-col z-10 text-center items-center h-full mt-20">
         <div className="rounded-full w-40 h-40 overflow-hidden">
           <NextImage
-            layout="responsive"
             src={avatar}
             alt="me"
             placeholder="blur"
-          />
+            sizes="100vw"
+            style={{
+              width: "100%",
+              height: "auto"
+            }} />
         </div>
         <div className={style.quote}>{quote}</div>
         <Connections />
@@ -109,7 +112,7 @@ const Sidebar = (): ReactElement => {
         </div>
       </div>
     </nav>
-  )
+  );
 }
 
 export default Sidebar