From cd5bdce24205ba197e1d5136db359e47c781c240 Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Mon, 13 Jul 2020 19:04:46 +0200 Subject: [PATCH] initial version of Project card --- gatsby-config.js | 2 +- src/components/SEO.js | 8 +- src/components/Section.js | 30 ++++- src/features/HomePage/HomePage.js | 2 + .../HomePage/components/Projects/Project.js | 125 ++++++++++++++++++ .../HomePage/components/Projects/Projects.js | 33 +++++ 6 files changed, 193 insertions(+), 7 deletions(-) create mode 100644 src/features/HomePage/components/Projects/Project.js create mode 100644 src/features/HomePage/components/Projects/Projects.js diff --git a/gatsby-config.js b/gatsby-config.js index f7ceaa6..5c4629c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -3,7 +3,7 @@ const siteUrl = "https://dawid-wysokinski.pl" module.exports = { siteMetadata: { 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`, authorFullName: "Dawid Wysokiński", email: "xyztojajestem@gmail.com", diff --git a/src/components/SEO.js b/src/components/SEO.js index 46fff10..47599f4 100644 --- a/src/components/SEO.js +++ b/src/components/SEO.js @@ -4,7 +4,7 @@ import { Helmet } from "react-helmet" import { useStaticQuery, graphql } from "gatsby" import ogThumbnail from "@images/og_thumbnail.png" -function SEO({ description, lang, meta, title, location }) { +function SEO({ description, lang, meta, title, pathname }) { const { site } = useStaticQuery( graphql` query { @@ -48,7 +48,7 @@ function SEO({ description, lang, meta, title, location }) { }, { property: `og:url`, - content: `${site.siteMetadata.siteUrl}${location}`, + content: `${site.siteMetadata.siteUrl}${pathname}`, }, { property: `og:image`, @@ -88,7 +88,7 @@ function SEO({ description, lang, meta, title, location }) { }, { name: `twitter:url`, - content: `${site.siteMetadata.siteUrl}${location}`, + content: `${site.siteMetadata.siteUrl}${pathname}`, }, { name: `twitter:image`, @@ -102,7 +102,7 @@ function SEO({ description, lang, meta, title, location }) { > ) diff --git a/src/components/Section.js b/src/components/Section.js index e6d239a..bec721a 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -1,19 +1,45 @@ import React from "react" +import PropTypes from "prop-types" +import classnames from "classnames" import { makeStyles } from "@material-ui/core/styles" const useStyles = makeStyles(theme => ({ section: { padding: "3rem 1.5rem", + "&.is-primary": { + backgroundColor: theme.palette.primary.main, + }, [theme.breakpoints.up("md")]: { padding: "6rem 1.5rem", }, }, })) -function Section({ children }) { +export const BG_COLOR = { + TRANSPARENT: "transparent", + PRIMARY: "primary", +} + +function Section({ children, className, bgColor }) { const classes = useStyles() - return
{children}
+ return ( +
+ {children} +
+ ) +} + +Section.defaultProps = { + bgColor: BG_COLOR.TRANSPARENT, +} + +Section.propTypes = { + bgColor: PropTypes.oneOf(Object.values(BG_COLOR)).isRequired, } export default Section diff --git a/src/features/HomePage/HomePage.js b/src/features/HomePage/HomePage.js index cd9c8ae..3763ca3 100644 --- a/src/features/HomePage/HomePage.js +++ b/src/features/HomePage/HomePage.js @@ -7,6 +7,7 @@ import SEO from "@components/SEO" import Header from "./components/Header" import AboutMe from "./components/AboutMe" import Technologies from "./components/Technologies/Technologies" +import Projects from "./components/Projects/Projects" const useStyles = makeStyles(theme => ({ layout: { @@ -23,6 +24,7 @@ const HomePage = ({ location }) => { + ) } diff --git a/src/features/HomePage/components/Projects/Project.js b/src/features/HomePage/components/Projects/Project.js new file mode 100644 index 0000000..d6e29f0 --- /dev/null +++ b/src/features/HomePage/components/Projects/Project.js @@ -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 ( + + + +
+ + Projekt + + + 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. + +
+
+
+ + + +
+
+ + +
+ + + ) +} + +Project.defaultProps = { + reverse: false, +} + +export default Project diff --git a/src/features/HomePage/components/Projects/Projects.js b/src/features/HomePage/components/Projects/Projects.js new file mode 100644 index 0000000..716d093 --- /dev/null +++ b/src/features/HomePage/components/Projects/Projects.js @@ -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 ( +
+ + + Projekty + + + + +
+ ) +} + +export default Projects