[feat] change back button

app/(root)/page.jsx

@@ -103,7 +103,9 @@ const MyPage = () => {
 											Download CV
 										</Button>
 										<Button variation="secondary">
+											<a href="#contact">
 												Contact Me
+											</a>
 										</Button>
 									</motion.div>
 								</motion.div>

app/about/page.jsx

@@ -22,7 +22,7 @@ export default function Page() {
 
 	
 	const handleBack = () => {
-		window.history.back();
+		window.location.href = "/";
 	};
 	return (
 		<>

app/projects/[slug]/page.jsx

@@ -7,6 +7,8 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import NotFound from "@/app/not-found";
 import Image from "next/image";
+import FixedButon from "@/components/FixedButton";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 function Page({ params }) {
 	const [data, setData] = useState(null);
@@ -28,7 +30,6 @@ function Page({ params }) {
 			</>
 		);
 	} else if (!data) {
-		// skleton loading
 		return (
 			<div className="relative min-h-screen w-full  gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
 				<div className="min-h-screen flex justify-center items-center w-full">
@@ -54,9 +55,17 @@ function Page({ params }) {
 			</div>
 		);
 	}
-
+			const handleBack = () => {
+				window.history.back();
+			};
 	return (
 		<div className="relative min-h-screen w-full  gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
+			<FixedButon onClick={handleBack}>
+				<FontAwesomeIcon
+					icon={faChevronLeft}
+					className="text-black pr-10"
+				/>
+			</FixedButon>
 			<div className="min-h-screen flex justify-center items-center">
 				<div className="mx-auto grid grid-cols-1 md:grid-cols-2  mt-10 md:mt-0">
 					<div className="flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">

app/projects/archive/page.jsx

@@ -4,7 +4,8 @@ import { motion } from "framer-motion";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
-
+import FixedButon from "@/components/FixedButton";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 const projects = [
 	{
 		year: "2023",
@@ -84,9 +85,18 @@ const projects = [
 	},
 ];
 export default function Page () {
+		const handleBack = () => {
+			window.history.back();
+		};
   return (
 		<>
 			<main className="overflow-hidden">
+				<FixedButon onClick={handleBack}>
+					<FontAwesomeIcon
+						icon={faChevronLeft}
+						className="text-black pr-10"
+					/>
+				</FixedButon>
 				<div className="min-h-screen w-screen mt-10 md:mt-0  p-10 flex justify-center items-center flex-col mb-10">
 					<div className="flex justify-center items-center flex-col my-5 self-start ">
 						<motion.div
@@ -171,9 +181,7 @@ export default function Page () {
 												)}
 												{project.preview && (
 													<a
-														href={
-															project.preview
-														}
+														href={project.preview}
 														title="Link to project preview">
 														<FontAwesomeIcon
 															icon={

app/projects/page.jsx

@@ -89,7 +89,7 @@ export default function Page() {
 		window.scrollTo(0, 0);
 	}, []);
 	const handleBack = () => {
-		window.history.back();
+		window.location.href = "/";
 	};
 	return (
 		<>

components/Hr.jsx

@@ -7,7 +7,7 @@ export default function Hr() {
 				className="bg-gray-700 w-20 h-1 rounded-full mb-2"
 				initial={{
 					opacity: 0,
-					x: -50,
+					x: -45,
 				}}
 				whileInView={{
 					opacity: 1,