Fix design issue

Author: afgprogrammer

src/app/about-me/page.tsx

@@ -1,4 +1,5 @@
 import {
+  Anchor,
   Box,
   Button,
   Container,
@@ -14,6 +15,7 @@ import {
 } from "@mantine/core";
 import SiteFooter from "@/_components/footer/Footer";
 import { IconArrowUpRight } from "@tabler/icons-react";
+import Link from "next/link";
 
 export default function AboutMe() {
   return (
@@ -23,7 +25,7 @@ export default function AboutMe() {
         <Box style={{ position: "relative" }}>
           <Title
             order={1}
-            fz={80}
+            fz={{ lg: 80, xs: 50 }}
             fw={900}
             ta="center"
             c={"light-dark(var(--mantine-color-dark-9), white)"}
@@ -45,15 +47,15 @@ export default function AboutMe() {
             <Image src={"/mohammad-rahmani.jpg"} radius={50} />
             {/* <Image src={"/me.png"} h={600} radius={50} /> */}
           </GridCol>
-          <GridCol span={8} mx="auto" mt={50}>
-            <Text fz={24} c="light-dark(black, white)">
+          <GridCol span={{ lg: 8 }} mx="auto" mt={50}>
+            <Text fz={{ sm: 24, xs: 16 }} c="light-dark(black, white)">
               I'm <strong>Mohammad Rahmani</strong>, a seasoned programmer with
               over a decade of experience in the dynamic world of{" "}
               <strong>software development</strong>. My journey in programming
               has been both challenging and rewarding, allowing me to hone my
               skills across various programming languages and technologies.
             </Text>
-            <Text fz={24} mt={32} c="light-dark(black, white)">
+            <Text fz={{ sm: 24, xs: 16 }} mt={32} c="light-dark(black, white)">
               Throughout my career, I have had the privilege to work on a
               diverse array of projects ranging from{" "}
               <strong>web applications</strong> to complex enterprise solutions.
@@ -63,15 +65,15 @@ export default function AboutMe() {
               applications that are not only robust and scalable but also
               provide seamless and engaging <strong>user experiences</strong>.
             </Text>
-            <Text fz={24} mt={32} c="light-dark(black, white)">
+            <Text fz={{ sm: 24, xs: 16 }} mt={32} c="light-dark(black, white)">
               With a commitment to excellence and a passion for innovation, I am
               dedicated to turning <strong>ideas</strong> into reality through{" "}
               <strong>code</strong>. Whether you're looking to build a new{" "}
               <strong>application</strong> from scratch or enhance an existing
               one, I bring a wealth of knowledge and a proven track record to
               ensure your project’s <strong>success</strong>.
             </Text>
-            <Text fz={20} mt={32} c="light-dark(black, white)">
+            <Text fz={{ sm: 20, xs: 16 }} mt={32} c="light-dark(black, white)">
               Thank you for visiting my page, and I look forward to the
               possibility of <strong>working together</strong>!
             </Text>
@@ -92,33 +94,40 @@ export default function AboutMe() {
         </Grid>
         <Space h={200} />
         <Grid>
-          <GridCol span={6}>
-            <Text fz={50} fw={600}>
-              My past work experience
+          <GridCol span={{ lg: 6 }}>
+            <Text fz={{ md: 62, xs: 32 }} fw={800}>
+              My Past Work <br /> Experiences
             </Text>
           </GridCol>
-          <GridCol span={6}>
+          <GridCol span={{ lg: 6 }}>
             <Box>
               <Group justify="space-between">
                 <Stack gap={5}>
                   <Text fz={18} fw={600} lts={0.8}>
-                    Software Developer
+                    Chief Technology Officer
+                  </Text>
+                  <Text
+                    c="gray"
+                    component={Link}
+                    href="https://orhan.af"
+                    target="_blank"
+                  >
+                    Orhan Technology
                   </Text>
-                  <Text c="gray">Netlinks Ltd</Text>
                 </Stack>
-                <Text c="gray">2018 - 2020</Text>
+                <Text c="gray">2024 - Present</Text>
               </Group>
             </Box>
             <Divider my={20} />
             <Box>
               <Group justify="space-between">
                 <Stack gap={5}>
                   <Text fz={18} fw={600} lts={0.8}>
-                    Senior Full-stack Software Developer
+                    Software Developer
                   </Text>
                   <Text c="gray">Netlinks Ltd</Text>
                 </Stack>
-                <Text c="gray">2020 - 2022</Text>
+                <Text c="gray">2018 - 2020</Text>
               </Group>
             </Box>
             <Divider my={20} />