✨ (About.jsx): Add Recommendations component to About page for displa…

…ying recommendations section

📝 (Recommendations.jsx): Create Recommendations component for displaying recommendations section in About page
♻️ (Backend.jsx): Update backend tech skills list by replacing GraphQL with ExpressJs and adding JAVA (Basic)
♻️ (Frontend.jsx): Update frontend tech skills list by adding Svelte and moving Javascript entry
♻️ (HighSkills.jsx): Update high skills tech skills list by adding NextJs and moving Redux entry
♻️ (Other.jsx): Update other tech skills list by replacing Typescript with Docker, adding GraphQL, and adding WebSocket
♻️ (TechSkills.jsx): Rearrange the order of components in TechSkills to display Other section last in the list

src/Pages/About/About.jsx

@@ -12,6 +12,7 @@ import homeMainIcon from "../../assets/home-main.svg";
 import { useTranslation } from "react-i18next";
 
 import Fade from "react-reveal/Fade";
+import Recommendations from "./Recommodations/Recommendations";
 
 const About = () => {
   const { t } = useTranslation();
@@ -53,6 +54,11 @@ const About = () => {
             <img src={aboutPromoImg} alt="about" />
           </div> */}
             </div>
+
+            {/* <Fade top>
+              <Recommendations />
+            </Fade> */}
+
             <Fade top>
               <h2 className={ms.skills}>
                 {t("aboutpage.professional.title")}{" "}

src/Pages/About/Recommodations/Recommendations.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Recommendations = () => {
+  return (
+    <div>
+      <h1>recommendations</h1>
+    </div>
+  );
+};
+
+export default Recommendations;

src/Pages/About/TechSkills/Backend.jsx

@@ -14,10 +14,15 @@ export const Backend = () => {
       link: "https://nestjs.com/",
     },
     {
-      name: "GraphQL",
-      link: "https://graphql.org/",
+      name: "ExpressJs",
+      link: "https://expressjs.com/",
+    },
+    {
+      name: "JAVA (Basic)",
+      link: "https://www.java.com/en/",
     },
   ];
+
   return (
     <div>
       <Zoom top cascade>

src/Pages/About/TechSkills/Frontend.jsx

@@ -9,14 +9,18 @@ export const Frontend = () => {
       name: "Reactjs",
       link: "https://reactjs.org",
     },
-    {
-      name: "Javascript",
-      link: "https://www.javascript.com/",
-    },
     {
       name: "NextJs",
       link: "https://nextjs.org/",
     },
+    {
+      name: "Svelte",
+      link: "https://svelte.dev/",
+    },
+    {
+      name: "Javascript",
+      link: "https://www.javascript.com/",
+    },
     {
       name: "Material UI",
       link: "https://mui.com/",

src/Pages/About/TechSkills/HighSkills.jsx

@@ -10,6 +10,10 @@ export const HighSkills = () => {
       name: "Reactjs",
       link: "https://reactjs.org",
     },
+    {
+      name: "NextJs",
+      link: "https://nextjs.org/",
+    },
     {
       name: "Javascript",
       link: "https://www.javascript.com/",
@@ -22,10 +26,6 @@ export const HighSkills = () => {
       name: "Redux",
       link: "https://redux.js.org",
     },
-    {
-      name: "NextJs",
-      link: "https://nextjs.org/",
-    },
     {
       name: "Nodejs",
       link: "https://nodejs.org/en/",

src/Pages/About/TechSkills/Other.jsx

@@ -6,12 +6,16 @@ import Zoom from "react-reveal/Zoom";
 export const Other = () => {
   const Other = [
     {
-      name: "Typescript",
-      link: "https://www.typescriptlang.org/",
+      name: "Docker",
+      link: "https://www.docker.com/",
     },
     {
-      name: "Redux",
-      link: "https://redux.js.org",
+      name: "GraphQL",
+      link: "https://graphql.org/",
+    },
+    {
+      name: "WebSocket",
+      link: "https://socket.io/",
     },
   ];
 

src/Pages/About/TechSkills/TechSkills.jsx

@@ -12,12 +12,12 @@ const TechSkills = () => {
     <>
       <HighSkills />
       <Frontend />
-      <Other />
       <Backend />
       <Database />
       <Tools />
       <Hosting />
       <Discipline />
+      <Other />
     </>
   );
 };