about and presentation

src/client/About.tsx

@@ -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
+			<Display text='Qui sommes nous ?' />
-				images={[
+			<hr />
-					{
+			<Presentation
-						image: 'urbex.webp',
+				name='Yoan'
-						title: 'Explorations',
+				status='Ingénieur en Informatique – Apprenti vagabond'
-						description: `Amateurs d'escalade et de sensations 
+				description={<p>J’ai décidé de faire ce voyage en Europe pour
-							fortes, nous cherchons des lieux abandonnés ou 
+				découvrir le monde, rencontrerdes gens différents et quitter mes
-							difficiles d'accès.`,
+				routines.<br />
-					}, {
+				Je ne suis jamais sortit hors de la France.<br />
-						image: 'cliff.jpeg',
+				Apres avoir reçut mon diplôme de l’école 42, le moment était
-						title: 'Découvertes',
+				venu de quitter mon confort et mes habitudes.<br />
-						description: 'De beaux paysages, tu connais.',
+				J’ai quitter mon job d’ingénieur logiciel et mon logement sur
-					}, {
+				Paris pour vivre ces péripéties.</p>}
-						image: 'eye.webp',
+				image='yoan.webp'
-						title: 'Rencontres',
+			/>
-						description: `Notre voyage sera avant tout rythmé de 
-							nouveaux visages. Sans personne pour nous aider 
-							ce voyage aurait peu de sens.`,
-					},
-				]}/>
 		</React.Fragment>
 	);
 }

src/client/Blog.tsx

@@ -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
+			<Display text='Blog' />
-				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',
-							},
-						],
-					},
-				]}/>
 		</React.Fragment>
 	);
 }

src/client/Contact.tsx

@@ -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
+			<Display text='Nous contacter' />
-				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.`}/>
 		</React.Fragment>
 	);
 }

src/client/Display.tsx

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

src/client/Presentation.tsx

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

views/index.ejs

@@ -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>