diff --git a/.eslintcache b/.eslintcache
index 2c4bf52..ceb2fe6 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/index.js":"1","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/App.js":"2","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/reportWebVitals.js":"3"},{"size":500,"mtime":1607637518763,"results":"4","hashOfConfig":"5"},{"size":149,"mtime":1607640016707,"results":"6","hashOfConfig":"5"},{"size":362,"mtime":1607637518766,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"n0bckm",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/index.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/App.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/reportWebVitals.js",[]]
\ No newline at end of file
+[{"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/index.js":"1","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/App.js":"2","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/reportWebVitals.js":"3","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/menuComponent/index.js":"4","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/menuComponent/menuComponent.js":"5","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/MenuComponent/index.js":"6","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/MenuComponent/MenuComponent.js":"7","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/mainCard/mainCard.js":"8","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/MainCard/MainCard.js":"9","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/ExperienceCard/index.js":"10","/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/ExperienceCard/ExperienceCard.js":"11"},{"size":500,"mtime":1607637518763,"results":"12","hashOfConfig":"13"},{"size":302,"mtime":1607641313859,"results":"14","hashOfConfig":"13"},{"size":362,"mtime":1607637518766,"results":"15","hashOfConfig":"13"},{"size":74,"mtime":1607640746796,"results":"16","hashOfConfig":"13"},{"size":681,"mtime":1607640746796,"results":"17","hashOfConfig":"13"},{"size":74,"mtime":1607640746796,"results":"18","hashOfConfig":"13"},{"size":1048,"mtime":1607640967894,"results":"19","hashOfConfig":"13"},{"size":632,"mtime":1607641188004,"results":"20","hashOfConfig":"13"},{"size":6488,"mtime":1607643265047,"results":"21","hashOfConfig":"13"},{"size":77,"mtime":1607642019704,"results":"22","hashOfConfig":"13"},{"size":1524,"mtime":1607642977040,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"n0bckm",{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"41"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/index.js",[],["48","49"],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/App.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/reportWebVitals.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/menuComponent/index.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/menuComponent/menuComponent.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/MenuComponent/index.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/MenuComponent/MenuComponent.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/mainCard/mainCard.js",[],["50","51"],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/MainCard/MainCard.js",["52"],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/ExperienceCard/index.js",[],"/Users/adamas/adm.ink/dev/anthony-dumas.fr/anthony-dumas.fr/src/components/ExperienceCard/ExperienceCard.js",["53"],{"ruleId":"54","replacedBy":"55"},{"ruleId":"56","replacedBy":"57"},{"ruleId":"54","replacedBy":"58"},{"ruleId":"56","replacedBy":"59"},{"ruleId":"60","severity":1,"message":"61","line":28,"column":35,"nodeType":"62","endLine":28,"endColumn":82},{"ruleId":"63","severity":1,"message":"64","line":4,"column":5,"nodeType":"65","messageId":"66","endLine":4,"endColumn":10},"no-native-reassign",["67"],"no-negated-in-lhs",["68"],["67"],["68"],"jsx-a11y/img-redundant-alt","Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop.","JSXOpeningElement","no-unused-vars","'title' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index e9b8457..be57d9a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,14 @@
 import './App.css';
-import './_sass/main.scss';
+import './_sass/index.scss';
+
+import MenuComponent from './components/MenuComponent/index';
+import MainCard from './components/MainCard/MainCard';
 
 function App() {
   return (
     <div className="App">
-      
+      <MenuComponent/>
+      <MainCard/>
     </div>
   );
 }
diff --git a/src/_sass/index.scss b/src/_sass/index.scss
new file mode 100644
index 0000000..b752e2a
--- /dev/null
+++ b/src/_sass/index.scss
@@ -0,0 +1,3 @@
+@import "main.scss";
+@import "icon.scss";
+@import "dark-theme.scss";
\ No newline at end of file
diff --git a/src/components/ExperienceCard/ExperienceCard.js b/src/components/ExperienceCard/ExperienceCard.js
new file mode 100644
index 0000000..9cebb4f
--- /dev/null
+++ b/src/components/ExperienceCard/ExperienceCard.js
@@ -0,0 +1,44 @@
+import React, {Component} from '../../../node_modules/react';
+import './ExperienceCard.scss'
+
+let title = "Default";
+
+// import { connect } from "react-redux";
+// import { bindActionCreators } from "redux";
+// import * as MenuComponentActions from "../../store/MenuComponent/actions";
+
+export default class ExperienceCard extends Component {
+    // constructor(props) {
+    //     super(props);
+    //     this.state = {};
+    // }
+    render() {
+      return <div class="card-content">
+      <div class="media">
+          <div class="media-left">
+              <a href={this.props.lienLogo}>
+                  <figure class="image is-48x48">
+                      <img src={this.props.logo} alt="Logo Entreprise"/>
+                  </figure>
+              </a>
+          </div>
+          <div class="media-content">
+              <p class="title is-4">{this.props.title}</p>
+              <p class="subtitle is-6">{this.props.nomEntreprise} - {this.props.lieuEntreprise} - ({this.props.date})</p>
+              <div class="tags">
+                {this.props.tags.map(function(name, index){
+                    return <span key={ index } class="tag">{name}</span>;
+                  })}
+              </div>
+          </div>
+      </div>
+      <div class="content">
+            {this.props.descriptionEmploi}
+      </div>
+  </div>
+    }
+  }
+// export default connect(
+//     ({ MenuComponent }) => ({ ...MenuComponent }),
+//     dispatch => bindActionCreators({ ...MenuComponentActions }, dispatch)
+//   )( MenuComponent );
\ No newline at end of file
diff --git a/src/components/ExperienceCard/ExperienceCard.scss b/src/components/ExperienceCard/ExperienceCard.scss
new file mode 100644
index 0000000..48eef73
--- /dev/null
+++ b/src/components/ExperienceCard/ExperienceCard.scss
@@ -0,0 +1,4 @@
+
+.component-experienceCard-component{
+    
+}
\ No newline at end of file
diff --git a/src/components/ExperienceCard/index.js b/src/components/ExperienceCard/index.js
new file mode 100644
index 0000000..4fb815a
--- /dev/null
+++ b/src/components/ExperienceCard/index.js
@@ -0,0 +1,2 @@
+import ExperienceCard from "./ExperienceCard"
+export default ExperienceCard;
diff --git a/src/components/MainCard/MainCard.js b/src/components/MainCard/MainCard.js
new file mode 100644
index 0000000..26af19e
--- /dev/null
+++ b/src/components/MainCard/MainCard.js
@@ -0,0 +1,121 @@
+import React, {Component} from '../../../node_modules/react';
+import ExperienceCard from '../ExperienceCard/index';
+
+import './MainCard.scss'
+import photoProfil from '../../images/profile_opt.png';
+import michelinLogo from '../../images/logos/michelin.png';
+import iutClermontLogo from '../../images/logos/www.iut-clermont.png';
+import harvestLogo from '../../images/logos/harvest.fr.png';
+
+// import { connect } from "react-redux";
+// import { bindActionCreators } from "redux";
+// import * as mainCardActions from "../../store/mainCard/actions";
+export default class MainCard extends Component {
+    // constructor(props) {
+    //     super(props);
+    //     this.state = {};
+    // }
+    render() {
+      return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
+        <div class="hero-body">
+          <div class="container">
+              <div class="columns">
+                  <div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
+                  <div id="photosAndButtons" class="column is-3-widescreen is-3-tablet">
+                      <div class="card">
+                          <div class="card-image">
+                              <figure id="photoProfil" class="image">
+                                  <img src={photoProfil} alt="Une Photo de moi"/>
+                              </figure>
+                          </div>
+                          <div class="card-content">
+                              <div class="media">
+                                  <div class="media-content">
+                                      <p id="buttonsUnderPhoto" class="buttons are-large ">
+                                          <a class="button" rel="noopener" href="https://github.com/AdamasFR"
+                                               aria-label="Profil Github">
+                                              <span class="icon is-large">
+                                                  <i class="fab icon-github-alt"></i>
+                                              </span>
+                                          </a>
+                                          <a class="button" rel="noopener"
+                                              href="https://www.linkedin.com/in/anthonyyvondumas/" >
+                                              <span class="icon" aria-label="Profil LinkedIn">
+                                                  <i class="fab icon-linke-square"></i>
+                                              </span>
+                                          </a>
+                                          <a class="button" rel="noopener"
+                                              href="https://www.twitter.com/anthony__dumas"
+                                              aria-label="Profil Twitter" >
+                                              <span class="icon">
+                                                  <i class="fab icon-twit"></i>
+                                              </span>
+                                          </a>
+                                      </p>
+                                      <p id="boutonCV" class="buttons are-large">
+                                          <a class="button is-fullwidth" rel="noopener"
+                                              href="./asset/anthony-dumas-cv.pdf" >
+                                              <span class="icon">
+                                                  <i class="fab icon-file-pdf-o"></i>
+                                              </span>
+                                              <span>Mon CV</span>
+                                          </a>
+                                      </p>
+                                      <p>
+                                          <p class="displayOnlyOnPrint">Anthony Dumas</p>
+                                          <p class="displayOnlyOnPrint">anthony[arobase]dumas.cc</p>
+                                          <p id="mailWhenNoJavascript" class="dontPrint"><noscript>anthony[arobase]dumas.cc</noscript></p>
+                                      </p>
+                                  </div>
+                              </div>
+
+                              <div class="content">
+
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="column is-7" id="experiences">
+                      <span class="title">Experience</span>
+                      <ExperienceCard 
+                      nomEntreprise="Harvest"
+                      lieuEntreprise="Clermont-Ferrand"
+                      descriptionEmploi="Développement de simulateurs bancaires responsives."
+                      title="Développeur Full Stack"
+                      date="depuis 2016"
+                      lienLogo="https://www.harvest.fr"
+                      logo={harvestLogo}
+                      tags={["Java EE","Angular","OpenAPI","jQuery","Spring"]}/>
+                      
+                      <ExperienceCard 
+                      nomEntreprise="Michelin"
+                      lieuEntreprise="Clermont-Ferrand"
+                      descriptionEmploi="Stage de fin d'étude DUT, etude du marché des objets connectés, création d'un prototype embarqué."
+                      title="Développeur Internet des Objets"
+                      date="2015"
+                      lienLogo="https://www.michelin.fr"
+                      logo={michelinLogo}
+                      tags={["MongoDB","Node.js","Word","Powerpoint"]}/>
+
+                      <span class="title">Education</span>
+
+                      <ExperienceCard 
+                      nomEntreprise="IUT du Puy en Velay"
+                      lieuEntreprise="Le Puy en Velay"
+                      descriptionEmploi="Programmation 3D temps réel, Web, infographie 3D, retouche d'image."
+                      title="DUT Informatique - Imagerie Numérique"
+                      date="Promotion 2015"
+                      lienLogo="https://www.iut-clermont.fr"
+                      logo={iutClermontLogo}
+                      tags={["Unity","3DSMax","Photoshop","C++","Python","Web Design"]}/>
+                  </div>
+              </div>
+          </div>
+          </div>
+  </section>;
+    }
+  }
+// export default connect(
+//     ({ mainCard }) => ({ ...mainCard }),
+//     dispatch => bindActionCreators({ ...mainCardActions }, dispatch)
+//   )( mainCard );
\ No newline at end of file
diff --git a/src/components/MainCard/MainCard.scss b/src/components/MainCard/MainCard.scss
new file mode 100644
index 0000000..a7125a5
--- /dev/null
+++ b/src/components/MainCard/MainCard.scss
@@ -0,0 +1,4 @@
+
+.component-main-card{
+    
+}
\ No newline at end of file
diff --git a/src/components/MainCard/index.js b/src/components/MainCard/index.js
new file mode 100644
index 0000000..64ec4a3
--- /dev/null
+++ b/src/components/MainCard/index.js
@@ -0,0 +1,2 @@
+import mainCard from "./mainCard"
+export default mainCard;
diff --git a/src/components/MenuComponent/MenuComponent.js b/src/components/MenuComponent/MenuComponent.js
new file mode 100644
index 0000000..2f58470
--- /dev/null
+++ b/src/components/MenuComponent/MenuComponent.js
@@ -0,0 +1,32 @@
+import React, {Component} from '../../../node_modules/react';
+import './MenuComponent.scss'
+
+// import { connect } from "react-redux";
+// import { bindActionCreators } from "redux";
+// import * as MenuComponentActions from "../../store/MenuComponent/actions";
+let title = "Anthony Dumas";
+let jobTitle = "Développeur Full Stack";
+export default class MenuComponent extends Component {
+    // constructor(props) {
+    //     super(props);
+    //     this.state = {};
+    // }
+    render() {
+      return <section id="menu" class="hero is-primary dontPrint is-bold">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title">
+                  {title}
+                </h1>
+                <h2 class="subtitle">
+                  {jobTitle}
+                </h2>
+            </div>
+        </div>
+    </section>;
+    }
+  }
+// export default connect(
+//     ({ MenuComponent }) => ({ ...MenuComponent }),
+//     dispatch => bindActionCreators({ ...MenuComponentActions }, dispatch)
+//   )( MenuComponent );
\ No newline at end of file
diff --git a/src/components/MenuComponent/MenuComponent.scss b/src/components/MenuComponent/MenuComponent.scss
new file mode 100644
index 0000000..f998204
--- /dev/null
+++ b/src/components/MenuComponent/MenuComponent.scss
@@ -0,0 +1,4 @@
+
+.component-menu-component{
+    
+}
\ No newline at end of file
diff --git a/src/components/MenuComponent/index.js b/src/components/MenuComponent/index.js
new file mode 100644
index 0000000..6daca6a
--- /dev/null
+++ b/src/components/MenuComponent/index.js
@@ -0,0 +1,2 @@
+import MenuComponent from "./MenuComponent"
+export default MenuComponent;
diff --git a/src/images/linode_logo.png b/src/images/linode_logo.png
new file mode 100644
index 0000000..c468785
Binary files /dev/null and b/src/images/linode_logo.png differ
diff --git a/src/images/logos/harvest.fr.png b/src/images/logos/harvest.fr.png
new file mode 100644
index 0000000..04502e2
Binary files /dev/null and b/src/images/logos/harvest.fr.png differ
diff --git a/src/images/logos/michelin.png b/src/images/logos/michelin.png
new file mode 100644
index 0000000..291b24e
Binary files /dev/null and b/src/images/logos/michelin.png differ
diff --git a/src/images/logos/www.iut-clermont.png b/src/images/logos/www.iut-clermont.png
new file mode 100644
index 0000000..062b4df
Binary files /dev/null and b/src/images/logos/www.iut-clermont.png differ
diff --git a/src/images/made-with-bulma.png b/src/images/made-with-bulma.png
new file mode 100644
index 0000000..cb6ee3c
Binary files /dev/null and b/src/images/made-with-bulma.png differ
diff --git a/src/images/mail.jpg b/src/images/mail.jpg
new file mode 100644
index 0000000..2c03d48
Binary files /dev/null and b/src/images/mail.jpg differ
diff --git a/src/images/portfolio/admPhotos.jpg b/src/images/portfolio/admPhotos.jpg
new file mode 100644
index 0000000..d6af848
Binary files /dev/null and b/src/images/portfolio/admPhotos.jpg differ
diff --git a/src/images/portfolio/computerNonSense.jpg b/src/images/portfolio/computerNonSense.jpg
new file mode 100644
index 0000000..4e78887
Binary files /dev/null and b/src/images/portfolio/computerNonSense.jpg differ
diff --git a/src/images/portfolio/vinyls.jpg b/src/images/portfolio/vinyls.jpg
new file mode 100644
index 0000000..b6fd8f9
Binary files /dev/null and b/src/images/portfolio/vinyls.jpg differ
diff --git a/src/images/poweredByInfomaniak.bmp b/src/images/poweredByInfomaniak.bmp
new file mode 100644
index 0000000..57a2a62
Binary files /dev/null and b/src/images/poweredByInfomaniak.bmp differ
diff --git a/src/images/profile.jpg b/src/images/profile.jpg
new file mode 100644
index 0000000..382abd0
Binary files /dev/null and b/src/images/profile.jpg differ
diff --git a/src/images/profile_opt.jpg b/src/images/profile_opt.jpg
new file mode 100644
index 0000000..252a40b
Binary files /dev/null and b/src/images/profile_opt.jpg differ
diff --git a/src/images/profile_opt.png b/src/images/profile_opt.png
new file mode 100644
index 0000000..7fbfe58
Binary files /dev/null and b/src/images/profile_opt.png differ