Content.

.idea/$CACHE_FILE$

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectInspectionProfilesVisibleTreeState">
+    <entry key="Project Default">
+      <profile-state>
+        <expanded-state>
+          <State>
+            <id />
+          </State>
+          <State>
+            <id>Dart</id>
+          </State>
+        </expanded-state>
+        <selected-state>
+          <State>
+            <id>CoffeeScript</id>
+          </State>
+        </selected-state>
+      </profile-state>
+    </entry>
+  </component>
+</project>

.idea/$PRODUCT_WORKSPACE_FILE$

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="masterDetails">
+    <states>
+      <state key="ScopeChooserConfigurable.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.1778481" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

.idea/.gitignore

@@ -0,0 +1,2 @@
+# Default ignored files
+/workspace.xml

.idea/codeStyles/Project.xml

@@ -0,0 +1,7 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <XML>
+      <option name="XML_LEGACY_SETTINGS_IMPORTED" value="true" />
+    </XML>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default (1)" />
+  </state>
+</component>

.idea/devfolio.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/dictionaries

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectDictionaryState">
+    <dictionary name="amine" />
+  </component>
+</project>

.idea/encodings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding">
+    <file url="PROJECT" charset="UTF-8" />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/devfolio.iml" filepath="$PROJECT_DIR$/.idea/devfolio.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/dist/img/wecook-logo.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 614 159.7" style="enable-background:new 0 0 614 159.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#313E47;}
+	.st1{fill:#FBAC31;}
+</style>
+<path class="st0" d="M65.2,97.4l-13.9,36.5H48l-12.3-31.7l-12.4,31.7h-3.2L6.2,97.4h3.4L21.8,130l12.5-32.6h3l12.4,32.5L62,97.4
+	H65.2z"/>
+<path class="st0" d="M106.7,116.5H75.3c0.1,2.8,0.8,5.4,2.2,7.6c1.4,2.2,3.2,3.9,5.5,5.1c2.3,1.2,4.9,1.8,7.8,1.8
+	c2.4,0,4.6-0.4,6.6-1.3c2-0.9,3.7-2.1,5.1-3.8l2,2.3c-1.6,1.9-3.6,3.4-6,4.4s-5,1.5-7.8,1.5c-3.6,0-6.9-0.8-9.7-2.4
+	c-2.8-1.6-5.1-3.8-6.7-6.6c-1.6-2.8-2.4-6-2.4-9.6c0-3.5,0.8-6.7,2.3-9.6c1.5-2.8,3.6-5,6.3-6.6c2.7-1.6,5.6-2.4,9-2.4
+	c3.3,0,6.3,0.8,8.9,2.3c2.6,1.6,4.7,3.7,6.2,6.5c1.5,2.8,2.3,6,2.3,9.5L106.7,116.5z M82.4,101.9c-2.1,1.1-3.7,2.8-4.9,4.8
+	c-1.2,2.1-1.9,4.4-2.1,7h28c-0.1-2.6-0.8-4.9-2.1-7s-2.9-3.7-5-4.8c-2.1-1.2-4.4-1.8-6.9-1.8C86.8,100.2,84.4,100.8,82.4,101.9z"/>
+<path class="st0" d="M126.1,132.1c-3.3-1.7-5.9-4-7.7-7s-2.8-6.4-2.8-10.2c0-3.8,0.9-7.2,2.8-10.1c1.8-3,4.4-5.3,7.7-6.9
+	c3.3-1.7,7.1-2.5,11.3-2.5c4.3,0,8,0.9,11.1,2.8c3.1,1.8,5.3,4.4,6.6,7.7l-10.3,5.3c-1.7-3.4-4.2-5.1-7.6-5.1
+	c-2.4,0-4.4,0.8-5.9,2.4c-1.6,1.6-2.3,3.8-2.3,6.6c0,2.8,0.8,5.1,2.3,6.7c1.6,1.6,3.5,2.4,5.9,2.4c3.3,0,5.8-1.7,7.6-5.1l10.3,5.3
+	c-1.3,3.3-3.5,5.8-6.6,7.7c-3.1,1.8-6.8,2.8-11.1,2.8C133.1,134.6,129.4,133.8,126.1,132.1z"/>
+<path class="st1" d="M171.3,132.1c-3.3-1.7-5.8-4-7.7-7c-1.8-3-2.8-6.4-2.8-10.2c0-3.7,0.9-7.1,2.8-10.1c1.8-3,4.4-5.3,7.6-7
+	c3.2-1.7,6.9-2.5,11-2.5s7.8,0.8,11.1,2.5c3.3,1.7,5.8,4,7.6,6.9c1.8,3,2.7,6.3,2.7,10.1c0,3.8-0.9,7.2-2.7,10.2s-4.4,5.3-7.6,7
+	c-3.3,1.7-7,2.5-11.1,2.5C178.2,134.6,174.6,133.8,171.3,132.1z M188,121.6c1.5-1.6,2.2-3.8,2.2-6.7c0-2.8-0.7-5-2.2-6.6
+	s-3.4-2.4-5.7-2.4s-4.2,0.8-5.7,2.4c-1.5,1.6-2.2,3.8-2.2,6.6c0,2.8,0.7,5.1,2.2,6.7c1.5,1.6,3.4,2.4,5.7,2.4S186.5,123.2,188,121.6
+	z"/>
+<path class="st1" d="M221.4,132.1c-3.3-1.7-5.8-4-7.7-7c-1.8-3-2.8-6.4-2.8-10.2c0-3.7,0.9-7.1,2.8-10.1c1.8-3,4.4-5.3,7.6-7
+	c3.2-1.7,6.9-2.5,11-2.5s7.8,0.8,11.1,2.5c3.3,1.7,5.8,4,7.6,6.9c1.8,3,2.7,6.3,2.7,10.1c0,3.8-0.9,7.2-2.7,10.2s-4.4,5.3-7.6,7
+	c-3.3,1.7-7,2.5-11.1,2.5C228.3,134.6,224.7,133.8,221.4,132.1z M238.1,121.6c1.5-1.6,2.2-3.8,2.2-6.7c0-2.8-0.7-5-2.2-6.6
+	s-3.4-2.4-5.7-2.4s-4.2,0.8-5.7,2.4c-1.5,1.6-2.2,3.8-2.2,6.6c0,2.8,0.7,5.1,2.2,6.7c1.5,1.6,3.4,2.4,5.7,2.4
+	S236.6,123.2,238.1,121.6z"/>
+<path class="st0" d="M280.7,120.7l-3.9,4v9.3h-13.3V82.1h13.3v27.2l13.6-13.2h15.8l-15.8,16.2l17.1,21.7h-16.1L280.7,120.7z"/>
+<path class="st0" d="M390.4,97.4l-13.9,36.5h-3.3l-12.3-31.7l-12.4,31.7h-3.2l-13.9-36.5h3.4L347,130l12.5-32.6h3l12.4,32.5
+	l12.3-32.5C387.2,97.4,390.4,97.4,390.4,97.4z"/>
+<path class="st0" d="M431.8,116.5h-31.4c0.1,2.8,0.8,5.4,2.2,7.6c1.4,2.2,3.2,3.9,5.5,5.1c2.3,1.2,4.9,1.8,7.8,1.8
+	c2.4,0,4.6-0.4,6.6-1.3c2-0.9,3.7-2.1,5.1-3.8l2,2.3c-1.6,1.9-3.6,3.4-6,4.4s-5,1.5-7.8,1.5c-3.6,0-6.9-0.8-9.7-2.4
+	c-2.8-1.6-5.1-3.8-6.7-6.6c-1.6-2.8-2.4-6-2.4-9.6c0-3.5,0.8-6.7,2.3-9.6c1.5-2.8,3.6-5,6.3-6.6c2.7-1.6,5.6-2.4,9-2.4
+	s6.3,0.8,8.9,2.3c2.6,1.6,4.7,3.7,6.2,6.5c1.5,2.8,2.3,6,2.3,9.5L431.8,116.5z M407.5,101.9c-2.1,1.1-3.7,2.8-4.9,4.8
+	c-1.2,2.1-1.9,4.4-2.1,7h28c-0.1-2.6-0.8-4.9-2.1-7c-1.3-2.1-2.9-3.7-5-4.8c-2.1-1.2-4.4-1.8-6.9-1.8S409.6,100.8,407.5,101.9z"/>
+<path class="st0" d="M451.2,132.1c-3.3-1.7-5.9-4-7.7-7c-1.8-3-2.8-6.4-2.8-10.2c0-3.8,0.9-7.2,2.8-10.1c1.8-3,4.4-5.3,7.7-6.9
+	c3.3-1.7,7.1-2.5,11.3-2.5c4.3,0,8,0.9,11.1,2.8c3.1,1.8,5.3,4.4,6.7,7.7l-10.3,5.3c-1.7-3.4-4.2-5.1-7.6-5.1
+	c-2.4,0-4.4,0.8-5.9,2.4c-1.6,1.6-2.3,3.8-2.3,6.6c0,2.8,0.8,5.1,2.3,6.7c1.6,1.6,3.5,2.4,5.9,2.4c3.3,0,5.8-1.7,7.6-5.1l10.3,5.3
+	c-1.3,3.3-3.5,5.8-6.7,7.7c-3.1,1.8-6.8,2.8-11.1,2.8C458.3,134.6,454.5,133.8,451.2,132.1z"/>
+<path class="st0" d="M519.4,99.7c3.3,2.9,5,7.3,5,13.2V134H512v-4.9c-1.9,3.7-5.6,5.5-11.2,5.5c-2.9,0-5.5-0.5-7.6-1.5
+	s-3.8-2.4-4.9-4.2s-1.6-3.7-1.6-6c0-3.6,1.4-6.4,4.1-8.4c2.8-2,7-3,12.7-3h7.6c-0.2-4-2.9-6-8-6c-1.8,0-3.7,0.3-5.5,0.9
+	c-1.9,0.6-3.5,1.4-4.8,2.4l-4.5-9c2.1-1.4,4.7-2.5,7.7-3.3c3-0.8,6-1.2,9.1-1.2C511.3,95.4,516.1,96.8,519.4,99.7z M508.5,125.1
+	c1.2-0.7,2-1.8,2.5-3.3v-3.3h-5.7c-3.9,0-5.8,1.3-5.8,3.8c0,1.2,0.4,2.1,1.3,2.8c0.9,0.7,2.1,1,3.6,1S507.4,125.8,508.5,125.1z"/>
+<path class="st0" d="M554.2,96.7c2.2-0.9,4.7-1.3,7.5-1.3v12c-1.2-0.1-2.2-0.2-3-0.2c-2.8,0-5.1,0.8-6.7,2.3s-2.4,3.9-2.4,7.1V134
+	h-13.3V96.1H549v4.6C550.3,98.9,552,97.6,554.2,96.7z"/>
+<path class="st0" d="M608.8,118.4h-27.6c0.6,2,1.6,3.5,3.3,4.5c1.6,1,3.6,1.6,6.1,1.6c1.8,0,3.4-0.3,4.7-0.8s2.7-1.4,4-2.5l7,7.3
+	c-3.7,4.1-9.1,6.2-16.2,6.2c-4.4,0-8.3-0.8-11.7-2.5c-3.4-1.7-6-4-7.8-7c-1.8-3-2.8-6.4-2.8-10.2c0-3.7,0.9-7.1,2.7-10
+	c1.8-3,4.3-5.3,7.5-7c3.2-1.7,6.7-2.5,10.7-2.5c3.8,0,7.2,0.8,10.3,2.3c3.1,1.6,5.5,3.8,7.3,6.8s2.7,6.5,2.7,10.5
+	C609,115.2,609,116.3,608.8,118.4z M583.7,106.6c-1.4,1.2-2.3,2.8-2.6,4.8h15.5c-0.4-2-1.2-3.6-2.6-4.8c-1.4-1.2-3.1-1.8-5.1-1.8
+	C586.8,104.9,585,105.4,583.7,106.6z"/>
+<path class="st1" d="M230.8,138.7c-15.7,12.5-29.6,11.5-47.5,1.4c-1.9-1-1.8,3.4-1,4.3c6.2,7.2,17.6,12.4,29.5,10.9
+	c9.3-1.2,15.5-5.6,20.5-11.9C234,141.2,231.9,137.9,230.8,138.7z"/>
+<path class="st1" d="M232.9,88.8c2.4,1.2,5.2-0.5,5.4-3.1c0.5-2.9-1.2-14.2,1.7-15.3c1.2-0.4,2.8-0.9,4.9-2.1
+	c10.9-5.7,15.6-14.2,15.9-22.3c0.1-3.7-0.7-7.3-2.2-10.5c-1.5-3.2-3.8-6.1-6.7-8.4c-5.8-4.7-14-6.9-23.3-4.4
+	c-2.5-6.6-7.1-11.4-12.7-14.4c-4.6-2.5-9.8-3.7-15.1-3.7c-5.2,0-10.5,1.4-15.1,4c-5.5,3.2-10.1,8.3-12.5,15.2
+	c-20.5-4.7-37.6,16.4-19,33.2c6.6,6,15.4,12.2,18.1,24.7c3.3-15.3-5.3-22.6-11.8-28.9c-7.3-7.1-7.2-15.9,1.1-20.8
+	c6.7-3.8,17.6-1,23.3,3.2c0.3,0.1-10.3-11.6,4.5-20.2c3.4-2,7.4-3,11.4-3c17.5-0.2,21.1,11.4,25.6,25.1c2.1-14.5,20.7-10.6,25.2,1.5
+	c1,2.2,1.6,4.6,1.5,7.1c-0.2,5.7-3.7,11.7-11.8,16c-12.3,6.5-29.2-8.5-50.2-0.1c14.6,1,41.9,5.5,39.6,18c-6.9-3-36.5-5-52.2,0.8
+	C199.8,79.5,222.6,83.6,232.9,88.8L232.9,88.8z"/>
+</svg>

src/dist/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
-
 <head>
-  <title>devfolio</title>
+  <title>Amine Bouabdallaoui</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="favicon.png" type="image/x-icon">
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+  <meta charset="UTF-8">
   <link rel="stylesheet" href="css/main.bundle.css">
   <script src="https://kit.fontawesome.com/4e5a72c756.js"></script>
 </head>
@@ -13,28 +13,18 @@
   <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <div class="navbar-item is-hidden-desktop">
-          <a href="https://github.com/mmacneil" class="icon is-large has-text-light">
+          <a href="https://github.com/aminecmi" class="icon is-large has-text-light">
             <i class="fab fa-2x fa-github"></i>
           </a>
         </div>
-        <div class="navbar-item is-hidden-desktop">
-          <a href="https://fullstackmark.com" class="icon is-large has-text-light">
-            <i class="fas fa-2x fa-globe"></i>
-          </a>
-        </div>
     </div>
     <div class="navbar-menu">
       <div class="navbar-end">
         <div class="navbar-item">
-          <a href="https://github.com/mmacneil" class="icon is-large has-text-light">
+          <a href="https://github.com/aminecmi" class="icon is-large has-text-light">
             <i class="fab fa-2x fa-github"></i>
           </a>
         </div>
-        <div class="navbar-item">
-          <a href="https://fullstackmark.com" class="icon is-large has-text-light">
-            <i class="fas fa-2x fa-globe"></i>
-          </a>
-        </div>
       </div>
     </div>
   </nav>
@@ -52,10 +42,10 @@
         <div class="columns has-text-centered">
           <div class="column">
             <h1 class="title is-1">
-              Mark Macneil
+              Amine Bouabdallaoui
             </h1>
             <h2 class="subtitle">
-              FullStack .NET Dev, Halifax, NS
+              Développeur Java, JS, Kotlin/Android FullStack, avec une pointe de DevOps
             </h2>
           </div>
         </div>
@@ -65,36 +55,43 @@
 
   <section class="section">
     <div class="container">
-      <h1 class="title">About Me</h1>
+      <h1 class="title">Je suis passionné par l'informatique</h1>
       <hr />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      <p>
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        Je fais du Java/Scala pour le back, Angular et un peu de React pour le front, avec un brin de Cordova, au boulot.
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+      </p>
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+      <p>
-        laborum.</p>
+        Chez moi, je m'amuse à développer des apps android en Kotlin (toutes open-source sur Github)
+      </p>
+      <p>
+        Je m'amuse aussi à héberger le maximum des services que j'utilise sur mon serveur perso.
+      </p>
     </div>
   </section>
   <section class="section">
     <div class="container">
-      <h1 class="title">Experience</h1>
+      <h1 class="title">Expériences professionnelles</h1>
       <hr />
       <div class="card">
         <div class="card-content">
           <div class="media">
             <div class="media-left">
-              <figure class="image is-48x48">
+              <figure class="image is-64x64">
-                <img src="img/dunder-mifflin-logo.png" alt="Placeholder image">
+                <img src="img/wecook-logo.svg" alt="Wecook">
               </figure>
             </div>
             <div class="media-content">
-              <p class="title is-4">Company Name</p>
+              <p class="title is-4">WeCook We Care (By Alantaya)</p>
-              <p class="subtitle is-6">Title - <time datetime="2018-1">January 2018</time> - <time
+              <p class="subtitle is-6">Développeur FullStack - <time datetime="2013-9">Février 2017</time> - <time
-                  datetime="2019-9">Sepemter 2019</time> </p>
+                  datetime="now">Aujourd'hui</time> </p>
             </div>
           </div>
           <div class="content">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <ul>
-            Phasellus nec iaculis mauris.
+              <li>Développement de microservices utilisant Spring, Neo4J et Kafka.</li>
+              <li>Développement Front utilisant Angular 5 et NodeJS.</li>
+              <li>Développement mobile avec Cordova.</li>
+            </ul>
           </div>
         </div>
       </div>
@@ -102,19 +99,68 @@
         <div class="card-content">
           <div class="media">
             <div class="media-left">
-              <figure class="image is-48x48">
+              <figure class="image is-64x64">
-                <img src="img/pied-piper-logo.png" alt="Placeholder image">
+                <img src="img/wecook-logo.svg" alt="Wecook">
               </figure>
             </div>
             <div class="media-content">
-              <p class="title is-4">Company Name</p>
+              <p class="title is-4">WeCook (By Kiwings)</p>
-              <p class="subtitle is-6">Title - <time datetime="2018-1">August 2017</time> - <time
+              <p class="subtitle is-6">Développeur Web, Mobile, Backend  - <time datetime="2013-9">Septembre 2013</time> - <time
-                  datetime="2017-9">January 2018</time></p>
+                  datetime="2017-2">Février 2017</time> </p>
             </div>
           </div>
           <div class="content">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <ul>
-            Phasellus nec iaculis mauris.
+              <li>Développement back en Scala et utilisation de PlayFramework</li>
+              <li>Développement Front avec AngularJs, ScalaJS, ScalaReact, ScalaCSS.</li>
+              <li>Développement Mobile avec SteroidsJs, Ionic et AngularJs</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card card-gap">
+        <div class="card-content">
+          <div class="media">
+            <div class="media-left">
+              <figure class="image is-64x64">
+                <img src="img/cityzen-logo.jpg" alt="CityzenCar">
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">CityzenCar</p>
+              <p class="subtitle is-6">Développeur Web - <time datetime="2012-8">Aout 2012</time> - <time
+                  datetime="2017-9">Aout 2013</time></p>
+            </div>
+          </div>
+          <div class="content">
+            <ul>
+              <li>Développements sur divers projets de la start-up</li>
+              <li>Installation et configuration de plusieurs serveurs</li>
+              <li>Utilisation de diverses API tel que API Cloud OVH, et IDN La Poste</li>
+              <li>Intégration d'un moteur d'indexation et de recherche Elasticsearch</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card card-gap">
+        <div class="card-content">
+          <div class="media">
+            <div class="media-left">
+              <figure class="image is-64x64">
+                <img src="img/nextformation-logo.png" alt="NextFormation">
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">NextFormation</p>
+              <p class="subtitle is-6">Développeur Web - <time datetime="2011-4">Avril 2011</time> - <time
+                  datetime="2011-6">Juin 2011</time></p>
+            </div>
+          </div>
+          <div class="content">
+            <ul>
+              <li>Développement Web : PHP, HTML, CSS, JavaScript, AJAX, Zend</li>
+              <li>Développement d'une plate-forme d'apprentissage pour l'entreprise</li>
+            </ul>
           </div>
         </div>
       </div>
@@ -123,33 +169,54 @@
 
   <section class="section">
     <div class="container">
-      <h1 class="title">Projects</h1>
+      <h1 class="title">Compétences</h1>
       <hr />
       <div class="tile is-ancestor">
         <div class="tile is-vertical is-12">
           <div class="tile">
-            <div class="tile is-parent is-vertical">
+            <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Project title</p>
+                <p class="title">Langages de programmation</p>
-                <figure class="image is-4by3">
+                <p class="content">
-                  <img class="modal-trigger" data-target="project-1-modal" src="img/project-1-cover.png">
+                  <ul>
-                </figure>
+                    <li>Kotlin</li>
+                    <li>Java</li>
+                    <li>Javascript</li>
+                    <li>Typescript</li>
+                    <li>ECMAScript 6</li>
+                    <li>Scala</li>
+                    <li>PHP</li>
+                    <li>Bash</li>
+                  </ul>
+                </p>
               </article>
             </div>
             <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Project title</p>
+                <p class="title">Front</p>
-                <figure class="image is-4by3">
+                <p class="content">
-                  <img class="modal-trigger" data-target="project-2-modal" src="img/project-2-cover.png">
+                  <ul>
-                </figure>
+                    <li>Angular 1.5 et >= 2</li>
+                    <li>Bootstrap</li>
+                    <li>Bulma</li>
+                    <li>React (ScalaReact)</li>
+                    <li>MeteorJs</li>
+                  </ul>
+                </p>
               </article>
             </div>
             <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Project title</p>
+                <p class="title">Mobile</p>
-                <figure class="image is-4by3">
+                <p class="content">
-                  <img class="modal-trigger" data-target="project-3-modal" src="img/project-3-cover.png">
+                <ul>
-                </figure>
+                  <li>Java</li>
+                  <li>Kotlin</li>
+                  <li>PhoneGap/Cordova</li>
+                  <li>SteroidsJS</li>
+                  <li>Ionic</li>
+                </ul>
+                </p>
               </article>
             </div>
           </div>
@@ -158,28 +225,47 @@
       <div class="tile is-ancestor">
         <div class="tile is-vertical is-12">
           <div class="tile">
-            <div class="tile is-parent is-vertical">
+            <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Project title</p>
+                <p class="title">Back</p>
-                <figure class="image is-4by3">
+                <p class="content">
-                  <img class="modal-trigger" data-target="project-4-modal" src="img/project-4-cover.png">
+                <ul>
-                </figure>
+                  <li>Spring 4 (Core, MVC, Data, Security, AOP)</li>
+                  <li>Hibernate</li>
+                  <li>Kafka</li>
+                  <li>Stack ELK</li>
+                  <li>Nginx</li>
+                  <li>Apache server</li>
+                </ul>
+                </p>
               </article>
             </div>
             <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Project title</p>
+                <p class="title">BDD</p>
-                <figure class="image is-4by3">
+                <p class="content">
-                  <img class="modal-trigger" data-target="project-5-modal" src="img/project-5-cover.png">
+                <ul>
-                </figure>
+                  <li>MySQL</li>
+                  <li>Postgresql</li>
+                  <li>Neo4J</li>
+                  <li>Elasticsearch</li>
+                  <li>MongoDB</li>
+                  <li>Room</li>
+                </ul>
+                </p>
               </article>
             </div>
             <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Project title</p>
+                <p class="title">OPS</p>
-                <figure class="image is-4by3">
+                <p class="content">
-                  <img class="modal-trigger" data-target="project-6-modal" src="img/project-6-cover.png">
+                <ul>
-                </figure>
+                  <li>Administration de serveurs Ubuntu, Redhat et FreeBSD</li>
+                  <li>Gitlab / GitlabCI</li>
+                  <li>Jenkins</li>
+                  <li>Docker</li>
+                </ul>
+                </p>
               </article>
             </div>
           </div>
@@ -190,39 +276,109 @@
 
   <section class="section">
     <div class="container">
-      <h1 class="title">Education / Training</h1>
+      <h1 class="title">Centres d'intérêt</h1>
+      <hr />
+      <div class="tile is-ancestor">
+        <div class="tile is-vertical is-12">
+          <div class="tile">
+            <div class="tile is-parent is-vertical">
+              <article class="tile is-child notification">
+                <p class="title">Langues</p>
+                <p class="content">
+                <ul>
+                  <li>Français : langue parentale</li>
+                  <li>Arabe : langue parentale</li>
+                  <li>Anglais : courant (970 TOEIC)</li>
+                </ul>
+                </p>
+              </article>
+            </div>
+            <div class="tile is-parent is-vertical">
+              <article class="tile is-child notification">
+                <p class="title">Musique</p>
+                <p class="content">
+                <ul>
+                  <li>Guitare</li>
+                  <li>Piano</li>
+                  <li>Chorale</li>
+                </ul>
+                </p>
+              </article>
+            </div>
+            <div class="tile is-parent is-vertical">
+              <article class="tile is-child notification">
+                <p class="title">Médias</p>
+                <p class="content">
+                <ul>
+                  <li>Films (Her, Predestination)</li>
+                  <li>Séries (Black Mirror, Orphan Black, The OA)</li>
+                  <li>Jeux Vidéos (Kingdom Hearts, No Man's Sky)</li>
+                </ul>
+                </p>
+              </article>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container">
+      <h1 class="title">Formations</h1>
       <hr />
       <div class="card">
         <div class="card-content">
-          <div class="content">
+          <div class="media">
-            <p class="title is-4">School Name</p>
+            <div class="media-left">
-            <p class="subtitle is-6">Program/Course - <time datetime="2016-9">September 2016</time> - <time
+              <figure class="image is-64x64">
-                datetime="2019-9">Sepemter 2019</time></p>
+                <img src="img/esgi-logo.jpg" alt="ESGI">
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">ESGI</p>
+              <p class="subtitle is-6"><time datetime="2015">2015</time></p>
+            </div>
           </div>
           <div class="content">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Mastère Architecture des Logiciels
-            Phasellus nec iaculis mauris.
-            <ul>
-              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-            </ul>
           </div>
         </div>
       </div>
       <div class="card card-gap">
         <div class="card-content">
-          <div class="content">
+          <div class="media">
-            <p class="title is-4">School Name</p>
+            <div class="media-left">
-            <p class="subtitle is-6">Program/Course - <time datetime="2015-9">September 2014</time> - <time
+              <figure class="image is-64x64">
-                datetime="2015-9">Sepemter 2015</time></p>
+                <img src="img/montreuil-logo.png" alt="IUT de Montreuil">
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">IUT De Montreuil</p>
+              <p class="subtitle is-6"><time datetime="2013">2013</time></p>
+            </div>
           </div>
           <div class="content">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Licence Profesionnelle CSID (Conception des systèmes d’information, intégration et décision)
-            Phasellus nec iaculis mauris.
+          </div>
-            <ul>
+        </div>
-              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+      </div>
-              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+      <div class="card card-gap">
-            </ul>
+        <div class="card-content">
+          <div class="media">
+            <div class="media-left">
+              <figure class="image is-64x64">
+                <img src="img/montreuil-logo.png" alt="IUT de Montreuil">
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">IUT De Montreuil</p>
+              <p class="subtitle is-6"><time datetime="2011">2011</time></p>
+            </div>
+          </div>
+          <div class="content">
+            DUT Informatique
           </div>
         </div>
       </div>
@@ -236,26 +392,18 @@
       <nav class="level">
           <div class="level-item has-text-centered">
             <div>
-              <a href="https://github.com/mmacneil" class="icon is-large">
+              <a href="https://github.com/aminecmi" class="icon is-large">
                 <i class="fab fa-2x fa-github"></i>
               </a>
-              <p class="heading"><a href="https://github.com/mmacneil">github.com/mmacneil</a></p>
+              <p class="heading"><a href="https://github.com/aminecmi">github.com/aminecmi</a></p>
-            </div>
-          </div>           
-          <div class="level-item has-text-centered">
-            <div>
-                <a href="https://fullstackmark.com" class="icon is-large">
-                  <i class="fas fa-2x fa-globe"></i>
-                </a>
-                <p class="heading"><a href="https://fullstackmark.com">fullstackmark.com</a></p>
             </div>
           </div>
           <div class="level-item has-text-centered">
               <div>
-                  <a href="mailto:markmacneil@gmail.com" class="icon is-large">
+                  <a href="mailto:amine.bouabdallaoui@gmail.com" class="icon is-large">
                     <i class="fas fa-2x fa-envelope"></i>
                   </a>
-                  <p class="heading"><a href="mailto:markmacneil@gmail.com">markmacneil@gmail.com</a></p>
+                  <p class="heading"><a href="mailto:amine.bouabdallaoui@gmail.com">amine.bouabdallaoui@gmail.com</a></p>
               </div>
             </div>
             <div class="level-item has-text-centered">
@@ -263,206 +411,13 @@
                   <a href="https://www.linkedin.com/in/markmacneilhfx" class="icon is-large">
                     <i class="fab fa-2x fa-linkedin-in"></i>
                   </a>
-                  <p class="heading"><a href="https://www.linkedin.com/in/markmacneilhfx">linkedin</a></p>
+                  <p class="heading"><a href="https://www.linkedin.com/in/bouamine">linkedin</a></p>
               </div>
             </div>
         </nav>
     </div>
   </section>
 
-  <!-- Modals -->
-  <div id="project-1-modal" class="modal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Project title</p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <p class="image is-3by2">
-          <img src="img/project-1-cover.png" alt="">
-        </p>
-
-        <div class="content">
-          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 ex ea commodo
-          consequat.
-        </div>
-
-        <div class="tags">
-          <span class="tag">angular</span>
-          <span class="tag">mongo</span>
-          <span class="tag">typscript</span>
-          <span class="tag">node</span>
-        </div>
-
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success">Close</button>
-      </footer>
-    </div>
-  </div>
-
-  <div id="project-2-modal" class="modal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Project title</p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <p class="image is-3by2">
-          <img src="img/project-2-cover.png" alt="">
-        </p>
-
-        <div class="content">
-          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 ex ea commodo
-          consequat.
-        </div>
-
-        <div class="tags">
-          <span class="tag">angular</span>
-          <span class="tag">mongo</span>
-          <span class="tag">typscript</span>
-          <span class="tag">node</span>
-        </div>
-
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success">Close</button>
-      </footer>
-    </div>
-  </div>
-
-  <div id="project-3-modal" class="modal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Project title</p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <p class="image is-3by2">
-          <img src="img/project-3-cover.png" alt="">
-        </p>
-
-        <div class="content">
-          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 ex ea commodo
-          consequat.
-        </div>
-
-        <div class="tags">
-          <span class="tag">angular</span>
-          <span class="tag">mongo</span>
-          <span class="tag">typscript</span>
-          <span class="tag">node</span>
-        </div>
-
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success">Close</button>
-      </footer>
-    </div>
-  </div>
-
-  <div id="project-4-modal" class="modal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Project title</p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <p class="image is-3by2">
-          <img src="img/project-4-cover.png" alt="">
-        </p>
-
-        <div class="content">
-          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 ex ea commodo
-          consequat.
-        </div>
-
-        <div class="tags">
-          <span class="tag">angular</span>
-          <span class="tag">mongo</span>
-          <span class="tag">typscript</span>
-          <span class="tag">node</span>
-        </div>
-
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success">Close</button>
-      </footer>
-    </div>
-  </div>
-
-  <div id="project-5-modal" class="modal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Project title</p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <p class="image is-3by2">
-          <img src="img/project-5-cover.png" alt="">
-        </p>
-
-        <div class="content">
-          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 ex ea commodo
-          consequat.
-        </div>
-
-        <div class="tags">
-          <span class="tag">angular</span>
-          <span class="tag">mongo</span>
-          <span class="tag">typscript</span>
-          <span class="tag">node</span>
-        </div>
-
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success">Close</button>
-      </footer>
-    </div>
-  </div>
-
-  <div id="project-6-modal" class="modal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">Project title</p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <p class="image is-3by2">
-          <img src="img/project-6-cover.png" alt="">
-        </p>
-
-        <div class="content">
-          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 ex ea commodo
-          consequat.
-        </div>
-
-        <div class="tags">
-          <span class="tag">angular</span>
-          <span class="tag">mongo</span>
-          <span class="tag">typscript</span>
-          <span class="tag">node</span>
-        </div>
-
-      </section>
-      <footer class="modal-card-foot">
-        <button class="button is-success">Close</button>
-      </footer>
-    </div>
-  </div>
-
   <footer class="footer">
     <div class="content has-text-centered">
       <p>

src/package-lock.json

@@ -2102,7 +2102,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -2517,7 +2518,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2573,6 +2575,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2616,12 +2619,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },