about and presentation
This commit is contained in:
parent
a997db2b42
commit
b225deace1
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import ImagesWithDescription from './ImagesWithDescription';
|
||||
import Display from './Display';
|
||||
import Presentation from './Presentation';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
|
|
@ -7,26 +8,21 @@ import ImagesWithDescription from './ImagesWithDescription';
|
|||
export default function About() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ImagesWithDescription
|
||||
images={[
|
||||
{
|
||||
image: 'urbex.webp',
|
||||
title: 'Explorations',
|
||||
description: `Amateurs d'escalade et de sensations
|
||||
fortes, nous cherchons des lieux abandonnés ou
|
||||
difficiles d'accès.`,
|
||||
}, {
|
||||
image: 'cliff.jpeg',
|
||||
title: 'Découvertes',
|
||||
description: 'De beaux paysages, tu connais.',
|
||||
}, {
|
||||
image: 'eye.webp',
|
||||
title: 'Rencontres',
|
||||
description: `Notre voyage sera avant tout rythmé de
|
||||
nouveaux visages. Sans personne pour nous aider
|
||||
ce voyage aurait peu de sens.`,
|
||||
},
|
||||
]}/>
|
||||
<Display text='Qui sommes nous ?' />
|
||||
<hr />
|
||||
<Presentation
|
||||
name='Yoan'
|
||||
status='Ingénieur en Informatique – Apprenti vagabond'
|
||||
description={<p>J’ai décidé de faire ce voyage en Europe pour
|
||||
découvrir le monde, rencontrerdes gens différents et quitter mes
|
||||
routines.<br />
|
||||
Je ne suis jamais sortit hors de la France.<br />
|
||||
Apres avoir reçut mon diplôme de l’école 42, le moment était
|
||||
venu de quitter mon confort et mes habitudes.<br />
|
||||
J’ai quitter mon job d’ingénieur logiciel et mon logement sur
|
||||
Paris pour vivre ces péripéties.</p>}
|
||||
image='yoan.webp'
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import Footer from './Footer';
|
||||
import Display from './Display';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
|
|
@ -7,48 +7,7 @@ import Footer from './Footer';
|
|||
export default function Blog() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Footer
|
||||
elements={[
|
||||
{
|
||||
title: 'À propos',
|
||||
description: `Nous sommes deux jeunes de 23 ans à la
|
||||
recherche d'aventures et de réponses à travers
|
||||
l'Europe`,
|
||||
links: [
|
||||
{
|
||||
to: '/about',
|
||||
text: 'Plus de détails',
|
||||
},
|
||||
],
|
||||
}, {
|
||||
title: 'Nous contacter',
|
||||
description:
|
||||
<ul>
|
||||
<li>curious.roamers@gmail.com</li>
|
||||
<li>06 37 11 28 22</li>
|
||||
</ul>,
|
||||
links: [
|
||||
{
|
||||
to: '/contact',
|
||||
text: `Autres façons de nous contacter`,
|
||||
},
|
||||
],
|
||||
}, {
|
||||
title: 'Donation',
|
||||
description: `Si vous voulez contribuer à financer nos
|
||||
futurs voyages ou simplement nous aider financièrement
|
||||
:)`,
|
||||
links: [
|
||||
{
|
||||
to: 'https://paypal.me/ygarrot',
|
||||
text: 'Paypal',
|
||||
}, {
|
||||
to: 'https://tipeee.com/curious-roamers',
|
||||
text: 'Tipeee',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}/>
|
||||
<Display text='Blog' />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import Quote from './Quote';
|
||||
import Display from './Display';
|
||||
|
||||
/**
|
||||
* @return {jsx} The homepage component
|
||||
|
|
@ -7,13 +7,7 @@ import Quote from './Quote';
|
|||
export default function Contact() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Quote
|
||||
quote={'Not all those who wander are lost.'}
|
||||
author={'J. R. R. Tolkien'}
|
||||
description={`
|
||||
On veut quitter notre confort pendant un moment.
|
||||
Briser nos habitudes et nos ancrages.
|
||||
Faire place à la nouveauté et l'incompréhension.`}/>
|
||||
<Display text='Nous contacter' />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
interface DisplayProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {jsx} The root component
|
||||
*/
|
||||
export default function Display(
|
||||
{text}: DisplayProps) {
|
||||
const containerStyle = {
|
||||
height: `200px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div
|
||||
className='container
|
||||
w-75 d-flex justify-content-center align-items-center
|
||||
display-4 font-weight-bold'
|
||||
style={containerStyle}>
|
||||
{text}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
|
||||
interface PresentationProps {
|
||||
name: string;
|
||||
status: string;
|
||||
description: any;
|
||||
image: string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @return {jsx} The root component
|
||||
*/
|
||||
export default function Presentation(
|
||||
{name, status, description, image}: PresentationProps) {
|
||||
const imageDivStyle = {
|
||||
width: '33%',
|
||||
};
|
||||
|
||||
const imageStyle = {
|
||||
width: '250px',
|
||||
height: '250px',
|
||||
};
|
||||
|
||||
const style = {
|
||||
width: '67%',
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='container d-flex py-5 justify-content-between'>
|
||||
<div style={imageDivStyle}>
|
||||
<img className='rounded-circle'
|
||||
style={imageStyle}
|
||||
src={'/static/images/' + image}></img>
|
||||
</div>
|
||||
<div style={style}>
|
||||
<h3 className='font-weight-bold'>
|
||||
{name}
|
||||
</h3>
|
||||
<small>{status}</small>
|
||||
<br />
|
||||
<br />
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<title>Curious Roamers</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue