serverTechnologies

package-lock.json

@@ -7780,6 +7780,14 @@
         "react-dom": "^16.4.1"
       }
     },
+    "react-skillbars": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-skillbars/-/react-skillbars-1.6.1.tgz",
+      "integrity": "sha512-vfenxvWl3KW4q8Ji6gXLRZFkAL1KFpfrP/8gQMWg5aREd9G1xhv0xnx2NcBHhWNhLf4NbhAOjO7AVQMatpRAqg==",
+      "requires": {
+        "lodash.throttle": "4.1.1"
+      }
+    },
     "react-smooth": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.6.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-redux": "6.0.1",
     "react-router-dom": "5.2.0",
     "react-simple-chatbot": "^0.6.1",
+    "react-skillbars": "^1.6.1",
     "recharts": "^1.8.5",
     "redux": "4.0.1",
     "redux-thunk": "2.3.0",

public/locales/en/translations.json

@@ -138,7 +138,8 @@
       "Documentation": "Documentation"
     },
     "Technologies": {
-      "Title": "Technologies"
+      "Title": "Technologies",
+      "Content": "This reverse proxy was built based on several technologies that were brought together as follows:"
     }
   }
 }

public/locales/ro/translations.json

@@ -129,7 +129,8 @@
       "Documentation": "Documentație"
     },
     "Technologies": {
-      "Title": "Tehnologii"
+      "Title": "Tehnologii",
+      "Content": "Acest reverse proxy a fost construit pe baza mai multor tehnologii care au fost aduse împreună după cum urmează:"
     }
   }
 }

src/features/about/components/TechnologiesComponent.js

@@ -1,44 +1,44 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import clsx from "clsx";
 import {
   Card,
   CardHeader,
   CardContent,
-  CardActions,
-  Collapse,
   Avatar,
-  IconButton,
   Typography
 } from "@material-ui/core";
-import FavoriteIcon from "@material-ui/icons/Favorite";
-import ShareIcon from "@material-ui/icons/Share";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
 import styles from "../../../components/common/styles/expandableCardStyles";
 import { useTranslation } from "react-i18next";
+import SkillBar from "react-skillbars";
 
 const useStyles = makeStyles(styles);
 
-/*
+const serverTechnologies = [
-https://codepen.io/emreavcilar/pen/eYmejLP
+  { type: "C#", level: 85 },
-https://codepen.io/ajaykarwal/pen/bqwWNy
+  { type: "ProxyKit", level: 30 },
-https://www.npmjs.com/package/react-skills-bars
+  { type: "Let's_Encrypt", level: 10 },
-https://www.npmjs.com/package/react-skillbars
+  { type: "SQL Server", level: 15 },
-https://kevincastejon.github.io/react-skills/documentation/
+  { type: "Docker", level: 5 }
+];
 
+const frontendTechnologies = [
+  { type: "React", level: 75 },
+  { type: "Redux", level: 15 },
+  { type: "Javascript", level: 10 },
+  { type: "Docker", level: 5 }
+];
 
-
+const colors = {
-*/
+  bar: "#5e8fff",
+  title: {
+    text: "#fd7e14",
+    background: "#3f51b5"
+  }
+};
 
 const TechnologiesComponent = () => {
   const classes = useStyles();
   const { t } = useTranslation();
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
 
   return (
     <Card>
@@ -48,71 +48,23 @@ const TechnologiesComponent = () => {
             T
           </Avatar>
         }
-        action={
-          <IconButton aria-label="settings">
-            <MoreVertIcon />
-          </IconButton>
-        }
         title={t("About.Technologies.Title")}
-        subheader="September 14, 2016"
       />
       <CardContent>
         <Typography variant="body2" color="textSecondary" component="p">
-          Aici se vor enumera tehnologiile folosite intr-o propozitie, gen:
+          {t("About.Technologies.Content")}
-          Pentru construirea acestui sistem a fost utilizata o gama larga de
-          tehnologii, bla bla bla si enumerate: .NET Core, ProxyKit, SQL Server.
         </Typography>
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          Server:
+        </Typography>
+        <SkillBar skills={serverTechnologies} colors={colors} height={20} />
+        <br />
+        <Typography variant="h6" color="textSecondary">
+          Frontend:
+        </Typography>
+        <SkillBar skills={frontendTechnologies} colors={colors} height={20} />
       </CardContent>
-      <CardActions disableSpacing>
-        <IconButton aria-label="add to favorites">
-          <FavoriteIcon />
-        </IconButton>
-        <IconButton aria-label="share">
-          <ShareIcon />
-        </IconButton>
-        <IconButton
-          className={clsx(classes.expand, {
-            [classes.expandOpen]: expanded
-          })}
-          onClick={handleExpandClick}
-          aria-expanded={expanded}
-          aria-label="show more"
-        >
-          <ExpandMoreIcon />
-        </IconButton>
-      </CardActions>
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <CardContent>
-          <Typography paragraph>Method:</Typography>
-          <Typography paragraph>
-            In zona asta va fi un tabel ca si celelalte cu tehnologiile folosite
-            si doua trei cuvinte despre ce face fiecare. SQL Server - baza de
-            date, Windows service - hostat serverul, docker hostat api-ul
-          </Typography>
-          <Typography paragraph>
-            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet
-            over medium-high heat. Add chicken, shrimp and chorizo, and cook,
-            stirring occasionally until lightly browned, 6 to 8 minutes.
-            Transfer shrimp to a large plate and set aside, leaving chicken and
-            chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes,
-            onion, salt and pepper, and cook, stirring often until thickened and
-            fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2
-            cups chicken broth; bring to a boil.
-          </Typography>
-          <Typography paragraph>
-            Add rice and stir very gently to distribute. Top with artichokes and
-            peppers, and cook without stirring, until most of the liquid is
-            absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved
-            shrimp and mussels, tucking them down into the rice, and cook again
-            without stirring, until mussels have opened and rice is just tender,
-            5 to 7 minutes more. (Discard any mussels that don’t open.)
-          </Typography>
-          <Typography>
-            Set aside off of the heat to let rest for 10 minutes, and then
-            serve.
-          </Typography>
-        </CardContent>
-      </Collapse>
     </Card>
   );
 };