therbron/Personal-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

deleting unsued layouts and adding CaseCards

Browse Source
This commit is contained in:
Romain 2020-06-14 15:22:07 +02:00
parent e530b18a5c
commit 8d05300b6a
13 changed files with 178 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/CaseCard.js Normal file
View File

@ -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 (
<div className={styles.container}>
<img
className={`${styles.cover}`}
src={props.study.cover}
alt="The one and only bongo cat!"
/>
<div className={styles.cardInfo}>
<b className={styles.title}>{study.title}</b>
<p className={styles.description}>{study.short_description}</p>
<b>{study.date}</b>
</div>
</div>
);
}
CaseCard.propTypes = {
study: PropTypes.object.isRequired,
};

25
components/CaseSection.js Normal file
View File

@ -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 (
<Section>
<div className={styles.bg} />
<div className={styles.content}>
<h1 className={styles.title}>Case Studies</h1>
<div className={styles.cardRow}>
{props.caseStudies.map((study) => (
<CaseCard key={study.title} study={props.caseStudies[0]} />
))}
</div>
</div>
</Section>
);
}
CaseSection.propTypes = {
caseStudies: PropTypes.arrayOf(PropTypes.object).isRequired,
};

33
components/HomeSection.js Normal file
View File

@ -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 (
<Section>
<div className={styles.bg} />
<div className={styles.flexCenter}>
<div className={styles.container}>
<Presentation
firstName={person.firstName}
lastName={person.lastName}
description={person.description}
/>
<Avatar />
<Infos infos={person.infos} />
</div>
</div>
</Section>
);
}
HomeSection.propTypes = {
person: PropTypes.object.isRequired,
};

16
components/HorizontalSection.js
View File

@ -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 (
<section className={"wrapper"} {...props}>
<div className={styles.bg} />
{props.children}
</section>
);
}
HorizontalSection.propTypes = {
children: PropTypes.node.isRequired,
};

29
components/Layout.js
View File

@ -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 (
<div className={styles.grid}>
<div className={styles.gridItem}>{gridItems[0]}</div>
<div className={`${styles.gridItem} ${styles.darkbg}`}>
{gridItems[1]}
</div>
{otherChild}
</div>
);
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
};

8
components/modules/Avatar.module.css
View File

@ -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) {

25
components/modules/CaseCard.module.css Normal file
View File

@ -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;
}

34
components/modules/CaseSection.module.css Normal file
View File

@ -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;
}
}

24
components/modules/HomeSection.module.css Normal file
View File

@ -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;
}

6
components/modules/HorizontalSection.module.css
View File

@ -1,6 +0,0 @@
.bg {
position: absolute;
width: 100%;
height: 50vh;
background-color: var(--lightDark);
}

18
components/modules/Layout.module.css
View File

@ -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);
}

30
pages/index.js
View File

@ -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 }) {
<link rel="icon" href="/favicon.ico" />
</Head>
<Section>
<Layout>
<Presentation
firstName={person.firstName}
lastName={person.lastName}
description={person.description}
/>
<Infos infos={person.infos} />
<Avatar />
</Layout>
</Section>
<HomeSection person={person} />
<HorizontalSection>
<div>Lol</div>
</HorizontalSection>
<CaseSection caseStudies={caseStudies} />
</div>
);
}
@ -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",
},
];

2
styles/global.css
View File

@ -56,6 +56,8 @@ p {
font-style: normal;
font-size: 1em;
color: var(--light);
line-height: 1.35;
}
a,