responsive debugged

src/app/_components/about-me/page.tsx

@@ -43,11 +43,11 @@ export default function AboutMe() {
 
   return (
     <div
-      className="my-20 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10 px-5"
+      className="my-10 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10"
       id="about-me"
     >
-      <div className="ms-0 flex flex-col w-full items-center md:w-[50%]">
+      <div className="flex flex-col w-full items-center md:w-[50%]">
-        <h2 className="text-[60px] font-[800] text-black">
+        <h2 className="mb-10 text-[55px] font-[800] text-black">
           {aboutMe?.title || <Skeleton width={300} height={100} />}
         </h2>
         <p className="text-justify text-[21px] font-[400] text-black">

src/app/_components/my-projects/page.tsx

@@ -77,7 +77,7 @@ export default function MyProjects() {
       className="flex w-full max-w-[90%] flex-wrap items-center justify-center"
       id="projects"
     >
-      <h2 className="my-10 text-[60px] font-[800] text-black">My Projects</h2>
+      <h2 className="my-10 text-[55px] font-[800] text-black">My Projects</h2>
       <p className="text-justify text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
         est risus lectus. Phasellus consequat urna tellus

src/app/_components/services/page.tsx

@@ -53,14 +53,14 @@ export default function Services() {
           <img src={service!.imageSrc} alt={service!.altText} />
         )}
       </div>
-      <h3 className="w-full text-[24px] font-[700] text-black xl:text-[32px]">
+      <h3 className="w-full text-[18px] font-[700] text-black xl:text-[32px]">
         {loading ? (
           <Skeleton containerClassName={"w-full"} height={32} />
         ) : (
           service!.title
         )}
       </h3>
-      <p className="w-full text-[15px] font-[400] text-black xl:text-[20px]">
+      <p className="w-full text-[14px] font-[400] text-black xl:text-[20px]">
         {loading ? (
           <Skeleton containerClassName={"w-full"} height={60} />
         ) : (
@@ -77,12 +77,12 @@ export default function Services() {
       className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
       id="services"
     >
-      <h2 className="my-10 text-[60px] font-[800] text-black">Services</h2>
+      <h2 className="mb-10 text-[55px] font-[800] text-black">Services</h2>
       <p className="text-justify text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
         lectus netus in. Aliquet donec morbi convallis pretium
       </p>
-      <div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-8">
+      <div className="service mt-10 flex w-full flex-wrap items-start justify-between gap-8">
         {loading
           ? Array.from({ length: 4 }).map((_, index) =>
               renderServiceCard(undefined, index),

src/app/_components/testimonials/page.tsx

@@ -52,7 +52,7 @@ export default function Testimonials() {
       className="flex w-full max-w-[90%] flex-wrap justify-center"
       id="testimonials"
     >
-      <h2 className="text-[60px] font-[800] text-black">Testominials</h2>
+      <h2 className="text-[55px] font-[800] text-black">Testominials</h2>
       <p className="my-10 text-justify text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
         est risus lectus. Phasellus consequat urna tellus

src/app/globals.css

@@ -202,8 +202,8 @@ html {
 }
 
 .aboutme-image {
-  width: 500px;
+  width: 90%;
-  height: 500px;
+  height: 80%;
   border-radius: 50%;
   overflow: hidden;
 }

src/app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({
         <div className="scroll-watcher" id="top"></div>
         <a
           href="/#header"
-          className="scroll-to-top fixed bottom-[100px] right-20 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b]"
+          className="scroll-to-top fixed bottom-10 right-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:right-10"
           id="back-to-top"
         >
           ^
@@ -37,10 +37,10 @@ export default function RootLayout({
           id="header"
         >
           <div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
-            <div className="flex w-[67px]">
+            <div className="flex w-[50px]">
               <img src={"/images/logo.svg"} className="w-full" alt="logo" />
             </div>
-            <p className="ms-2 whitespace-nowrap text-[28px] font-[800] text-[#FD6F00] xl:ms-3 xl:text-[38px]">
+            <p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
               Parsa Aghayi
             </p>
           </div>
@@ -82,25 +82,23 @@ export default function RootLayout({
               Contact
             </a>
           </ul>
-          <button className="flex h-[52px] w-[188px] items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] p-[18px] text-[20px] font-[600] text-[#fff]">
+          <button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] xl:text-[20px]">
             Download CV
           </button>
         </div>
 
-        <div className="main my-[67px] flex w-full justify-center">
+        <div className="main my-10 flex w-full justify-center">{children}</div>
-          {children}
-        </div>
 
         <div className="flex w-full flex-col">
           <div className="flex flex-col items-center gap-[50px] bg-[#F8F8F8] py-[50px]">
             <div className="flex items-center">
               <Image
                 src={"/images/logo.svg"}
-                width={67}
+                width={47}
-                height={67}
+                height={47}
                 alt="logo"
               />
-              <p className="ms-2 text-[48px] font-[800] text-[#fd6f00]">
+              <p className="ms-2 text-[30px] font-[800] text-[#fd6f00]">
                 Parsa Aghayi
               </p>
             </div>
@@ -176,9 +174,9 @@ export default function RootLayout({
               </div>
             </div>
           </div>
-          <p className="flex h-[84px] items-center justify-center bg-[#545454] text-[18px] font-[400] text-white">
+          <p className="flex items-center justify-center whitespace-nowrap bg-[#545454] text-[15px] font-[400] text-white">
             © 2023
-            <span className="mx-[5px] text-[18px] font-[700] text-[#FD6F00]">
+            <span className="mx-[5px] whitespace-nowrap text-[18px] font-[700] text-[#FD6F00]">
               Parsa Aghayi
             </span>{" "}
             All Rights Reserved , Inc.

src/app/page.tsx

@@ -7,7 +7,7 @@ import MyProjects from "./_components/my-projects/page";
 
 export default function Home() {
   return (
-    <div className="my-[100px] flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
+    <div className="my-15 flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
       {/* Home */}
       <div
         className="xl:gap-15 flex w-full flex-wrap justify-center gap-10 lg:flex-nowrap 2xl:gap-20"
@@ -16,12 +16,10 @@ export default function Home() {
         {/* start */}
         <div className="flex w-full max-w-[500px] flex-wrap justify-center lg:w-[45%] xl:w-[50%]">
           <div className="aboutme-image">
-            <Image
+            <img
               src={"/images/profile.png"}
               alt="profile picture"
-              width={538}
+              className="w-full"
-              height={617}
-              className="bottom-0"
             />
           </div>
           {/* socials */}