From 8d05300b6ad6e220fa28ce8c6fe47e1e4b4f809e Mon Sep 17 00:00:00 2001 From: Romain Date: Sun, 14 Jun 2020 15:22:07 +0200 Subject: [PATCH] deleting unsued layouts and adding CaseCards --- components/CaseCard.js | 26 ++++++++++++++ components/CaseSection.js | 25 ++++++++++++++ components/HomeSection.js | 33 ++++++++++++++++++ components/HorizontalSection.js | 16 --------- components/Layout.js | 29 ---------------- components/modules/Avatar.module.css | 8 ++--- components/modules/CaseCard.module.css | 25 ++++++++++++++ components/modules/CaseSection.module.css | 34 +++++++++++++++++++ components/modules/HomeSection.module.css | 24 +++++++++++++ .../modules/HorizontalSection.module.css | 6 ---- components/modules/Layout.module.css | 18 ---------- pages/index.js | 30 ++++------------ styles/global.css | 2 ++ 13 files changed, 178 insertions(+), 98 deletions(-) create mode 100644 components/CaseCard.js create mode 100644 components/CaseSection.js create mode 100644 components/HomeSection.js delete mode 100644 components/HorizontalSection.js delete mode 100644 components/Layout.js create mode 100644 components/modules/CaseCard.module.css create mode 100644 components/modules/CaseSection.module.css create mode 100644 components/modules/HomeSection.module.css delete mode 100644 components/modules/HorizontalSection.module.css delete mode 100644 components/modules/Layout.module.css diff --git a/components/CaseCard.js b/components/CaseCard.js new file mode 100644 index 0000000..3185f1a --- /dev/null +++ b/components/CaseCard.js @@ -0,0 +1,26 @@ +import React from "react"; +import PropTypes from "prop-types"; +import styles from "./modules/CaseCard.module.css"; + +export default function CaseCard(props) { + const study = props.study; + + return ( +
+ The one and only bongo cat! +
+ {study.title} +

{study.short_description}

+ {study.date} +
+
+ ); +} + +CaseCard.propTypes = { + study: PropTypes.object.isRequired, +}; diff --git a/components/CaseSection.js b/components/CaseSection.js new file mode 100644 index 0000000..67d5d6b --- /dev/null +++ b/components/CaseSection.js @@ -0,0 +1,25 @@ +import PropTypes from "prop-types"; +import React from "react"; +import styles from "./modules/CaseSection.module.css"; +import Section from "./Section"; +import CaseCard from "./CaseCard"; + +export default function CaseSection(props) { + return ( +
+
+
+

Case Studies

+
+ {props.caseStudies.map((study) => ( + + ))} +
+
+
+ ); +} + +CaseSection.propTypes = { + caseStudies: PropTypes.arrayOf(PropTypes.object).isRequired, +}; diff --git a/components/HomeSection.js b/components/HomeSection.js new file mode 100644 index 0000000..d563ea8 --- /dev/null +++ b/components/HomeSection.js @@ -0,0 +1,33 @@ +import PropTypes from "prop-types"; +import React from "react"; +import Avatar from "../components/Avatar"; +import Infos from "../components/Infos"; +import Presentation from "../components/Presentation"; +import styles from "./modules/HomeSection.module.css"; +import Section from "./Section"; + +export default function HomeSection(props) { + const person = props.person; + return ( +
+
+ +
+
+ + + + +
+
+
+ ); +} + +HomeSection.propTypes = { + person: PropTypes.object.isRequired, +}; diff --git a/components/HorizontalSection.js b/components/HorizontalSection.js deleted file mode 100644 index 3340c8f..0000000 --- a/components/HorizontalSection.js +++ /dev/null @@ -1,16 +0,0 @@ -import PropTypes from "prop-types"; -import React from "react"; -import styles from "./modules/HorizontalSection.module.css"; - -export default function HorizontalSection(props) { - return ( -
-
- {props.children} -
- ); -} - -HorizontalSection.propTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/components/Layout.js b/components/Layout.js deleted file mode 100644 index 9dc274f..0000000 --- a/components/Layout.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import styles from "./modules/Layout.module.css"; - -export default function Layout(props) { - const childrenArray = React.Children.toArray(props.children); - let gridItems = []; - let otherChild = []; - for (let i in childrenArray) { - if (i <= 1) { - gridItems.push(childrenArray[i]); - } else { - otherChild.push(childrenArray[i]); - } - } - return ( -
-
{gridItems[0]}
-
- {gridItems[1]} -
- {otherChild} -
- ); -} - -Layout.propTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/components/modules/Avatar.module.css b/components/modules/Avatar.module.css index 6a7365c..1fe07ea 100644 --- a/components/modules/Avatar.module.css +++ b/components/modules/Avatar.module.css @@ -4,12 +4,8 @@ } .absolute { - position: absolute; - - max-width: 256px; - max-height: 256px; - top: calc(50vh - 128px); - left: calc(50vw - 128px); + width: 256px; + height: 256px; } @media screen and (max-width: 1440px) { diff --git a/components/modules/CaseCard.module.css b/components/modules/CaseCard.module.css new file mode 100644 index 0000000..f4f621c --- /dev/null +++ b/components/modules/CaseCard.module.css @@ -0,0 +1,25 @@ +.container { + height: 100%; + border-radius: 16px; + background-color: var(--lightDark); + overflow: hidden; +} + +.cover { + height: 198px; + width: 100%; +} + +.cardInfo { + padding: 2rem; +} + +.title { + font-size: 1.25em; +} + +.description { + width: auto; + max-width: 320px; + margin: 1rem 0; +} diff --git a/components/modules/CaseSection.module.css b/components/modules/CaseSection.module.css new file mode 100644 index 0000000..f1cdbbd --- /dev/null +++ b/components/modules/CaseSection.module.css @@ -0,0 +1,34 @@ +.content { + height: 100%; + + position: relative; + z-index: 1; + + padding: 4rem; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +.title { + color: var(--primary); + + margin-bottom: 8rem; +} + +.cardRow { + width: 100%; + + align-self: center; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +@media screen and (max-width: 1280px) { + .cardRow { + flex-direction: column; + } +} diff --git a/components/modules/HomeSection.module.css b/components/modules/HomeSection.module.css new file mode 100644 index 0000000..bd6a4b2 --- /dev/null +++ b/components/modules/HomeSection.module.css @@ -0,0 +1,24 @@ +.bg { + position: absolute; + right: 0%; + width: 50vw; + height: 100%; + background-color: var(--lightDark); +} + +.flexCenter { + height: 100%; + + display: flex; + flex-direction: column; + justify-content: center; +} + +.container { + position: relative; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} diff --git a/components/modules/HorizontalSection.module.css b/components/modules/HorizontalSection.module.css deleted file mode 100644 index 38afdfb..0000000 --- a/components/modules/HorizontalSection.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.bg { - position: absolute; - width: 100%; - height: 50vh; - background-color: var(--lightDark); -} diff --git a/components/modules/Layout.module.css b/components/modules/Layout.module.css deleted file mode 100644 index 31f541d..0000000 --- a/components/modules/Layout.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.grid { - position: relative; - display: grid; - width: 100%; - height: inherit; - grid-template-columns: 1fr 1fr; -} - -.gridItem { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.darkbg { - background-color: var(--lightDark); -} diff --git a/pages/index.js b/pages/index.js index 03afa48..9917b89 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,10 +1,6 @@ import Head from "next/head"; -import Layout from "../components/Layout"; -import Section from "../components/Section"; -import Presentation from "../components/Presentation"; -import Infos from "../components/Infos"; -import Avatar from "../components/Avatar"; -import HorizontalSection from "../components/HorizontalSection"; +import HomeSection from "../components/HomeSection"; +import CaseSection from "../components/CaseSection"; export default function Home({ person, caseStudies }) { return ( @@ -14,21 +10,9 @@ export default function Home({ person, caseStudies }) { -
- - - - - -
+ - -
Lol
- + ); } @@ -64,21 +48,21 @@ export async function getStaticProps() { short_description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", date: "June 12, 2020", - cover: "/public/images/bongo.svg", + cover: "/images/bongo.png", }, { title: "Doodle", short_description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", date: "June 12, 2020", - cover: "/public/images/bongo.svg", + cover: "/images/bongo.png", }, { title: "Poodle", short_description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", date: "June 12, 2020", - cover: "/public/images/bongo.svg", + cover: "/images/bongo.png", }, ]; diff --git a/styles/global.css b/styles/global.css index 99470d6..275b11f 100644 --- a/styles/global.css +++ b/styles/global.css @@ -56,6 +56,8 @@ p { font-style: normal; font-size: 1em; color: var(--light); + + line-height: 1.35; } a,