feat: use next image to replace some img

moonbamijam · Jan 22, 2024 · b3d5bc1 · b3d5bc1
1 parent 3c13ecb
commit b3d5bc1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -48,7 +48,7 @@ const Home = async () => {
               <h1 className="switch-text-color text-6xl md:text-7xl lg:text-8xl font-bold mb-8">Heya~!</h1>
               <p className="switch-text-color w-[400px] lg:w-[450px] xl:w-[600px] text-sm lg:text-base xl:text-xl ">My name is <strong className="highlight">Moonbami</strong>, and I am currently pursuing a career for being a <strong className="highlight">full-stack web developer</strong>. I am still a novice, but I am making <strong className="highlight">progress and learning</strong> on a daily basis.</p>
             </div>
-            <img className="w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] border-[3px] border-solid border-black dark:border-white rounded-lg" src={`${process.env.API_AVATAR}`} alt="Jam Moonbami" />
+            <Image className="w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] border-[3px] border-solid border-black dark:border-white rounded-lg" src={`${process.env.API_AVATAR}`} alt="Jam Moonbami" />
           </div>
           <ScrollForMore />
         </section>
@@ -117,7 +117,7 @@ const Home = async () => {
             </div>
             <div className="projects flex flex-col gap-[100px]">
               <div className="flex flex-col premium:flex-row-reverse gap-[15px] ">
-                <img src={ `${process.env.API_TSUKIWA}` } className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
+                <Image alt="" src={ `${process.env.API_TSUKIWA}` } className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
                 <div className="description">
                   <li className="switch-text-color text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >tsukiwa</li>
                   <p className="switch-text-color w-[400px] md:w-[600px]">
@@ -139,7 +139,7 @@ const Home = async () => {
                 </div>
               </div>
               <div className="flex flex-col premium:flex-row-reverse gap-[15px] ">
-                <img src={ `${process.env.API_SPA}` } className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
+                <Image alt="" src={ `${process.env.API_SPA}` } className="w-[400px] h-[220px] md:w-[640px] md:h-[480px] lg:w-[800px] lg:h-[400px] object-contain rounded-lg" />
                 <div className="description">
                   <li className="switch-text-color text-3xl md:text-4xl lg:text-5xl font-bold mb-2 " >Student Portal App</li>
                   <p className="switch-text-color w-[400px] md:w-[600px]">

diff --git a/components/StayTuned.tsx b/components/StayTuned.tsx
@@ -1,3 +1,5 @@
+import Image from "next/image"
+
 type Props = {
   src: string | undefined
 }
@@ -7,7 +9,7 @@ const StayTuned = async (props: Props) => {
     <div id="" className=" container relative">
       <section className="content pb-[300px] mt-[200px] lg:mt-[250px] flex flex-col gap-10 items-center justify-center">
         <h1 className="switch-text-color font-bold text-7xl text-center w-[700px]">Please stay tuned for this page!</h1>
-        <img src={`${ props.src }`} alt="" className="w-[300px] h-[300px] object-cover rounded-full" />
+        <Image src={`${ props.src }`} alt="" className="w-[300px] h-[300px] object-cover rounded-full" />
       </section>
     </div>
   )