Style and switch theme mobile button fixes

Author: ibrahim19-az

src/components/experiences/Exp.jsx

@@ -74,15 +74,15 @@ const Experience = () => {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
-				className="  sm:justify-between items-center sm:flex-row md:mt-2"
+				className=" section sm:justify-between items-center sm:flex-row "
 		>
 
 
-			<motion.div className="mt-20  text-center sm:text-left leading-normal   text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light ">
+			<motion.div className=" text-center sm:text-left leading-normal   text-custom-purple text-center sm:text-left text-ternary-dark dark:text-primary-light ">
 				<p className={`${styles.sectionSubText} text-center font-general-medium mt-4 text-lg md:text-lg lg:text-xl xl:text-2xl text-center  leading-normal text-gray-500`}>
 					What I have done so far
 				</p>
-				<h2 className={`${styles.sectionHeadText} text-hero font-general-bold  text-center  leading-normal   text-ternary-dark dark:text-primary-light`}>
+				<h2 className={`${styles.sectionHeadText} text-heroExp text-lg md:text-lg lg:text-xl xl:text-2xl font-general-bold  text-center  leading-normal   text-ternary-dark dark:text-primary-light`}>
 					Education & Experience.
 				</h2>
 			</motion.div>

src/components/projects/ProjectsGrid.jsx

@@ -19,8 +19,8 @@ const ProjectsGrid = () => {
 
 	return (
 		<section className="py-5  mt-5">
-			<motion.div className="textProj  mt-20 leading-normal text-custom-purple text-ternary-dark dark:text-primary-light">
-				<p className={`${styles.sectionHeadText} text-hero font-general-bold leading-normal text-ternary-dark dark:text-primary-light`}>
+			<motion.div className="  mt-20 leading-normal text-custom-purple text-ternary-dark dark:text-primary-light">
+				<p className={`${styles.sectionHeadText} text-heroExp font-general-bold leading-normal text-ternary-dark dark:text-primary-light`}>
 					Projects.
 				</p>
 				<div className="flex">
@@ -33,17 +33,17 @@ const ProjectsGrid = () => {
 				</div>
 			</motion.div>
 			<div className="mt-10 sm:mt-16">
-				<h3
-					className="font-general-regular 
-                        text-center text-secondary-dark
+				<p
+					className="font-general-normal text-balance text-pretty leading-normal 
+                        text-center text-white-500
                         dark:text-ternary-light
                         text-md
                         sm:text-xl
-                        mb-3
+                        mb-3 leading-normal
                         "
 				>
 					Search projects by title or filter by category
-				</h3>
+				</p>
 				<div
 					className="
                         flex

src/components/shared/AppBanner.jsx

@@ -69,7 +69,7 @@ const AppBanner = () => {
 				initial={{ opacity: 0, y: -180 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
-				className="w-full sm:w-1/2 justify-center align-middle mt-8 sm:mt-0"
+				className="w-full sm:w-1/2 justify-center align-middle  sm:mt-0"
 			>
 				<img
 					src={

src/components/shared/AppHeader.jsx

@@ -68,24 +68,25 @@ const AppHeader = () => {
 					</div>
 
 					{/* Theme switcher small screen */}
+					
+
+					{/* Small screen hamburger menu */}
+					<div className="sm:hidden flex   ">
 					<div
 						onClick={toggleTheme}
 						aria-label="Theme Switcher"
-						className="block sm:hidden ml-0 bg-primary-light dark:bg-ternary-dark p-3 shadow-sm rounded-xl cursor-pointer"
+						className="block themSwitch sm:hidden mt-2 bg-primary-light dark:bg-ternary-dark p-2 shadow-sm rounded-xl cursor-pointer"
 					>
 						{theme === 'dark' ? (
 							<FiMoon className="text-ternary-dark hover:text-gray-400 dark:text-ternary-light dark:hover:text-primary-light text-xl" />
 						) : (
 							<FiSun className="text-gray-200 hover:text-gray-50 text-xl" />
 						)}
 					</div>
-
-					{/* Small screen hamburger menu */}
-					<div className="sm:hidden">
 						<button
 							onClick={toggleMenu}
 							type="button"
-							className="focus:outline-none"
+							className="focus:outline-none "
 							aria-label="Hamburger Menu"
 						>
 							<svg
@@ -100,6 +101,7 @@ const AppHeader = () => {
 								)}
 							</svg>
 						</button>
+				
 					</div>
 				</div>
 

src/components/styles.js

@@ -12,10 +12,10 @@ const styles = {
   heroHeadText:
     "font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
   heroSubText:
-    "text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
+    " lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
 
   sectionHeadText:
-    " font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
+    " font-black ",
   sectionSubText:
     "sm:text-[18px] text-[14px]  tracking-wider ",
 };

src/css/main.css

@@ -947,24 +947,32 @@ Ensure the default browser behavior of the `hidden` attribute.
 
 .small-image {
 
-  padding: 4em;
+  padding: 2.5em;
 margin: auto;
 }
+.themSwitch{
+  margin-right: 0.5em;
+}
 .text-hero {
 
-  font-size: 4.54em; /* Default size */
+  font-size: 4.5em; /* Default size */
+}
+.text-heroExp {
+
+  font-size: 3em; /* Default size */
 }
 .section{
-  margin-bottom: 5em;
-  margin-top: 5em;
+  margin: 5.2em 0em;
 
+  align-items: center;
+
 }
 @media (max-width: 1024px) {
   .section{
     margin-bottom: 5em;
   }
   .text-hero {
-    font-size: 3em; /* Adjust for lg screens */
+    font-size: 4em; /* Adjust for lg screens */
   }
 
 }
@@ -974,18 +982,25 @@ margin: auto;
     margin-bottom: 5em;
   }
   .text-hero {
-    font-size: 2.5em; /* Adjust for md screens */
+    font-size: 3em; /* Adjust for md screens */
   }
 }
 
 @media (max-width: 480px) {
+  .section{
+    margin: 3em 0em;
+    
+    align-items: center;
+  
+  }
   .small-image {
 
     padding: 1em;
   margin: auto;
   }
   .text-hero {
-    font-size: 2.5em; /* Adjust for sm screens */
+    font-size: 3em; 
+    /* Adjust for sm screens */
   }
 }