update images using absolute path imports

src/app/(about-me)/_components/AboutMeHero.tsx

@@ -1,3 +1,4 @@
+import { heroImage } from "@/constants";
 import { Fira_Code } from "next/font/google";
 import Image from "next/image";
 const firaCode = Fira_Code({
@@ -23,7 +24,7 @@ const AboutMeHeroSection = () => {
  <div className="mx-auto grid grid-cols-2 grid-rows-2 items-center justify-items-center sm:w-1/2 md:w-full md:grid-cols-4 md:grid-rows-1">
  <figure className="relative left-10 top-6 h-[165px] w-[150px] -rotate-[13.84deg] self-center overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:top-0 md:h-[275px] md:w-[250px] md:hover:left-8">
  <Image
- src={"/images/hero-img.jpeg"}
+ src={heroImage}
  fill
  alt="photo"
  className="inset-0 h-full w-full object-cover object-center shadow-heroImage"
@@ -32,7 +33,7 @@ const AboutMeHeroSection = () => {
  </figure>
  <figure className="relative -left-12 top-6 h-[165px] w-[150px] rotate-[7.39deg] overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:left-0 md:top-0 md:h-[275px] md:w-[250px] md:hover:left-4">
  <Image
- src={"/images/hero-img.jpeg"}
+ src={heroImage}
  fill
  alt="photo"
  className="h-full w-full object-cover object-center shadow-heroImage"
@@ -41,7 +42,7 @@ const AboutMeHeroSection = () => {
  </figure>
  <figure className="relative -top-4 left-10 h-[165px] w-[150px] rotate-[7.39deg] overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:-left-2 md:top-0 md:h-[275px] md:w-[250px] md:-rotate-[13.84deg] md:hover:-left-4">
  <Image
- src={"/images/hero-img.jpeg"}
+ src={heroImage}
  fill
  alt="photo"
  className="h-full w-full object-cover object-center shadow-heroImage"
@@ -50,7 +51,7 @@ const AboutMeHeroSection = () => {
  </figure>
  <figure className="relative -left-12 -top-4 h-[165px] w-[150px] -rotate-[13.84deg] overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:-left-8 md:top-0 md:h-[275px] md:w-[250px] md:rotate-[7.39deg] md:hover:-left-4">
  <Image
- src={"/images/hero-img.jpeg"}
+ src={heroImage}
  fill
  alt="photo"
  className="h-full w-full object-cover object-center shadow-heroImage"

src/app/(about-me)/_components/Company.tsx

@@ -1,3 +1,4 @@
+import { companyLogo } from "@/constants";
 import Image from "next/image";
 
 const Company = () => {
@@ -6,7 +7,7 @@ const Company = () => {
  <div className="flex items-center gap-x-4 md:gap-x-6">
  <figure className="relative h-[50px] w-[50px] overflow-hidden rounded-full border-primary group-hover:border-2 md:h-[80px] md:w-[80px]">
  <Image
- src={"/images/company-logo.jpg"}
+ src={companyLogo}
  alt="company name"
  fill
  className="h-full w-full object-cover object-center"

src/app/(home)/_components/HomeHeroSection.tsx

@@ -1,4 +1,4 @@
-import { NEXT_BASE_PATH } from "@/constants";
+import { heroImage } from "@/constants";
 import { Fira_Code } from "next/font/google";
 import Image from "next/image";
 
@@ -34,8 +34,7 @@ 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={`${NEXT_BASE_PATH}/images/hero-img.jpeg`}
+ src={heroImage}
  alt="arman photo"
  fill
  className="h-full w-full object-cover object-center"

src/components/Navigation/Navigation.tsx

@@ -5,6 +5,7 @@ import { useTheme } from "next-themes";
 import Image from "next/image";
 import NavList from "./NavList";
 import ThemeSwitcher from "../ThemeSwitcher";
+import { logoDark, logoWhite } from "@/constants";
 
 const Navigation = () => {
  const { resolvedTheme } = useTheme();
@@ -14,11 +15,7 @@ const Navigation = () => {
  <nav className="mx-auto flex max-w-[800px] flex-wrap items-center justify-between">
  <div className="flex items-center gap-4">
  <Image
- src={
- resolvedTheme === "light"
- ? "/images/sample-logo.svg"
- : "/images/sample-logo-white.svg"
- }
+ src={resolvedTheme === "light" ? logoWhite : logoDark}
  alt="logo"
  width={40}
  height={40}

src/constants/index.ts

@@ -1 +1,6 @@
-export const NEXT_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
+import heroImage from "@/public/images/hero-img.jpeg";
+import companyLogo from "@/public/images/company-logo.jpg";
+import logoDark from "@/public/images/sample-logo.svg";
+import logoWhite from "@/public/images/sample-logo-white.svg";
+
+export { heroImage, companyLogo, logoDark, logoWhite };

tsconfig.json

@@ -18,7 +18,8 @@
  }
  ],
  "paths": {
- "@/*": ["./src/*"]
+ "@/*": ["./src/*"],
+ "@/public*": ["./public/*"]
  },
  "types": ["vitest", "jsdom", "node", "@testing-library/jest-dom"]
  },