From 140fda343bdcbda06d84fa514d7c1b69167f02a6 Mon Sep 17 00:00:00 2001 From: Mohammed Rabay'a Date: Tue, 2 Apr 2024 23:44:06 +0200 Subject: [PATCH] feat: translate profile and add translate --- hooks/useGlobalization.ts | 9 +++++ pages/about.tsx | 82 +++++++++++++++++++++++++------------- utils/languages/ar.json | 18 +++++++-- utils/languages/en-US.json | 18 +++++++-- 4 files changed, 94 insertions(+), 33 deletions(-) diff --git a/hooks/useGlobalization.ts b/hooks/useGlobalization.ts index 45572c1..a982c7c 100644 --- a/hooks/useGlobalization.ts +++ b/hooks/useGlobalization.ts @@ -42,10 +42,19 @@ const useGlobalization = () => { const translateValue = getter(languages[locale as Languages], ...a); return translateValue; }; + + const translate = (key: string, fallback: string) => { + const translateValue = getter( + languages[locale as Languages], + ...key.split(".") + ); + return translateValue ?? fallback; + }; return { locale, direction, getLocalizedString, + translate, isArabic, }; }; diff --git a/pages/about.tsx b/pages/about.tsx index 2830c0a..ccefbea 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -28,7 +28,12 @@ interface Props { projects: Project[]; } const About: NextPage = ({ projects }: Props) => { - const { getLocalizedString } = useGlobalization(); + const { getLocalizedString, translate, locale } = useGlobalization(); + const dateLocale = locale === "ar" ? "ar-EG" : locale; + const options: Intl.DateTimeFormatOptions = { + month: "short", + year: "numeric", + }; if (typeof window !== "undefined") window.localStorage.setItem("color-theme", "light"); @@ -101,10 +106,13 @@ const About: NextPage = ({ projects }: Props) => { setHeaderAniamteState(state)} - className="border-[1px] border-solid border-[#4597F7] w-[490px] text-7xl leading-[0.8] m-0 uppercase *:!font-extrabold px-0 text-stone-800 dark:text-neutral-50" + className={`border-[1px] border-solid border-[#4597F7] w-[490px] ${ + 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`} /> @@ -116,7 +124,10 @@ const About: NextPage = ({ projects }: Props) => {
- + 531 x 154
@@ -139,13 +150,16 @@ const About: NextPage = ({ projects }: Props) => {
- A software engineer with over 9+ years of experience, I am - currently based in Amsterdam. + {translate( + "about.about1", + "A software engineer with over 9+ years of experience, I am currently based in Amsterdam." + )}
- 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. + {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." + )}
@@ -153,13 +167,13 @@ const About: NextPage = ({ projects }: Props) => { href="mailto:contact@moerabaya.com" 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" > - Let's connect... + {translate("about.connect", "Let's connect...")} - Download Resume + {translate("footer.downloadResume", "Download Resume")}
@@ -169,55 +183,69 @@ const About: NextPage = ({ projects }: Props) => {

- Experience + {translate("about.experience.title", "Experience")}

- Jan 2023 - Present + {new Date("01-01-2023").toLocaleDateString(dateLocale, options)} -{" "} + {translate("about.experience.present", "Present")}

- Senior Software Engineer + {translate( + "about.experience.seniorSoftwareEngineer", + "Senior Software Engineer" + )}

- Rodeo Software . Full-time + Rodeo Software .{" "} + {translate("about.experience.fullTime", "Full-time")}
- Amsterdam, Netherlands + {translate("about.experience.amsterdam", "Amsterdam, Netherlands")}

-
- Nov 2017 - Dec 2022 +
+ {new Date("11-01-2017").toLocaleDateString(dateLocale, options)} -{" "} + {new Date("12-31-2022").toLocaleDateString(dateLocale, options)}

- Senior Front-end Engineer + {translate( + "about.experience.seniorFrontendEngineer", + "Senior Front-end Engineer" + )}

- Cura Healthcare . Full-time + Cura Healthcare .{" "} + {translate("about.experience.fullTime", "Full-time")}
- Amman, Jordan + {translate("about.experience.amman", "Amman, Jordan")}
-
+

- Jun 2015 - Nov 2017 + {new Date("06-01-2015").toLocaleDateString(dateLocale, options)} -{" "} + {new Date("11-01-2017").toLocaleDateString(dateLocale, options)}

- Front-end Engineer + {translate( + "about.experience.frontendEngineer", + "Front-end Engineer" + )}

- Plexable . Full-time + Plexable . {translate("about.experience.fullTime", "Full-time")}
- Amman, Jordan + {translate("about.experience.amman", "Amman, Jordan")}
diff --git a/utils/languages/ar.json b/utils/languages/ar.json index 4fe1b0c..fe893dc 100644 --- a/utils/languages/ar.json +++ b/utils/languages/ar.json @@ -20,12 +20,24 @@ "title": "المقالات" }, "about": { - "title": "مراحب", - "about": "مهندس برمجيات متخصص في تصميم وبناء برمجيات ومنتجات سلسة للمستخدم لكل من منصات الويب والهواتف المحمول.", + "title": "محمد ربايعة", + "about1": "مهندس برمجيات متخصص في تصميم وبناء برمجيات ومنتجات سلسة للمستخدم لكل من منصات الويب والهواتف المحمول. ", + "about2": "مع أكثر من ٩ سنوات من الخبرة في تصميم وبناء أنظمة واجهة المستخدم لمواقع الويب والبرامج والتطبيقات المستندة إلى الويب ، ساعدت الشركات على تصميم وبناء منتجات الويب وتطبيقات الهاتف المحمول ومنصات (البرمجيات كخدمة - ساس) الموجهة للمستهلكين من خلال توفير تجربة مستخدم سلسة.", "work-title": "اخر الاعمال", "download-resume": "حمل السيرة الذاتية", "reach-out": "تواصل معي", - "checkout": "تصفح اخر الاعمال" + "checkout": "تصفح اخر الاعمال", + "connect": "تواصل معي...", + "experience": { + "title": "الخبرات السابقة", + "present": "حالياً", + "seniorSoftwareEngineer": "(Senior) مهندس برمجيات", + "seniorFrontendEngineer": "(Senior) مهندس برمجيات", + "frontendEngineer": "مهندس برمجيات", + "fullTime": "دوام-كامل", + "amsterdam": "امستردام، هواندا", + "amman": "عمان، الاردن" + } }, "work": { "title": "المشاريع", diff --git a/utils/languages/en-US.json b/utils/languages/en-US.json index d5f582a..4f16eee 100644 --- a/utils/languages/en-US.json +++ b/utils/languages/en-US.json @@ -20,12 +20,24 @@ "title": "Latest Articles" }, "about": { - "title": "Hola, مرحبا", - "about": "", + "title": "Mohammed Rabaya", + "about1": "A software engineer with over 9+ years of experience, I am currently based in Amsterdam.", + "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.", "work-title": "Recent work", "download-resume": "Download resume", "reach-out": "Reach out", - "checkout": "Checkout my work" + "checkout": "Checkout my work", + "connect": "Let's connect...", + "experience": { + "title": "Experience", + "present": "Present", + "seniorSoftwareEngineer": "Senior Software Engineer", + "seniorFrontendEngineer": "Senior Front-end Engineer", + "frontendEngineer": "Front-end Engineer", + "fullTime": "Full-time", + "amsterdam": "Amsterdam, Netherlands", + "amman": "Amman, Jordan" + } }, "work": { "title": "Work",