Education added #1 and some improvement

app/layout.tsx

@@ -70,9 +70,7 @@ export default function RootLayout({
 							</a>
 						</div>
 
-						<button className="inline-block w-full mt-3 py-2 px-3 text-center text-white font-medium duration-150 rounded-lg sm:w-auto sm:mt-0 sm:text-sm">
-							<Hireme />
-						</button>
+						<Hireme />
 					</div>
 				</header>
 				{children}

app/src/components/achievments.tsx

@@ -42,7 +42,7 @@ export default () => {
 							<li
 								key={idx}
 								className="space-y-3">
-								<div className="w-12 h-12 mx-auto bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center">
+								<div className="w-12 h-12 mx-auto bg-indigo-50 text-primary rounded-full flex items-center justify-center">
 									{item.icon}
 								</div>
 								<h4 className="text-lg text-gray-800 font-semibold">

app/src/components/education.tsx

@@ -0,0 +1,70 @@
+import { RiCodeSSlashLine, RiRobot2Line } from "react-icons/ri";
+
+export default () => {
+	return (
+		<div className="max-w-2xl mx-auto py-10">
+			<div className="mx-auto px-4 sm:px-0 mt-8 text-center">
+				<h3 className="text-gray-800 text-3xl font-semibold sm:text-4xl">
+					<span className="font-bold text-primary">
+						Educational Background{" "}
+					</span>
+				</h3>
+				<p className="mt-3 text-gray-800">
+					Showcasing the degrees and certifications that have shaped my
+					professional foundation.
+				</p>
+			</div>
+			{/*  */}
+			<div className="flex max-w-full-1xl mt-7 relative px-10 justify-center">
+				<div className="flex w-[90%] relative justify-between">
+					<div className="relative z-10 flex justify-center items-center w-[25px] h-[25px] p-2 rounded-full bg-indigo-100 text-primary">
+						<RiCodeSSlashLine size={21} />
+
+						<p className="absolute top-10 pt-2 font-semibold w-[790%] text-gray-800 text-xl text-center">
+							Bachelor in Science
+							<br />
+							<span>(2018 - 2021)</span>
+							<br />
+							<span className="text-sm font-normal">
+								I earned my B.Sc in{" "}
+								<b className="text-gray-600">Computer Science</b> from
+								E.G.S Pillay Arts and Science College in Nagapattinam, TN,
+								completing the program from 2018 to 2021 with a commendable{" "}
+								<b className="text-gray-600">score of 79%</b>. This
+								foundational degree provided me with essential knowledge
+								and skills in computer science, laying the groundwork for
+								my subsequent advanced studies and professional pursuits in
+								the tech industry.
+							</span>
+						</p>
+					</div>
+
+					<div className="relative z-10 flex justify-center items-center w-[25px] h-[25px] p-2 rounded-full bg-indigo-100 text-primary">
+						<RiRobot2Line size={22} />
+						<p className="absolute top-10 pt-2 font-semibold w-[790%] text-gray-800 text-xl text-center">
+							Master in Science
+							<br />
+							<span>(2021 - 2023)</span>
+							<br />
+							<span className="text-sm font-normal">
+								I hold an M.Sc in{" "}
+								<b className="text-gray-600">Information Technology</b>{" "}
+								from Sri Krishna Arts and Science College in Coimbatore,
+								TN, completed between 2021 and 2023 with a distinguished{" "}
+								<b className="text-gray-600">score of 84%</b>. This
+								academic journey not only equipped me with a robust
+								understanding of advanced IT concepts but also honed my
+								skills in various cutting-edge technologies, preparing me
+								to excel in the dynamic field of technology and software
+								development.
+							</span>
+						</p>
+					</div>
+
+					<hr className="absolute top-5 z-0 h-12 border md:w-full md:h-auto border-primary max-w-lg" />
+				</div>
+			</div>
+			{/*  */}
+		</div>
+	);
+};

app/src/components/experience.tsx

@@ -44,31 +44,31 @@ export default () => (
 		className="py-20"
 		id="experience">
 		<div className="max-w-screen-xl mx-auto px-4 md:text-center md:px-8">
-			<div className="max-w-xl md:mx-auto">
-				<h3 className="text-gray-800 text-3xl font-semibold sm:text-4xl">
+			<div className="max-w-1xl md:mx-auto">
+				<h3 className="w-full text-gray-800 text-3xl font-semibold sm:text-4xl">
 					<span className="text-primary uppercase font-bold">
 						Experiences:
 					</span>{" "}
 					Discover My Previous Endeavors.
 				</h3>
 			</div>
 		</div>
-		<div className="max-w-screen-lg mx-auto px-4 md:px-8">
-			<ul className="mt-12 divide-y space-y-3">
+		<div className="max-w-screen-lg mx-auto md:px-8">
+			<ul className="mt-12 space-y-3">
 				{experiences.map((item, idx) => (
 					<li
 						key={idx}
-						className="px-10 py-5 duration-150 hover:border-white hover:rounded-xl hover:bg-gray-50 border border-1 rounded-lg">
+						className="px-10 py-8 duration-150 hover:rounded-xl rounded-xl hover:shadow-xl border border-gray-200">
 						<a
 							href={item.path}
 							target="_"
 							className="space-y-3">
 							<div className="flex items-center gap-x-3">
-								<div className="bg-white w-14 h-14 border rounded-full flex items-center justify-center">
+								<div className="bg-white w-14 h-14 border border-gray-100 rounded-full flex items-center justify-center">
 									<div className="w-12">{item.company_icon}</div>
 								</div>
 								<div>
-									<span className="block text-sm text-indigo-600 font-medium">
+									<span className="block text-sm text-primary font-medium">
 										{item.company_name}
 									</span>
 									<h3 className="text-base text-gray-800 font-semibold mt-1">

app/src/components/home.tsx

@@ -104,7 +104,7 @@ export default function HomePage() {
 
 							<div className="flex-none mt-6 md:mt-0 md:max-w-xl">
 								<img
-									src="pp.png"
+									src="pp.webp"
 									className=" md:rounded-tl-[108px] w-85"
 									alt=""
 								/>

app/src/styles/style.module.scss

@@ -19,9 +19,13 @@
 body:has(.skillIcon:hover) {
 	background-color: black;
 }
-
+.workCard {
+	transition: box-shadow 0.8s;
+}
 .workCard:hover {
-	box-shadow: 4px 4px 10px 3px #b9b9b9;
+	box-shadow:
+		rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+		rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
 .activeTab {