initial version of Project card
This commit is contained in:
parent
e949c2d4ac
commit
cd5bdce242
|
@ -3,7 +3,7 @@ const siteUrl = "https://dawid-wysokinski.pl"
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
title: `Dawid Wysokiński`,
|
title: `Dawid Wysokiński`,
|
||||||
description: `Programista stron WWW & Full-Stack Web Developer.`,
|
description: `Programista stron WWW & Full Stack Web Developer & Frontend Developer & Backend Developer.`,
|
||||||
author: `@Dawid56143781`,
|
author: `@Dawid56143781`,
|
||||||
authorFullName: "Dawid Wysokiński",
|
authorFullName: "Dawid Wysokiński",
|
||||||
email: "xyztojajestem@gmail.com",
|
email: "xyztojajestem@gmail.com",
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { Helmet } from "react-helmet"
|
||||||
import { useStaticQuery, graphql } from "gatsby"
|
import { useStaticQuery, graphql } from "gatsby"
|
||||||
import ogThumbnail from "@images/og_thumbnail.png"
|
import ogThumbnail from "@images/og_thumbnail.png"
|
||||||
|
|
||||||
function SEO({ description, lang, meta, title, location }) {
|
function SEO({ description, lang, meta, title, pathname }) {
|
||||||
const { site } = useStaticQuery(
|
const { site } = useStaticQuery(
|
||||||
graphql`
|
graphql`
|
||||||
query {
|
query {
|
||||||
|
@ -48,7 +48,7 @@ function SEO({ description, lang, meta, title, location }) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:url`,
|
property: `og:url`,
|
||||||
content: `${site.siteMetadata.siteUrl}${location}`,
|
content: `${site.siteMetadata.siteUrl}${pathname}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:image`,
|
property: `og:image`,
|
||||||
|
@ -88,7 +88,7 @@ function SEO({ description, lang, meta, title, location }) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:url`,
|
name: `twitter:url`,
|
||||||
content: `${site.siteMetadata.siteUrl}${location}`,
|
content: `${site.siteMetadata.siteUrl}${pathname}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:image`,
|
name: `twitter:image`,
|
||||||
|
@ -102,7 +102,7 @@ function SEO({ description, lang, meta, title, location }) {
|
||||||
>
|
>
|
||||||
<link
|
<link
|
||||||
rel="canonical"
|
rel="canonical"
|
||||||
content={`${site.siteMetadata.siteUrl}${location}`}
|
content={`${site.siteMetadata.siteUrl}${pathname}`}
|
||||||
></link>
|
></link>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,19 +1,45 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
|
import PropTypes from "prop-types"
|
||||||
|
import classnames from "classnames"
|
||||||
|
|
||||||
import { makeStyles } from "@material-ui/core/styles"
|
import { makeStyles } from "@material-ui/core/styles"
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
section: {
|
section: {
|
||||||
padding: "3rem 1.5rem",
|
padding: "3rem 1.5rem",
|
||||||
|
"&.is-primary": {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
padding: "6rem 1.5rem",
|
padding: "6rem 1.5rem",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
function Section({ children }) {
|
export const BG_COLOR = {
|
||||||
|
TRANSPARENT: "transparent",
|
||||||
|
PRIMARY: "primary",
|
||||||
|
}
|
||||||
|
|
||||||
|
function Section({ children, className, bgColor }) {
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
return <section className={classes.section}>{children}</section>
|
return (
|
||||||
|
<section
|
||||||
|
className={classnames(classes.section, className, {
|
||||||
|
"is-primary": bgColor === BG_COLOR.PRIMARY,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Section.defaultProps = {
|
||||||
|
bgColor: BG_COLOR.TRANSPARENT,
|
||||||
|
}
|
||||||
|
|
||||||
|
Section.propTypes = {
|
||||||
|
bgColor: PropTypes.oneOf(Object.values(BG_COLOR)).isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Section
|
export default Section
|
||||||
|
|
|
@ -7,6 +7,7 @@ import SEO from "@components/SEO"
|
||||||
import Header from "./components/Header"
|
import Header from "./components/Header"
|
||||||
import AboutMe from "./components/AboutMe"
|
import AboutMe from "./components/AboutMe"
|
||||||
import Technologies from "./components/Technologies/Technologies"
|
import Technologies from "./components/Technologies/Technologies"
|
||||||
|
import Projects from "./components/Projects/Projects"
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
layout: {
|
layout: {
|
||||||
|
@ -23,6 +24,7 @@ const HomePage = ({ location }) => {
|
||||||
<AboutMe />
|
<AboutMe />
|
||||||
<Divider />
|
<Divider />
|
||||||
<Technologies />
|
<Technologies />
|
||||||
|
<Projects />
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,125 @@
|
||||||
|
import React from "react"
|
||||||
|
import classnames from "classnames"
|
||||||
|
|
||||||
|
import { makeStyles } from "@material-ui/core/styles"
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardMedia,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Chip,
|
||||||
|
} from "@material-ui/core"
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
card: {
|
||||||
|
display: "flex",
|
||||||
|
minHeight: "400px",
|
||||||
|
"&.reverse": {
|
||||||
|
flexDirection: "row-reverse",
|
||||||
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
flexDirection: "column",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
flexDirection: "column",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cardContent: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
width: "45%",
|
||||||
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
contentContainer: {
|
||||||
|
marginBottom: theme.spacing(8),
|
||||||
|
},
|
||||||
|
technologies: {
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
|
"& > *:not(:last-child)": {
|
||||||
|
marginRight: theme.spacing(1),
|
||||||
|
},
|
||||||
|
"& > *": {
|
||||||
|
marginBottom: theme.spacing(1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
buttons: {
|
||||||
|
"& > *:not(:last-child)": {
|
||||||
|
marginRight: theme.spacing(1),
|
||||||
|
},
|
||||||
|
"& > *": {
|
||||||
|
marginBottom: theme.spacing(1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cover: {
|
||||||
|
width: "55%",
|
||||||
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
width: "100%",
|
||||||
|
height: 0,
|
||||||
|
paddingTop: "56.25%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
function Project({ reverse }) {
|
||||||
|
const classes = useStyles()
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={classnames(classes.card, {
|
||||||
|
reverse: reverse,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<CardMedia
|
||||||
|
image="https://material-ui.com/static/images/cards/live-from-space.jpg"
|
||||||
|
title="Live from space album cover"
|
||||||
|
className={classes.cover}
|
||||||
|
/>
|
||||||
|
<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.
|
||||||
|
</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" />
|
||||||
|
</div>
|
||||||
|
<div className={classes.buttons}>
|
||||||
|
<Button variant="contained" color="secondary">
|
||||||
|
Github
|
||||||
|
</Button>
|
||||||
|
<Button variant="contained" color="secondary">
|
||||||
|
Wersja online
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Project.defaultProps = {
|
||||||
|
reverse: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Project
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from "react"
|
||||||
|
|
||||||
|
import { makeStyles } from "@material-ui/core/styles"
|
||||||
|
import { Typography, Container } from "@material-ui/core"
|
||||||
|
import Section, { BG_COLOR } from "@components/Section"
|
||||||
|
import Project from "./Project"
|
||||||
|
|
||||||
|
const useStyles = makeStyles(() => ({
|
||||||
|
section: {
|
||||||
|
transform: "skewY(-4deg)",
|
||||||
|
padding: "8rem 1.5rem",
|
||||||
|
"& > *": {
|
||||||
|
transform: "skewY(4deg)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
function Projects() {
|
||||||
|
const classes = useStyles()
|
||||||
|
return (
|
||||||
|
<Section className={classes.section} bgColor={BG_COLOR.PRIMARY}>
|
||||||
|
<Container>
|
||||||
|
<Typography variant="h2" align="center" gutterBottom>
|
||||||
|
Projekty
|
||||||
|
</Typography>
|
||||||
|
<Project />
|
||||||
|
<Project reverse />
|
||||||
|
</Container>
|
||||||
|
</Section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Projects
|
Loading…
Reference in New Issue