@@ -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; | |||
@@ -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> | |||
); | |||
} |
@@ -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> | |||
); | |||
@@ -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> | |||
); | |||
}; |
@@ -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(''); | |||
@@ -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's git | |||
</a> | |||
<br /> | |||
<a | |||
href='https://git.gaetanbrochard.dev/gbrochar' | |||
className='d-inline btn btn-mine ml-1'> | |||
My git | |||
</a> | |||
</div> | |||
); | |||
}; |
@@ -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> | |||
); | |||
} |
@@ -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> | |||
); | |||
} |
@@ -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> | |||
); | |||
}; |