add projects made by me, make Project component reusable
This commit is contained in:
parent
cd5bdce242
commit
f4f355b6d1
|
|
@ -9,6 +9,7 @@ import {
|
|||
Typography,
|
||||
Button,
|
||||
Chip,
|
||||
Link,
|
||||
} from "@material-ui/core"
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
|
|
@ -54,6 +55,9 @@ const useStyles = makeStyles(theme => ({
|
|||
},
|
||||
"& > *": {
|
||||
marginBottom: theme.spacing(1),
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
width: "100%",
|
||||
},
|
||||
},
|
||||
},
|
||||
cover: {
|
||||
|
|
@ -66,12 +70,12 @@ const useStyles = makeStyles(theme => ({
|
|||
},
|
||||
}))
|
||||
|
||||
function Project({ reverse }) {
|
||||
function Project({ reverse, title, description, technologies, github, live }) {
|
||||
const classes = useStyles()
|
||||
return (
|
||||
<Card
|
||||
className={classnames(classes.card, {
|
||||
reverse: reverse,
|
||||
reverse,
|
||||
})}
|
||||
>
|
||||
<CardMedia
|
||||
|
|
@ -82,36 +86,33 @@ function Project({ reverse }) {
|
|||
<CardContent className={classes.cardContent}>
|
||||
<div className={classes.contentContainer}>
|
||||
<Typography variant="h3" gutterBottom>
|
||||
Projekt
|
||||
</Typography>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
|
||||
tincidunt ligula eu ultricies ornare. Morbi nec eleifend sapien.
|
||||
Duis eu lorem tortor. Morbi consectetur hendrerit eros. Ut efficitur
|
||||
laoreet placerat. Phasellus dignissim non dui ac maximus. Etiam
|
||||
venenatis diam sed ligula consectetur viverra et vitae tortor. Donec
|
||||
faucibus viverra nulla vitae rutrum. Nam ornare erat magna, non
|
||||
sollicitudin justo venenatis in. Ut non metus vitae libero viverra
|
||||
elementum. Vestibulum iaculis mi eget libero hendrerit aliquet.
|
||||
Pellentesque nisl arcu, blandit a leo eget, semper porta mauris.
|
||||
Suspendisse vehicula congue mauris sit amet hendrerit. Fusce et arcu
|
||||
ligula. Fusce ut orci pharetra, consequat nibh eu, mollis augue.
|
||||
Nulla eu mi fermentum nulla dignissim porta id in purus.
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography>{description}</Typography>
|
||||
</div>
|
||||
<div className={classes.divider}></div>
|
||||
<div className={classes.technologies}>
|
||||
<Chip label="Technologia 1" color="secondary" />
|
||||
<Chip label="Technologia 2" color="secondary" />
|
||||
<Chip label="Technologia 3" color="secondary" />
|
||||
{technologies.map(technology => {
|
||||
return (
|
||||
<Chip key={technology} label={technology} color="secondary" />
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className={classes.buttons}>
|
||||
<Button variant="contained" color="secondary">
|
||||
Github
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary">
|
||||
Wersja online
|
||||
</Button>
|
||||
{github && (
|
||||
<Link underline="none" href={github}>
|
||||
<Button variant="contained" color="secondary">
|
||||
Github
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{live && (
|
||||
<Link underline="none" href={live}>
|
||||
<Button variant="contained" color="secondary">
|
||||
Wersja online
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Typography, Container } from "@material-ui/core"
|
|||
import Section, { BG_COLOR } from "@components/Section"
|
||||
import Project from "./Project"
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
const useStyles = makeStyles(theme => ({
|
||||
section: {
|
||||
transform: "skewY(-4deg)",
|
||||
padding: "8rem 1.5rem",
|
||||
|
|
@ -13,6 +13,11 @@ const useStyles = makeStyles(() => ({
|
|||
transform: "skewY(4deg)",
|
||||
},
|
||||
},
|
||||
projects: {
|
||||
"& > *:not(:last-child)": {
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
function Projects() {
|
||||
|
|
@ -23,11 +28,106 @@ function Projects() {
|
|||
<Typography variant="h2" align="center" gutterBottom>
|
||||
Projekty
|
||||
</Typography>
|
||||
<Project />
|
||||
<Project reverse />
|
||||
<div className={classes.projects}>
|
||||
{projects.map((project, index) => {
|
||||
return (
|
||||
<Project
|
||||
key={project.title}
|
||||
{...project}
|
||||
reverse={(index + 1) % 2 === 0}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "TWHelp",
|
||||
description:
|
||||
"Serwis zawierający różne pomoce dla graczy plemion, zaczynając od bota na Discorda i przeróżnych skryptów, kończąc na ogólnodostępnym API z danymi serwerów plemion (informacje o graczach, wioskach, plemionach, zmianach plemion itd.).",
|
||||
technologies: [
|
||||
"React",
|
||||
"Gatsby",
|
||||
"Material-UI",
|
||||
"Golang",
|
||||
"gqlgen",
|
||||
"Gin",
|
||||
"discordgo",
|
||||
"robfig/cron",
|
||||
"PostgreSQL",
|
||||
"Docker",
|
||||
"Traefik",
|
||||
],
|
||||
github: "",
|
||||
live: "https://tribalwarshelp.com/",
|
||||
},
|
||||
{
|
||||
title: "Zdam Egzamin Zawodowy",
|
||||
description:
|
||||
"Aplikacja mobilna oraz webowa przeznaczona do wykonywania testów zawodowych.",
|
||||
technologies: [
|
||||
"React",
|
||||
"Next.JS",
|
||||
"Material-UI",
|
||||
"Apollo Client",
|
||||
"Golang",
|
||||
"gqlgen",
|
||||
"Echo",
|
||||
"PostgreSQL",
|
||||
"React Native",
|
||||
],
|
||||
github: "",
|
||||
live: "https://zdamegzaminzawodowy.pl/",
|
||||
},
|
||||
{
|
||||
title: "matura-z-informatyki.pl",
|
||||
description: "",
|
||||
technologies: ["React", "Next.JS", "Bulma", "Ghost"],
|
||||
github: "https://github.com/Kichiyaki/matura-z-informatyki.pl",
|
||||
live: "https://matura-z-informatyki.pl/",
|
||||
},
|
||||
{
|
||||
title: "dawid-wysokinski.pl",
|
||||
description: "Moje portfolio.",
|
||||
technologies: ["React", "Gatsby", "Material-UI"],
|
||||
github: "https://github.com/Kichiyaki/dawid-wysokinski.pl",
|
||||
live: "https://dawid-wysokinski.pl",
|
||||
},
|
||||
{
|
||||
title: "tribalbooster.pl",
|
||||
description: "",
|
||||
technologies: ["React", "Gatsby", "Material-UI"],
|
||||
live: "http://tribalbooster.pl/",
|
||||
},
|
||||
{
|
||||
title: "Instaling.pl Bot",
|
||||
description: "Bot automatycznie wykonujący sesje na stronie instaling.pl.",
|
||||
technologies: ["Golang", "Lorca"],
|
||||
github: "https://github.com/Kichiyaki/Instaling-Bot",
|
||||
},
|
||||
{
|
||||
title: "Margonem Mini Bot",
|
||||
description:
|
||||
"Bot służący do zużywania staminy w mobilnej wersji gry margonem, sprzedawania itemów i autoleczenia.",
|
||||
technologies: ["Golang", "Colly"],
|
||||
github: "https://github.com/Kichiyaki/margonem-mini-bot",
|
||||
},
|
||||
{
|
||||
title: "Akademia Młodego Inżyniera",
|
||||
description: "",
|
||||
technologies: ["HTML", "CSS", "Bootstrap"],
|
||||
live: "https://dawid-wysokinski.pl/podglad/akademia/",
|
||||
},
|
||||
{
|
||||
title: "Freshline",
|
||||
description: "",
|
||||
technologies: ["Wordpress", "CSS", "Bootstrap"],
|
||||
live: "http://fresh-line.pl/",
|
||||
},
|
||||
]
|
||||
|
||||
export default Projects
|
||||
|
|
|
|||
Loading…
Reference in New Issue