rough v1

components/Avatar.js

@@ -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!"
+    />
+  );
+}

components/HorizontalSection.js

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

components/Infos.js

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

components/Layout.js

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

components/Presentation.js

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

components/Section.js

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

components/modules/Avatar.module.css

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

components/modules/HorizontalSection.module.css

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

components/modules/Infos.module.css

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

components/modules/Layout.module.css

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

components/modules/Presentation.module.css

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

pages/index.js

@@ -1,12 +1,91 @@
 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 (
     <div className="container">
       <Head>
         <title>Create Next App</title>
         <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>
+
+      <HorizontalSection>
+        <div>Lol</div>
+      </HorizontalSection>
     </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,
+    },
+  };
+}

styles/global.css

@@ -23,6 +23,7 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   background: var(--dark);
   color: var(--light);
@@ -30,16 +31,42 @@ body {
 }
 
 .wrapper {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  position: relative;
+  height: 100vh;
 }
 
 h1 {
   margin: 0;
-  line-height: 1.15;
+  font-weight: 900;
+  line-height: 1.35;
   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;
 }