responsive about page

moerabaya · Apr 5, 2024 · 5b6e891 · 5b6e891
1 parent 6e6c90f
commit 5b6e891
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 95 deletions.
diff --git a/components/atoms/AnimatedText/AnimatedCharacters.tsx b/components/atoms/AnimatedText/AnimatedCharacters.tsx
@@ -52,14 +52,6 @@ const AnimatedCharacters = ({
     words.push(item.split(" "));
   }
 
-  // Add a space ("\u00A0") to the end of each word
-  words.map((word: any) => {
-    return word.push("\u00A0");
-  });
-
-  // Get the tag name from tagMap
-  // const Tag = React.createElement("h1");
-
   return (
     <StyledAniamtedCharacters as={type} {...rest}>
       {words.map((word: string, index: number) => {
@@ -71,6 +63,7 @@ const AnimatedCharacters = ({
                   style={{
                     overflow: "hidden",
                     display: "inline-block",
+                    marginInlineEnd: "0.25em",
                   }}
                   key={index}
                 >

diff --git a/hooks/useGlobalization.ts b/hooks/useGlobalization.ts
@@ -28,7 +28,15 @@ function getter(...args: string[] | Object[]) {
   return current;
 }
 
-const useGlobalization = () => {
+export interface Globalization {
+  locale: string | undefined;
+  direction: Direction;
+  getLocalizedString: (...a: string[]) => string;
+  translate: (key: string, fallback: string) => any;
+  isArabic: boolean;
+}
+
+const useGlobalization = (): Globalization => {
   const { locale } = useRouter();
   const direction: Direction = locale === "ar" ? "rtl" : "ltr";
   const isArabic = locale === "ar";

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -1,6 +1,6 @@
 import fs from "fs";
 import grayMatter from "gray-matter";
-import useGlobalization from "hooks/useGlobalization";
+import useGlobalization, { Globalization } from "hooks/useGlobalization";
 import Head from "next/head";
 import Image from "next/image";
 import { NextPage } from "next/types";
@@ -27,8 +27,62 @@ const RainbowText = styled.a`
 interface Props {
   projects: Project[];
 }
+
+const jobs = (globalization: Globalization) => {
+  const { translate, locale } = globalization;
+  const dateLocale = locale === "ar" ? "ar-EG" : locale;
+  const options: Intl.DateTimeFormatOptions = {
+    month: "short",
+    year: "numeric",
+  };
+  return [
+    {
+      date: `${new Date("01-01-2023").toLocaleDateString(
+        dateLocale,
+        options
+      )} - ${translate("about.experience.present", "Present")}`,
+      title: translate(
+        "about.experience.seniorSoftwareEngineer",
+        "Senior Software Engineer"
+      ),
+      location: translate(
+        "about.experience.amsterdam",
+        "Amsterdam, Netherlands"
+      ),
+      company: "Rodeo Software",
+      role: translate("about.experience.fullTime", "Full-time"),
+    },
+    {
+      date: `${new Date("11-01-2017").toLocaleDateString(
+        dateLocale,
+        options
+      )} - ${new Date("12-31-2022").toLocaleDateString(dateLocale, options)}`,
+      title: translate(
+        "about.experience.seniorFrontendEngineer",
+        "Senior Front-end Engineer"
+      ),
+      location: translate("about.experience.amman", "Amman, Jordan"),
+      company: "Cura Healthcare",
+      role: translate("about.experience.fullTime", "Full-time"),
+    },
+    {
+      date: `${new Date("06-01-2015").toLocaleDateString(
+        dateLocale,
+        options
+      )} - ${new Date("11-01-2017").toLocaleDateString(dateLocale, options)}`,
+      title: translate(
+        "about.experience.frontendEngineer",
+        "Front-end Engineer"
+      ),
+      location: translate("about.experience.amman", "Amman, Jordan"),
+      company: "Plexable",
+      role: translate("about.experience.fullTime", "Full-time"),
+    },
+  ];
+};
 const About: NextPage<Props> = ({ projects }: Props) => {
-  const { getLocalizedString, translate, locale } = useGlobalization();
+  const globalization = useGlobalization();
+  const { getLocalizedString, translate, locale } = globalization;
   const dateLocale = locale === "ar" ? "ar-EG" : locale;
   const options: Intl.DateTimeFormatOptions = {
     month: "short",
@@ -38,7 +92,7 @@ const About: NextPage<Props> = ({ projects }: Props) => {
     window.localStorage.setItem("color-theme", "light");
 
   return (
-    <div className="page-content">
+    <div className="pt-[70px] max-md:pt-[60px]">
       <Head>
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -78,51 +132,64 @@ const About: NextPage<Props> = ({ projects }: Props) => {
       </Head>
       <div className="relative">
         <div className="h-full absolute w-full">
-          <div className="container h-full mx-auto grid grid-cols-9 gap-7 h-full">
-            <div className="bg-neutral-100 dark:bg-neutral-900"></div>
-            <div className="bg-neutral-100 dark:bg-neutral-900"></div>
-            <div className="bg-neutral-100 dark:bg-neutral-900"></div>
-            <div className="bg-neutral-100 dark:bg-neutral-900"></div>
+          <div className="container mx-auto grid grid-cols-9 gap-7 h-full max-md:gap-4  max-md:grid-cols-5">
             <div className="bg-neutral-100 dark:bg-neutral-900"></div>
             <div className="bg-neutral-100 dark:bg-neutral-900"></div>
             <div className="bg-neutral-100 dark:bg-neutral-900"></div>
             <div className="bg-neutral-100 dark:bg-neutral-900"></div>
             <div className="bg-neutral-100 dark:bg-neutral-900"></div>
+            <div className="bg-neutral-100 dark:bg-neutral-900 max-md:hidden"></div>
+            <div className="bg-neutral-100 dark:bg-neutral-900 max-md:hidden"></div>
+            <div className="bg-neutral-100 dark:bg-neutral-900 max-md:hidden"></div>
+            <div className="bg-neutral-100 dark:bg-neutral-900 max-md:hidden"></div>
           </div>
         </div>
         <div className="relative">
-          <div className="container mx-auto max-w-5xl flex pt-24 max-md:py-12 mb-0 px-5 pb-6 max-md:pb-8 max-sm:grid-cols-1">
-            <div className="ps-[1rem] flex-none pe-[2rem]">
+          <div className="container mx-auto max-w-5xl pt-16 max-md:py-12 mb-0 px-5 pb-20 max-md:pb-8 max-sm:grid-cols-1 flex flex-wrap items-center justify-between">
+            <div className="flex-1 min-w-full relative mx-auto hidden max-sm:block p-5">
+              <Image
+                src={
+                  "https://en.gravatar.com/userimage/201100235/0e21cbd55417f43fa3f5e687fa8b1fb2.png?size=1000"
+                }
+                alt="Portrait of Mohammed Rabay'a"
+                placeholder="blur"
+                blurDataURL='"https://en.gravatar.com/userimage/201100235/0e21cbd55417f43fa3f5e687fa8b1fb2.png?size=1"'
+                width={400}
+                height={990}
+                className="overflow-hidden mb-0 w-full max-md:w-[340px] inline-block"
+              />
+            </div>
+            <div className="ps-[1rem] flex-1 pe-[2rem] max-w-full max-sm:p-[0]">
               <div>
                 <span className="w-[100vw] h-[0.5px] bg-[#FF0000] absolute left-0"></span>
                 <div className="relative">
                   <XIcon className="absolute -top-[2px] -left-[0.75px]" />
                   <XIcon className="absolute -top-[2px] right-0" />
                 </div>
-                <div className="relative pt-14 pb-12">
+                <div className="relative pt-14 pb-12 max-sm:pt-8 max-sm:pb-6">
                   <XIcon className="absolute -mt-[2px] -left-[0.75px]" />
-                  <span className="absolute left-8 top-7 px-[4px] py-[2px] rounded-[4px] bg-[#ECF0FF] text-[#0038FF] font-mono text-[11px]">
+                  <span className="absolute left-8 top-7 px-[4px] py-[2px] rounded-[4px] bg-[#ECF0FF] text-[#0038FF] font-mono text-[11px]  max-sm:top-[6%] max-sm:left-3">
                     font-weight: bolder
                   </span>
                   <span className="w-[0.5px] h-[100vh] bg-[#FF0000] absolute bottom-0 left-0"></span>
                   <AnimatedText
                     text={translate("about.title", "Mohammed Rabaya")}
                     type="h2"
-                    className={`border-[1px] border-solid border-[#4597F7] w-[490px] ${
+                    className={`border-[1px] border-solid border-[#4597F7] max-lg:text-[6.75vw] max-md:text-[3rem]  max-sm:text-[10vw] max-[500px]:text-[12vw] w-[calc(auto + 100px)] ${
                       locale === "ar"
                         ? "text-[5.5rem] leading-[1]"
                         : "text-7xl leading-[0.8]"
                     } leading-[0.8] m-0 uppercase *:!font-extrabold px-0 text-stone-800 dark:text-neutral-50`}
                   />
                   <XIcon className="absolute -mt-[3px] -left-[0.75px]" />
-                  <span className="absolute -left-5 bottom-9 px-[4px] py-[2px] rounded-[4px] bg-[#FFECEC] text-[#FF0000] font-mono text-[11px]">
+                  <span className="absolute -left-5 bottom-9 px-[4px] py-[2px] rounded-[4px] bg-[#FFECEC] text-[#FF0000] font-mono text-[11px] max-sm:bottom-[10%] max-sm:-left-3">
                     margin-left: -10%
                   </span>
 
-                  <span className="absolute -right-7 bottom-20 px-[4px] py-[2px] rounded-[4px] bg-[#FFEFF9] text-[#DA0592] font-mono text-[11px]">
+                  <span className="absolute -right-7 bottom-20 px-[4px] py-[2px] rounded-[4px] bg-[#FFEFF9] text-[#DA0592] font-mono text-[11px] max-sm:-right-3 max-sm:bottom-[32%]">
                     padding-top: 2em
                   </span>
-                  <GrabIcon className="absolute bottom-[4.5em] left-[14.15em]" />
+                  <GrabIcon className="absolute top-[62%] left-[45%] -translate-x-1/2 -translate-y-1/2" />
                   <div className="-mt-1 text-center">
                     <span
                       className="bg-[#4597F7] px-[2.5px] py-[1.25px] text-[8px] rounded-[1.75px] text-[white]"
@@ -134,7 +201,7 @@ const About: NextPage<Props> = ({ projects }: Props) => {
                 </div>
               </div>
             </div>
-            <div className="flex-initial relative mx-auto">
+            <div className="flex-1 relative mx-auto text-center max-sm:hidden">
               <Image
                 src={
                   "https://en.gravatar.com/userimage/201100235/0e21cbd55417f43fa3f5e687fa8b1fb2.png?size=1000"
@@ -144,34 +211,34 @@ const About: NextPage<Props> = ({ projects }: Props) => {
                 blurDataURL='"https://en.gravatar.com/userimage/201100235/0e21cbd55417f43fa3f5e687fa8b1fb2.png?size=1"'
                 width={400}
                 height={990}
-                className="overflow-hidden -mt-10 w-[292px]"
+                className="overflow-hidden mb-0 w-[292px] max-md:w-[200px] inline-block"
               />
             </div>
           </div>
-          <div className="container mx-auto max-w-5xl px-10 text-[1.25em] pb-10">
+          <div className="container mx-auto max-w-5xl px-10 text-[1.25em] pb-10 max-md:text-[1.1em] max-sm:px-5 max-[400px]:text-[1.05em]">
             <div>
               {translate(
                 "about.about1",
                 "A software engineer with over 9+ years of experience, I am currently based in Amsterdam."
               )}
             </div>
-            <div className="mt-8">
+            <div className="mt-8 max-[400px]:mt-5">
               {translate(
                 "about.about2",
                 "I help companies build intuitive softwares and products using state-of-the-art technologies ensuring best practices are applied for smooth user experience and development process."
               )}
             </div>
           </div>
-          <div className="container mx-auto max-w-5xl px-10 text-[1.25em] pb-10">
+          <div className="container mx-auto max-w-5xl px-10 text-[1.25em] pb-10 max-sm:px-5 flex flex-wrap gap-3">
             <a
               href="mailto:[email protected]"
-              className="py-[10px] w-[206px] text-center inline-block text-white bg-stone-950 dark:bg-stone-50 dark:text-stone-950 text-[1rem] font-medium rounded-sm"
+              className="py-[10px] w-[206px] text-center inline-block text-white bg-stone-950 dark:bg-stone-50 dark:text-stone-950 text-[1rem] font-medium rounded-sm max-sm:px-[5px] max-sm:w-[170px] max-[400px]:w-full"
             >
               {translate("about.connect", "Let's connect...")}
             </a>
             <a
               href="/mohammed-rabaya.pdf"
-              className="py-[10px] w-[206px] inline-block ms-4 text-center dark:text-white text-stone-950 text-[1rem] font-medium rounded-sm hover:bg-neutral-200 dark:hover:bg-[rgba(255,255,255,0.15)]"
+              className="py-[10px] w-[206px] inline-block text-center dark:text-white text-stone-950 text-[1rem] font-medium rounded-sm hover:bg-neutral-200 dark:hover:bg-[rgba(255,255,255,0.15)] max-sm:w-[170px] max-[400px]:w-full"
             >
               {translate("footer.downloadResume", "Download Resume")}
             </a>
@@ -181,73 +248,31 @@ const About: NextPage<Props> = ({ projects }: Props) => {
           <hr className="h-px bg-gray-200 border-0 dark:bg-gray-700" />
         </div>
       </div>
-      <div className="container mx-auto max-w-4xl pt-24 max-md:py-12 mb-0 px-5 pb-6 max-md:pb-8">
-        <h4 className="block dark:text-neutral-100 text-neutral-950">
+      <div className="container mx-auto max-w-4xl py-24 max-md:py-14 mb-0 px-5">
+        <h4 className="block dark:text-neutral-100 text-neutral-950 font-semibold max-md:text-[1.1rem]">
           {translate("about.experience.title", "Experience")}
         </h4>
-        <div className="flex">
-          <h4 className="w-[230px] dark:text-neutral-100 text-neutral-950 text-[1.15rem]">
-            {new Date("01-01-2023").toLocaleDateString(dateLocale, options)} -{" "}
-            {translate("about.experience.present", "Present")}
-          </h4>
-          <div className="flex-1">
-            <h4 className="mt-4 m-0 dark:text-neutral-100 text-neutral-950 text-[1.15rem]">
-              {translate(
-                "about.experience.seniorSoftwareEngineer",
-                "Senior Software Engineer"
-              )}
-            </h4>
-            <h6 className="m-0 uppercase font-semibold dark:text-neutral-400 text-neutral-700 mt-[3px]">
-              Rodeo Software .{" "}
-              {translate("about.experience.fullTime", "Full-time")}
-            </h6>
-          </div>
-          <h6 className="m-0 uppercase font-semibold dark:text-neutral-100 text-neutral-950 mt-5 self-baseline">
-            {translate("about.experience.amsterdam", "Amsterdam, Netherlands")}
-          </h6>
-        </div>
-        <div className="flex mt-20">
-          <h4 className="w-[230px] dark:text-neutral-100 text-neutral-950 text-[1.15rem] relative">
-            <div className="w-[1px] h-[90px] bg-neutral-800 absolute bottom-[140%] start-2"></div>
-            {new Date("11-01-2017").toLocaleDateString(dateLocale, options)} -{" "}
-            {new Date("12-31-2022").toLocaleDateString(dateLocale, options)}
-          </h4>
-          <div className="flex-1">
-            <h4 className="mt-4 m-0 dark:text-neutral-100 text-neutral-950 text-[1.15rem]">
-              {translate(
-                "about.experience.seniorFrontendEngineer",
-                "Senior Front-end Engineer"
-              )}
-            </h4>
-            <h6 className="m-0 uppercase font-semibold dark:text-neutral-400 text-neutral-700 mt-[3px]">
-              Cura Healthcare .{" "}
-              {translate("about.experience.fullTime", "Full-time")}
-            </h6>
-          </div>
-          <h6 className="m-0 uppercase font-semibold dark:text-neutral-100 text-neutral-950 mt-5 self-baseline">
-            {translate("about.experience.amman", "Amman, Jordan")}
-          </h6>
-        </div>
-        <div className="flex mt-8 pb-16">
-          <h4 className="w-[230px] dark:text-neutral-100 text-neutral-950 text-[1.15rem]">
-            {new Date("06-01-2015").toLocaleDateString(dateLocale, options)} -{" "}
-            {new Date("11-01-2017").toLocaleDateString(dateLocale, options)}
-          </h4>
-          <div className="flex-1">
-            <h4 className="mt-4 m-0 dark:text-neutral-100 text-neutral-950 text-[1.15rem]">
-              {translate(
-                "about.experience.frontendEngineer",
-                "Front-end Engineer"
-              )}
+        {jobs(globalization).map((item, index) => (
+          <div key={`job-${index}`} className="flex flex-wrap pb-8">
+            <h4 className="w-[230px] max-md:w-[180px] dark:text-neutral-100 text-neutral-950 text-[1.15rem] max-md:text-[1rem]">
+              {item.date}
             </h4>
-            <h6 className="m-0 uppercase font-semibold dark:text-neutral-400 text-neutral-700 mt-[3px]">
-              Plexable . {translate("about.experience.fullTime", "Full-time")}
+            <div className="flex-1 min-w-[270px]">
+              <h4 className="mt-4 m-0 dark:text-neutral-100 text-neutral-950 text-[1.15rem]  max-md:text-[1rem]">
+                {item.title}
+              </h4>
+              <h6 className="m-0 uppercase font-semibold dark:text-neutral-400 text-neutral-700 mt-[3px] max-md:text-[0.85rem]">
+                {item.company} . {item.role}
+              </h6>
+              <h6 className="m-0 uppercase font-semibold dark:text-neutral-100 text-neutral-950 mt-1 self-baseline max-md:text-[0.85rem] hidden max-md:block">
+                {item.location}
+              </h6>
+            </div>
+            <h6 className="m-0 uppercase font-semibold dark:text-neutral-100 text-neutral-950 mt-5 self-baseline max-md:text-[0.85rem] max-md:hidden">
+              {item.location}
             </h6>
           </div>
-          <h6 className="m-0 uppercase font-semibold dark:text-neutral-100 text-neutral-950 mt-5 self-baseline">
-            {translate("about.experience.amman", "Amman, Jordan")}
-          </h6>
-        </div>
+        ))}
       </div>
     </div>
   );

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -40,7 +40,10 @@ const Home: NextPage<Props> = ({ projects }: Props) => {
                 vertical="25%"
               >
                 {index === 0 && (
-                  <Text className="mt-9 ms-9 px-3 py-2 text-base absolute uppercase font-medium bg-amber-500 text-white rounded-2xl max-sm:text-[0.85em] max-sm:px-2 max-sm:py-1 max-sm:mt-5 max-sm:ms-5">
+                  <Text
+                    className="mt-9 ms-9 px-3 pb-4 py-3 text-xl absolute leading-4 font-medium bg-amber-500 text-white rounded-3xl max-sm:text-[0.85em] max-sm:px-2 max-sm:py-1 max-sm:mt-5 max-sm:ms-5"
+                    style={{ fontVariant: "all-small-caps" }}
+                  >
                     {getLocalizedString("home", "featured")}
                   </Text>
                 )}