gbrochar
/
expo-web
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
gbrochar 2020-11-21 22:26:59 +01:00
parent fa60bb9b63
commit 9925b86f2c
9 changed files with 518 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/css/style.css
View File

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

225
src/client/components/DesktopRoot.tsx Normal file
View File

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

19
src/client/components/DownloadCV.tsx
View File

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

32
src/client/components/DownloadCVMobile.tsx Normal file
View File

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

2
src/client/components/Git.tsx
View File

@ -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('');

27
src/client/components/GitMobile.tsx Normal file
View File

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

159
src/client/components/MobileRoot.tsx Normal file
View File

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

217
src/client/components/Root.tsx
View File

@ -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;
}
}
if (windowSize > 1200) {
setContent(<DesktopRoot windowSize={windowSize} />);
} else {
setContent(<MobileRoot windowSize={windowSize} />);
}
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]);
}, [windowSize]);
return (
<div id='root'>
{busy ? loader : content}
{content}
</div>
);
}

19
src/client/components/WhoAmIMobile.tsx Normal file
View File

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