Migration of images in about page to improve performance

app/about/aboutMe/AboutMe.jsx

@@ -1,7 +1,6 @@
 "use client";
 import React, { useRef } from "react";
 import Image from "next/image";
-import aboutmeImage from "@/public/assets/aboutme-image.png";
 import { AnimatePresence, motion } from "framer-motion";
 
 function AboutMe() {
@@ -64,9 +63,11 @@ function AboutMe() {
       >
         <div className="window-outline">
           <Image
-            src={aboutmeImage}
+            src="https://res.cloudinary.com/dkgoszhfr/image/upload/v1709861423/hosting/portfolio-about-images/gixv7hil8tsjmvkszteu.png"
             alt="computer Image"
             className="rounded-2xl text-center object-cover h-[400px] w-[250px] md:object-cover md:h-auto md:w-[400px]"
+            width={250}
+            height={400}
           />
         </div>
       </div>

app/about/freeTime/FreeTime.jsx

@@ -1,7 +1,6 @@
 "use client";
 import React, { useRef } from "react";
 import Image from "next/image";
-import freeTimeImage from "@/public/assets/free-time-image.png";
 import { AnimatePresence, motion, useInView } from "framer-motion";
 
 function FreeTime() {
@@ -16,9 +15,11 @@ function FreeTime() {
       >
         <div className="window-outline">
           <Image
-            src={freeTimeImage}
+            src="https://res.cloudinary.com/dkgoszhfr/image/upload/v1709861417/hosting/portfolio-about-images/ol8imypraurw2m0hkxyr.png"
             alt="computer Image"
             className="rounded-2xl text-center object-cover h-[400px] w-[250px] md:object-cover md:h-auto md:w-[400px]"
+            width={250}
+            height={400}
           />
         </div>
       </div>
@@ -44,7 +45,8 @@ function FreeTime() {
           <p className="pt-10 pl-2 pr-2 md:pl-10 md:pr-10 pb-10 text-[14px] font-thin tracking-wide @apply whitespace-pre-line text-center md:text-start">
             Probably developing new projects to enhance my skills or perfecting
             my portfolio in some ways. Besides that, I spend my time hiking or
-            reading books about history. Another thing I love is playing various game simulators, whether it's planes, trucks, cars, or ships.
+            reading books about history. Another thing I love is playing various
+            game simulators, whether it's planes, trucks, cars, or ships.
           </p>
         </motion.div>
       </AnimatePresence>

app/about/summary/Summary.jsx

@@ -1,7 +1,6 @@
 "use client";
 import React from "react";
 import Image from "next/image";
-import summaryImage from "@/public/assets/summary-image.png";
 import { motion, AnimatePresence } from "framer-motion";
 
 function Summary() {
@@ -13,9 +12,11 @@ function Summary() {
       >
         <div className="window-outline md:flex">
           <Image
-            src={summaryImage}
+            src="https://res.cloudinary.com/dkgoszhfr/image/upload/v1709861429/hosting/portfolio-about-images/lw106x9gbqbdummexenv.png"
             alt="computer Image"
             className="rounded-2xl text-center object-cover h-[400px] w-[250px] md:object-cover md:h-auto md:w-[400px]"
+            width={250}
+            height={400}
           />
         </div>
       </div>

next.config.js

@@ -20,6 +20,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "duodigitalmarketing.000webhostapp.com",
       },
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+      },
     ],
     loader: "custom",
     loaderFile: './components/loader/loader.js',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio-vercel",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "dev": "next dev",