Skip to content
This repository has been archived by the owner on Jan 3, 2025. It is now read-only.

Commit

Permalink
Fix: Projects Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@QuentG
QuentG committed Apr 3, 2019
1 parent 90ced02 commit 41802a9
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 47 deletions.
50 changes: 23 additions & 27 deletions src/Components/Contact/Contact.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, {Component} from 'react'

import '../../css/Contact.css'

class Contact extends Component {
constructor(props){
super(props)
this.state = {

}

}
Expand All @@ -14,16 +16,15 @@ class Contact extends Component {
}
render(){
return(
<section className="section-padding">
<div className="container mt-4">
<div className="row">
<div className="col-md-12">
<h2 className="heading-title">Contacter moi</h2>
<h2 >Contacter moi</h2>
</div>
</div>

<div className="row mt-5">
<div className="col-md-6 col-sm-6 mt-3 wow fadeInLeft">
<div className="col-md-6 col-sm-6 mt-2 wow fadeInLeft">
<div>
<p>Vous pouvez me contacter via le formulaire ci-contre si vous avez une question à propos de mon travail, un projet que vous aimeriez réaliser ou autres n'hésitez pas. Je vous répondrai le plus vite possible.</p>
<div>
Expand All @@ -36,34 +37,29 @@ class Contact extends Component {
</div>

<div className="col-md-6 col-sm-6 wow fadeInRight">
<div className="contact-form">
<div className="contact-box">
<div className="form-group">
<label>Nom</label>
<input name="nom" type="text" className="form-control"/>
</div>

<div className="form-group">
<label>Adresse mail</label>
<input name="email" type="text" className="form-control"/>
</div>

<div className="form-group">
<label>Message</label>
<textarea name="message" className="form-control"></textarea>
</div>
<div className="form-group">
<label>Nom</label>
<input name="nom" type="text" className="form-control"/>
</div>

<div className="row">
<div className="col-md-12">
<button name="btnContact" onClick={(e) => this.handleSubmit(e)} className="btn btn-primary">Envoyer</button>
</div>
</div>
</div>
<div className="form-group">
<label>Adresse mail</label>
<input name="email" type="text" className="form-control"/>
</div>

<div className="form-group">
<label>Message</label>
<textarea name="message" className="form-control"></textarea>
</div>

<div className="row">
<div className="col-md-12">
<button name="btnContact" onClick={(e) => this.handleSubmit(e)} className="btn btn-primary btn-block">Envoyer</button>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
}
Expand Down
67 changes: 47 additions & 20 deletions src/Components/Projects/Projects.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Tabs, Tab, Grid, Cell, Card, CardTitle, CardText, CardActions, Button, } from 'react-mdl';
import React, { Component } from 'react'
import { Tabs, Tab, Grid, Cell, Card, CardTitle, CardText, CardActions, Button, } from 'react-mdl'

class Projects extends Component {
constructor(props) {
Expand All @@ -15,19 +15,25 @@ class Projects extends Component {
return(
<div className="row d-flex">
<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >E-Commerce-Vg</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url() center / cover'}} >E-Commerce-Vg</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description : Projet scolaire qui a permis de mettre en pratique les différentes technologies web apprissent au cours de ma première année.
<br />
<br />
Technos utilisés : HTML, CSS, Bootstrap, JS, PHP, MySql.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/E-Commerce-Vg" target="_blank">GitHub</Button>
</CardActions>
</Card>

<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >Flocasia</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url() center / cover'}} >Flocasia</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description : Réalisation d'un site pour le projet de jeu vidéo Flocasia, avec l'intégration d'un forum réalisé avec PHP et Mysql.
<br />
<br />
Technos utilisés : HTML, CSS, BOOTSTRAP, PHP, Mysql.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/Flocasia" target="_blank">GitHub</Button>
Expand All @@ -36,9 +42,12 @@ class Projects extends Component {


<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >Httpstatus</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url() center / cover'}} >Httpstatus</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description : Site de monitoring de sites web, avec une mise a jour automatique du statut des sites + conservation de l'historique.
<br />
<br />
Technos utilisés : HTML, CSS, BOOTSTRAP, PHP, MariaDB, Supervisor.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/Httpstatus" target="_blank">GitHub</Button>
Expand All @@ -50,19 +59,25 @@ class Projects extends Component {
return (
<div className="row d-flex">
<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} > Sylab</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://cdn-images-1.medium.com/max/1600/1*nR9AG7V-YPWFd7A6GYRtEQ.png) center / cover'}} > Sylab</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description :
<br />
<br />
Technos utilisés : HTML, CSS, Bootstrap, JQuery, PHP, Symfony 4.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/Sylab" target="_blank">GitHub</Button>
</CardActions>
</Card>

<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >LaboSymfony</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://cdn-images-1.medium.com/max/1600/1*nR9AG7V-YPWFd7A6GYRtEQ.png) center / cover'}} >LaboSymfony</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description : Projet de découverte du framework Symfony, sur la denière version actuelle de Symfony 4.
<br />
<br />
Technos utilisés : HTML, Bootstrap, PHP, Symfony 4.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/LaboSymfony" target="_blank">GitHub</Button>
Expand All @@ -74,19 +89,25 @@ class Projects extends Component {
return (
<div className="row d-flex">
<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >Ask-me-something</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://static.webpunks.co/uploads/2016/08/nodejs-modules-webentwicklung-webdevelopment-webpunks.jpg) center / cover'}} >Ask-me-something</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description : Réalisation d'un quizz en CLI (Command Line Interface) qui récupére les questions/réponses depuis une Api.
<br />
<br />
Technos utilisés : JS, NodeJS, API, Sqlite3.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/NodeJS_Project" target="_blank">GitHub</Button>
</CardActions>
</Card>

<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >Todolist</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://static.webpunks.co/uploads/2016/08/nodejs-modules-webentwicklung-webdevelopment-webpunks.jpg) center / cover'}} >Todolist</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Description : Réalisation d'une todolist sous forme d'Api en utilisant le framework express.
<br />
<br />
Technos utilisés : JS, NodeJS, ExpressJS, Handlebars, Sqlite3.
</CardText>
<CardActions border>
<Button colored href="https://github.com/ArnaudDauguen/NodeJs-TodoList" target="_blank">GitHub</Button>
Expand All @@ -98,19 +119,25 @@ class Projects extends Component {
return (
<div className="row d-flex">
<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >Blogger</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto/gigs/4445319/original/58b332866815381e7c758143f8bc8ece0de96edd/create-reusable-react-js-components.png) center / cover'}} >Blogger</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Decription : Réalisation d'un blog pour découvrire le framework ReactJS.
<br/>
<br/>
Technos utilisés : HTML, CSS, ReactJS, API.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/Blogger" target="_blank">GitHub</Button>
</CardActions>
</Card>

<Card shadow={5} style={{minWidth: '450', margin: 'auto'}}>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://xtnotes-1255646395.coshk.myqcloud.com/images/react-1.svg) center / cover'}} >quentingans.fr</CardTitle>
<CardTitle style={{color: '#fff', height: '180px', background: 'url(https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto/gigs/4445319/original/58b332866815381e7c758143f8bc8ece0de96edd/create-reusable-react-js-components.png) center / cover'}} >quentingans.fr</CardTitle>
<CardText>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
Decription : Mon site vitrine développé avec le framework ReactJS.
<br/>
<br/>
Technos utilisés : HTML, CSS, Bootstrap, ReactJS, Firebase.
</CardText>
<CardActions border>
<Button colored href="https://github.com/QuentG/quentingans.fr" target="_blank">GitHub</Button>
Expand Down
Empty file added src/css/Contact.css
View file
Empty file.

0 comments on commit 41802a9

Please sign in to comment.