Initial commit 🚀

.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

README.md

@@ -0,0 +1,73 @@
+# TODO List
+
+#### **Pages :**
+
+- Accueil
+- About
+- Blog
+- Environnement
+- Contact
+---
+- Showcase a faire quand le site est en ligne
+- Service (Dev, conseil)
+
+---
+###Accueil
+
+- Banniere Dev x Etudiant
+- Présentation + lien vers /about
+- Review des 3 derniers articles (1 grand, 2 petits) + lire les autres
+
+---
+### About
+
+- Mon histoire
+- Mes passions
+- Mes compétences + Lien CV
+    
+---
+### Blog
+
+- Page accueil
+- Route dynamique
+- Template d'article (cf shema)
+- Recherche d'article
+- Ajouter un clap (stocker BDD + cookie)
+- Fleche de partage (copier le lien | partage twitter / facebook / snapchat / instagram)
+- Sidebar de lecture
+- Déroulement sur la droite
+- Stocker les articles mongo
+- Rédiger
+
+- Recet / Pinned 
+- Tag / Clap / Most Read
+
+---
+### Environnement
+
+- Mon setup
+- Applications
+
+---
+### Contact
+
+- mailto:contact@arthurdanjou.fr
+
+---
+### Header
+- Logo (Gauche) + Menu (Droite)
+- animation lors du click
+- effet tres beau
+- Lien vers les pages + GitHub / Twitter
+
+---
+### Footer
+
+- Lien vers les pages
+- Réseaux sociaux
+- Copyright
+
+---
+### Autres
+- Effet style avec l'hover
+- Day/Night

components/Home/about/about.js

@@ -0,0 +1,36 @@
+import React from "react";
+import "./about.scss";
+import Tag from "../tag/tag";
+import Link from "next/link";
+
+const About = () => {
+    return (
+        <section id="about">
+            <Tag color="red" background="#fa7878" left={true}>Qui suis-je ?</Tag>
+            <div className="about-content">
+                <div className="about-right">
+                    <img src="/assets/photo.png" alt="My photo"/>
+                </div>
+                <div className="about-left">
+                    <div className="left-content">
+                        <h1>C'est moi !</h1>
+                        <p>
+                            Je m'appelle Arthur DANJOU. J'ai 17 ans, je suis né au <span className="color">Luxembourg</span> et j'habite actuellement à <span className="color">Paris</span>.<br/>
+                            Depuis tout jeune, je suis passionné d'<span className="color">informatique</span>. C'est en 2015 que j'ai commencé à <span className="color">développer</span>.<br/>
+                            C'est en pratiquant chaque jour que je me forme et que j'acquiers de nouvelles <span className="color">compétences</span> au travers de mes différents projets <span className="color">personnels</span> et <span className="color">professionnels</span>.
+                        </p>
+                    </div>
+                    <Link href="/env">
+                        <div className="page-button">
+                            <a>
+                                En savoir plus
+                            </a>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default About;

components/Home/about/about.scss

@@ -0,0 +1,123 @@
+#about {
+  background-color: #1c1c1c;
+  height: 80vh;
+  width: 100%;
+
+  @media screen and (max-width: 700px) {
+    height: 100vh;
+  }
+
+  .about-content {
+    padding: 40px;
+    width: 100%;
+    height: 80vh;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    position: absolute;
+    flex-direction: row-reverse;
+
+    @media screen and (max-width: 700px) {
+      flex-direction: column;
+      height: 100vh;
+    }
+
+    .about-left {
+      height: 100%;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: center;
+
+      @media screen and (max-width: 700px) {
+        width: 100%;
+      }
+
+      .left-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-self: center;
+
+        h1 {
+          font-size: 3rem;
+          color: white;
+          margin-left: 30px;
+          margin-bottom: 30px;
+
+          @media screen and (max-width: 700px) {
+            margin-bottom: 30px;
+            margin-left: 0;
+            text-align: center;
+          }
+
+        }
+        p {
+          text-align: justify;
+          color: rgba(255, 255, 255, 0.3);
+          font-size: 1.3rem;
+
+          .color {
+            color: #fa7878;
+          }
+        }
+      }
+
+      .page-button {
+        margin-top: 40px;
+        width: 50%;
+        background-color: #4d4d4d;
+        color: white;
+        border-radius: 7px;
+        padding: 20px 15px;
+        transition: .3s;
+        text-align: center;
+        font-size: 1.2rem;
+        display: flex;
+        justify-content: center;
+        align-self: center;
+
+        @media screen and (max-width: 700px) {
+          width: 60%;
+        }
+
+        &:hover {
+          cursor: pointer;
+          background-color: #313030;
+        }
+      }
+    }
+
+    .about-right {
+      height: 100%;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: center;
+
+      img {
+        margin: 0 auto;
+        width: 50%;
+        animation: infinite linear imgAnimation 10s;
+
+        @media screen and (max-width: 700px) {
+          width: 70%;
+        }
+      }
+    }
+  }
+}
+
+@keyframes imgAnimation {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

components/Home/banner/banner.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import "./banner.scss";
+
+const Banner = () => {
+    return (
+        <section id="banner">
+            <div className="banner-container">
+                <div className="name">
+                    Arthur <span id="rainbow">Danjou</span>
+                </div>
+                <div className="role">
+                    creative developer <span id="spacer">&</span> author of myself
+                </div>
+                <a href="#about" className="scroller">
+                    <p>Scroll</p>
+                    <div className="scroller-animation"/>
+                </a>
+            </div>
+        </section>
+    )
+}
+
+export default Banner;

components/Home/banner/banner.scss

@@ -0,0 +1,113 @@
+$title-color: #37383F;
+
+#banner {
+  height: 100vh;
+  background: url("/assets/background.png") no-repeat center;
+  background-size: cover;
+
+  .banner-container {
+    height: 100%;
+    color: $title-color;
+    text-transform: capitalize;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .name {
+      font-size: 100px;
+      font-weight: 900;
+
+      @media screen and (max-width: 700px) {
+        font-size: 70px;
+      }
+
+      @media screen and (max-width: 500px) {
+        font-size: 40px;
+      }
+
+      #rainbow {
+        border-radius: 5px;
+        font-weight: bold;
+        padding: 3px 5px;
+        background-color: #FFEED9;
+        color: #FF9900;
+        animation: rainbowAnimation 60s infinite;
+      }
+    }
+
+    .role {
+      font-size: 30px;
+      margin-top: 20px;
+
+      @media screen and (max-width: 700px) {
+        font-size: 20px;
+      }
+
+      @media screen and (max-width: 500px) {
+        font-size: 17px;
+      }
+
+      #spacer {
+        text-transform: lowercase;
+      }
+    }
+
+    .scroller {
+      height: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      bottom: 0;
+
+      .scroller-animation {
+        height: 80px;
+        width: 1px;
+        content: "";
+        display: block;
+        background-color: $title-color;
+      }
+
+      p {
+        padding: 4px;
+      }
+    }
+  }
+}
+
+@keyframes rainbowAnimation {
+  0% {
+    background-color: #FFEED9;
+    color: #FF9900;
+  }
+  16% {
+    background-color: #fff6d9;
+    color: #ffe600;
+  }
+  32% {
+    background-color: #e0ffd9;
+    color: #59ff00;
+  }
+  48% {
+    background-color: #d9fcff;
+    color: #00d9ff;
+  }
+  64% {
+    background-color: #e4d9ff;
+    color: #6a00ff;
+  }
+  72% {
+    background-color: #fcd9ff;
+    color: #ff00f2;
+  }
+  88% {
+    background-color: #ffd9d9;
+    color: #ff0000;
+  }
+  100% {
+    background-color: #FFEED9;
+    color: #FF9900;
+  }
+}

components/Home/posts/loading/Loading.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./loading.scss";
+
+const Loading = (props) => {
+    return (
+        <div className={`loading ${props.class}`}>
+            <svg
+                className="spinner"
+                width="60px"
+                height="60px"
+                viewBox="0 0 132 132"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <circle
+                    className="path"
+                    fill="none"
+                    strokeWidth="6"
+                    strokeLinecap="round"
+                    cx="66"
+                    cy="66"
+                    r="60"
+                />
+            </svg>
+        </div>
+    )
+};
+
+export default Loading;

components/Home/posts/loading/loading.scss

@@ -0,0 +1,38 @@
+// loading
+$offset: 374;
+$duration: 1.4s;
+
+.spinner {
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash $duration ease-in-out infinite;
+  stroke: black;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: $offset;
+  }
+  50% {
+    stroke-dashoffset: $offset/4;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: $offset;
+    transform: rotate(450deg);
+  }
+}

components/Home/posts/posts.js

@@ -0,0 +1,69 @@
+import React, {useEffect, useState} from "react";
+import "./posts.scss";
+import Tag from "../tag/tag";
+import * as axios from "axios";
+import Loading from "./loading/Loading";
+import Link from "next/link";
+import 'moment/locale/fr';
+import Moment, { now } from 'react-moment';
+
+const Posts = () => {
+
+    const [isLoading, setLoading] = useState(true);
+    const [getPosts, setPosts] = useState([]);
+
+    useEffect(() => {
+        loadPosts()
+            .then(() => {
+                setLoading(false);
+            })
+            .catch(error => console.log(error));
+    }, []);
+
+    const loadPosts = async () => {
+        await axios.get("https://localhost:8080/api/posts")
+            .then(response => {
+                setPosts(response);
+            })
+            .catch(error => console.log(error));
+    }
+
+    const renderPosts = () => {
+        if (getPosts.length) {
+            return (
+                <div className="post-container container">
+                    {getPosts.map(post => {
+                        return (
+                            <div className="post">
+                                <Link href={`/blog/${post.id}`}>
+                                    <a>
+                                        <div className="post-cover" style={{backgroundImage: `url(${post.image})`}}/>
+                                        <h3>{post.title}</h3>
+                                    </a>
+                                </Link>
+                                <div className="post-date">
+                                    <Moment to={post.date}>{now}</Moment>
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            )
+        } else {
+            return (
+                <div className="no-post container">
+                    <h1>Il n'y a malheureusement aucun article de posté pour le moment. 😕</h1>
+                </div>
+            )
+        }
+    };
+
+    return (
+        <section id="posts">
+            <Tag color="#FF9900" background="#FFEED9" left={false}>Mon blog</Tag>
+            {isLoading ? <Loading class="loader container" /> : renderPosts()}
+        </section>
+    )
+};
+
+export default Posts;

components/Home/posts/posts.scss

@@ -0,0 +1,21 @@
+#posts {
+  height: 70vh;
+  width: 100%;
+  background-color: white;
+  color: #37383F;
+
+  @media screen and (max-width: 700px) {
+    text-align: center;
+    font-size: 15px;
+  }
+
+  .container {
+    width: 100%;
+    height: 70vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+  }
+
+}

components/Home/process/process.js

@@ -0,0 +1,42 @@
+import React from "react";
+import "./process.scss";
+import Tag from "../tag/tag";
+
+const Process = () => {
+    return (
+        <section id="process">
+            <Tag color="#ff00f2" background="#fac0ff" left={true}>Mon procédé</Tag>
+            <div className="process-container">
+                <div className="process-right">
+                    <img src="/assets/process.png" alt="Process Photo" />
+                </div>
+                <div className="process-left">
+                    <div className="processus">
+                        <h1>1. Réception</h1>
+                        <p>J'examine votre commande et nous discutons de vos <span className="color">attentes</span>,
+                            vos <span className="color">contraintes</span>, votre <span className="color">délais</span> et votre <span className="color">budget</span>.
+                            Une fois que nous sommes en <span className="color">accord</span>, je commence le <span className="color">brainstorming</span> autour de votre commande.</p>
+                    </div>
+                    <div className="processus">
+                        <h1>2. Brainstorming</h1>
+                        <p>Je conçois la <span className="color">maquette</span> de votre projet afin d'avoir un rapide aperçu.
+                            Une fois <span className="color">satisfait</span> de celle-ci, je commence le <span className="color">développement</span>.</p>
+                    </div>
+                    <div className="processus">
+                        <h1>3. Réalisation</h1>
+                        <p>Je développe avec les <span className="color">technologies</span> précédemment choisies.
+                            Avant la livraison, une <span className="color">vision en direct</span> vous sera disponible pour voir le résultat
+                            afin de corriger les petits <span className="color">détails</span> vous dérangeant.</p>
+                    </div>
+                    <div className="processus">
+                        <h1>4. Livraison</h1>
+                        <p>Une fois le projet fini, je vous le <span className="color">livre</span>.
+                            Je fournis également un <span className="color">service d'installation</span> du site web sur votre machine, avec un coût supplémentaire.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default Process;

components/Home/process/process.scss

@@ -0,0 +1,94 @@
+#process {
+  height: 90vh;
+  width: 100%;
+  background-color: #1c1c1c;
+  color: rgba(255, 255, 255, 0.3);
+
+  @media screen and (max-width: 700px) {
+    height: 130vh;
+  }
+
+  .process-container {
+    width: 100%;
+    height: 90vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    flex-direction: row;
+
+    @media screen and (max-width: 700px) {
+      height: 130vh;
+      padding: 10px;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .process-left {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: center;
+
+      @media screen and (max-width: 700px) {
+        width: 100%;
+        height: 130vh;
+      }
+
+      .processus {
+        width: 80%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-self: center;
+        padding-bottom: 30px;
+
+        .color {
+          color: #fcd9ff;
+        }
+
+        h1 {
+          color: white;
+          font-size: 1.5rem;
+          align-self: center;
+
+          &:after {
+            margin: 7px auto;
+            width: 40px;
+            height: 2px;
+            display: block;
+            content: "";
+            background-color: #ff00f2;
+          }
+        }
+
+        p {
+          align-self: center;
+          text-align: justify;
+          font-size: 1.2rem;
+        }
+      }
+    }
+
+    .process-right {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: center;
+
+      @media screen and (max-width: 700px) {
+        display: none;
+      }
+
+      img {
+        margin: 0 auto;
+        width: 65%;
+      }
+    }
+
+  }
+}

components/Home/skills/skills.js

@@ -0,0 +1,29 @@
+import React from "react";
+import "./skills.scss";
+import Tag from "../tag/tag";
+
+const Skills = () => {
+    return (
+        <section id="skills">
+            <Tag color="#00d9ff" background="#d9fcff" left={false}>Ce que j'aime</Tag>
+            <div className="skills-container">
+                <div className="skills-left skill">
+                    <h1>Le Développement</h1>
+                    <p>
+                        Je suis développeur Web FullStack, c'est à dire que je maîtrise le BackEnd et le FrontEnd.
+                        Je réalise des sites pour des projets personnels ou professionnels. En parallèle, je développe des logiciels Mobile et Desktop.
+                    </p>
+                </div>
+                <div className="skills-right skill">
+                    <h1>La Technologie</h1>
+                    <p>
+                        J'adore la sécurité, le DevOps, et les machines.
+                        Ce sont des domaines très importants qu'il ne faut pas négliger sur un projet ! Je me documente au quotidien pour respecter la vie privée de mes clients.
+                    </p>
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default Skills;

components/Home/skills/skills.scss

@@ -0,0 +1,68 @@
+$text-color: #37383F;
+
+#skills {
+  height: 60vh;
+  width: 100%;
+  background-color: white;
+  color:$text-color;
+
+  @media screen and (max-width: 700px) {
+    height: 90vh;
+  }
+
+  .skills-container {
+    padding: 40px;
+    width: 100%;
+    height: 60vh;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    position: absolute;
+    flex-direction: row;
+
+    @media screen and (max-width: 700px) {
+      height: 90vh;
+      padding: 10px;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .skill {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 10%;
+
+      @media screen and (max-width: 700px) {
+        width: 100%;
+        height: 40%;
+      }
+
+      .color {
+        color: #d9fcff;
+      }
+
+      h1 {
+        text-align: center;
+        font-size: 1.7rem;
+        margin-bottom: 20px;
+
+        &:after {
+          margin: 7px auto;
+          width: 40px;
+          height: 2px;
+          display: block;
+          content: "";
+          background-color: #00d9ff;
+        }
+      }
+      p {
+        font-size: 1.2rem;
+        text-align: justify;
+      }
+    }
+  }
+
+}

components/Home/tag/tag.js

@@ -0,0 +1,18 @@
+import React from "react";
+import "./tag.scss";
+
+const Tag = (props) => {
+    return (
+        <div className={props.left ? "tag left": "tag right"}>
+            <h1>{props.children}</h1>
+            <style jsx>{`
+            .tag {
+                color: ${props.color};
+                background-color: ${props.background};
+                transform: rotate(${props.left ? "-20deg": "20deg"});
+            }`}</style>
+        </div>
+    )
+};
+
+export default Tag;

components/Home/tag/tag.scss

@@ -0,0 +1,32 @@
+.tag {
+  border-radius: 5px;
+  display: inline-block;
+  position: relative;
+  top: 5rem;
+  padding: 5px 7px;
+  font-weight: 900;
+  font-size: 130%;
+
+  @media screen and (max-width: 700px) {
+    font-size: 1rem;
+    top: 3rem
+  }
+
+  &.left {
+    left: 9%;
+    float: left;
+
+    @media screen and (max-width: 700px) {
+      left: 5%;
+    }
+  }
+
+  &.right {
+    right: 9%;
+    float: right;
+
+    @media screen and (max-width: 700px) {
+      right: 5%;
+    }
+  }
+}

components/footer/footer.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import "./footer.scss";
+
+const Footer = () => {
+    return (
+        <footer id="footer">
+            <div className="footer-top">
+                <h1>Travaillons ensemble !</h1>
+                <h3>
+                    Envoyez moi votre projet en détaillant votre délais, votre budget et vos attentes
+                    <br />
+                    à <span><a href="mailto:arthurdanjou@outlook.fr">contact@arthurdanjou.fr</a></span> pour que l'on en discute ensemble !
+                </h3>
+            </div>
+            <div className="footer-bottom">
+                <div className="social-list">
+                    <a href="https://github.com/ArthurDanjou" target="_blank">
+                        <img src="/assets/github.svg" height={50} alt="GitHub Icon" />
+                    </a>
+                    <a href="https://twitter.com/ArthurDanj" target="_blank">
+                        <img src="/assets/twitter.svg" height={50} alt="Twitter Icon" />
+                    </a>
+                    <a href="mailto:arthurdanjou@outlook.fr" target="_blank">
+                        <img src="/assets/email.svg" height={50} alt="Mail Icon" />
+                    </a>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer;

components/footer/footer.scss

@@ -0,0 +1,65 @@
+#footer {
+  color: white;
+  height: 450px;
+
+  .footer-top {
+    height: 80%;
+    background-color: #1c1c1c;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin: 0 auto;
+
+    h1 {
+      margin-bottom: 20px;
+      font-weight: 900;
+      font-size: 50px;
+
+      @media screen and (max-width: 700px) {
+        font-size: 30px;
+      }
+    }
+
+    h3 {
+      color: #a0a0a0;
+      span {
+        text-decoration: underline;
+        &:hover {
+          color: white;
+        }
+      }
+
+      @media screen and (max-width: 700px) {
+        padding: 0 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .footer-bottom {
+    height: 20%;
+    background-color: #111111;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .social-list {
+      display: flex;
+      justify-content: space-evenly;
+      width: 30%;
+
+      @media screen and (max-width: 700px) {
+        width: 60%;
+      }
+    }
+    img {
+      height: 40px;
+      transition: .2s;
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+}

components/header/activelink/activelink.js

@@ -0,0 +1,18 @@
+import { withRouter } from 'next/router'
+import Link from 'next/link'
+import React, { Children } from 'react'
+
+const ActiveLink = ({ router, children, ...props }) => {
+    const child = Children.only(children)
+
+    let className = child.props.className || null
+    if (router.pathname === props.href && props.activeClassName) {
+        className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
+    }
+
+    delete props.activeClassName
+
+    return <Link {...props}>{React.cloneElement(child, { className })}</Link>
+}
+
+export default withRouter(ActiveLink)

components/header/header.js

@@ -0,0 +1,83 @@
+import React, {useState} from 'react';
+import Link from "next/link";
+import "./header.scss";
+import ActiveLink from "./activelink/activelink";
+
+const Header = () => {
+
+    const [isOpened, setOpened] = useState(false);
+    const [isActive, setActive] = useState(false);
+
+    return (
+        <header id="header">
+            <div className={isActive ? "active logo" : "logo"} >
+                LOGO
+            </div>
+            <div className={isOpened ? "opened cross" : "cross"} onClick={() => setOpened(!isOpened)}/>
+
+            <div className={isOpened ? "opened menu" : "menu"} >
+                <div className="menu-top">
+                    <div className="pages-link">
+                        <div className="title">
+                            Mes Pages
+                        </div>
+                        <ul>
+                            <li>
+                                <ActiveLink href="/" activeClassName="active">
+                                    <a>Accueil</a>
+                                </ActiveLink>
+                            </li>
+                            <li>
+                                <ActiveLink href="/blog" activeClassName="active">
+                                    <a>Mon blog</a>
+                                </ActiveLink>
+                            </li>
+                            <li>
+                                <ActiveLink href="/about" activeClassName="active">
+                                    <a>A propos</a>
+                                </ActiveLink>
+                            </li>
+                            <li>
+                                <ActiveLink href="/env" activeClassName="active">
+                                    <a>Mon environnement</a>
+                                </ActiveLink>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="contact-link">
+                        <div className="title">
+                            Les autres
+                        </div>
+                        <ul>
+                            <li>
+                                <Link href="/resume">
+                                    <a>Résumé</a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="/cli">
+                                    <a>Console</a>
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="menu-bottom">
+                    <ul>
+                        <li>
+                            <a href="mailto:arthurdanjou@outlook.fr" target='_blank'>Mail</a>
+                        </li>
+                        <li>
+                            <a href="https://github.com/ArthurDanjou" target="_blank">Github</a>
+                        </li>
+                        <li>
+                            <a href="https://twitter.com/ArthurDanj" target="_blank">Twitter</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </header>
+    )
+};
+
+export default Header;

components/header/header.scss

@@ -0,0 +1,212 @@
+$cross-closed: black;
+$cross-opened: red;
+$menu-background: #111111;
+$menu-color: white;
+$hover-color: rgba(205, 205, 205, 0.3);
+
+#header {
+  z-index: 100;
+  position: fixed;
+  width: 100%;
+  height: 10%;
+
+  ul {
+    list-style: none;
+  }
+  
+  /*@media screen and (max-width: 700px) {
+    height: 80px;
+    width: 100%;
+    background-color: rgba(54, 54, 54, 0.95);
+  }*/
+
+  .logo {
+    z-index: 100;
+    position: fixed;
+    top: 5%;
+    left: 5%;
+    width: 64px;
+    height: 64px;
+    font-size: 24px;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @media screen and (max-width: 700px) {
+      top: 1%;
+    }
+
+    .active {
+
+    }
+  }
+
+  .cross {
+    z-index: 100;
+    position: fixed;
+    top: 5%;
+    right: 5%;
+    width: 64px;
+    height: 64px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 20px;
+    cursor: pointer;
+
+    @media screen and (max-width: 700px) {
+      top: 1%;
+    }
+
+    &:active::before, &:active::after {
+      transform: scale(0.85);
+    }
+
+    &:before, &:after {
+      position: absolute;
+      transition: transform .3s;
+      display: block;
+      content: "";
+      height: 5px;
+      width: 100%;
+      background-color: $cross-closed;
+    }
+
+    &:before {
+      top: 22px;
+    }
+
+    &:after {
+      bottom: 22px;
+      right: 0;
+      width: 65%;
+    }
+
+    &.opened {
+      &:before, &:after {
+        width: 100%;
+        background-color: $cross-opened;
+      }
+
+      &:before {
+        top: 30px;
+        transform: rotate(-45deg);
+      }
+
+      &:after {
+        bottom: 30px;
+        left: 0;
+        transform: rotate(45deg);
+        box-shadow: 0 0 0 4px $menu-background, 0 0 12px 8px $menu-background;
+      }
+    }
+  }
+
+  .menu {
+    user-select: none;
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    top: 40%;
+    right: 4.5%;
+    height: 80px;
+    width: 80px;
+    transition: opacity .3s;
+    padding: 25px;
+    border-radius: 5px;
+
+    a {
+      padding: 2px 3px;
+      box-shadow: inset 0 -10px 0 $hover-color;
+      transition: box-shadow 0.2s ease-in-out;
+      &:hover {
+        box-shadow: inset 0 -100px 0 $hover-color;
+      }
+      &.active {
+        box-shadow: inset 0 -100px 0 rgba(184, 184, 184, 0.8);
+      }
+    }
+
+    .menu-top {
+      margin-top: 40px;
+      .pages-link {
+        transition: transform .6s;
+        transform: translateY(60px);
+        .title {
+          font-size: 22px;
+          font-weight: 700;
+        }
+        li {
+          font-size: 20px;
+          padding: 7px 20px;
+        }
+      }
+
+      .contact-link {
+        margin-top: 40px;
+        transition: transform .7s;
+        transform: translateY(60px);
+
+        .title {
+          font-size: 20px;
+          font-weight: 600;
+        }
+        li {
+          font-size: 18px;
+          padding: 7px 20px;
+        }
+      }
+    }
+
+    .menu-bottom {
+      margin-top: 50px;
+      transition: transform .8s;
+      transform: translateY(60px);
+      border-top: solid 1px $menu-color;
+
+      ul {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+
+        li {
+          padding: 3px 5px;
+        }
+      }
+    }
+
+    &.opened {
+      z-index: 99;
+      height: 500px;
+      width: 350px;
+      color: $menu-color;
+      background-color: $menu-background;
+      opacity: 1;
+      visibility: visible;
+
+      @media screen and (max-width: 700px) {
+        border-radius: 0;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 150vh;
+      }
+
+      .menu-top {
+        .pages-link {
+          transform: translateY(0);
+        }
+
+        .contact-link {
+          transform: translateY(0);
+        }
+      }
+
+      .menu-bottom {
+        transform: translateY(0);
+      }
+    }
+  }
+}

next.config.js

@@ -0,0 +1,8 @@
+const withImages = require("next-images");
+const withSass = require("@zeit/next-sass")
+
+module.exports = withImages(withSass({
+    webpack(config, options) {
+        return config
+    }
+}));

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "arthurdanjou.fr",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@zeit/next-sass": "^1.0.1",
+    "axios": "^0.19.2",
+    "baffle": "^0.3.6",
+    "moment": "^2.25.3",
+    "moment-timezone": "^0.5.28",
+    "next": "9.3.5",
+    "next-images": "^1.4.0",
+    "node-sass": "^4.14.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-moment": "^0.9.7"
+  }
+}

pages/about.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "../public/style/style.scss";
+import Head from "next/head";
+import Header from "../components/header/header";
+
+const AboutPage = () => {
+    return (
+        <div className="about">
+            <Head>
+                <title>Arthur Danjou | A propos</title>
+            </Head>
+            <Header />
+        </div>
+    )
+}
+
+export default AboutPage;

pages/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import "../public/style/style.scss";
+import Head from "next/head";
+import Footer from "../components/footer/footer";
+import Banner from "../components/Home/banner/banner";
+import Header from "../components/header/header";
+import About from "../components/Home/about/about";
+import Skills from "../components/Home/skills/skills";
+import Process from "../components/Home/process/process";
+import Posts from "../components/Home/posts/posts";
+
+const HomePage = () => {
+  return (
+      <div className="home">
+          <Head>
+              <title>Arthur Danjou | Accueil</title>
+          </Head>
+          <Header />
+          <Banner />
+          <About />
+          <Skills />
+          <Process />
+          <Posts />
+          <Footer />
+      </div>
+  )
+};
+
+export default HomePage;

public/assets/email.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M467,61H45C20.218,61,0,81.196,0,106v300c0,24.72,20.128,45,45,45h422c24.72,0,45-20.128,45-45V106
+			C512,81.28,491.872,61,467,61z M460.786,91L256.954,294.833L51.359,91H460.786z M30,399.788V112.069l144.479,143.24L30,399.788z
+			 M51.213,421l144.57-144.57l50.657,50.222c5.864,5.814,15.327,5.795,21.167-0.046L317,277.213L460.787,421H51.213z M482,399.787
+			L338.213,256L482,112.212V399.787z" fill="white"/>
+	</g>
+</g>
+</svg>

public/assets/github.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="24 / symbols / github">
+        <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M16.7465 33.267C16.7551 33.4713 16.733 33.6707 16.69 33.8725C16.6144 34.227 16.4684 34.6022 16.2618 34.9489C15.6744 35.9344 14.6765 36.5919 13.3917 36.5919C10.3651 36.5919 9.17727 35.1071 7.68999 31.3889C6.68271 28.8707 6.20751 28.2767 5.07648 28.2767L5.07648 24.9506C8.10306 24.9506 9.29091 26.4354 10.7782 30.1536C11.7855 32.6719 12.2607 33.2659 13.3917 33.2659C13.3917 32.7833 13.3851 32.3558 13.3712 31.777C13.3386 30.4203 13.3348 30.1433 13.394 29.7806C13.4177 28.9889 13.6221 28.4271 14.032 27.8695C10.3204 27.0615 7.81704 25.3929 6.38026 22.6864L5.84204 21.4206C5.31769 19.9137 5.07648 18.2063 5.07648 16.2344C5.07648 13.9635 5.76888 11.9329 7.06218 10.2356C6.65874 8.62218 6.71399 6.65097 7.60482 4.42478L7.8959 3.69736L8.64216 3.45865C8.74207 3.42669 8.86354 3.39782 9.00623 3.37543C10.4594 3.14736 12.5271 3.69151 15.2303 5.42301C16.8238 5.05361 18.502 4.86711 20.1915 4.86711C21.7013 4.86711 23.2028 5.01932 24.6366 5.3194C27.2666 3.67243 29.2775 3.15587 30.6915 3.37572C30.8326 3.39765 30.9528 3.42596 31.0519 3.45739L31.8028 3.69551L32.0942 4.42737C32.8735 6.38434 33.0073 8.18786 32.7237 9.76596C34.2105 11.5499 35.0113 13.7431 35.0113 16.2344C35.0113 18.3348 34.8608 19.9141 34.4283 21.4505L33.9717 22.7034C32.7766 25.407 30.141 27.0944 26.0766 27.8981C26.4991 28.483 26.6961 29.0768 26.6961 29.9398V31.6028C26.6961 32.4087 26.6961 32.4335 26.6942 33.2659C26.698 33.3256 26.703 33.3549 26.7084 33.3731C26.7071 33.3736 26.6961 36.5919 26.6961 36.5919C25.2795 36.5919 24.2262 35.9011 23.7082 34.8114C23.4396 34.2464 23.3594 33.7069 23.37 33.2422V29.9398C23.37 29.8003 23.3651 29.7923 23.0255 29.4527C22.1178 28.545 21.7069 27.8601 21.7069 26.6137V25.1093L23.2038 24.959C27.6595 24.5115 30.0829 23.2741 30.8864 21.4664L31.2619 20.4399C31.5607 19.3666 31.6852 18.0595 31.6852 16.2344C31.6852 14.2952 31.0082 12.6932 29.7278 11.4133L29.024 10.7098L29.3112 9.7571C29.5664 8.9107 29.6271 7.90917 29.3571 6.76684C29.3122 6.77821 29.2656 6.79059 29.2172 6.80407C28.3267 7.05198 27.215 7.58392 25.8753 8.47944L25.2642 8.88788L24.5508 8.71099C23.1711 8.36885 21.6884 8.1932 20.1915 8.1932C18.527 8.1932 16.8815 8.40498 15.3615 8.81937L14.6197 9.0216L13.9851 8.58748C12.5995 7.63957 11.4484 7.07585 10.5253 6.81252C10.4594 6.79371 10.3966 6.77689 10.337 6.76189C10.0149 8.08399 10.1423 9.1702 10.4685 9.98527L10.8595 10.9626L10.1436 11.7342C9.00276 12.9639 8.40257 14.4602 8.40257 16.2344C8.40257 17.8588 8.59273 19.2048 8.9412 20.2188L9.37639 21.2489C10.4643 23.2903 12.7751 24.5185 16.895 24.9601L18.3808 25.1194V26.6137C18.3808 27.8601 17.9699 28.545 17.0622 29.4527C16.7226 29.7923 16.7178 29.8003 16.7178 29.9398L16.6891 30.2472C16.6702 30.348 16.6702 30.6084 16.6963 31.6971C16.7083 32.1978 16.7152 32.5941 16.7172 33.0083C16.7371 33.094 16.7401 33.1493 16.7465 33.267Z" fill="white"/>
+    </g>
+</svg>

public/assets/loading.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 458.186 458.186" style="enable-background:new 0 0 458.186 458.186;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M445.651,201.95c-1.485-9.308-10.235-15.649-19.543-14.164c-9.308,1.485-15.649,10.235-14.164,19.543
+			c0.016,0.102,0.033,0.203,0.051,0.304c17.38,102.311-51.47,199.339-153.781,216.719c-102.311,17.38-199.339-51.47-216.719-153.781
+			S92.966,71.232,195.276,53.852c62.919-10.688,126.962,11.29,170.059,58.361l-75.605,25.19
+			c-8.944,2.976-13.781,12.638-10.806,21.582c0.001,0.002,0.002,0.005,0.003,0.007c2.976,8.944,12.638,13.781,21.582,10.806
+			c0.003-0.001,0.005-0.002,0.007-0.002l102.4-34.133c6.972-2.322,11.675-8.847,11.674-16.196v-102.4
+			C414.59,7.641,406.949,0,397.523,0s-17.067,7.641-17.067,17.067v62.344C292.564-4.185,153.545-0.702,69.949,87.19
+			s-80.114,226.911,7.779,310.508s226.911,80.114,310.508-7.779C435.905,339.799,457.179,270.152,445.651,201.95z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/assets/twitter.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="24 / symbols / twitter">
+<path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M35.1665 7.49754L37.5192 7.77231L36.4616 9.89187C35.9459 10.9255 35.4296 11.9591 34.9129 12.9928C34.8516 13.2117 34.7439 13.4036 34.5846 13.6535C34.518 13.7579 34.2907 14.09 34.28 14.1059C34.22 14.196 34.1756 14.267 34.1436 14.3239V18.2961C34.1436 28.4606 24.3067 34.9198 15.017 34.9198C13.1161 34.9198 11.6718 34.8287 10.0181 34.4678C7.29651 33.8739 5.27113 32.6933 4.34431 30.63L3.39012 28.5058L5.70903 28.2925C7.80683 28.0996 9.62567 27.7 11.0225 27.1648C7.18778 26.5481 5.03884 24.8639 5.03884 21.701V20.0379H6.70189C7.06728 20.0379 7.39675 20.0083 7.69131 19.9539C4.81334 18.2331 3.37184 15.4727 3.37184 11.6439C3.37153 11.4807 3.37153 11.4807 3.37055 11.3062C3.35974 9.37637 3.4634 8.34519 3.9917 7.0291C4.33029 6.18563 4.81971 5.40478 5.47839 4.68932L6.73334 3.32617L7.95345 4.72058C11.9743 9.31581 15.949 12.1036 20.0072 12.4409C20.0245 8.20063 23.2291 4.99175 27.4912 4.99175C29.4781 4.99175 31.2804 5.74592 32.6967 7.10582C33.4719 7.26511 34.2952 7.39579 35.1665 7.49754ZM31.4894 10.2476L30.9796 10.1322L30.6275 9.74583C29.7761 8.81165 28.7076 8.31768 27.4909 8.31768C25.0579 8.31768 23.333 10.0512 23.333 12.4753C23.333 12.8715 23.3227 13.1204 23.2734 13.4476C23.0764 14.7531 22.3442 15.8014 20.8383 15.8014C15.8525 15.8014 11.3544 13.1304 6.96821 8.5684C6.74209 9.25578 6.68891 9.96235 6.69633 11.2875C6.69733 11.4647 6.69733 11.4647 6.69768 11.6438C6.69768 15.0497 8.07753 16.9127 11.3446 17.9511L12.5039 18.3196V19.5361C12.5039 21.0112 11.1064 22.3997 9.06164 23.0217C9.99898 23.7328 11.9159 24.1166 15.0173 24.1166H16.6804V25.7797C16.6804 28.1624 13.9426 30.028 9.80679 31.0022C11.1556 31.4154 12.9515 31.5935 15.0168 31.5935C22.6908 31.5935 30.8173 26.2574 30.8173 18.296V14.1383C30.8173 13.6498 30.9589 13.2257 31.1942 12.7847C31.2862 12.6123 31.3875 12.448 31.5125 12.2605C31.536 12.2252 31.6233 12.0974 31.6927 11.9951L31.8245 11.7315C32.038 11.3044 32.2515 10.8773 32.4649 10.4501C32.1333 10.3873 31.8081 10.3198 31.4894 10.2476Z" fill="white"/>
+</g>
+</svg>

public/style/style.scss

@@ -0,0 +1,40 @@
+@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
+
+* {
+  font-family: "Raleway", sans-serif;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  scroll-behavior: smooth;
+
+  &, :after, &:before {
+    box-sizing: border-box;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: white;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  &:visited {
+    text-decoration: none;
+  }
+  &:active {
+    transform: scale(0.95);
+  }
+}