Multiples Choses
> Création d'un composant MainCard > Création d'un composant Menu > Transformation des expériences en Composant React
38
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);
|
||||
}
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
3
src/_sass/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "main.scss";
|
||||
@import "icon.scss";
|
||||
@import "dark-theme.scss";
|
44
src/components/ExperienceCard/ExperienceCard.js
Normal file
@ -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 );
|
4
src/components/ExperienceCard/ExperienceCard.scss
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
.component-experienceCard-component{
|
||||
|
||||
}
|
2
src/components/ExperienceCard/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import ExperienceCard from "./ExperienceCard"
|
||||
export default ExperienceCard;
|
121
src/components/MainCard/MainCard.js
Normal file
@ -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 );
|
4
src/components/MainCard/MainCard.scss
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
.component-main-card{
|
||||
|
||||
}
|
2
src/components/MainCard/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import mainCard from "./mainCard"
|
||||
export default mainCard;
|
32
src/components/MenuComponent/MenuComponent.js
Normal file
@ -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 );
|
4
src/components/MenuComponent/MenuComponent.scss
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
.component-menu-component{
|
||||
|
||||
}
|
2
src/components/MenuComponent/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import MenuComponent from "./MenuComponent"
|
||||
export default MenuComponent;
|
BIN
src/images/linode_logo.png
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
src/images/logos/harvest.fr.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/images/logos/michelin.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
src/images/logos/www.iut-clermont.png
Normal file
After Width: | Height: | Size: 6.0 KiB |
BIN
src/images/made-with-bulma.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
src/images/mail.jpg
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
src/images/portfolio/admPhotos.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
src/images/portfolio/computerNonSense.jpg
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
src/images/portfolio/vinyls.jpg
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/images/poweredByInfomaniak.bmp
Normal file
After Width: | Height: | Size: 8.0 KiB |
BIN
src/images/profile.jpg
Normal file
After Width: | Height: | Size: 516 KiB |
BIN
src/images/profile_opt.jpg
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
src/images/profile_opt.png
Normal file
After Width: | Height: | Size: 169 KiB |