about content

public/locales/en/translations.json

@@ -131,9 +131,18 @@
   "About": {
     "Title": "Overview",
     "Subtitle": "Expand to see details",
+    "WhatIs": "What is a reverse proxy?",
+    "CurrentSystem": "Current system",
     "Content1": "A reverse proxy is a server that accepts a request from a client, forwards the request to another one of many other servers and returns the results from the server that actually processed the request to the client as if the proxy server had processed the request itself.",
     "Content2": "A reverse proxy is a type of proxy server. Unlike a traditional proxy server, which is used to protect clients, a reverse proxy is used to protect servers.",
     "Content3": "The client only communicates directly with the reverse proxy server and it does not know that some other server actually processed its request.",
+    "Content4": "This system is composed of three components, each with its well-defined purpose.",
+    "ContentTitle": "More details about the concept",
+    "Description": {
+      "Server": "Server description",
+      "Api": "API description",
+      "Frontend": "Frontend description"
+    },
     "Actions": {
       "Documentation": "Documentation"
     },
@@ -141,5 +150,12 @@
       "Title": "Technologies",
       "Content": "This reverse proxy was built based on several technologies that were brought together as follows:"
     }
+  },
+  "System": {
+    "Components": {
+      "Server": "Server:",
+      "Api": "API:",
+      "Frontend": "Frontend:"
+    }
   }
 }

public/locales/ro/translations.json

@@ -122,9 +122,18 @@
   "About": {
     "Title": "Prezentare generală",
     "Subtitle": "Extindeţi pentru a vedea detalii",
+    "WhatIs": "Ce este un proxy invers?",
+    "CurrentSystem": "Sistem actual",
     "Content1": "Un proxy invers este un server care acceptă o cerere de la un client, redirecționează cererea către altul din multe alte servere și returnează rezultatele de la serverul care a procesat efectiv solicitarea către client ca și cum serverul proxy ar fi procesat solicitarea de unul singur.",
     "Content2": "Un proxy invers este un tip de server proxy. Spre deosebire de un server proxy tradițional, care este utilizat pentru a proteja clienții, un proxy invers este utilizat pentru a proteja serverele.",
     "Content3": "Clientul comunică direct cu serverul proxy invers și nu știe că un alt server i-a procesat cererea.",
+    "Content4": "Acest sistem este compus din trei componente, fiecare cu scopul său bine definit.",
+    "ContentTitle": "Mai multe detalii despre concept",
+    "Description": {
+      "Server": "Server description",
+      "Api": "API description",
+      "Frontend": "Frontend description"
+    },
     "Actions": {
       "Documentation": "Documentație"
     },
@@ -132,5 +141,12 @@
       "Title": "Tehnologii",
       "Content": "Acest reverse proxy a fost construit pe baza mai multor tehnologii care au fost aduse împreună după cum urmează:"
     }
+  },
+  "System": {
+    "Components": {
+      "Server": "Server:",
+      "Api": "API:",
+      "Frontend": "Frontend:"
+    }
   }
 }

src/features/about/components/AboutComponent.js

@@ -48,9 +48,40 @@ const AboutComponent = ({ onOpenDocumentation }) => {
         subheader={t("About.Subtitle")}
       />
       <CardContent>
+        <Typography variant="h6" color="textSecondary">
+          {t("About.WhatIs")}
+        </Typography>
         <Typography variant="body2" color="textSecondary" component="p">
           {t("About.Content1")}
         </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("About.CurrentSystem")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Content4")}
+        </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Server")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Description.Server")}
+        </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Api")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Description.Api")}
+        </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Frontend")}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" component="p">
+          {t("About.Description.Frontend")}
+        </Typography>
       </CardContent>
       <CardActions disableSpacing>
         <Tooltip title={t("About.Actions.Documentation")}>
@@ -71,6 +102,10 @@ const AboutComponent = ({ onOpenDocumentation }) => {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
+          <Typography variant="h6" color="textSecondary">
+            {t("About.ContentTitle")}
+          </Typography>
+          <br />
           <Grid container spacing={1}>
             <Grid item xs={12}>
               <Typography paragraph>{t("About.Content2")}</Typography>

src/features/about/components/TechnologiesComponent.js

@@ -21,6 +21,12 @@ const serverTechnologies = [
   { type: "Docker", level: 5 }
 ];
 
+const apiTechnologies = [
+  { type: "C#", level: 90 },
+  { type: "SQL Server", level: 10 },
+  { type: "Docker", level: 5 }
+];
+
 const frontendTechnologies = [
   { type: "React", level: 75 },
   { type: "Redux", level: 15 },
@@ -57,12 +63,17 @@ const TechnologiesComponent = () => {
         </Typography>
         <br />
         <Typography variant="h6" color="textSecondary">
-          Server:
+          {t("System.Components.Server")}
         </Typography>
         <SkillBar skills={serverTechnologies} colors={colors} height={20} />
         <br />
         <Typography variant="h6" color="textSecondary">
-          Frontend:
+          {t("System.Components.Api")}
+        </Typography>
+        <SkillBar skills={apiTechnologies} colors={colors} height={20} />
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          {t("System.Components.Frontend")}
         </Typography>
         <SkillBar skills={frontendTechnologies} colors={colors} height={20} />
       </CardContent>