From a6f5b34e3cdb1c3938bd6e81211ab84faf237730 Mon Sep 17 00:00:00 2001 From: Mohammed Rabay'a Date: Tue, 26 Mar 2024 08:09:15 +0100 Subject: [PATCH] feat: new about design --- assets/icons/grab-icon.svg | 32 +++ assets/icons/x-icon.svg | 5 + assets/styles/utilities/_variables.scss | 22 +- .../atoms/AnimatedText/AnimatedCharacters.tsx | 2 +- components/atoms/AnimatedText/index.tsx | 8 +- pages/about.tsx | 208 +++++++++++++----- tailwind.config.js | 10 +- templates/Layout.tsx | 3 +- utils/languages/ar.json | 3 +- utils/languages/en-US.json | 3 +- 10 files changed, 217 insertions(+), 79 deletions(-) create mode 100644 assets/icons/grab-icon.svg create mode 100644 assets/icons/x-icon.svg diff --git a/assets/icons/grab-icon.svg b/assets/icons/grab-icon.svg new file mode 100644 index 0000000..6abcb59 --- /dev/null +++ b/assets/icons/grab-icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/x-icon.svg b/assets/icons/x-icon.svg new file mode 100644 index 0000000..55f9cdc --- /dev/null +++ b/assets/icons/x-icon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/styles/utilities/_variables.scss b/assets/styles/utilities/_variables.scss index 07650f0..25a7ff1 100755 --- a/assets/styles/utilities/_variables.scss +++ b/assets/styles/utilities/_variables.scss @@ -37,8 +37,8 @@ $screen-lg: 1280px; $screen-xl: 1440px; :root { - --base-font-size: 14px; - --base-small-caps-size: 15px; + --base-font-size: 13px; + --base-small-caps-size: 14px; --background-color: #fafafa; --background-color-rgb: 250, 250, 250; --footer-background-color: #000000; @@ -60,15 +60,14 @@ $screen-xl: 1440px; --button-color-darken: hsl(227, 76%, 45%); --button-text: #fff; --letter-spacing: -0.03em; - --bs-font-sans-serif: "DM Sans", "Vazirmatn", system-ui, -apple-system, + --bs-font-sans-serif: "Montserrat", "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-sans-serif-arabic: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-serif: Georgia, serif; - --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; + --bs-font-monospace: "Fira Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --card-background: #ffffff; --card-shadow-color: rgba(0, 0, 0, 0.1); @@ -77,12 +76,12 @@ $screen-xl: 1440px; --primary-color-context: #000000; @media (min-width: $screen-lg) { - --base-font-size: 18px; - --base-small-caps-size: 18px; + --base-font-size: 15px; + --base-small-caps-size: 16px; } @media (min-width: $screen-md) { - --base-font-size: 17px; - --base-small-caps-size: 17px; + --base-font-size: 15px; + --base-small-caps-size: 16px; } } @@ -104,12 +103,11 @@ html.dark { --masthead-text: #fff; --button-color: #f5e5ca; --button-text: #fff; - --bs-font-sans-serif: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, + --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-serif: Georgia, serif; - --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; + --bs-font-monospace: "Fira Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --card-background: var(--background-color); --card-shadow-color: rgba(var(--text-color-rgb), 0.1); diff --git a/components/atoms/AnimatedText/AnimatedCharacters.tsx b/components/atoms/AnimatedText/AnimatedCharacters.tsx index fcacdfe..2da2c14 100644 --- a/components/atoms/AnimatedText/AnimatedCharacters.tsx +++ b/components/atoms/AnimatedText/AnimatedCharacters.tsx @@ -77,8 +77,8 @@ const AnimatedCharacters = ({ diff --git a/components/atoms/AnimatedText/index.tsx b/components/atoms/AnimatedText/index.tsx index f1a6308..efc211f 100644 --- a/components/atoms/AnimatedText/index.tsx +++ b/components/atoms/AnimatedText/index.tsx @@ -3,7 +3,13 @@ import { AnimatedTextProps } from "motion"; import { useEffect, useState } from "react"; import AnimatedCharacters from "./AnimatedCharacters"; -const AnimatedText = ({ text, type, finished, ...rest }: AnimatedTextProps) => { +const AnimatedText = ({ + text, + type, + finished, + fontWeight, + ...rest +}: AnimatedTextProps) => { const [replay, setReplay] = useState(true); const hideDuration = 0.85; const showDuration = 0.85; diff --git a/pages/about.tsx b/pages/about.tsx index 5a343c5..84d091c 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -9,6 +9,9 @@ import path from "path"; import styled from "styled-components"; import { Project } from "types"; import AnimatedView from "../components/atoms/AnimatedView"; +import { AnimatedText } from "components/atoms"; +import GrabIcon from "../assets/icons/grab-icon.svg"; +import XIcon from "../assets/icons/x-icon.svg"; const RainbowText = styled.a` background: linear-gradient( @@ -106,73 +109,156 @@ const About: NextPage = ({ projects }: Props) => { content={require("../assets/images/metaimage.png")} /> -
-
- Portrait of Mohammed Rabay'a +
+
+
+
+
+
+
+
+
+
+
+
+
-
- -

- {getLocalizedString("about", "title")} -

- - -

- My name is Mohammed Rabaya - a Software Engineer with over{" "} - {new Date().getFullYear() - 2015} years of experience in designing - and building web and mobile apps. I am currently based in{" "} - Amsterdam, developing - awesome products for{" "} - - Rodeo Software - - . -

- -
- - - {getLocalizedString("about", "reach-out")} - - - - - {getLocalizedString("about", "download-resume")} - - +
+
+
+
+ +
+ + +
+
+ + + font-weight: bolder + + + 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" + /> + + + margin-left: -10% + + + + padding-top: 2em + + +
+ + 531 x 154 + +
+
+
+
+
+ Portrait of Mohammed Rabay'a +
+
+
+
+ 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. +
+
+
+
+
+
-
-
-
-
-

- {getLocalizedString("about", "work-title")} +
+

+ Experience

+
+

+ Jan 2023 - Present +

+
+

+ Senior Software Engineer +

+
+ Rodeo Software . Full-time +
+
+
+ Amsterdam, Netherlands +
+
+
+

+
+ Nov 2017 - Dec 2022 +

+
+

+ Senior Front-end Engineer +

+
+ Cura Healthcare . Full-time +
+
+
+ Amman, Jordan +
+
+
+

+ Jun 2015 - Nov 2017 +

+
+

+ Front-end Engineer +

+
+ Plexable . Full-time +
+
+
+ Amman, Jordan +
+
- {WorkItems()}

); }; diff --git a/tailwind.config.js b/tailwind.config.js index 64479e2..c1a8855 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,15 @@ module.exports = { "./src/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { - extend: {}, + extend: { + maxHeight: { + '60vh': '65vh', + '65vh': '65vh', + } + }, + fontFamily: { + "mono": '"Fira Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace' + } }, plugins: [], }; diff --git a/templates/Layout.tsx b/templates/Layout.tsx index a172af0..e5df679 100644 --- a/templates/Layout.tsx +++ b/templates/Layout.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/no-page-custom-font */ import useGlobalization from "hooks/useGlobalization"; import dynamic from "next/dynamic"; import Head from "next/head"; @@ -41,7 +42,7 @@ export default function Layout({ children, pageProps }: any) { crossOrigin="" /> diff --git a/utils/languages/ar.json b/utils/languages/ar.json index 224885b..4fe1b0c 100644 --- a/utils/languages/ar.json +++ b/utils/languages/ar.json @@ -24,7 +24,8 @@ "about": "مهندس برمجيات متخصص في تصميم وبناء برمجيات ومنتجات سلسة للمستخدم لكل من منصات الويب والهواتف المحمول.", "work-title": "اخر الاعمال", "download-resume": "حمل السيرة الذاتية", - "reach-out": "تواصل معي" + "reach-out": "تواصل معي", + "checkout": "تصفح اخر الاعمال" }, "work": { "title": "المشاريع", diff --git a/utils/languages/en-US.json b/utils/languages/en-US.json index d486318..d5f582a 100644 --- a/utils/languages/en-US.json +++ b/utils/languages/en-US.json @@ -24,7 +24,8 @@ "about": "", "work-title": "Recent work", "download-resume": "Download resume", - "reach-out": "Reach out" + "reach-out": "Reach out", + "checkout": "Checkout my work" }, "work": { "title": "Work",