Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import React, { Component, Suspense } from 'react';
import PropTypes from 'prop-types';
import {
Route,
Switch,
} from 'react-router-dom';
import debounce from 'lodash/debounce';
import Loader from '../../components/Loader';
import Header from '../../components/Header';
import ResumePage from '../ResumePage';
import ContentPage from '../ContentPage';
import NotFoundPage from '../NotFoundPage';
import Footer from '../../components/Footer';
import styles from './Dashboard.scss';
const Particles = React.lazy(() => import('react-particles-js'));
class Dashboard extends Component {
handleResize = debounce(() => {
this.setState({
key: (Math.random() * 10000).toString(),
});
}, 200);
static propTypes = {
benchIsSlow: PropTypes.bool.isRequired,
};
constructor(props) {
super(props);
this.state = {
key: 0,
particleOptions: {
particles: {
number: {
value: 48,
density: {
enable: true,
value_area: 360,
},
},
color: {
value: '#FEFEFE',
},
line_linked: {
color: '#DEDEDE',
opacity: 0.4,
width: 1,
},
move: {
speed: 2,
},
},
interactivity: {
detect_on: 'window',
events: {
onhover: {
enable: true,
mode: 'grab',
},
onclick: {
enable: false,
},
resize: true,
},
},
retina_detect: true,
},
};
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
const { particleOptions, key } = this.state;
const { benchIsSlow } = this.props;
return (
<div className={styles.wrapper}>
{
!benchIsSlow
&& (
<Suspense>
<Particles
key={key}
className={styles.wrapper__particles}
params={particleOptions}
/>
</Suspense>
)
}
<Header />
<section className={styles.wrapper__content}>
<Suspense fallback={<Loader />}>
<Switch>
<Route exact path="/resume" component={ResumePage} />
<Route exact path="/:slug?" component={ContentPage} />
<Route component={NotFoundPage} />
</Switch>
</Suspense>
<Footer />
</section>
</div>
);
}
}
export default Dashboard;
|