diff --git a/package-lock.json b/package-lock.json index d7bade4..2f318a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "portfolio", "version": "0.1.0", "dependencies": { + "@next/font": "^13.4.12", "@types/node": "20.2.5", "@types/p5": "^1.6.2", "@types/react": "18.2.7", @@ -15,7 +16,6 @@ "@types/three": "^0.154.0", "eslint": "8.41.0", "eslint-config-next": "13.4.4", - "lucide-react": "^0.260.0", "next": "13.4.4", "p5": "^1.6.0", "react": "18.2.0", @@ -130,6 +130,11 @@ "glob": "7.1.7" } }, + "node_modules/@next/font": { + "version": "13.4.12", + "resolved": "https://registry.npmjs.org/@next/font/-/font-13.4.12.tgz", + "integrity": "sha512-w/ygNFuscvvFKFTMoIqhU8Kaq1wM6x4XEu9bwzJaj8G7aloH866TUPeCgiKf+M/ACpMKfRahQa06REcg6T3CyA==" + }, "node_modules/@next/swc-darwin-arm64": { "version": "13.4.4", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.4.tgz", @@ -2463,14 +2468,6 @@ "node": ">=10" } }, - "node_modules/lucide-react": { - "version": "0.260.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.260.0.tgz", - "integrity": "sha512-xN6wuhUlcXeS4GsxZpd2DZp+m1jEZPckuCr90nQAXKRNl63GZ4KshIcGmqJEUqEygmv8Rf99MhcwF3DqBqQ9Dg==", - "peerDependencies": { - "react": "^16.5.1 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/package.json b/package.json index 41b765c..60d188a 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@next/font": "^13.4.12", "@types/node": "20.2.5", "@types/p5": "^1.6.2", "@types/react": "18.2.7", @@ -16,7 +17,6 @@ "@types/three": "^0.154.0", "eslint": "8.41.0", "eslint-config-next": "13.4.4", - "lucide-react": "^0.260.0", "next": "13.4.4", "p5": "^1.6.0", "react": "18.2.0", diff --git a/public/scanlines.jpg b/public/scanlines.jpg new file mode 100644 index 0000000..e7defa8 Binary files /dev/null and b/public/scanlines.jpg differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 3ab794c..6c9b11f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,17 +1,27 @@ "use client"; +import React, {useState} from 'react'; import styles from '../css/page.module.css'; import Terminal from '@/components/Terminal'; import Typewriter from '@/components/Typewriter'; import Model from '@/components/Model'; -import Controls from '@/components/Controls' -import localFont from 'next/font/local'; +import Controls from '@/components/Controls'; +import Image from 'next/image' -const dotFont = localFont({ src: './e-dot-digital-7.ttf' }) +var enableCrt:boolean = true; export default function Home() { + + const [currentCrt, setCrt] = useState(false) + var scanlines = currentCrt ? styles.scanlines : styles.hidden; + var scanner = currentCrt ? styles.scanner : styles.hidden; + var bright = currentCrt ? styles.bright : styles.main; + + return ( -
- {/* TODO What is wrong with the position 1? */} +
+ + image + {/* TODO What is wrong with the position 1? */}
@@ -20,7 +30,7 @@ export default function Home() {
- + setCrt(currentCrt)} />
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index 420d396..736b82f 100644 --- a/src/components/Controls.tsx +++ b/src/components/Controls.tsx @@ -1,18 +1,30 @@ -import React, {useState, useEffect, useRef} from 'react'; -import localFont from 'next/font/local'; +import React, { useState } from 'react'; import styles from '../css/controls.module.css'; -const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' }) +interface ControlsProps { + changeState: (newValue: boolean) => void; +} -const Controls = () => { +const Controls: React.FC = ({ changeState }) => { + const [crt, setCrt] = useState(false); - return ( -
- - - -
- ) + const handleChange = () => { + const newValue = !crt; + setCrt(newValue); + changeState(newValue); + }; + + return ( +
+ + +
+ ); }; export default Controls; diff --git a/src/components/Model.tsx b/src/components/Model.tsx index f23eacf..c9eae09 100644 --- a/src/components/Model.tsx +++ b/src/components/Model.tsx @@ -13,15 +13,16 @@ const AsciiCube = () => { camera.position.z = 5; const geometry = new THREE.BoxGeometry(1, 1, 1); - const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent: true */}); - const cube = new THREE.Mesh(geometry, material); - scene.add(cube); + const edges = new THREE.EdgesGeometry(geometry); + const material = new THREE.LineBasicMaterial({ color: 0xffffff }); + const wireframe = new THREE.LineSegments(edges, material); + scene.add(wireframe); const animate = () => { requestAnimationFrame(animate); - cube.rotation.x += 0.01; - cube.rotation.y += 0.01; + wireframe.rotation.x += 0.01; + wireframe.rotation.y += 0.01; renderer.render(scene, camera); }; diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index 46740de..f6f0507 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,17 +1,22 @@ import React from 'react'; import { useState, useRef, useEffect } from 'react'; import styles from '../css/terminal.module.css' -import { ChevronRight } from 'lucide-react'; +import { VT323 } from '@next/font/google'; + +const vt323 = VT323({ + subsets: ['latin'], + weight: '400', + variable: '--vt323', +}) const Terminal = () => { const banner = [ - "██╗ ██╗███████╗██╗ ██████╗ ██████╗ ███╗ ███╗███████╗ ", - "██║ ██║██╔════╝██║ ██╔════╝██╔═══██╗████╗ ████║██╔════╝ ", - "██║ █╗ ██║█████╗ ██║ ██║ ██║ ██║██╔████╔██║█████╗ ", - "██║███╗██║██╔══╝ ██║ ██║ ██║ ██║██║╚██╔╝██║██╔══╝ ", - "╚███╔███╔╝███████╗███████╗╚██████╗╚██████╔╝██║ ╚═╝ ██║███████╗ ", - " ╚══╝╚══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝", + " _/_/ _/_/_/ _/ _/ _/ _/ _/ _/_/_/_/", + " _/ _/ _/ _/ _/_/ _/ _/ _/_/ _/_/ _/ _/ _/ ", + " _/_/_/_/ _/_/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/ ", + " _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ ", + "_/ _/ _/_/_/ _/ _/ _/ _/ _/ _/ ", "", "________________________________________________", "| _____________________________ | Name: Bryant", @@ -21,8 +26,8 @@ const Terminal = () => { "| [][] [][][][][][][][][][][][][][_] [][][][] | social media, just type", "| [][] [_][][][][][][][][][][][][][] [][][][] | one of the following options:", "| [][] [__][][][][][][][][][][][][_] [][][][] | ", - "| [][] [___][][][][][][][][][][][__] [__][][] | github codepen", - "| [_][______________][_] | reddit twitter", + "| [][] [___][][][][][][][][][][][__] [__][][] | =^..^= github codepen", + "| [_][______________][_] | (°‿°) reddit ,(u°)> twitter", "|______________________________________________|", "", "Type \"help\" to view the available commands" @@ -31,7 +36,7 @@ const Terminal = () => { const help = [ "This is the list of commands you can use: \n", "banner Displays the initial greeting", - "help As you can see it shows a list of commands", + "help As you can see, it shows a list of commands", "skills Displays the technologies I'm able to use", "projects List of my projects", "info Shows all the information of the project", @@ -43,13 +48,13 @@ const Terminal = () => { ] const skills = [ - "CSS [██████████████████▁▁▁▁▁▁] C++ [████████████████████▁▁▁▁]", + "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", "", - "TS [█████████████▁▁▁▁▁▁▁▁▁▁] PHP [██████████████▁▁▁▁▁▁▁▁▁]", + "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", "", - "Angular[█████████__▁▁▁▁▁▁▁▁▁▁▁▁] Go [█████████████____▁▁▁▁▁▁]", + "Angular [███████▁▁▁▁▁▁▁▁▁] 44% Go [█████████▁▁▁▁▁▁▁] 57%", "", - "React [███████████▁▁▁▁▁▁▁▁▁▁▁▁] Git [██████████████████▁▁▁▁▁▁]", + "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%", ] const projects = [ @@ -65,16 +70,74 @@ const Terminal = () => { const info = [ "888b | 888~~ Y88b / ~~~888~~~ This project was built with Next.js 13", - "|Y88b | 888___ Y88b / 888 The icons I used are the lucide-icons", + "|Y88b | 888___ Y88b / 888 3D model was handled with three.js", "| Y88b | 888 Y88b/ 888 Dots grid background was made with p5.js", - "| Y88b | 888 /Y88b 888 3D model was handled with three.js", + "| Y88b | 888 /Y88b 888 ", "| Y88b| 888 / Y88b 888 ", "| Y888 888___ / Y88b 888 ", ] + const smallBanner = [ + "Name: Bryant", + "Mail: bryant.0@outlook.com", + "", + "=^..^= github codepen", + "(°‿°) reddit ,(u°)> twitter", + "", + "Type \"help\" to view the available commands" + ] + const smallHelp = [ + "This is the list of commands you can use: \n", + "banner: Displays the initial greeting\n", + "help: As you can see, it shows a list of commands\n", + "skills: Displays the technologies I'm able to use\n", + "projects: List of my projects\n", + "info: Shows all the information of the project\n", + "github: Opens github in a new tab\n", + "codepen: Opens codpen in a new tab\n", + "reddit: Opens reddit in a new tab\n", + "twitter: Opens twitter in a new tab\n", + "cls: Clears the content of the terminal\n", + ] + const smallSkills = [ + "CSS [████████████▁▁▁▁] 75%", + "", + "C++ [████████████▁▁▁▁] 75%", + "", + "TS [████████▁▁▁▁▁▁▁▁] 50%", + "", + "PHP [████████▁▁▁▁▁▁▁▁] 50%", + "", + "NG [███████▁▁▁▁▁▁▁▁▁] 44%", + "", + "Go [█████████▁▁▁▁▁▁▁] 57%", + "", + "Reac [████████▁▁▁▁▁▁▁▁] 50%", + "", + "Git [████████████▁▁▁▁] 75%", + ] + const smallProjects = [ + "Still working on them, most of them are private, sorry :(" + ] + const smallInfo = [ + "This project was built with Next.js 13", + "3D model was handled with three.js", + "Dots grid background was made with p5.js", + ] + + var start; + if(window.innerWidth<=760) + { + start=smallBanner; + } + else + { + start=banner; + } + const preRef = useRef(null); const [input, setInput] = useState(""); - const [output, setOutput] = useState(banner.join('\n')); + const [output, setOutput] = useState(start.join('\n')); useEffect(() => { if (preRef.current) { @@ -84,13 +147,13 @@ const Terminal = () => { return (
- {
{output}
} - {/* 
{output}
*/} + 
{output}
-
@guest from portfolio
+
@guest from portfolio
- +

>

setInput(e.target.value)} @@ -99,44 +162,89 @@ const Terminal = () => { if (e.key === "Enter") { newOutput = output + "\n\n@guest from portfolio\n" + "> " + input + "\n\n"; - switch (input) + if(window.innerWidth<=760) + { + switch (input) + { + case "banner": + newOutput += smallBanner.join('\n') + break; + case "help": + newOutput += smallHelp.join('\n') + break; + case "skills": + newOutput += smallSkills.join('\n') + break; + case "projects": + newOutput += smallProjects.join('\n') + break; + case "info": + newOutput += smallInfo.join('\n') + break; + case "github": + newOutput += "github" + window.open("https://github.com/AB10110F", '_blank'); + break; + case "codepen": + newOutput += "codepen" + window.open("https://codepen.io/AB10110F", '_blank'); + break; + case "reddit": + newOutput += "reddit" + window.open("https://www.reddit.com/user/AB10110F", '_blank'); + break; + case "twitter": + newOutput += "twitter" + window.open("https://twitter.com/AB10110F", '_blank'); + break; + case "cls": + newOutput = "" + break; + default: + newOutput += "x_x Syntax Error \"" + input + "\" is not a command" + } + } + else { - case "banner": - newOutput += banner.join('\n') - break; - case "help": - newOutput += help.join('\n') - break; - case "skills": - newOutput += skills.join('\n') - break; - case "projects": - newOutput += projects.join('\n') - break; - case "info": - newOutput += info.join('\n') - break; - case "github": - newOutput += "github" - window.open("https://github.com/AB10110F", '_blank'); - break; - case "codepen": - newOutput += "codepen" - window.open("https://codepen.com/AB10110F", '_blank'); - break; - case "reddit": - newOutput += "reddit" - window.open("https://github.com/AB10110F", '_blank'); - break; - case "twitter": - newOutput += "twitter" - window.open("https://github.com/AB10110F", '_blank'); - break; - case "cls": - newOutput = "" - break; - default: - newOutput += "x_x Syntax Error \"" + input + "\" is not a command" + switch (input) + { + case "banner": + newOutput += banner.join('\n') + break; + case "help": + newOutput += help.join('\n') + break; + case "skills": + newOutput += skills.join('\n') + break; + case "projects": + newOutput += projects.join('\n') + break; + case "info": + newOutput += info.join('\n') + break; + case "github": + newOutput += "github" + window.open("https://github.com/AB10110F", '_blank'); + break; + case "codepen": + newOutput += "codepen" + window.open("https://codepen.io/AB10110F", '_blank'); + break; + case "reddit": + newOutput += "reddit" + window.open("https://www.reddit.com/user/AB10110F", '_blank'); + break; + case "twitter": + newOutput += "twitter" + window.open("https://twitter.com/AB10110F", '_blank'); + break; + case "cls": + newOutput = "" + break; + default: + newOutput += "x_x Syntax Error \"" + input + "\" is not a command" + } } setOutput(newOutput) setInput("") diff --git a/src/css/controls.module.css b/src/css/controls.module.css index 24fa827..501ccff 100644 --- a/src/css/controls.module.css +++ b/src/css/controls.module.css @@ -2,9 +2,10 @@ { display: flex; flex-direction: row; - justify-content: space-around; + justify-content: space-between; align-items: center; height: 100%; + width: 30%; } .checkbox @@ -28,3 +29,11 @@ 0 0 100px 25px #f0f, /* middle magenta */ 0 0 140px 30px #0ff; /* outer cyan */ } + +@media only screen and (max-width: 760px) +{ + .container + { + width: 50%; + } +} \ No newline at end of file diff --git a/src/css/globals.css b/src/css/globals.css index cfe1adb..6359346 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -29,7 +29,7 @@ } ::-webkit-scrollbar{height: 10px; width: 10px;} -::-webkit-scrollbar-thumb{background:#878787; border-radius: 50px;} +::-webkit-scrollbar-thumb{background:#fdfdfd; border-radius: 0px;} html, body { diff --git a/src/css/page.module.css b/src/css/page.module.css index ac3e8ee..1db880e 100644 --- a/src/css/page.module.css +++ b/src/css/page.module.css @@ -1,11 +1,34 @@ .main { display: flex; flex-direction: column; + height: 100vh; color: white; padding: 30px; } -.main h1{font-size: 10vh; margin: 0 0 2% 0} +.main h1{ + font-size: 10vh; + margin: 0 0 2% 0 +} + +.bright +{ + display: flex; + flex-direction: column; + height: 100vh; + color: white; + padding: 30px; + text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; +} + +.bright input{ + text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; +} + +.bright h1{ + font-size: 10vh; + margin: 0 0 2% 0 +} .grid { @@ -26,14 +49,14 @@ .canvas { - border: 2px solid rgb(255, 255, 255); + border: 3px solid rgb(255, 255, 255); height: 40%; animation: right 1s ease; } .bars { - border: 2px solid rgb(255, 255, 255); + border: 3px solid rgb(255, 255, 255); height: 40%; animation: right 1.5s ease; background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 5%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, #ffffff 0, #ffffff 5%, transparent 0, transparent 50%); @@ -44,11 +67,40 @@ .controls { - border: 2px solid rgb(255, 255, 255); + border: 3px solid rgb(255, 255, 255); height: 20%; + display: flex; + justify-content: center; animation: right 2s ease; } +.scanlines +{ + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + opacity: 25%; + pointer-events: none; +} + +.scanner +{ + animation: scanning 2s infinite linear; + background-color: rgba(133, 133, 133, 0.266); + position: fixed; + top: 0; + left: 0; + height: 7%; + width: 100%; +} + +.hidden +{ + display: none; +} + @keyframes right { 0%{ @@ -65,6 +117,17 @@ } } +@keyframes scanning +{ + 0%{ + transform: translateY(0%); + } + + 100%{ + transform: translateY(100vh); + } +} + @media only screen and (max-width: 760px) { .grid @@ -74,65 +137,12 @@ .column { width: 100%; - height: 1200px; + height: 150%; } -} -/* .projects -{ - display: flex; - flex-direction: row; - justify-content: space-between; - width: 70%; -} - -.windowContainer -{ - width: 280px; - background-color: rgb(31, 31, 31); - border: 1px solid rgb(113, 113, 113); -} - -.windowOptions -{ - display: flex; - justify-content: end; - background-color: rgb(255, 255, 255); - height: 30px; - align-items: center; - font-size: 15px; - position: sticky; - top: 0; -} -.windowOptions svg -{ - width: 25px; - height: 30px; - padding: 0 10px; - color: rgb(142, 142, 142); -} -.windowOptions svg:nth-last-child(1):hover -{ - background-color: red; -} - -.windowOptions svg:hover -{ - background-color: rgb(177, 177, 177); - color: white; -} - -.windowOptions article -{ - width: 110px; - display: flex; -} -.windowContent -{ - font-size: 15px; - color: rgb(114, 114, 114); - display: flex; - justify-content: center; - align-items: center; - height: 180px; -} */ + .main h1 + { + font-size: 5vh; + text-align: center; + } +} \ No newline at end of file diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css index 1ab9366..399f80e 100644 --- a/src/css/terminal.module.css +++ b/src/css/terminal.module.css @@ -5,8 +5,8 @@ overflow-Y:auto; overflow-X:hidden; color: white; - font-size: 2.5vh; - border: 2px solid rgb(255, 255, 255); + font-size: 3vh; + border: 3px solid rgb(255, 255, 255); } @keyframes bottom @@ -25,9 +25,6 @@ } } -.terminal::-webkit-scrollbar{height: 10px; width: 8px;} -.terminal::-webkit-scrollbar-thumb{background:#878787; border-radius: 50px;} - .history { padding: 15px; @@ -48,8 +45,6 @@ flex-direction: row; } -.prompt svg{width: 2.5vh;} - .prompt input { border: none; @@ -58,18 +53,18 @@ background-color: transparent; color: white; /* margin-top: 10px */; - font-size: 2.5vh; + font-size: 3vh; } @media only screen and (max-width: 1250px) { .terminal { - font-size: 1.8vw; + font-size: 125%; } .prompt input { - font-size: 1.8vw; + font-size: 125%; } } @@ -77,7 +72,13 @@ { .terminal { - height: 400%; width: 100%; + height: 100%; + } + + .history + { + white-space: pre-wrap; + word-wrap: break-word; } } \ No newline at end of file