87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
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';
|
|
|
|
/**
|
|
* @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 Shaders = [
|
|
'BaseRaymarching',
|
|
'Collapse',
|
|
'Droplets',
|
|
'Inception',
|
|
'Menstom',
|
|
'Torus',
|
|
'Triangle',
|
|
'BaseLattice',
|
|
];
|
|
|
|
const handleWindowResize = useCallback((_event) => {
|
|
setWindowSize(window.innerWidth);
|
|
}, []);
|
|
useEffect(() => {
|
|
window.addEventListener('resize', handleWindowResize);
|
|
return () => {
|
|
window.removeEventListener('resize', handleWindowResize);
|
|
};
|
|
}, [handleWindowResize]);
|
|
|
|
useEffect(() => {
|
|
let newContent = [];
|
|
let randomContent = [];
|
|
let shadersRandom = [];
|
|
let imagesRandom = [];
|
|
|
|
shadersRandom.push(Math.floor(Math.random() * 8));
|
|
shadersRandom.push(Math.floor(Math.random() * 8));
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[0]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[1]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[2]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[3]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[4]]} /></div>);
|
|
newContent.push(<div className='tile'><WhoAmI /></div>);
|
|
newContent.push(<div className='tile'><Git windowSize={windowSize} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[5]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[6]]} /></div>);
|
|
newContent.push(<div className='tile'><DownloadCV windowSize={windowSize} /></div>);
|
|
newContent.push(<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[7]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[8]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[9]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[10]]} /></div>);
|
|
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[11]]} /></div>);
|
|
setContent(newContent);
|
|
}, [trigger]);
|
|
|
|
|
|
return (
|
|
<div id='root'>
|
|
{content}
|
|
{/* <div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><WhoAmI /></div>
|
|
<div className='tile'><Git windowSize={windowSize} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><DownloadCV windowSize={windowSize} /></div>
|
|
<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div>
|
|
<div className='tile'><Shader name={Shaders[0]} /></div> */}
|
|
</div>
|
|
);
|
|
}
|