Run the command 'c'

Author: tecnodeveloper

.gitignore

@@ -2,4 +2,3 @@ node_modules
 .devcontainer
 .next
 devcontainer
-.github

src/components/About.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import Image from "next/image";
 import Link from "next/link";
-import AboutImg from "public/assets/ProfilePicture.jpeg";
+
+const AboutImg = "/assets/ProfilePicture.jpeg";
 
 const About = () => {
 return (
@@ -26,12 +26,10 @@ Check out some of my latest projects.
 </div>
 <div className="w-full h-auto m-auto shadow-xl shadow-gray-400 rounded-xl flex items-center justify-center p-4 hover:scale-105 ease-in duration-300 overflow-hidden">
 <div data-aos="fade-up" data-aos-duration="1000" className="w-full">
-<Image 
+<img 
 src={AboutImg} 
 className="rounded-xl w-full h-auto object-cover" 
 alt="Zain Ali" 
-height={600} 
-width={500} 
 loading="lazy" 
 />
 </div>

src/components/Contact.tsx

@@ -1,11 +1,11 @@
-import Image from "next/image";
 import Link from "next/link";
 import React, { FormEvent, useState } from "react";
 import { AiOutlineArrowRight } from "react-icons/ai";
 import { BsFillPersonLinesFill } from "react-icons/bs";
 import { FaGithub, FaLinkedinIn } from "react-icons/fa";
 import { HiOutlineChevronDoubleUp } from "react-icons/hi";
-import ContactImg from "public/assets/contact.jpg";
+
+const ContactImg = "/assets/contact.jpg";
 import { RotateLoader } from "react-spinners";
 import emailjs from "@emailjs/browser";
 import { emConfig } from "src/utils/constants";
@@ -103,10 +103,10 @@ const Contact = () => {
 						>
 							<div className="lg:p-4 h-full ">
 								<div>
-									<Image
+									<img
 										className="rounded-xl hover:scale-105 ease-in duration-300"
 										src={ContactImg}
-										alt="/"
+										alt="Contact"
 										loading="lazy"
 									/>
 								</div>

src/components/Navbar.tsx

@@ -1,10 +1,10 @@
-import Image from "next/image";
 import Link from "next/link";
 import React, { useState, useEffect } from "react";
 import { AiOutlineClose, AiOutlineMail, AiOutlineMenu } from "react-icons/ai";
 import { FaGithub, FaLinkedinIn } from "react-icons/fa";
 import { BsFillPersonLinesFill } from "react-icons/bs";
-import NavLogo from "public/assets/navLogo.png";
+
+const NavLogo = "/assets/navLogo.png";
 
 const Navbar = () => {
 	const [nav, setNav] = useState(false);
@@ -39,9 +39,9 @@ const Navbar = () => {
 			<div className="flex justify-between items-center h-full px-2 2xl:px-16 ">
 				<Link href="/">
 					<a>
-						<Image
+						<img
 							src={NavLogo}
-							alt="/"
+							alt="Logo"
 							width="125"
 							height="50"
 							className="cursor-pointer"
@@ -99,7 +99,7 @@ const Navbar = () => {
 						<div className="flex w-full items-center justify-between">
 							<Link href="/">
 								<a>
-									<Image src={NavLogo} width="87" height="35" alt="/" loading="lazy" />
+									<img src={NavLogo} width="87" height="35" alt="Logo" loading="lazy" />
 								</a>
 							</Link>
 							<div

src/components/ProjectItem.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
@@ -15,7 +14,7 @@ const ProjectItem = ({ title, backgroundImg, tech, projectUrl }: ItemProps) => {
 			<div className="relative flex items-center justify-center h-auto w-full md:scale-90 shadow-xl shadow-gray-400 rounded-xl group 
   bg-transparent transition-all duration-500 ease-in-out 
   hover:bg-gradient-to-r from-primary to-lightPrimary">
-				<Image className="rounded-xl group-hover:opacity-10" src={backgroundImg} alt="/" loading="lazy" />
+				<img className="rounded-xl group-hover:opacity-10" src={backgroundImg} alt={title} loading="lazy" />
 				<div className="hidden group-hover:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
 					<h3 className="text-2xl text-white tracking-wider text-center">{title}</h3>
 					<p className="pb-4 pt-2 text-white text-center">{tech}</p>

src/components/Skills.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import React from "react";
 import { skills } from "../utils/constants";
 
@@ -18,7 +17,7 @@ const Skills = () => {
 								>
 									<div className="grid grid-cols-2 gap-4 justify-center items-center">
 										<div className="m-auto">
-											<Image src={skill.image} width="64px" height="64px" alt="/" />
+											<img src={skill.image} width="64" height="64" alt={skill.name} />
 										</div>
 										<div className="flex flex-col items-center justify-center">
 											<h3 className="text-lg">{skill.name}</h3>

src/pages/resume.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Head from "next/head";
 import Link from "next/link";
-import Image from "next/image";
 import { FaGithub, FaLinkedinIn, FaDownload } from "react-icons/fa";
-import ResumeShot from "public/assets/Zain_Ali_Resume.jpg";
+
+const ResumeShot = "/assets/Zain_Ali_Resume.jpg";
 
 const ResumePdf = () => {
 	const resumePdfLink = "/assets/ZainResume.pdf";
@@ -17,7 +17,7 @@ const ResumePdf = () => {
 						</div>
 					</a>
 				</div>
-				<Image src={ResumeShot} className="rounded-xl w-full h-auto object-contain" alt="Zain Ali Resume" loading="lazy" />
+				<img src={ResumeShot} className="rounded-xl w-full h-auto object-contain" alt="Zain Ali Resume" loading="lazy" />
 			</div>
 		</>
 	);

src/utils/constants.ts

@@ -1,16 +1,18 @@
-import PHP from "public/assets/skills/javascript.png";
-import Javascript from "public/assets/skills/javascript.png";
-import Node from "public/assets/skills/node.png";
-import Jquery from "public/assets/skills/javascript.png";
-import ReactImg from "public/assets/skills/react.png";
-import Tailwind from "public/assets/skills/tailwind.png";
-import Git from "public/assets/skills/git.png";
-import Docker from "public/assets/skills/docker.png";
-import MongoDB from "public/assets/skills/mongo.png";
-//
-import EcommerceStore from "public/assets/projects/ecommerce-store/ecommerce.jpg";
-import EVC from "public/assets/projects/evc/evc.jpg";
-import BuildMyMVP from "public/assets/projects/build-my-mvp/mvp.jpg";
+// Skills images
+const PHP = "/assets/skills/javascript.png";
+const Javascript = "/assets/skills/javascript.png";
+const Node = "/assets/skills/node.png";
+const Jquery = "/assets/skills/javascript.png";
+const ReactImg = "/assets/skills/react.png";
+const Tailwind = "/assets/skills/tailwind.png";
+const Git = "/assets/skills/git.png";
+const Docker = "/assets/skills/docker.png";
+const MongoDB = "/assets/skills/mongo.png";
+
+// Project images
+const EcommerceStore = "/assets/projects/ecommerce-store/ecommerce.jpg";
+const EVC = "/assets/projects/evc/evc.jpg";
+const BuildMyMVP = "/assets/projects/build-my-mvp/mvp.jpg";
 
 export const skills = [
 	{