+ )
+ }
\ No newline at end of file
diff --git a/components/Matrix.jsx b/components/Matrix.jsx
new file mode 100644
index 0000000..dd5b3e0
--- /dev/null
+++ b/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 (
+
+ )
+ }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9eeca39..00eb98a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,9 @@
"eslint-config-next": "13.0.3",
"next": "13.0.3",
"react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "react-horizontal-scrolling-menu": "^3.2.3",
+ "react-type-animation": "^2.1.2"
}
},
"node_modules/@babel/runtime": {
@@ -691,6 +693,11 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
+ "node_modules/compute-scroll-into-view": {
+ "version": "1.0.17",
+ "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
+ "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
+ },
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2358,11 +2365,32 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-horizontal-scrolling-menu": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-3.2.3.tgz",
+ "integrity": "sha512-23uR9+/1mYgvOxpR5tx99F8fQmRrPOO4NsHeZJsMLQtsksZZ4sGFCWxxUMZMgFaLROHM/oKj4y3IHyFyHsUGXA==",
+ "dependencies": {
+ "smooth-scroll-into-view-if-needed": "^1.1.32"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "node_modules/react-type-animation": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-2.1.2.tgz",
+ "integrity": "sha512-6/t4Whl87sLR0c8kzvJngTrCV6OVy3jEeUZoe2svVu9VaYr951VD7OeUie1rIyeD8JfpBIqZGYrPFHZQ04XHrw==",
+ "peerDependencies": {
+ "prop-types": "^15.5.4",
+ "react": ">= 15.0.0",
+ "react-dom": ">= 15.0.0"
+ }
+ },
"node_modules/regenerator-runtime": {
"version": "0.13.10",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
@@ -2485,6 +2513,14 @@
"loose-envify": "^1.1.0"
}
},
+ "node_modules/scroll-into-view-if-needed": {
+ "version": "2.2.29",
+ "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
+ "integrity": "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==",
+ "dependencies": {
+ "compute-scroll-into-view": "^1.0.17"
+ }
+ },
"node_modules/semver": {
"version": "7.3.8",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -2539,6 +2575,14 @@
"node": ">=8"
}
},
+ "node_modules/smooth-scroll-into-view-if-needed": {
+ "version": "1.1.33",
+ "resolved": "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.33.tgz",
+ "integrity": "sha512-crS8NfAaoPrtVYOCMSAnO2vHRgUp22NiiDgEQ7YiaAy5xe2jmR19Jm+QdL8+97gO8ENd7PUyQIAQojJyIiyRHw==",
+ "dependencies": {
+ "scroll-into-view-if-needed": "^2.2.28"
+ }
+ },
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -3245,6 +3289,11 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
+ "compute-scroll-into-view": {
+ "version": "1.0.17",
+ "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
+ "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
+ },
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4419,11 +4468,25 @@
"scheduler": "^0.23.0"
}
},
+ "react-horizontal-scrolling-menu": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-3.2.3.tgz",
+ "integrity": "sha512-23uR9+/1mYgvOxpR5tx99F8fQmRrPOO4NsHeZJsMLQtsksZZ4sGFCWxxUMZMgFaLROHM/oKj4y3IHyFyHsUGXA==",
+ "requires": {
+ "smooth-scroll-into-view-if-needed": "^1.1.32"
+ }
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "react-type-animation": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-2.1.2.tgz",
+ "integrity": "sha512-6/t4Whl87sLR0c8kzvJngTrCV6OVy3jEeUZoe2svVu9VaYr951VD7OeUie1rIyeD8JfpBIqZGYrPFHZQ04XHrw==",
+ "requires": {}
+ },
"regenerator-runtime": {
"version": "0.13.10",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
@@ -4498,6 +4561,14 @@
"loose-envify": "^1.1.0"
}
},
+ "scroll-into-view-if-needed": {
+ "version": "2.2.29",
+ "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
+ "integrity": "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==",
+ "requires": {
+ "compute-scroll-into-view": "^1.0.17"
+ }
+ },
"semver": {
"version": "7.3.8",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -4534,6 +4605,14 @@
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
},
+ "smooth-scroll-into-view-if-needed": {
+ "version": "1.1.33",
+ "resolved": "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.33.tgz",
+ "integrity": "sha512-crS8NfAaoPrtVYOCMSAnO2vHRgUp22NiiDgEQ7YiaAy5xe2jmR19Jm+QdL8+97gO8ENd7PUyQIAQojJyIiyRHw==",
+ "requires": {
+ "scroll-into-view-if-needed": "^2.2.28"
+ }
+ },
"source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
diff --git a/package.json b/package.json
index 2054ad6..542a9dd 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"private": true,
"scripts": {
"dev": "next dev",
- "build": "next build",
+ "build": "next build -p 3001",
"start": "next start",
"lint": "next lint"
},
@@ -13,6 +13,8 @@
"eslint-config-next": "13.0.3",
"next": "13.0.3",
"react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "react-horizontal-scrolling-menu": "^3.2.3",
+ "react-type-animation": "^2.1.2"
}
}
diff --git a/pages/index.js b/pages/index.js
index 5bf5574..d613ffc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,71 +1,50 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
+import Matrix from '../components/Matrix'
+import Herotitle from '../components/Herotitle'
+import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
+import { useContext, useEffect, useState } from 'react';
+import { TypeAnimation } from 'react-type-animation';
export default function Home() {
- return (
- - Welcome to Next.js! -
+ useEffect(() => { + ; + }, []); -
- Get started by editing{' '}
- pages/index.js
-
+
+ [Project-Name-Here]
+
+
+
-
- )
+
-
-
-
-
-
- Documentation →
-Find in-depth information about Next.js features and API.
- - - -Learn →
-Learn about Next.js in an interactive course with quizzes!
- - - -Examples →
-Discover and deploy boilerplate example Next.js projects.
- - - -Deploy →
-- Instantly deploy your Next.js site to a public URL with Vercel. -
- -
+
+
+
+ {
+ console.log('Done typing!'); // Place optional callbacks anywhere in the array
+ }
+ ]}
+ wrapper="div"
+ cursor={true}
+ repeat={0}
+ style={{ fontFamily: "silkscreen", fontSize: "larger" }}
+ className="typeHeader"
+ />
+
+
+