refactor: separating each section of pages in about

app/about/components/about/about.jsx

@@ -0,0 +1,152 @@
+import Image from "next/image";
+import Card from "./spotify/card";
+import { motion } from "framer-motion";
+import Me1 from "@/public/img/me1.jpg";
+import Me2 from "@/public/img/me2.jpg";
+import Me3 from "@/public/img/me3.jpg";
+import Hr from "@/components/Hr";
+
+function Title() {
+	return (
+		<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
+			<div className="flex justify-center items-center flex-col my-5 self-start ">
+				<Hr variant="long"></Hr>
+				<h1 className="text-3xl font-bold mt-3">Who Am I?</h1>
+			</div>
+		</div>
+	);
+}
+
+export default function About() {
+	return (
+		<>
+			<Title />
+			<div className="relative mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
+				<div className="flex justify-center items-start flex-col mb-5 ">
+					<div className="images relative w-full  aspect-square">
+						<div className="absolute top-28 left-10 w-[50%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+							<motion.div
+								initial={{ opacity: 0, scale: 0.5, x: 100 }}
+								whileInView={{
+									opacity: 1,
+									scale: 1,
+									x: 0,
+								}}
+								className="w-full h-full">
+								<Image
+									src={Me1}
+									alt="Alvalens"
+									layout="fill"
+									objectFit="cover"
+									placeholder="blur"
+								/>
+							</motion.div>
+						</div>
+						<div className="absolute top-16 right-28 w-[30%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+							<motion.div
+								initial={{
+									opacity: 0,
+									scale: 0.5,
+									x: -100,
+								}}
+								whileInView={{
+									opacity: 1,
+									scale: 1,
+									x: 0,
+								}}
+								transition={{ delay: 0.3 }}
+								className="w-full h-full">
+								<Image
+									src={Me2}
+									alt="Alvalens"
+									layout="fill"
+									objectFit="cover"
+									placeholder="blur"
+								/>
+							</motion.div>
+						</div>
+						<div className="absolute bottom-16 right-20 w-[40%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+							<motion.div
+								initial={{
+									opacity: 0,
+									scale: 0.5,
+									x: -100,
+								}}
+								whileInView={{
+									opacity: 1,
+									scale: 1,
+									x: 0,
+								}}
+								transition={{
+									delay: 0.5,
+								}}
+								className="w-full h-full">
+								<Image
+									src={Me3}
+									alt="Alvalens"
+									layout="fill"
+									objectFit="cover"
+									placeholder="blur"
+								/>
+							</motion.div>
+						</div>
+					</div>
+				</div>
+				<motion.div
+					className="flex justify-center items-start flex-col mb-5 md:px-10"
+					initial={{
+						opacity: 0,
+						x: 200,
+					}}
+					whileInView={{
+						opacity: 1,
+						x: 0,
+					}}
+					transition={{
+						delay: 0.5,
+
+						type: "spring",
+					}}>
+					<h2 className="text-2xl font-bold tracking-wider mb-3">
+						Alvalen Shafelbilyunazra
+					</h2>
+					<p className="text-gray-600 text-justify title text-lg">
+						Hey there, I&rsquo;m Alvalen Shafelbilyunazra, a
+						<span className="text-black font-medium">
+							{" "}
+							tech enthusiast
+						</span>{" "}
+						and
+						<span className="text-black font-medium">
+							{" "}
+							aspiring Web Developer.
+						</span>{" "}
+						Originating from Pasuruan, East Java, Indonesia,
+						I&rsquo;m currently embarking on a fascinating journey
+						at{" "}
+						<span className="text-black font-medium">
+							Universitas Negeri Malang,
+						</span>{" "}
+						where I&rsquo;m pursuing my degree in{" "}
+						<span className="text-black font-medium">
+							Informatics Engineering.
+						</span>{" "}
+						My passion for technology and coding knows no bounds.
+						Beyond the world of coding, I find myself deeply
+						immersed in the realms of design, Game Development, and
+						the fascinating universe of AI. I believe that in
+						today&rsquo;s fast-paced digital landscape, being a
+						<span className="text-black font-medium">
+							{" "}
+							lifelong learner
+						</span>{" "}
+						is not just a choice, but a necessity. Let&rsquo;s
+						connect and explore this ever-evolving world of tech
+						together!
+					</p>
+					<Card />
+				</motion.div>
+			</div>
+		</>
+	);
+}

app/about/components/education.jsx

@@ -1,11 +1,36 @@
 import Image from "next/image";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMedal } from "@fortawesome/free-solid-svg-icons";
-
+import { motion } from "framer-motion";
 import Me4 from "@/public/img/me4.jpeg";
 
+function Wrapper({ children }) {
+	return (
+		<div className="mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+			<motion.div
+				className="flex justify-center items-start flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					delay: 0.5,
+
+					type: "spring",
+				}}>
+				{children}
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Education() {
 	return (
+		<Wrapper>
 			<section className="grid gap-8 md:gap-12">
 				<div className="text-center space-y-2">
 					<h1 className="text-3xl md:text-4xl font-bold tracking-tighter">
@@ -60,11 +85,12 @@ export default function Education() {
 								<div className="flex items-center gap-2">
 									<p className="text-justify">
 										Aspiring to be a software engineer, I am
-									currently pursuing a bachelor&rsquo;s degree
+										currently pursuing a bachelor&rsquo;s
-									in computer science at Universitas Negeri
+										degree in computer science at
-									Malang. Fascinated by the world of
+										Universitas Negeri Malang. Fascinated by
-									technology, I am eager to learn and explore
+										the world of technology, I am eager to
-									new things in the field of computer science.
+										learn and explore new things in the
+										field of computer science.
 									</p>
 								</div>
 								{/* add gpa in a style */}
@@ -95,7 +121,8 @@ export default function Education() {
 										Opportunity
 									</h3>
 									<p className="text-sm">
-									Indonesia Inventor Day 2024 (IID) | Aug 2024
+										Indonesia Inventor Day 2024 (IID) | Aug
+										2024
 									</p>
 								</div>
 							</div>
@@ -142,8 +169,8 @@ export default function Education() {
 								<div>
 									<h3 className="font-medium">Finalist</h3>
 									<p className="text-sm">
-									36th National Student Science Week (PIMNAS)
+										36th National Student Science Week
-									| Nov 2023
+										(PIMNAS) | Nov 2023
 									</p>
 								</div>
 							</div>
@@ -159,8 +186,8 @@ export default function Education() {
 										3rd place (Bronze Medal)
 									</h3>
 									<p className="text-sm">
-									FORKAFEST 3.0 Web Development competition |
+										FORKAFEST 3.0 Web Development
-									Jan 2023
+										competition | Jan 2023
 									</p>
 								</div>
 							</div>
@@ -168,25 +195,6 @@ export default function Education() {
 					</div>
 				</div>
 			</section>
-	);
+		</Wrapper>
-}
-
-function GraduationCapIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
-			<path d="M22 10v6" />
-			<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
-		</svg>
 	);
 }

app/about/components/experience.jsx

@@ -1,7 +1,66 @@
-export default function Experience() {
+import Hr from "@/components/Hr";
+import { motion } from "framer-motion";
+
+function Title() {
 	return (
+		<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
+			<div className="flex justify-center items-center flex-col my-5 self-start">
+				<Hr variant="long"></Hr>
+				<motion.h1
+					className="text-3xl font-bold mt-3"
+					initial={{
+						opacity: 0,
+						x: -200,
+					}}
+					whileInView={{
+						opacity: 1,
+						x: 0,
+					}}
+					transition={{
+						delay: 0.7,
+
+						type: "spring",
+					}}>
+					Profesional Experience
+				</motion.h1>
+			</div>
+		</div>
+	);
+}
+
+function Wrapper({ children }) {
+	return (
+		<div className="mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+			<motion.div
+				className="flex justify-center items-start flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					delay: 0.5,
+
+					type: "spring",
+				}}>
 				<section className="grid gap-8 md:gap-12">
 					<div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8">
+						{children}
+					</div>
+				</section>
+			</motion.div>
+		</div>
+	);
+}
+
+export default function Experience() {
+	return (
+		<>
+			<Title/>
+			<Wrapper>
 				<div className="grid gap-4 relative">
 					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
 					<div className="font-medium text-lg">2023 - Present</div>
@@ -99,7 +158,7 @@ export default function Experience() {
 						</div>
 					</div>
 				</div>
-			</div>
+			</Wrapper>
-		</section>
+		</>
 	);
 }

app/about/components/quote/quote.jsx

@@ -3,6 +3,30 @@ import "./style.css";
 import { motion } from "framer-motion";
 import { useIntersectionObserver } from "./useIntersectionObserver";
 
+function Wrapper({ children }) {
+	return (
+		<div className="min-h-[80vh] mx-auto container  p-10 grid grid-cols-1 mt-10 ">
+			<motion.div
+				className="flex justify-center items-center flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					scale: 0.9,
+				}}
+				whileInView={{
+					opacity: 1,
+					scale: 1,
+				}}
+				transition={{
+					delay: 0.6,
+					duration: 2,
+					ease: [0.22, 1, 0.36, 1],
+				}}>
+				{children}
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Quote() {
 	const text1 = '"There are no limits to what you can accomplish'.split(" ");
 	const text2 = 'except the limits you place on your own thinking."'.split(
@@ -11,6 +35,7 @@ export default function Quote() {
 	const [ref, isIntersecting] = useIntersectionObserver();
 
 	return (
+		<Wrapper>
 			<div ref={ref} className="text-center">
 				<h3 className="text-[2rem]">
 					{text1.map((word, index) => (
@@ -23,7 +48,9 @@ export default function Quote() {
 							}}
 							animate={{
 								opacity: isIntersecting ? 1 : 0,
-							filter: isIntersecting ? "blur(0px)" : "blur(4px)",
+								filter: isIntersecting
+									? "blur(0px)"
+									: "blur(4px)",
 								scale: isIntersecting ? 1 : 0.92,
 							}}
 							transition={{
@@ -45,7 +72,9 @@ export default function Quote() {
 							}}
 							animate={{
 								opacity: isIntersecting ? 1 : 0,
-							filter: isIntersecting ? "blur(0px)" : "blur(4px)",
+								filter: isIntersecting
+									? "blur(0px)"
+									: "blur(4px)",
 								scale: isIntersecting ? 1 : 0.92,
 							}}
 							transition={{
@@ -59,5 +88,6 @@ export default function Quote() {
 					))}
 				</h3>
 			</div>
+		</Wrapper>
 	);
 }

app/about/components/skills/skills.jsx

@@ -1,13 +1,42 @@
+import { motion } from "framer-motion";
+import Stack from "./stack";
+import Tools from "./tools";
+
+function Wrapper({ children }) {
+	return (
+		<div className="mx-auto container gap-4 p-10 grid grid-cols-1 mt-10">
+			<motion.div
+				className="flex justify-center items-center flex-col mb-5 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					delay: 0.5,
+					type: "spring",
+				}}>
+				{children}
+			</motion.div>
+		</div>
+	);
+}
+
 export default function Skills() {
 	return (
+		<>
+			<Wrapper>
 				<section className="grid gap-8 md:gap-12">
 					<div className="text-center space-y-2">
 						<h2 className="text-3xl font-bold mt-3 text-black">
 							Skills and Expertise
 						</h2>
 						<p className="text-muted-foreground max-w-[800px] mx-auto">
-					Explore some skills I&apos;m proficient in to deliver high-quality
+							Explore some skills I&apos;m proficient in to
-					solutions.
+							deliver high-quality solutions.
 						</p>
 					</div>
 					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8">
@@ -25,7 +54,9 @@ export default function Skills() {
 						</div>
 						<div className="flex flex-col items-center gap-2">
 							<MobileIcon className="w-12 h-12" />
-					<div className="font-medium">Mobile Development</div>
+							<div className="font-medium">
+								Mobile Development
+							</div>
 						</div>
 						{/* <div className="flex flex-col items-center gap-2">
 					<CloudIcon className="w-12 h-12" />
@@ -45,6 +76,12 @@ export default function Skills() {
 				</div> */}
 					</div>
 				</section>
+			</Wrapper>
+			<div className=" mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24">
+				<Stack />
+				<Tools />
+			</div>
+		</>
 	);
 }
 
@@ -87,130 +124,6 @@ function CodepenIcon(props) {
 	);
 }
 
-
-function BarChartIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<line x1="12" x2="12" y1="20" y2="10" />
-			<line x1="18" x2="18" y1="20" y2="4" />
-			<line x1="6" x2="6" y1="20" y2="16" />
-		</svg>
-	);
-}
-
-function CloudIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
-		</svg>
-	);
-}
-
-function ComputerIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<rect width="14" height="8" x="5" y="2" rx="2" />
-			<rect width="20" height="8" x="2" y="14" rx="2" />
-			<path d="M6 18h2" />
-			<path d="M12 18h6" />
-		</svg>
-	);
-}
-
-function PackageIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="m7.5 4.27 9 5.15" />
-			<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
-			<path d="m3.3 7 8.7 5 8.7-5" />
-			<path d="M12 22V12" />
-		</svg>
-	);
-}
-
-function ProjectorIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M5 7 3 5" />
-			<path d="M9 6V3" />
-			<path d="m13 7 2-2" />
-			<circle cx="9" cy="13" r="3" />
-			<path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17" />
-			<path d="M16 16h2" />
-		</svg>
-	);
-}
-
-function TypeIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<polyline points="4 7 4 4 20 4 20 7" />
-			<line x1="9" x2="15" y1="20" y2="20" />
-			<line x1="12" x2="12" y1="4" y2="20" />
-		</svg>
-	);
-}
-
 function WebhookIcon(props) {
 	return (
 		<svg

app/about/components/skills/stack.jsx

@@ -1,6 +1,22 @@
+import { motion } from "framer-motion";
+
 export default function Stack() {
   return (
-		<>
+		<motion.div
+			className="flex justify-center items-center flex-col mb-5 "
+			initial={{
+				opacity: 0,
+				x: -200,
+			}}
+			whileInView={{
+				opacity: 1,
+				x: 0,
+			}}
+			transition={{
+				delay: 0.5,
+
+				type: "spring",
+			}}>
 			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase ">
 				Language & Framework
 			</h2>
@@ -23,6 +39,6 @@ export default function Stack() {
 				<span className="text-black font-bold">Laravel</span> |{" "}
 				<span className="text-black font-medium">Python</span>
 			</p>
-		</>
+		</motion.div>
   );
 }

app/about/components/skills/tools.jsx

@@ -1,6 +1,22 @@
+import { motion } from "framer-motion";
+
 export default function Tools() {
 	return (
-		<>
+		<motion.div
+			className="flex justify-start items-center flex-col mb-5 "
+			initial={{
+				opacity: 0,
+				x: 200,
+			}}
+			whileInView={{
+				opacity: 1,
+				x: 0,
+			}}
+			transition={{
+				delay: 0.6,
+
+				type: "spring",
+			}}>
 			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase">
 				Tools
 			</h2>
@@ -21,6 +37,6 @@ export default function Tools() {
 				</span>{" "}
 				|{" "}
 			</p>
-		</>
+		</motion.div>
 	);
 }

app/about/page.jsx

@@ -3,23 +3,20 @@ import { useEffect } from "react";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
 import Image from "next/legacy/image";
-import FixedButon from "@/components/FixedButton";
+import FixedButton from "@/components/FixedButton";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import Card from "./components/spotify/card.jsx";
 import Quote from "./components/quote/quote.jsx";
 import Skills from "./components/skills/skills.jsx";
-import Tools from "./components/skills/tools.jsx";
-import Stack from "./components/skills/stack.jsx";
 import Experience from "./components/experience.jsx";
 import Education from "./components/education.jsx";
 
 // images
-import Me1 from "@/public/img/me1.jpg";
+import Hero from "@/public/img/me2.jpg";
-import Me2 from "@/public/img/me2.jpg";
+
-import Me3 from "@/public/img/me3.jpg";
 import Hr from "@/components/Hr";
+import About from "./components/about/about.jsx";
 
 export default function Page() {
 	useEffect(() => {
@@ -29,13 +26,14 @@ export default function Page() {
 	return (
 		<>
 			<main className="overflow-hidden">
-				<FixedButon href="/#about">
+				<FixedButton href="/#about">
 					<FontAwesomeIcon
 						icon={faChevronLeft}
 						className="text-black pr-10"
 					/>
-				</FixedButon>
+				</FixedButton>
-				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
+				<div className="relative h-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
+					{/* hero */}
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
 							initial={{ scale: 1 }}
@@ -43,8 +41,8 @@ export default function Page() {
 							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}
+								src={Hero}
-								alt="Alvalens"
+								alt="Alvalen Shafel"
 								layout="fill"
 								objectFit="cover"
 								placeholder="blur"
@@ -52,7 +50,7 @@ export default function Page() {
 						</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 pt-4 backdrop-filter backdrop-blur-sm md:backdrop-blur-none bg-gray-100 bg-opacity-50 md:bg-transparent md:pt-0">
-						<h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md-px-0 text-black text-5xl md:text-8xl font-bold">
+						<h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md:px-0 text-black text-5xl md:text-8xl font-bold">
 							About Me
 						</h1>
 						<Hr />
@@ -78,312 +76,28 @@ export default function Page() {
 						</motion.div>
 					</div>
 				</div>
-				<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
+				{/* end hero */}
-					<div className="flex justify-center items-center flex-col my-5 self-start ">
-						<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
-						<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
-						<h1 className="text-3xl font-bold mt-3">Who Am I?</h1>
-					</div>
-				</div>
-				<div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
-					<div className="flex justify-center items-start flex-col mb-5 ">
-						<div className="images relative w-full  aspect-square">
-							<div className="absolute top-28 left-10 w-[50%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
-								<motion.div
-									initial={{ opacity: 0, scale: 0.5, x: 100 }}
-									whileInView={{
-										opacity: 1,
-										scale: 1,
-										x: 0,
-									}}
-									className="w-full h-full">
-									<Image
-										src={Me1}
-										alt="Alvalens"
-										layout="fill"
-										objectFit="cover"
-										placeholder="blur"
-									/>
-								</motion.div>
-							</div>
-							<div className="absolute top-16 right-28 w-[30%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
-								<motion.div
-									initial={{
-										opacity: 0,
-										scale: 0.5,
-										x: -100,
-									}}
-									whileInView={{
-										opacity: 1,
-										scale: 1,
-										x: 0,
-									}}
-									transition={{ delay: 0.3 }}
-									className="w-full h-full">
-									<Image
-										src={Me2}
-										alt="Alvalens"
-										layout="fill"
-										objectFit="cover"
-										placeholder="blur"
-									/>
-								</motion.div>
-							</div>
-							<div className="absolute bottom-16 right-20 w-[40%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
-								<motion.div
-									initial={{
-										opacity: 0,
-										scale: 0.5,
-										x: -100,
-									}}
-									whileInView={{
-										opacity: 1,
-										scale: 1,
-										x: 0,
-									}}
-									transition={{
-										delay: 0.5,
-									}}
-									className="w-full h-full">
-									<Image
-										src={Me3}
-										alt="Alvalens"
-										layout="fill"
-										objectFit="cover"
-										placeholder="blur"
-									/>
-								</motion.div>
-							</div>
-						</div>
-					</div>
-					<motion.div
-						className="flex justify-center items-start flex-col mb-5 md:px-10"
-						initial={{
-							opacity: 0,
-							x: 200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
 
-							type: "spring",
+				{/* about */}
-						}}>
+				<About />
-						<h2 className="text-2xl font-bold tracking-wider mb-3">
+				{/* end about */}
-							Alvalen Shafelbilyunazra
-						</h2>
-						<p className="text-gray-600 text-justify title text-lg">
-							Hey there, I&rsquo;m Alvalen Shafelbilyunazra, a
-							<span className="text-black font-medium">
-								{" "}
-								tech enthusiast
-							</span>{" "}
-							and
-							<span className="text-black font-medium">
-								{" "}
-								aspiring Web Developer.
-							</span>{" "}
-							Originating from Pasuruan, East Java, Indonesia,
-							I&rsquo;m currently embarking on a fascinating
-							journey at{" "}
-							<span className="text-black font-medium">
-								Universitas Negeri Malang,
-							</span>{" "}
-							where I&rsquo;m pursuing my degree in{" "}
-							<span className="text-black font-medium">
-								Informatics Engineering.
-							</span>{" "}
-							My passion for technology and coding knows no
-							bounds. Beyond the world of coding, I find myself
-							deeply immersed in the realms of design, Game
-							Development, and the fascinating universe of AI. I
-							believe that in today&rsquo;s fast-paced digital
-							landscape, being a
-							<span className="text-black font-medium">
-								{" "}
-								lifelong learner
-							</span>{" "}
-							is not just a choice, but a necessity. Let&rsquo;s
-							connect and explore this ever-evolving world of tech
-							together!
-						</p>
-						<Card />
-					</motion.div>
-				</div>
 
 				{/* skills */}
-				<div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 mt-10">
-					<motion.div
-						className="flex justify-center items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
 				<Skills />
-					</motion.div>
+				{/* end skills */}
-				</div>
-
-				<div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24">
-					<motion.div
-						className="flex justify-center items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
-						<Stack />
-					</motion.div>
-					<motion.div
-						className="flex justify-start items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: 200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.6,
-
-							type: "spring",
-						}}>
-						<Tools />
-					</motion.div>
-				</div>
 
 				{/* experience */}
-				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
-					<div className="flex justify-center items-center flex-col my-5 self-start ">
-						<motion.div
-							className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
-							initial={{
-								opacity: 0,
-								x: -100,
-							}}
-							whileInView={{
-								opacity: 1,
-								x: 0,
-							}}
-							transition={{
-								delay: 0.5,
-
-								type: "spring",
-							}}></motion.div>
-						<motion.div
-							className="bg-gray-700 w-28 h-1 rounded-full"
-							initial={{
-								opacity: 0,
-								x: 200,
-							}}
-							whileInView={{
-								opacity: 1,
-								x: -50,
-							}}
-							transition={{
-								delay: 0.5,
-
-								type: "spring",
-							}}></motion.div>
-						<motion.h1
-							className="text-3xl font-bold mt-3"
-							initial={{
-								opacity: 0,
-								x: -200,
-							}}
-							whileInView={{
-								opacity: 1,
-								x: 0,
-							}}
-							transition={{
-								delay: 0.7,
-
-								type: "spring",
-							}}>
-							Profesional Experience
-						</motion.h1>
-					</div>
-				</div>
-
-				<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
-					<motion.div
-						className="flex justify-center items-start flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
 				<Experience />
-					</motion.div>
+				{/* end experience */}
-				</div>
 
 				{/* Education */}
-				<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
-					<motion.div
-						className="flex justify-center items-start flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							x: -200,
-						}}
-						whileInView={{
-							opacity: 1,
-							x: 0,
-						}}
-						transition={{
-							delay: 0.5,
-
-							type: "spring",
-						}}>
 				<Education />
-					</motion.div>
+				{/* end Education */}
-				</div>
 
-				<div className="min-h-[80vh] w-screen mx-auto container  p-10 grid grid-cols-1 mt-10 ">
+				{/* Quote */}
-					<motion.div
-						className="flex justify-center items-center flex-col mb-5 "
-						initial={{
-							opacity: 0,
-							scale: 0.9,
-						}}
-						whileInView={{
-							opacity: 1,
-							scale: 1,
-						}}
-						transition={{
-							delay: 0.6,
-							duration: 2,
-							ease: [0.22, 1, 0.36, 1],
-						}}>
 				<Quote />
-					</motion.div>
+				{/* end Quote */}
-				</div>
+
 			</main>
 		</>
 	);

app/projects/page.jsx

@@ -84,8 +84,7 @@ export default function Page() {
 				</div>
 				<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
 					<div className="flex justify-center items-center flex-col my-5 self-start ">
-						<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
+						<Hr variant="long"></Hr>
-						<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
 						<h1 className="text-3xl font-bold mt-3">Hightlight</h1>
 					</div>
 				</div>
@@ -207,7 +206,7 @@ export default function Page() {
 				</div>
 				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
 					<div className="flex justify-start items-start flex-col my-5 self-start ">
-						<Hr />
+						<Hr variant="long"></Hr>
 						<motion.h1
 							className="text-3xl font-bold mt-3"
 							initial={{

components/Hr.jsx

@@ -1,8 +1,41 @@
 import { motion } from "framer-motion";
-
+import PropTypes from "prop-types";
-export default function Hr() {
+export default function Hr({ variant }) {
 	return (
-		<div className="flex justify-center items-center flex-col my-5 ">
+		<>
+			{variant === "long" ? (
+				<>
+					<motion.div
+						className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
+						initial={{
+							opacity: 0,
+							x: -100,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							delay: 0.3,
+							type: "spring",
+						}}></motion.div>
+					<motion.div
+						className="bg-gray-700 w-28 h-1 rounded-full"
+						initial={{
+							opacity: 0,
+							x: 200,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: -50,
+						}}
+						transition={{
+							delay: 0.4,
+							type: "spring",
+						}}></motion.div>
+				</>
+			) : (
+				<div className="flex justify-center items-center flex-col my-5">
 					<motion.div
 						className="bg-gray-700 w-20 h-1 rounded-full mb-2"
 						initial={{
@@ -15,11 +48,10 @@ export default function Hr() {
 						}}
 						transition={{
 							delay: 0.2,
-
 							type: "spring",
 						}}></motion.div>
 					<motion.div
-				className="bg-gray-700 w-20 h-1 rounded-full "
+						className="bg-gray-700 w-20 h-1 rounded-full"
 						initial={{
 							opacity: 0,
 							x: 150,
@@ -30,9 +62,18 @@ export default function Hr() {
 						}}
 						transition={{
 							delay: 0.3,
-
 							type: "spring",
 						}}></motion.div>
 				</div>
+			)}
+		</>
 	);
 }
+
+Hr.propTypes = {
+	variant: PropTypes.oneOf(["short", "long"]),
+};
+
+Hr.defaultProps = {
+	variant: "short",
+};