[feat] change image

app/(root)/page.js

@@ -8,6 +8,7 @@ import Link from "next/link";
 // components
 import Button from "@/components/Button";
 import Me from "../../public/img/me.jpg";
+import MeAbout from "@/public/img/me2.jpg";
 import Hr from "@/components/Hr";
 // icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -145,7 +146,15 @@ const MyPage = () => {
 											delay: 0.5,
 											type: "spring",
 										}}
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
+											<Image 
+												src={MeAbout}
+												layout="fill"
+												className="object-cover"
+												alt="Alvalens"
+												placeholder="blur"
+											/>
+										</motion.div>
 								</div>
 								<div className="z-10 w-full absolute md:w-auto  md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5">
 									<motion.h1

app/about/page.js

@@ -24,8 +24,16 @@ export default function Page() {
 						<motion.div
 							initial={{ scale: 1 }}
 							animate={{ scale: 1.6 }}
-							transition={{  ease: "circOut", duration: 1}}
-							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
+							transition={{ ease: "circOut", duration: 1 }}
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0">
+							<Image
+								src={Me2}
+								alt="Alvalens"
+								layout="fill"
+								objectFit="cover"
+								placeholder="blur"
+							/>
+						</motion.div>
 					</div>
 					<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
 						<h1 className="text-5xl md:text-8xl font-bold">
@@ -39,8 +47,8 @@ export default function Page() {
 							A brief introduction about me and my interest.
 						</p>
 						<motion.div
-							initial={{ opacity: 0,  }}
-							animate={{ opacity: 1, }}
+							initial={{ opacity: 0 }}
+							animate={{ opacity: 1 }}
 							transition={{ duration: 0.5, ease: "circOut" }}
 							onClick={() => {
 								window.scrollTo({
@@ -93,7 +101,7 @@ export default function Page() {
 										scale: 1,
 										x: 0,
 									}}
-									transition={{ delay: 0.3}}
+									transition={{ delay: 0.3 }}
 									className="w-full h-full">
 									<Image
 										src={Me2}
@@ -118,7 +126,6 @@ export default function Page() {
 									}}
 									transition={{
 										delay: 0.5,
-										
 									}}
 									className="w-full h-full">
 									<Image

app/layout.js

@@ -1,18 +1,22 @@
-"use client";
+import dynamic from "next/dynamic";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
-import { config } from '@fortawesome/fontawesome-svg-core'
-import '@fortawesome/fontawesome-svg-core/styles.css'
-config.autoAddCss = false
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
 
-
-import TopProgressBar from "@/components/TopProgressBar";
 import "./nprogress.css";
 export const metadata = {
 	title: "Create Next App",
 	description: "Generated by create next app",
 };
+
+const TopProgressBar = dynamic(() => import("@/components/TopProgressBar"), {
+	ssr: false,
+});
+
 export default function RootLayout({ children }) {
+
 	return (
 		<html lang="en">
 			<body>

components/TopProgressbar.jsx

@@ -1,3 +1,4 @@
+"use client"
 import Router from "next/router";
 import NProgress from "nprogress";