From 9925b86f2c56d11ddd8a2592c106b343d2381efa Mon Sep 17 00:00:00 2001 From: gbrochar Date: Sat, 21 Nov 2020 22:26:59 +0100 Subject: [PATCH] mobile version done, need to add CV and put in production --- public/css/style.css | 30 +++ src/client/components/DesktopRoot.tsx | 225 +++++++++++++++++++++ src/client/components/DownloadCV.tsx | 19 +- src/client/components/DownloadCVMobile.tsx | 32 +++ src/client/components/Git.tsx | 2 +- src/client/components/GitMobile.tsx | 27 +++ src/client/components/MobileRoot.tsx | 159 +++++++++++++++ src/client/components/Root.tsx | 217 +------------------- src/client/components/WhoAmIMobile.tsx | 19 ++ 9 files changed, 518 insertions(+), 212 deletions(-) create mode 100644 src/client/components/DesktopRoot.tsx create mode 100644 src/client/components/DownloadCVMobile.tsx create mode 100644 src/client/components/GitMobile.tsx create mode 100644 src/client/components/MobileRoot.tsx create mode 100644 src/client/components/WhoAmIMobile.tsx diff --git a/public/css/style.css b/public/css/style.css index a4da24b..b5af6de 100644 --- a/public/css/style.css +++ b/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; diff --git a/src/client/components/DesktopRoot.tsx b/src/client/components/DesktopRoot.tsx new file mode 100644 index 0000000..92b6cb8 --- /dev/null +++ b/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 = []; + + for (let i = 0; i < 5; i++) { + loader.push( +
+
+
+
+
); + } + loader.push(
); + loader.push( +
+ +
); + for (let i = 0; i < 2; i++) { + loader.push( +
+
+
+
+
); + } + loader.push( +
+ +
); + loader.push( +
+ +
); + for (let i = 0; i < 5; i++) { + loader.push( +
+
+
+
+
); + } + 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 = []; + const imagesRandom: Array = []; + const soundsRandom: Array = []; + + 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] = +
+ +
; + } + + 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] = +
+ + +
; + } + + 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] = +
+ +
; + } + + 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(
); + newContent.push( +
+ +
); + newContent.push(randomContent[5]); + newContent.push(randomContent[6]); + newContent.push( +
+ +
); + newContent.push( +
+ +
); + 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 ( +
+ {busy ? loader : content} +
+ ); +} diff --git a/src/client/components/DownloadCV.tsx b/src/client/components/DownloadCV.tsx index 51dc15a..5998d00 100644 --- a/src/client/components/DownloadCV.tsx +++ b/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 (
- Download my CV + className={'d-inline btn btn-mine ' + topClass}> + Download my Resume + + + Newspaper Article
); diff --git a/src/client/components/DownloadCVMobile.tsx b/src/client/components/DownloadCVMobile.tsx new file mode 100644 index 0000000..00367ab --- /dev/null +++ b/src/client/components/DownloadCVMobile.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +/** + * @return {jsx} a presentation of me + */ +export default function DownloadCVMobile() { + return ( + + ); +}; diff --git a/src/client/components/Git.tsx b/src/client/components/Git.tsx index 3b6ae02..a8d3c66 100644 --- a/src/client/components/Git.tsx +++ b/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(''); diff --git a/src/client/components/GitMobile.tsx b/src/client/components/GitMobile.tsx new file mode 100644 index 0000000..13c48e1 --- /dev/null +++ b/src/client/components/GitMobile.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +/** + * @return {jsx} my git links + */ +export default function GitMobile() { + return ( + + ); +}; diff --git a/src/client/components/MobileRoot.tsx b/src/client/components/MobileRoot.tsx new file mode 100644 index 0000000..bec2c11 --- /dev/null +++ b/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 = []; + + for (let i = 0; i < 2; i++) { + loader.push( +
+
+
+
+
); + } + loader.push(
); + loader.push( +
+ +
); + loader.push( +
+ +
); + loader.push( +
+ +
); + for (let i = 0; i < 2; i++) { + loader.push( +
+
+
+
+
); + } + 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 = []; + const imagesRandom: Array = []; + const soundsRandom: Array = []; + + shadersRandom.push( +
+ +
); + + 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] = +
+ + +
; + } + + soundsRandom.push( +
+ +
); + + newContent.push(shadersRandom[0]); + newContent.push(soundsRandom[0]); + newContent.push( +
+ +
); + newContent.push( +
+ +
); + newContent.push( +
+ +
); + newContent.push( +
+ +
); + newContent.push(imagesRandom[0]); + newContent.push(imagesRandom[1]); + setContent(newContent); + setBusy(false); + }, [trigger]); + + + return ( +
+ {busy ? loader : content} +
+ ); +} diff --git a/src/client/components/Root.tsx b/src/client/components/Root.tsx index 5412235..a6098ed 100644 --- a/src/client/components/Root.tsx +++ b/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 = []; - - for (let i = 0; i < 5; i++) { - loader.push( -
-
-
-
-
); - } - loader.push(
); - loader.push( -
- -
); - for (let i = 0; i < 2; i++) { - loader.push( -
-
-
-
-
); - } - loader.push( -
- -
); - loader.push( -
- -
); - for (let i = 0; i < 5; i++) { - loader.push( -
-
-
-
-
); - } - 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 = []; - const imagesRandom: Array = []; - const soundsRandom: Array = []; - - 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; - } - } + if (windowSize > 1200) { + setContent(); + } else { + setContent(); } - for (let i = 0; i < 3; i++) { - shadersRandom[i] = -
- -
; - } - - 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] = -
- - -
; - } - - 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] = -
- -
; - } - - 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(
); - newContent.push( -
- -
); - newContent.push(randomContent[5]); - newContent.push(randomContent[6]); - newContent.push( -
- -
); - newContent.push( -
- -
); - 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 (
- {busy ? loader : content} + {content}
); } diff --git a/src/client/components/WhoAmIMobile.tsx b/src/client/components/WhoAmIMobile.tsx new file mode 100644 index 0000000..ce121a0 --- /dev/null +++ b/src/client/components/WhoAmIMobile.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +/** + * @return {jsx} a presentation of me + */ +export default function WhoAmIMobile() { + return ( +
+
Gaëtan Brochard
+
Developer
+
+ ); +};