Multiples Choses

> Création d'un composant MainCard
> Création d'un composant Menu
> Transformation des expériences en Composant React

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);
-  }
-}

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>
   );
 }

src/_sass/index.scss

@@ -0,0 +1,3 @@
+@import "main.scss";
+@import "icon.scss";
+@import "dark-theme.scss";

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 );

src/components/ExperienceCard/ExperienceCard.scss

@@ -0,0 +1,4 @@
+
+.component-experienceCard-component{
+    
+}

src/components/ExperienceCard/index.js

@@ -0,0 +1,2 @@
+import ExperienceCard from "./ExperienceCard"
+export default ExperienceCard;

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 );

src/components/MainCard/MainCard.scss

@@ -0,0 +1,4 @@
+
+.component-main-card{
+    
+}

src/components/MainCard/index.js

@@ -0,0 +1,2 @@
+import mainCard from "./mainCard"
+export default mainCard;

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 );

src/components/MenuComponent/MenuComponent.scss

@@ -0,0 +1,4 @@
+
+.component-menu-component{
+    
+}

src/components/MenuComponent/index.js

@@ -0,0 +1,2 @@
+import MenuComponent from "./MenuComponent"
+export default MenuComponent;