Initial commit

components/Herotitle.jsx

@@ -0,0 +1,7 @@
+import styles from '../styles/Herotitle.module.css'
+
+export default function Herotitle() {
+	return (
+	  <img src="/PNH_Wordmark.svg" className={styles.herotitle} alt="Pnh wordmark"></img>
+	)
+      }

components/Matrix.jsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import styles from '../styles/Matrix.module.css'
+
+export default function Matrix({ height, width }) {
+	useEffect(() => {
+		console.log(height, width);
+		const canvas = document.getElementById('waterfall');
+		const ctx = canvas.getContext('2d');
+
+		const w = canvas.width = document.body.offsetWidth;
+		const h = canvas.height = document.body.offsetHeight;
+		const cols = Math.floor(w / 20) + 1;
+		const ypos = Array(cols).fill(0);
+
+		ctx.fillStyle = '#000';
+		ctx.fillRect(0, 0, w, h);
+
+		function matrix() {
+			ctx.fillStyle = '#0001';
+			ctx.fillRect(0, 0, w, h);
+
+			ctx.fillStyle = '#0f0';
+			ctx.font = '15pt monospace';
+			let runningIndex = 0;
+
+			ypos.forEach((y, ind) => {
+				const randVal = Math.random()
+				let text = "";
+				if(randVal > 0.6) {
+					text = String.fromCharCode(Math.random() * 128);
+				} else {
+					const items = ["p", "n", "h"]
+					text = items[runningIndex];
+					runningIndex++;
+					if(runningIndex >= 3) {
+						runningIndex = 0;
+					}
+				}
+				const x = ind * 20;
+				ctx.fillText(text, x, y);
+				if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
+				else ypos[ind] = y + 20;
+			});
+		}
+
+		setInterval(matrix, 50);
+	}, []);
+	return (
+	  <canvas height={height} width={width} id={"waterfall"} className={styles.Matrix}>
+
+	  </canvas>
+	)
+      }