Animation-heavy personal portfolio on Next.js: a custom cursor, a page-transition loader, and canvas backgrounds.
canvas-animationscss-modulesdark-themehandcodednextjspersonal-websiteportfolioreact
1import React from "react";
2import styles from "@styles/components/grid.module.css";
3import PropTypes from "prop-types";
4
5const Grid = (props) => {
6 return (
7 <>
8 <div className={styles.gridLines}>
9 {Array(6)
10 .fill()
11 .map((_, i) => {
12 const column = i + 1;
13 return (
14 <div
15 key={column}
16 className={styles.gridLine}
17 style={{ gridColumn: column }}
18 />
19 );
20 })}
21 </div>
22 <div className={styles.gridArea}>{props.children}</div>
23 </>
24 );
25};
26
27Grid.propTypes = {
28 children: PropTypes.oneOfType([
29 PropTypes.element,
30 PropTypes.arrayOf(PropTypes.element),
31 ]),
32};
33
34export default Grid;