diff --git a/components/Avatar.js b/components/Avatar.js
new file mode 100644
index 0000000..f1f679d
--- /dev/null
+++ b/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!"
+    />
+  );
+}
diff --git a/components/HorizontalSection.js b/components/HorizontalSection.js
new file mode 100644
index 0000000..3340c8f
--- /dev/null
+++ b/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,
+};
diff --git a/components/Infos.js b/components/Infos.js
new file mode 100644
index 0000000..fedaa86
--- /dev/null
+++ b/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,
+};
diff --git a/components/Layout.js b/components/Layout.js
new file mode 100644
index 0000000..9dc274f
--- /dev/null
+++ b/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,
+};
diff --git a/components/Presentation.js b/components/Presentation.js
new file mode 100644
index 0000000..78a5b07
--- /dev/null
+++ b/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;
diff --git a/components/Section.js b/components/Section.js
new file mode 100644
index 0000000..6177fde
--- /dev/null
+++ b/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,
+};
diff --git a/components/modules/Avatar.module.css b/components/modules/Avatar.module.css
new file mode 100644
index 0000000..6a7365c
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/components/modules/HorizontalSection.module.css b/components/modules/HorizontalSection.module.css
new file mode 100644
index 0000000..38afdfb
--- /dev/null
+++ b/components/modules/HorizontalSection.module.css
@@ -0,0 +1,6 @@
+.bg {
+  position: absolute;
+  width: 100%;
+  height: 50vh;
+  background-color: var(--lightDark);
+}
diff --git a/components/modules/Infos.module.css b/components/modules/Infos.module.css
new file mode 100644
index 0000000..2b4cd30
--- /dev/null
+++ b/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);
+}
diff --git a/components/modules/Layout.module.css b/components/modules/Layout.module.css
new file mode 100644
index 0000000..31f541d
--- /dev/null
+++ b/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);
+}
diff --git a/components/modules/Presentation.module.css b/components/modules/Presentation.module.css
new file mode 100644
index 0000000..c5a71d0
--- /dev/null
+++ b/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);
+}
diff --git a/pages/index.js b/pages/index.js
index 72fc70d..03afa48 100644
--- a/pages/index.js
+++ b/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,
+    },
+  };
+}
diff --git a/public/images/bongo.png b/public/images/bongo.png
new file mode 100644
index 0000000..0462fe1
Binary files /dev/null and b/public/images/bongo.png differ
diff --git a/styles/global.css b/styles/global.css
index e0c7603..99470d6 100644
--- a/styles/global.css
+++ b/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;
 }