serverTechnologies

master
Tudor Stanciu 2021-09-07 11:18:55 +03:00
parent 302007e7cf
commit e390ad3743
5 changed files with 45 additions and 82 deletions

8
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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:"
}
}
}

View File

@ -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ă:"
}
}
}

View File

@ -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);
/*
https://codepen.io/emreavcilar/pen/eYmejLP
https://codepen.io/ajaykarwal/pen/bqwWNy
https://www.npmjs.com/package/react-skills-bars
https://www.npmjs.com/package/react-skillbars
https://kevincastejon.github.io/react-skills/documentation/
const serverTechnologies = [
{ type: "C#", level: 85 },
{ type: "ProxyKit", level: 30 },
{ type: "Let's_Encrypt", level: 10 },
{ type: "SQL Server", level: 15 },
{ 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:
Pentru construirea acestui sistem a fost utilizata o gama larga de
tehnologii, bla bla bla si enumerate: .NET Core, ProxyKit, SQL Server.
{t("About.Technologies.Content")}
</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 dont open.)
</Typography>
<Typography>
Set aside off of the heat to let rest for 10 minutes, and then
serve.
</Typography>
</CardContent>
</Collapse>
</Card>
);
};