diff --git a/next.config.mjs b/next.config.mjs
index a90093d..3b02240 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,18 @@
+/* eslint-disable no-undef */
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   basePath: "",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "abolfazlcodes.github.io",
+        port: "",
+        pathname: "/arman/**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/src/app/(home)/_components/HomeHeroSection.tsx b/src/app/(home)/_components/HomeHeroSection.tsx
index e6321bf..bdfb931 100644
--- a/src/app/(home)/_components/HomeHeroSection.tsx
+++ b/src/app/(home)/_components/HomeHeroSection.tsx
@@ -1,9 +1,11 @@
+import { NEXT_BASE_PATH } from "@/constants";
 import { Fira_Code } from "next/font/google";
 import Image from "next/image";
 
 const firaCode = Fira_Code({
   subsets: ["latin"],
   weight: ["300", "400", "500", "700", "600"],
+  preload: true,
 });
 
 const HomeHeroSection = () => {
@@ -32,7 +34,8 @@ const HomeHeroSection = () => {
 
       <figure className="h-[320px] w-[250px] rotate-6 overflow-hidden rounded-20 shadow-heroImage2 transition-all duration-100 ease-linear hover:-rotate-2 sm:h-[370px] sm:w-[330px] md:order-2 md:h-[400px] md:w-[360px]">
         <Image
-          src={"/images/hero-img.jpeg"}
+          // src={`/images/hero-img.jpeg`}
+          src={`${NEXT_BASE_PATH}/images/hero-img.jpeg`}
           alt="arman photo"
           fill
           className="h-full w-full object-cover object-center"
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000..fe41a62
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1 @@
+export const NEXT_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";