Ajout des Projets

src/App.js

@@ -3,12 +3,14 @@ import './_sass/index.scss';
 
 import MenuComponent from './components/MenuComponent/index';
 import MainCard from './components/MainCard/MainCard';
+import ProjectsCard from './components/ProjectsCard';
 
 function App() {
   return (
     <div className="App">
       <MenuComponent/>
       <MainCard/>
+      <ProjectsCard/>
     </div>
   );
 }

src/components/ProjectCard/ProjectCard.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import './ProjectCard.scss'
+
+export default class ProjectCard extends Component {
+
+    render() {
+      return <div class="tile is-vertical is-4">
+              <div class="tile">
+                  <div class="tile is-parent">
+                      <article class="tile is-child notification is-info">
+                          <p class="title">{this.props.title}</p>
+                          <a href={this.props.href} rel="noopener">
+                              <figure class="image is-4by3">
+                                  <img src={this.props.image}
+                                      alt={this.props.imgAlt}
+                                      title={this.props.imgTitle} />
+                              </figure>
+                          </a>
+                      </article>
+                  </div>
+              </div>
+          </div>;
+    }
+  }

src/components/ProjectCard/index.js

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

src/components/ProjectsCard/ProjectsCard.js

@@ -0,0 +1,45 @@
+import React, {Component} from '../../../node_modules/react';
+import './ProjectsCard.scss'
+
+import ProjectCard from '../ProjectCard/index';
+
+import imagePortfolioDev from '../../images/portfolio/vinyls.jpg';
+import imageMichelin from '../../images/portfolio/computerNonSense.jpg';
+import imagePortfolioPhoto from '../../images/portfolio/admPhotos.jpg';
+
+export default class ProjectsCard extends Component {
+
+    render() {
+      return <section id="projets" class="hero is-primary">
+      <div class="hero-body">
+          <div class="container">
+              <div class="tile is-ancestor">
+                  <ProjectCard
+                    title="Portfolio Developpeur"
+                    href="//dev.dumas.cc"
+                    imgAlt="Des mains parcourant des vinyles sur un étalage"
+                    imgTitle="Photo by Florencia Viadana on Unsplash"
+                    image={imagePortfolioDev}
+                    />
+
+                    <ProjectCard
+                    title="IOT@Michelin"
+                    href="https://prezi.com/m/o8ey8mmpnkvp/"
+                    imgAlt="Une photo d'un micro ordinateur dans ma main"
+                    imgTitle="Une photo d'un micro ordinateur dans ma main"
+                    image={imageMichelin}
+                    />
+
+                    <ProjectCard
+                    title="adm.photos"
+                    href="//adm.photos"
+                    imgAlt="Une photo du village de mon enfance"
+                    imgTitle="Une photo du village de mon enfance"
+                    image={imagePortfolioPhoto}
+                    />
+              </div>
+          </div>
+      </div>
+  </section>;
+    }
+  }

src/components/ProjectsCard/index.js

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

src/components/Template/Template.js

@@ -0,0 +1,9 @@
+import React, {Component} from 'react';
+import './Template.scss'
+
+export default class Template extends Component {
+
+    render() {
+      return ;
+    }
+  }

src/components/Template/index.js

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