2020-07-14 10:50:36 +00:00
|
|
|
import React from "react"
|
|
|
|
|
|
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
|
|
import { Container, Typography, Grid } from "@material-ui/core"
|
|
|
|
import Section from "@components/Section"
|
|
|
|
import speedIcon from "./speed.svg"
|
|
|
|
import responsiveIcon from "./responsive.svg"
|
|
|
|
import securityIcon from "./security.svg"
|
|
|
|
import intuitiveIcon from "./intuitive.svg"
|
|
|
|
|
|
|
|
function MyPriorities() {
|
|
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
|
|
<Section>
|
|
|
|
<Container className={classes.container}>
|
|
|
|
<Typography align="center" variant="h2" gutterBottom>
|
2021-01-16 20:58:43 +00:00
|
|
|
My priorities
|
2020-07-14 10:50:36 +00:00
|
|
|
</Typography>
|
|
|
|
<Grid container spacing={2}>
|
|
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
|
|
<img
|
|
|
|
className={classes.icon}
|
|
|
|
src={responsiveIcon}
|
2021-01-16 20:58:43 +00:00
|
|
|
alt="Responsiveness"
|
2020-07-14 10:50:36 +00:00
|
|
|
/>
|
2021-01-16 20:58:43 +00:00
|
|
|
<Typography variant="h4">Responsiveness</Typography>
|
2020-07-14 10:50:36 +00:00
|
|
|
<Typography>
|
2021-01-16 20:58:43 +00:00
|
|
|
I create websites that look good on all devices.
|
2020-07-14 10:50:36 +00:00
|
|
|
</Typography>
|
|
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
|
|
<img
|
|
|
|
className={classes.icon}
|
2021-01-16 20:58:43 +00:00
|
|
|
src={intuitiveIcon}
|
|
|
|
alt="Intuitiveness"
|
2020-07-14 10:50:36 +00:00
|
|
|
/>
|
2021-01-16 20:58:43 +00:00
|
|
|
<Typography variant="h4">Intuitiveness</Typography>
|
|
|
|
<Typography>An easy-to-use & user-friendly interface.</Typography>
|
2020-07-14 10:50:36 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6} md={3}>
|
2021-01-16 20:58:43 +00:00
|
|
|
<img className={classes.icon} src={speedIcon} alt="Szybkość" />
|
|
|
|
<Typography variant="h4">Performance</Typography>
|
|
|
|
<Typography>Fast load times & lag free interaction.</Typography>
|
|
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
|
|
<img className={classes.icon} src={securityIcon} alt="Security" />
|
|
|
|
<Typography variant="h4">Security</Typography>
|
|
|
|
<Typography>
|
|
|
|
I use tried-and-tested tools and techniques that help me keep the
|
|
|
|
website safe.
|
|
|
|
</Typography>
|
2020-07-14 10:50:36 +00:00
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</Container>
|
|
|
|
</Section>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-01-16 20:58:43 +00:00
|
|
|
const useStyles = makeStyles(theme => ({
|
|
|
|
icon: {
|
|
|
|
width: 128,
|
|
|
|
height: 128,
|
|
|
|
[theme.breakpoints.down("md")]: {
|
|
|
|
width: 96,
|
|
|
|
height: 96,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
container: {
|
|
|
|
textAlign: "center",
|
|
|
|
},
|
|
|
|
}))
|
|
|
|
|
2020-07-14 10:50:36 +00:00
|
|
|
export default MyPriorities
|