mobile version done, need to add CV and put in production

public/css/style.css

@@ -35,6 +35,36 @@ img {
 	width: 25%;
 }
 
+.tile-mobile-element {
+	background-color: #000000;
+	display: inline-block;
+	vertical-align: top;
+	padding: 0;
+	margin: 0;
+	height: 25%;
+	width: 50%;
+}
+
+.tile-mobile-main {
+	background-color: #000000;
+	display: inline-block;
+	vertical-align: top;
+	padding: 0;
+	margin: 0;
+	height: 12.5%;
+	width: 100%;
+}
+
+.tile-mobile-downloadcv {
+	background-color: #000000;
+	display: inline-block;
+	vertical-align: top;
+	padding: 0;
+	margin: 0;
+	height: 15%;
+	width: 100%;
+}
+
 .tile-child {
 	display: inline-block;
 	vertical-align: top;

src/client/components/DesktopRoot.tsx

@@ -0,0 +1,225 @@
+import React, {useState, useEffect} from 'react';
+import Shader from './Shader';
+import WhoAmI from './WhoAmI';
+import Git from './Git';
+import DownloadCV from './DownloadCV';
+import ClickMe from './ClickMe';
+import Player from './Player';
+
+interface DesktopRootProps {
+	windowSize: number;
+}
+
+/**
+ * @return {jsx} The root component
+ */
+export default function DesktopRoot({windowSize}: DesktopRootProps) {
+	const [trigger, setTrigger] = useState(0);
+	const [content, setContent]: any = useState([]);
+	const [busy, setBusy]: any = useState(true);
+	const loader: Array<any> = [];
+
+	for (let i = 0; i < 5; i++) {
+		loader.push(
+			<div className='tile'>
+				<div
+					className='
+						tile-child
+						d-flex
+						flex-column
+						align-items-center
+						justify-content-center'>
+					<div className='d-inline loader'></div>
+				</div>
+			</div>);
+	}
+	loader.push(<div className='tile'><WhoAmI /></div>);
+	loader.push(
+		<div className='tile'>
+			<Git windowSize={windowSize} />
+		</div>);
+	for (let i = 0; i < 2; i++) {
+		loader.push(
+			<div className='tile'>
+				<div
+					className='
+						tile-child
+						d-flex
+						flex-column
+						align-items-center
+						justify-content-center'>
+					<div className='d-inline loader'></div>
+				</div>
+			</div>);
+	}
+	loader.push(
+		<div className='tile'>
+			<DownloadCV windowSize={windowSize} />
+		</div>);
+	loader.push(
+		<div className='tile'>
+			<ClickMe
+				windowSize={windowSize}
+				setTrigger={setTrigger}
+				setBusy={setBusy} />
+		</div>);
+	for (let i = 0; i < 5; i++) {
+		loader.push(
+			<div className='tile'>
+				<div
+					className='
+						tile-child
+						d-flex
+						flex-column
+						align-items-center
+						justify-content-center'>
+					<div className='d-inline loader'></div>
+				</div>
+			</div>);
+	}
+	const Shaders = [
+		'BaseRaymarching',
+		'Collapse',
+		'Droplets',
+		'Inception',
+		'Menstom',
+		'Torus',
+		'Triangle',
+		'BaseLattice',
+	];
+
+	const Sounds = [
+		'Collapse.mp3',
+		'Droplets.mp3',
+		'Heavy Ropes.mp3',
+		'Inception.mp3',
+		'Menstom.mp3',
+		'Speechless.mp3',
+		'Triangle.mp3',
+	];
+
+	useEffect(() => {
+		const newContent = [];
+		const randomContent = [];
+		const shadersRandom: Array<any> = [];
+		const imagesRandom: Array<any> = [];
+		const soundsRandom: Array<any> = [];
+
+		for (let i = 0; i < 3; i++) {
+			shadersRandom.push(Math.floor(Math.random() * 8));
+			while (shadersRandom.indexOf(
+				shadersRandom[shadersRandom.length - 1]) !=
+				shadersRandom.length - 1) {
+				shadersRandom[shadersRandom.length - 1] += 1;
+				if (shadersRandom[shadersRandom.length - 1] == 8) {
+					shadersRandom[shadersRandom.length - 1] = 1;
+				}
+			}
+		}
+		for (let i = 0; i < 3; i++) {
+			shadersRandom[i] =
+				<div className='tile'>
+					<Shader name={Shaders[shadersRandom[i]]} />
+				</div>;
+		}
+
+		for (let i = 0; i < 7; i++) {
+			imagesRandom.push(Math.floor(Math.random() * 12) + 1);
+			while (imagesRandom.indexOf(
+				imagesRandom[imagesRandom.length - 1]) !=
+				imagesRandom.length - 1) {
+				imagesRandom[imagesRandom.length - 1] += 1;
+				if (imagesRandom[imagesRandom.length - 1] == 13) {
+					imagesRandom[imagesRandom.length - 1] = 1;
+				}
+			}
+		}
+		for (let i = 0; i < 7; i++) {
+			imagesRandom[i] =
+				<div className='tile'>
+					<img
+						src={'/static/images/' +
+						imagesRandom[i].toString() +
+						'.jpg'}>
+					</img>
+				</div>;
+		}
+
+		for (let i = 0; i < 2; i++) {
+			soundsRandom.push(Math.floor(Math.random() * 7));
+		}
+		if (soundsRandom[0] == soundsRandom[1]) {
+			soundsRandom[1] += 1;
+			if (soundsRandom[1] == 7) {
+				soundsRandom[1] = 0;
+			}
+		}
+		soundsRandom[0] = Sounds[soundsRandom[0]];
+		soundsRandom[1] = Sounds[soundsRandom[1]];
+		for (let i = 0; i < soundsRandom.length; i++) {
+			soundsRandom[i] =
+				<div className='tile'>
+					<Player src={'/static/sounds/' + soundsRandom[i]}/>
+				</div>;
+		}
+
+		while (shadersRandom.length ||
+			imagesRandom.length ||
+			soundsRandom.length) {
+			const random = Math.floor(Math.random() * 4);
+			if (random == 0) {
+				if (shadersRandom.length > 0) {
+					randomContent.push(shadersRandom[0]);
+					shadersRandom.shift();
+				}
+			} else if (random == 1) {
+				if (soundsRandom.length > 0) {
+					randomContent.push(soundsRandom[0]);
+					soundsRandom.shift();
+				}
+			} else {
+				if (imagesRandom.length > 0) {
+					randomContent.push(imagesRandom[0]);
+					imagesRandom.shift();
+				}
+			}
+		}
+		newContent.push(randomContent[0]);
+		newContent.push(randomContent[1]);
+		newContent.push(randomContent[2]);
+		newContent.push(randomContent[3]);
+		newContent.push(randomContent[4]);
+		newContent.push(<div className='tile'><WhoAmI /></div>);
+		newContent.push(
+			<div className='tile'>
+				<Git windowSize={windowSize} />
+			</div>);
+		newContent.push(randomContent[5]);
+		newContent.push(randomContent[6]);
+		newContent.push(
+			<div className='tile'>
+				<DownloadCV windowSize={windowSize} />
+			</div>);
+		newContent.push(
+			<div className='tile'>
+				<ClickMe
+					windowSize={windowSize}
+					setTrigger={setTrigger}
+					setBusy={setBusy} />
+			</div>);
+		newContent.push(randomContent[7]);
+		newContent.push(randomContent[8]);
+		newContent.push(randomContent[9]);
+		newContent.push(randomContent[10]);
+		newContent.push(randomContent[11]);
+		setContent(newContent);
+		setBusy(false);
+	}, [trigger]);
+
+
+	return (
+		<div id='root'>
+			{busy ? loader : content}
+		</div>
+	);
+}

src/client/components/DownloadCV.tsx

@@ -8,16 +8,20 @@ interface DownloadCVProps {
  * @return {jsx} a presentation of me
  */
 export default function DownloadCV({windowSize}: DownloadCVProps) {
-	const [buttonClass, setButtonClass] = useState('');
+	const [topClass, setTopClass] = useState('');
+	const [bottomClass, setBottomClass] = useState('');
 
 	useEffect(() => {
 		if (window.innerWidth > 1200) {
-			setButtonClass('btn-lg');
+			setTopClass('btn-lg mb-3');
+			setBottomClass('btn-lg mt-3');
 		} else {
-			setButtonClass('');
+			setTopClass('mb-1');
+			setBottomClass('mt-1');
 		}
 	}, [windowSize]);
 
+
 	return (
 		<div
 			className='
@@ -31,8 +35,13 @@ export default function DownloadCV({windowSize}: DownloadCVProps) {
 				download
 				rel="noopener noreferrer"
 				target="_blank"
-				className={'d-inline btn btn-mine ' + buttonClass}>
-					Download my CV
+				className={'d-inline btn btn-mine ' + topClass}>
+					Download my Resume
+			</a>
+			<a
+				href='https://www.ouest-france.fr/bretagne/arzal-56190/arzal-gaetan-brochard-propose-une-deambulation-numerique-6949455'
+				className={'d-inline btn btn-mine ' + bottomClass}>
+					Newspaper Article
 			</a>
 		</div>
 	);

src/client/components/DownloadCVMobile.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+/**
+ * @return {jsx} a presentation of me
+ */
+export default function DownloadCVMobile() {
+	return (
+		<div
+			className='
+				tile-child d-flex
+				flex-column
+				align-items-center
+				justify-content-center'
+			id='downloadcv'>
+			<a
+				href='/static/pdfs/CV_Gaetan_Brochard_2020.pdf'
+				download
+				rel="noopener noreferrer"
+				target="_blank"
+				className='d-inline btn btn-mine mb-1'>
+					Download my Resume
+			</a>
+			<a
+				/* eslint-disable */
+				href='https://www.ouest-france.fr/bretagne/arzal-56190/arzal-gaetan-brochard-propose-une-deambulation-numerique-6949455'
+				/* eslint-enable */
+				className='d-inline btn btn-mine mt-1'>
+					Newspaper Article
+			</a>
+		</div>
+	);
+};

src/client/components/Git.tsx

@@ -5,7 +5,7 @@ interface GitProps {
 }
 
 /**
- * @return {jsx} a presentation of me
+ * @return {jsx} my git links
  */
 export default function Git({windowSize}: GitProps) {
 	const [topClass, setTopClass] = useState('');

src/client/components/GitMobile.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * @return {jsx} my git links
+ */
+export default function GitMobile() {
+	return (
+		<div
+			className='
+				tile-child d-flex
+				align-items-center
+				justify-content-center'
+			id='git'>
+			<a
+				href='https://git.gaetanbrochard.dev/gbrochar/expo-web'
+				className='d-inline btn btn-mine mr-1'>
+					This project&apos;s git
+			</a>
+			<br />
+			<a
+				href='https://git.gaetanbrochard.dev/gbrochar'
+				className='d-inline btn btn-mine ml-1'>
+					My git
+			</a>
+		</div>
+	);
+};

src/client/components/MobileRoot.tsx

@@ -0,0 +1,159 @@
+import React, {useState, useEffect} from 'react';
+import Shader from './Shader';
+import WhoAmIMobile from './WhoAmIMobile';
+import GitMobile from './GitMobile';
+import DownloadCVMobile from './DownloadCVMobile';
+import ClickMe from './ClickMe';
+import Player from './Player';
+
+interface MobileRootProps {
+	windowSize: number;
+}
+
+/**
+ * @return {jsx} The root component
+ */
+export default function MobileRoot({windowSize}: MobileRootProps) {
+	const [trigger, setTrigger] = useState(0);
+	const [content, setContent]: any = useState([]);
+	const [busy, setBusy]: any = useState(true);
+	const loader: Array<any> = [];
+
+	for (let i = 0; i < 2; i++) {
+		loader.push(
+			<div className='tile-mobile-element'>
+				<div
+					className='
+						tile-child
+						d-flex
+						flex-column
+						align-items-center
+						justify-content-center'>
+					<div className='d-inline loader'></div>
+				</div>
+			</div>);
+	}
+	loader.push(<div className='tile-mobile-main'><WhoAmIMobile /></div>);
+	loader.push(
+		<div className='tile-mobile-main'>
+			<GitMobile />
+		</div>);
+	loader.push(
+		<div className='tile-mobile-downloadcv'>
+			<DownloadCVMobile />
+		</div>);
+	loader.push(
+		<div className='tile-mobile-main'>
+			<ClickMe
+				windowSize={windowSize}
+				setTrigger={setTrigger}
+				setBusy={setBusy} />
+		</div>);
+	for (let i = 0; i < 2; i++) {
+		loader.push(
+			<div className='tile-mobile-element'>
+				<div
+					className='
+						tile-child
+						d-flex
+						flex-column
+						align-items-center
+						justify-content-center'>
+					<div className='d-inline loader'></div>
+				</div>
+			</div>);
+	}
+	const Shaders = [
+		'BaseRaymarching',
+		'Droplets',
+		'Inception',
+		'Menstom',
+		'Torus',
+		'Triangle',
+		'BaseLattice',
+	];
+
+	const Sounds = [
+		'Collapse.mp3',
+		'Droplets.mp3',
+		'Heavy Ropes.mp3',
+		'Inception.mp3',
+		'Menstom.mp3',
+		'Speechless.mp3',
+		'Triangle.mp3',
+	];
+
+	useEffect(() => {
+		const newContent = [];
+		const shadersRandom: Array<any> = [];
+		const imagesRandom: Array<any> = [];
+		const soundsRandom: Array<any> = [];
+
+		shadersRandom.push(
+			<div className='tile-mobile-element'>
+				<Shader name={Shaders[Math.floor(Math.random() * 7)]} />
+			</div>);
+
+		for (let i = 0; i < 2; i++) {
+			imagesRandom.push(Math.floor(Math.random() * 12) + 1);
+			while (imagesRandom.indexOf(
+				imagesRandom[imagesRandom.length - 1]) !=
+				imagesRandom.length - 1) {
+				imagesRandom[imagesRandom.length - 1] += 1;
+				if (imagesRandom[imagesRandom.length - 1] == 13) {
+					imagesRandom[imagesRandom.length - 1] = 1;
+				}
+			}
+		}
+		for (let i = 0; i < 2; i++) {
+			imagesRandom[i] =
+				<div className='tile-mobile-element'>
+					<img
+						className='img-mobile'
+						src={'/static/images/' +
+						imagesRandom[i].toString() +
+						'.jpg'}>
+					</img>
+				</div>;
+		}
+
+		soundsRandom.push(
+			<div className='tile-mobile-element'>
+				<Player src={'/static/sounds/' +
+				Sounds[Math.floor(Math.random() * 7)]}/>
+			</div>);
+
+		newContent.push(shadersRandom[0]);
+		newContent.push(soundsRandom[0]);
+		newContent.push(
+			<div className='tile-mobile-main'>
+				<WhoAmIMobile />
+			</div>);
+		newContent.push(
+			<div className='tile-mobile-main'>
+				<GitMobile />
+			</div>);
+		newContent.push(
+			<div className='tile-mobile-downloadcv'>
+				<DownloadCVMobile />
+			</div>);
+		newContent.push(
+			<div className='tile-mobile-main'>
+				<ClickMe
+					windowSize={windowSize}
+					setTrigger={setTrigger}
+					setBusy={setBusy} />
+			</div>);
+		newContent.push(imagesRandom[0]);
+		newContent.push(imagesRandom[1]);
+		setContent(newContent);
+		setBusy(false);
+	}, [trigger]);
+
+
+	return (
+		<div id='root'>
+			{busy ? loader : content}
+		</div>
+	);
+}

src/client/components/Root.tsx

@@ -1,104 +1,20 @@
 import React, {useState, useEffect, useCallback} from 'react';
-import Shader from './Shader';
-import WhoAmI from './WhoAmI';
-import Git from './Git';
-import DownloadCV from './DownloadCV';
-import ClickMe from './ClickMe';
-import Player from './Player';
+import DesktopRoot from './DesktopRoot';
+import MobileRoot from './MobileRoot';
 
 /**
  * @return {jsx} The root component
  */
 export default function Root() {
 	const [windowSize, setWindowSize] = useState(0);
-	const [trigger, setTrigger] = useState(0);
-	const [content, setContent]: any = useState([]);
-	const [busy, setBusy]: any = useState(true);
-	const loader: Array<any> = [];
-
-	for (let i = 0; i < 5; i++) {
-		loader.push(
-			<div className='tile'>
-				<div
-					className='
-						tile-child
-						d-flex
-						flex-column
-						align-items-center
-						justify-content-center'>
-					<div className='d-inline loader'></div>
-				</div>
-			</div>);
-	}
-	loader.push(<div className='tile'><WhoAmI /></div>);
-	loader.push(
-		<div className='tile'>
-			<Git windowSize={windowSize} />
-		</div>);
-	for (let i = 0; i < 2; i++) {
-		loader.push(
-			<div className='tile'>
-				<div
-					className='
-						tile-child
-						d-flex
-						flex-column
-						align-items-center
-						justify-content-center'>
-					<div className='d-inline loader'></div>
-				</div>
-			</div>);
-	}
-	loader.push(
-		<div className='tile'>
-			<DownloadCV windowSize={windowSize} />
-		</div>);
-	loader.push(
-		<div className='tile'>
-			<ClickMe
-				windowSize={windowSize}
-				setTrigger={setTrigger}
-				setBusy={setBusy} />
-		</div>);
-	for (let i = 0; i < 5; i++) {
-		loader.push(
-			<div className='tile'>
-				<div
-					className='
-						tile-child
-						d-flex
-						flex-column
-						align-items-center
-						justify-content-center'>
-					<div className='d-inline loader'></div>
-				</div>
-			</div>);
-	}
-	const Shaders = [
-		'BaseRaymarching',
-		'Collapse',
-		'Droplets',
-		'Inception',
-		'Menstom',
-		'Torus',
-		'Triangle',
-		'BaseLattice',
-	];
-
-	const Sounds = [
-		'Collapse.mp3',
-		'Droplets.mp3',
-		'Heavy Ropes.mp3',
-		'Inception.mp3',
-		'Menstom.mp3',
-		'Speechless.mp3',
-		'Triangle.mp3',
-	];
+	const [content, setContent]: any = useState();
 
 	const handleWindowResize = useCallback((_event) => {
 		setWindowSize(window.innerWidth);
 	}, []);
+
 	useEffect(() => {
+		setWindowSize(window.innerWidth);
 		window.addEventListener('resize', handleWindowResize);
 		return () => {
 			window.removeEventListener('resize', handleWindowResize);
@@ -106,127 +22,16 @@ export default function Root() {
 	}, [handleWindowResize]);
 
 	useEffect(() => {
-		const newContent = [];
-		const randomContent = [];
-		const shadersRandom: Array<any> = [];
-		const imagesRandom: Array<any> = [];
-		const soundsRandom: Array<any> = [];
-
-		for (let i = 0; i < 3; i++) {
-			shadersRandom.push(Math.floor(Math.random() * 8));
-			while (shadersRandom.indexOf(
-				shadersRandom[shadersRandom.length - 1]) !=
-				shadersRandom.length - 1) {
-				shadersRandom[shadersRandom.length - 1] += 1;
-				if (shadersRandom[shadersRandom.length - 1] == 8) {
-					shadersRandom[shadersRandom.length - 1] = 1;
-				}
-			}
-		}
-		for (let i = 0; i < 3; i++) {
-			shadersRandom[i] =
-				<div className='tile'>
-					<Shader name={Shaders[shadersRandom[i]]} />
-				</div>;
-		}
-
-		for (let i = 0; i < 7; i++) {
-			imagesRandom.push(Math.floor(Math.random() * 12) + 1);
-			while (imagesRandom.indexOf(
-				imagesRandom[imagesRandom.length - 1]) !=
-				imagesRandom.length - 1) {
-				imagesRandom[imagesRandom.length - 1] += 1;
-				if (imagesRandom[imagesRandom.length - 1] == 13) {
-					imagesRandom[imagesRandom.length - 1] = 1;
-				}
-			}
+		if (windowSize > 1200) {
+			setContent(<DesktopRoot windowSize={windowSize} />);
+		} else {
+			setContent(<MobileRoot windowSize={windowSize} />);
 		}
-		for (let i = 0; i < 7; i++) {
-			imagesRandom[i] =
-				<div className='tile'>
-					<img
-						src={'/static/images/' +
-						imagesRandom[i].toString() +
-						'.jpg'}>
-					</img>
-				</div>;
-		}
-
-		for (let i = 0; i < 2; i++) {
-			soundsRandom.push(Math.floor(Math.random() * 7));
-		}
-		if (soundsRandom[0] == soundsRandom[1]) {
-			soundsRandom[1] += 1;
-			if (soundsRandom[1] == 7) {
-				soundsRandom[1] = 0;
-			}
-		}
-		soundsRandom[0] = Sounds[soundsRandom[0]];
-		soundsRandom[1] = Sounds[soundsRandom[1]];
-		for (let i = 0; i < soundsRandom.length; i++) {
-			soundsRandom[i] =
-				<div className='tile'>
-					<Player src={'/static/sounds/' + soundsRandom[i]}/>
-				</div>;
-		}
-
-		while (shadersRandom.length ||
-			imagesRandom.length ||
-			soundsRandom.length) {
-			const random = Math.floor(Math.random() * 4);
-			if (random == 0) {
-				if (shadersRandom.length > 0) {
-					randomContent.push(shadersRandom[0]);
-					shadersRandom.shift();
-				}
-			} else if (random == 1) {
-				if (soundsRandom.length > 0) {
-					randomContent.push(soundsRandom[0]);
-					soundsRandom.shift();
-				}
-			} else {
-				if (imagesRandom.length > 0) {
-					randomContent.push(imagesRandom[0]);
-					imagesRandom.shift();
-				}
-			}
-		}
-		newContent.push(randomContent[0]);
-		newContent.push(randomContent[1]);
-		newContent.push(randomContent[2]);
-		newContent.push(randomContent[3]);
-		newContent.push(randomContent[4]);
-		newContent.push(<div className='tile'><WhoAmI /></div>);
-		newContent.push(
-			<div className='tile'>
-				<Git windowSize={windowSize} />
-			</div>);
-		newContent.push(randomContent[5]);
-		newContent.push(randomContent[6]);
-		newContent.push(
-			<div className='tile'>
-				<DownloadCV windowSize={windowSize} />
-			</div>);
-		newContent.push(
-			<div className='tile'>
-				<ClickMe
-					windowSize={windowSize}
-					setTrigger={setTrigger}
-					setBusy={setBusy} />
-			</div>);
-		newContent.push(randomContent[7]);
-		newContent.push(randomContent[8]);
-		newContent.push(randomContent[9]);
-		newContent.push(randomContent[10]);
-		newContent.push(randomContent[11]);
-		setContent(newContent);
-		setBusy(false);
-	}, [trigger]);
-
+	}, [windowSize]);
 
 	return (
 		<div id='root'>
-			{busy ? loader : content}
+			{content}
 		</div>
 	);
 }

src/client/components/WhoAmIMobile.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ * @return {jsx} a presentation of me
+ */
+export default function WhoAmIMobile() {
+	return (
+		<div
+			className='
+				tile-child d-flex
+				flex-column
+				align-items-center
+				justify-content-center'
+			id='whoami'>
+			<div className='lead text-center'>Gaëtan Brochard</div>
+			<div className='lead text-center'>Developer</div>
+		</div>
+	);
+};