rough v1
This commit is contained in:
parent
349366eded
commit
e530b18a5c
12
components/Avatar.js
Normal file
12
components/Avatar.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from "react";
|
||||||
|
import styles from "./modules/Avatar.module.css";
|
||||||
|
|
||||||
|
export default function Avatar(props) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
className={`${styles.bordered} ${styles.absolute}`}
|
||||||
|
src="/images/bongo.png"
|
||||||
|
alt="The one and only bongo cat!"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
16
components/HorizontalSection.js
Normal file
16
components/HorizontalSection.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
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,
|
||||||
|
};
|
54
components/Infos.js
Normal file
54
components/Infos.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import styles from "./modules/Infos.module.css";
|
||||||
|
import LocationIcon from "../public/icons/location.svg";
|
||||||
|
import GithubIcon from "../public/icons/github.svg";
|
||||||
|
import LinkedinIcon from "../public/icons/linkedin.svg";
|
||||||
|
import MailIcon from "../public/icons/mail.svg";
|
||||||
|
|
||||||
|
export default function Infos(props) {
|
||||||
|
const infos = props.infos;
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<b className={styles.bracket}>{"{"}</b>
|
||||||
|
<a
|
||||||
|
className={`${styles.row} ${styles.location}`}
|
||||||
|
href={infos.location.link}
|
||||||
|
target="__blank"
|
||||||
|
>
|
||||||
|
<LocationIcon className={styles.icon} />
|
||||||
|
<b>{infos.location.value}</b>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={`${styles.row} ${styles.github}`}
|
||||||
|
href={infos.github.link}
|
||||||
|
target="__blank"
|
||||||
|
>
|
||||||
|
<GithubIcon className={styles.icon} />
|
||||||
|
<b>{infos.github.value}</b>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={`${styles.row} ${styles.linkedin}`}
|
||||||
|
href={infos.linkedin.link}
|
||||||
|
target="__blank"
|
||||||
|
>
|
||||||
|
<LinkedinIcon className={styles.icon} />
|
||||||
|
<b>{infos.linkedin.value}</b>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={`${styles.row} ${styles.email}`}
|
||||||
|
href={infos.email.link}
|
||||||
|
target="__blank"
|
||||||
|
type="email"
|
||||||
|
>
|
||||||
|
<MailIcon className={styles.icon} />
|
||||||
|
<b>{infos.email.value}</b>
|
||||||
|
</a>
|
||||||
|
<b className={styles.bracket}>{"}"}</b>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Infos.propTypes = {
|
||||||
|
infos: PropTypes.PropTypes.object.isRequired,
|
||||||
|
};
|
29
components/Layout.js
Normal file
29
components/Layout.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
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,
|
||||||
|
};
|
24
components/Presentation.js
Normal file
24
components/Presentation.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import styles from "./modules/Presentation.module.css";
|
||||||
|
|
||||||
|
const propTypes = {};
|
||||||
|
|
||||||
|
const defaultProps = {};
|
||||||
|
|
||||||
|
export default function Presentation(props) {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<h1 className={styles.firstName}>{props.firstName}</h1>
|
||||||
|
<h1 className={styles.lastName}>{props.lastName}</h1>
|
||||||
|
<h3 className={styles.description}>// {props.description}</h3>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Presentation.propTypes = {
|
||||||
|
firstName: PropTypes.string.isRequired,
|
||||||
|
lastName: PropTypes.string.isRequired,
|
||||||
|
description: PropTypes.string.isRequired,
|
||||||
|
};
|
||||||
|
Presentation.defaultProps = defaultProps;
|
14
components/Section.js
Normal file
14
components/Section.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import PropTypes from "prop-types";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function Section(props) {
|
||||||
|
return (
|
||||||
|
<section className="wrapper" {...props}>
|
||||||
|
{props.children}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Section.propTypes = {
|
||||||
|
children: PropTypes.node.isRequired,
|
||||||
|
};
|
19
components/modules/Avatar.module.css
Normal file
19
components/modules/Avatar.module.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.bordered {
|
||||||
|
border: 6px solid var(--dark);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
max-width: 256px;
|
||||||
|
max-height: 256px;
|
||||||
|
top: calc(50vh - 128px);
|
||||||
|
left: calc(50vw - 128px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1440px) {
|
||||||
|
.absolute {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
6
components/modules/HorizontalSection.module.css
Normal file
6
components/modules/HorizontalSection.module.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
background-color: var(--lightDark);
|
||||||
|
}
|
50
components/modules/Infos.module.css
Normal file
50
components/modules/Infos.module.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1rem 0 1rem 0.75rem;
|
||||||
|
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row:hover {
|
||||||
|
transform: translateY(-15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row b:hover {
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bracket,
|
||||||
|
.email .icon,
|
||||||
|
.email b:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.github .icon,
|
||||||
|
.github b:hover {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkedin .icon,
|
||||||
|
.linkedin b:hover {
|
||||||
|
color: var(--quaternary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.location .icon,
|
||||||
|
.location b:hover {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
18
components/modules/Layout.module.css
Normal file
18
components/modules/Layout.module.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.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);
|
||||||
|
}
|
18
components/modules/Presentation.module.css
Normal file
18
components/modules/Presentation.module.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.firstName {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastName {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
@ -1,12 +1,91 @@
|
|||||||
import Head from "next/head";
|
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";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home({ person, caseStudies }) {
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Create Next App</title>
|
<title>Create Next App</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
|
<Section>
|
||||||
|
<Layout>
|
||||||
|
<Presentation
|
||||||
|
firstName={person.firstName}
|
||||||
|
lastName={person.lastName}
|
||||||
|
description={person.description}
|
||||||
|
/>
|
||||||
|
<Infos infos={person.infos} />
|
||||||
|
<Avatar />
|
||||||
|
</Layout>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<HorizontalSection>
|
||||||
|
<div>Lol</div>
|
||||||
|
</HorizontalSection>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getStaticProps() {
|
||||||
|
const person = {
|
||||||
|
firstName: "Tanguy",
|
||||||
|
lastName: "Herbron",
|
||||||
|
description: "Full Stack Developer",
|
||||||
|
infos: {
|
||||||
|
location: {
|
||||||
|
value: "Copenhagen, Denmark",
|
||||||
|
link: "https://www.visitcopenhagen.com/",
|
||||||
|
},
|
||||||
|
github: {
|
||||||
|
value: "/TanguyHerbron",
|
||||||
|
link: "https://github.com/TanguyHerbron",
|
||||||
|
},
|
||||||
|
linkedin: {
|
||||||
|
value: "Tanguy Herbron",
|
||||||
|
link: "https://linkedin.com/in/tanguy-herbron-5a3772150",
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
value: "tanguy.herbron@outlook.com",
|
||||||
|
link: "mailto:tanguy.herbron@outlook.com",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const caseStudies = [
|
||||||
|
{
|
||||||
|
title: "Moodle",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
person: person,
|
||||||
|
caseStudies: caseStudies,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
BIN
public/images/bongo.png
Normal file
BIN
public/images/bongo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
@ -23,6 +23,7 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
body {
|
body {
|
||||||
background: var(--dark);
|
background: var(--dark);
|
||||||
color: var(--light);
|
color: var(--light);
|
||||||
@ -30,16 +31,42 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
min-height: 100vh;
|
position: relative;
|
||||||
padding: 0 0.5rem;
|
height: 100vh;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.15;
|
font-weight: 900;
|
||||||
|
line-height: 1.35;
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.35;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
p {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 1em;
|
||||||
|
color: var(--light);
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:hover,
|
||||||
|
a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user