Updating pages with the new changes in content

react-frontend/README.md

@@ -2,6 +2,8 @@
 
 ## Markdown to HTML
 
+> Open the following link to try the Markdown Editor: [Markdown Editor](https://shawkyebrahim.vercel.app/markdown)
+
 > I use the markdown notations in the backend to make the website content
 
 ### Used Markdown Notations

react-frontend/src/APIs/Sanity/about.ts

@@ -3,13 +3,9 @@ import sanityClient from './client';
 
 const getAboutPage = async () => {
     const query = `*[_type == "portfolio"][0].pages[_type == "aboutPage"][0] {
-        salutation,
         personImage,
-        seeking,
-        personName,
         description,
         resume,
-        position
     }`;
     const result: SanityAboutPage = await sanityClient.fetch(query);
     return result;

react-frontend/src/APIs/Sanity/education.ts

@@ -10,7 +10,6 @@ const getEducationPage = async () => {
             location,
             date,
             courses[] -> {
-                name,
                 description,
                 "technologies": technologies[]->name
             }

react-frontend/src/APIs/Sanity/projects.ts

@@ -5,7 +5,6 @@ const getProjectsPage = async () => {
     const query = `*[_type == "portfolio"][0].pages[_type == "projectsPage"][0] {
         title,
         "projects": projects[] -> {
-            name,
             links,
             description,
             "imgSrc": image.asset->url,

react-frontend/src/Types/sanity/educationPage.ts

@@ -6,7 +6,6 @@ type Date = {
 }
 
 type Course = {
-    name: string;
     description: string;
     technologies: string[];
 }

react-frontend/src/Types/sanity/experiencePage.ts

@@ -5,29 +5,24 @@ type Date = {
     to: string;
 }
 
-type Internship = {
+type Experience = {
     title: string;
     subTitle: string;
-    date: Date,
+    date: Date;
     link: string;
     description: string;
-    technologies: string[];
 }
 
-type Certificate = {
-    title: string;
-    subTitle: string;
-    description: string;
-    date: string;
-    link: string;
+type Internship = Experience & {
+    technologies: string[];
 }
 
 type SanityInternshipsSection = CommonTitle & {
     internships: Internship[];
 }
 
 type SanityCertificatesSection = CommonTitle & {
-    certificates: Certificate[];
+    certificates: Experience[];
 }
 
 export type SanityExperiencePage = {

react-frontend/src/Types/sanity/projectsPage.ts

@@ -6,7 +6,6 @@ type Links = {
 }
 
 type Project = {
-    name: string;
     links: Links;
     description: string;
     imgSrc: string;

react-frontend/src/components/HTMLMarkdown/HeadingMarkdown.tsx

@@ -17,11 +17,17 @@ const HeadingMarkdown = ({ headingNumber, ...props }: HeadingMarkdownProps) => {
             color: theme.colors.base[800]
         },
         three: {
-            fontSize: "2rem"
+            fontSize: "1.8rem"
         },
-        four: {},
-        five: {},
-        six: {}
+        four: {
+            fontSize: "1.4rem"
+        },
+        five: {
+            fontSize: "1.2rem"
+        },
+        six: {
+            fontSize: "1.1rem"
+        }
     }
     const HTMLHeadings: Record<HeadingMarkdownProps["headingNumber"], JSX.Element> = {
         one: <h1 {...props}

react-frontend/src/components/HTMLMarkdown/SpanMarkdown.tsx

@@ -14,8 +14,8 @@ type SpanMarkdownProps = {
 
 const SpanMarkdown = ({ node, ...props }: SpanMarkdownProps) => {
     const { theme } = useThemeContext();
-    let className = useMemo(() => props?.className?.split(' ') || [], [props?.className]);
-    let spanText = useMemo(() => {
+    let className = (() => props?.className?.split(' ') || [])();
+    let spanText = (() => {
         let text = '';
         visit(node as Element, 'text', (textNode: Text) => {
             text = textNode.value;
@@ -35,12 +35,13 @@ const SpanMarkdown = ({ node, ...props }: SpanMarkdownProps) => {
             }
         });
         return text;
-    }, [node, className]);
+    })();
 
     const textStyle = useMemo((): CSSProperties => {
         return {
             position: "relative",
             display: "inline-block",
+            zIndex: 2,
         }
     }, []);
     const lightEffectStyle = useMemo((): CSSProperties => ({

react-frontend/src/components/HTMLMarkdown/index.tsx

@@ -21,6 +21,9 @@ export const markdownComponents : Components = {
     h1: ({ node, ...props }) => <HeadingMarkdown headingNumber='one' {...props} />,
     h2: ({ node, ...props }) => <HeadingMarkdown headingNumber='two' {...props} />,
     h3: ({ node, ...props }) => <HeadingMarkdown headingNumber='three' {...props} />,
+    h4: ({ node, ...props }) => <HeadingMarkdown headingNumber='four' {...props} />,
+    h5: ({ node, ...props }) => <HeadingMarkdown headingNumber='five' {...props} />,
+    h6: ({ node, ...props }) => <HeadingMarkdown headingNumber='six' {...props} />,
     span: ({ node, ...props }) => <SpanMarkdown node={node} {...props} />,
     strong: ({ node, ...props }) => <SpanMarkdown node={node} {...props} />,
     blockquote: ({ node, ...props }) => <BlockquoteMarkdown node={node} {...props} />,

react-frontend/src/components/ProjectCard/Content.tsx

@@ -1,13 +1,11 @@
 import { CSSProperties, memo, useMemo } from 'react'
-import { useThemeContext } from '../../contexts/ThemeContext';
-import Text from '../Text';
 import ListButtons from '../ListButtons';
-import ListItems from '../ListItems';
 import ProjectButton from './Image/ImageOverlay/ProjectButton';
 import DemoButton from './Image/ImageOverlay/DemoButton';
+import HTMLMarkdown from '../HTMLMarkdown';
 
 type ContentProps = {
-    readonly title: string,
+    readonly title?: string,
     readonly description: string,
     readonly technologies: string[],
     readonly projectLink?: string,
@@ -24,26 +22,14 @@ function Content({ title, description, technologies, projectLink, demoLink }: Co
             gap: "1rem",
         }
     }, []);
-    const detailsStyle = useMemo((): CSSProperties => {
-        return {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            justifyContent: "flex-start",
-            gap: "0.25rem",
-        }
-    }, []);
     const linksStyle = useMemo(() => ({
         display: "flex",
         gap: "1rem",
     }), []);
 
     return (
         <div style={outerStyle}>
-            <div style={detailsStyle}>
-                <Title title={title} />
-                <ListItems elements={description.split("\n")} />
-            </div>
+            <HTMLMarkdown markdown={description} />
             <div style={linksStyle}>
                 {projectLink && <ProjectButton projectLink={projectLink} />}
                 {demoLink && <DemoButton demoLink={demoLink} />}
@@ -53,21 +39,4 @@ function Content({ title, description, technologies, projectLink, demoLink }: Co
     )
 }
 
-function Title({ title }: Readonly<Pick<ContentProps, "title">>) {
-    const { theme } = useThemeContext();
-    const titleStyle = useMemo((): CSSProperties => {
-        return {
-            color: theme.colors.base[600],
-            backgroundColor: theme.colors.base[200],
-            display: "inline-block",
-            borderRadius: theme.borderRadius,
-            padding: "0 5px",
-        }
-    }, [theme]);
-
-    return (
-        <Text variant={"h3"} style={titleStyle}>{title}</Text>
-    )
-}
-
 export default memo(Content);

react-frontend/src/components/ProjectCard/index.tsx

@@ -8,7 +8,7 @@ type ProjectCardProps = {
     readonly imgSrc?: string,
     readonly projectLink?: string,
     readonly demoLink?: string,
-    readonly title: string,
+    readonly title?: string,
     readonly description: string,
     readonly technologies: string[],
 }
@@ -39,7 +39,6 @@ function ProjectCard({
                 imgSrc={imgSrc || "images/placeholder.png"}
                 isSmallScreen={isSmallScreen} />
             <Content 
-                title={title} 
                 description={description} 
                 technologies={technologies}
                 projectLink={projectLink}

react-frontend/src/containers/About/Content/index.tsx

@@ -7,69 +7,6 @@ import { SanityAboutPage } from '../../../Types';
 import { useThemeContext } from '../../../contexts/ThemeContext';
 import HTMLMarkdown from '../../../components/HTMLMarkdown';
 
-const mdString = `
-
-## :span[Ex-SWE intern @Microsoft]{.highlight-area.secondary style="margin-bottom:1rem"}
-# I'm Shawky Ebrahim
-## :span[Ex-SWE intern @Microsoft]{.highlight-area.secondary}
-
----
-
-I **can** be a valuable :span[asset]{.highlight-area} to your team and contribute to your projects with my skills and enthusiasm.
-
-**!Text!**
-__!Text!__
-~~!Text!~~
-
----
-
-I can be a valuable asset to :span[your]{.highlight-text.secondary} :span[team]{.highlight-text.base} and contribute to your projects with my skills and enthusiasm.
-Please don't hesitate to check out my resume or reach out on the contact's page.
-
----
-
-Hello I 'm shawky ebrahim
-
----
-
-- First Level
-  - First First Level
-  - Firest Second Level
-- Second Level
-
----
-
-> [!secondary highlight] This is an info
-> > [!highlight] Hello World
-
-> [!highlight] This is an info
-> Hello ***SHawky*** Ebrahim
-
-> [!base] This is an info
-> Hello SHawky Ebrahim
-
-> [!secondary] This is an info
-> Hello SHawky Ebrahim
-
-> [!popup] This is an info
-> > [!popup] I Love you so
-> > **!There are some benefits from it like:!**
-> > - The first Sectino
-> ---
-> > [!popup] I Love you so **much** guy!
->
-> Hola Hola Hola
-
-> Hello Every One Here!
-
-Hello **Shawky** **!Ebrahim!** **-Ahmed-** **!-Mahmoud-!** 
-
-Hello **-Shawky-** **!-Ebrahim-!** 
-
-Hello **Shawky** **!Ebrahim!** 
-
-`;
-
 function Content({
     description,
     resume,
@@ -84,7 +21,7 @@ function Content({
 
     return (
         <div style={containerStyle}>
-            <HTMLMarkdown markdown={mdString} />
+            <HTMLMarkdown markdown={description} />
             <ResumeButton resume={resume} />
         </div>
     )