Update

images/scroll.svg

@@ -0,0 +1,8 @@
+<svg class="scroll">
+    <rect  x="4" y="4"
+     width="40" height="70"
+     rx="25" ry="25"
+     stroke="#fff" stroke-width="2"
+     fill="#fff0"/>
+    <circle class="" cx="24" cy="24" r="4" fill="#fff"/>
+</svg>

index.html

@@ -11,24 +11,28 @@
         <ul>
             <li><a href="#accueil">Accueil</a></li>
             <li><a href="#a_propos">A Propos</a></li>
-            <li><a href="#competences">Compétences</a></li>
             <li><a href="#projets">Projets</a></li>
-            <li><a href="#experiences">Expériences</a></li>
             <li><a href="#contact">Contact</a></li>
         </ul>
     </nav>
 
     <section id="accueil">
-        <div class="content">
+        <div class="center">
-            <h1 id="nom">Lucas Vabre</h1>
+            <h1>Lucas Vabre</h1>
-            <h2 id="status">Etudiant en Programmation</h2>
+            <h2>Etudiant en Programmation</h2>
-            <!-- <xmp id="code"></xmp> -->
+            <svg class="scroll" width="44" height="74">
+                <rect  x="2" y="2"
+                 width="40" height="70"
+                 rx="25" ry="25"
+                 stroke="#fff" stroke-width="2"
+                 fill="#fff0"/>
+                <circle class="" cx="22" cy="22" r="4" fill="#fff"/>
+            </svg>
         </div>
     </section>
+
     <section id="a_propos"></section>
-    <section id="competences"></section>
     <section id="projets"></section>
-    <section id="experiences"></section>
     <section id="contact"></section>
     
     <script src="scripts/data.json"></script>

scripts/data.js

@@ -0,0 +1,20 @@
+var data = {
+    "language": {
+        "french": {
+            "nav": [
+                "Accueil",
+                "A Propos",
+                "Projets",
+                "Contact"
+            ]
+        },
+        "english": {
+            "nav": [
+                "Home",
+                "About",
+                "Projects",
+                "Contact"
+            ]
+        }
+    }
+}

scripts/data.json

@@ -1,92 +0,0 @@
-var data = [
-    {
-        "id": "accueil",
-        "name": "Lucas VABRE",
-        "status": "Etudiant en Informatique"
-    },
-    {
-        "id": "a_propos",
-        "info": "Ad incididunt occaecat Lorem enim tempor sit veniam eu elit.",
-        "cv": ""
-    },
-    {
-        "id": "competences",
-        "langage": [
-            {
-                "name": "HTML/CSS",
-                "value": 95
-            },
-            {
-                "name": "Java",
-                "value": 60
-            },
-            {
-                "name": "Python",
-                "value": 50
-            },
-            {
-                "name": "Javascript",
-                "value": 20
-            },
-            {
-                "name": "C",
-                "value": 10
-            }
-        ]
-    },
-    {
-        "id": "projets",
-        "projets": [
-            {
-                "name": "Projet 1",
-                "image": "link",
-                "link": "link"
-            },
-            {
-                "name": "Projet 2",
-                "image": "link",
-                "link": "link"
-            },
-            {
-                "name": "Projet 3",
-                "image": "link",
-                "link": "link"
-            }
-        ]
-    },
-    {
-        "id": "experiences",
-        "experiences": [
-            {
-                "name": "experience 1",
-                "date": "10/10/10",
-                "description": "Infos"
-            },
-            {
-                "name": "experience 2",
-                "date": "10/10/10",
-                "description": "Infos"
-            },
-            {
-                "name": "experience 3",
-                "date": "10/10/10",
-                "description": "Infos"
-            }
-        ]
-    },
-    {
-        "id": "contact",
-        "reseaux": [
-            {
-                "name": "Twitter",
-                "image": "link",
-                "link": "link"
-            },
-            {
-                "name": "Github",
-                "image": "link",
-                "link": "link"
-            }
-        ]
-    }
-]

styles/style.css

@@ -1,16 +1,28 @@
 :root {
   scroll-behavior: smooth;
-    /* Variables */
-
 }
 
+/* Hide scroll bar */
+*::-webkit-scrollbar { display: none; }
+
 body {
   width: 100wh;
   margin: 0;
   padding: 0;
 }
 
-/* Top Bar de Navigation */
+
+/* Tool box */
+.center {
+  position: absolute;
+  text-align: center;
+  vertical-align: middle;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/***** Navigation Top Bar *****/    
   nav {
     width: 100%;
     z-index: 999;
@@ -20,53 +32,69 @@ nav {
   }
 
   nav li {
-    padding: 0 25px;
     text-decoration: none;
     display: inline-block;
   }
 
   nav a {
+    padding: 16px 0;
+    margin: 0 25px;
     text-decoration: none;
     color: white;
   }
+/***** End Navigation Top Bar *****/
 
-/* Contenu de la page */
+section {
-
+  padding: 0 calc(100vw / 10);
-.content {
+  min-height: 100vh;
-    padding: 50px 0;
-    width: calc(100vw - 40px);
-    max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
 }
 
-/* Sections */
 #accueil {
-    background-color: red;
+  background: center no-repeat url("../images/accueil-bg.jpg") #ef476f;
-    min-height: 100vh;
+  background-size: cover;
 }
 
-#a_propos {
+/***** Scroll *****/
-    background-color: blue;
+  .scroll {
-    min-height: 100vh;
+    left: 50%;
+    transform: translateX(calc(50% - 24px));
   }
 
-#competences {
+  .scroll circle {
-    background-color: violet;
+    -webkit-animation-duration: 1.5s;
-    min-height: 100vh;
+            animation-duration: 1.5s;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+    -webkit-animation-name: scroll;
+            animation-name: scroll;
   }
 
-#projets {
+  /* Animation */
-    background-color: yellow;
+  @-webkit-keyframes scroll {
-    min-height: 100vh;
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(40px);
+    }
   }
 
-#experiences {
+  @keyframes scroll {
-    background-color: purple;
+    0% {
-    min-height: 100vh;
+      opacity: 1;
     }
+    100% {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+  }
+/***** End Scroll *****/
 
-#contact {
+#a_propos {background-color: #ffd166}
-    background-color: green;
+
-    min-height: 100vh;
+#projets {background-color: #06d6a0}
-}
+
+#contact {background-color: #118ab2}