npease/portfolio
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Terminal #4

Merged
npease merged 3 commits from type-terminal into main 2024-11-26 19:10:39 -10:00
Conversation 0 Commits 3 Files Changed 2
+73 -20
2 changed files with 73 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pease-portfolio/src/app/page.js
+6 -20
View File
@@ -1,15 +1,12 @@
"use client"
import Projects from "./projects.json"
import moment from "moment"
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import GitHubIcon from '@mui/icons-material/GitHub';
import EmailIcon from '@mui/icons-material/Email';
import Link from "next/link"
export async function generateMetadata() {
return {
title: 'Home | nicholaspease.com'
}
}
import { Terminal } from "../components/terminal.js"
function AboutMe() {
@@ -27,20 +24,8 @@ function AboutMe() {
</div>
</div>
</div>
<div className="mt-5 col-span-2 max-lg:ml-5 max-lg:mr-5">
<pre className="bash text-wrap">
MOTD: This website is still under construction<br/>
<span className="text-[green]">about@npease</span>:<span className="text-[blue]">~</span>$ uname -a<br/>
<div>
Hello! My name is Nicholas Pease and I am currently a junior at the University of Maine pursuing a bachelors degree in
Computer Science with a minor in Military Science. This website is a collection of both project / homework completed as
required by my studies and as a showcase of some of the personal projects I have worked on. I will work to keep this up
to date to the best of my ability. <br/>
</div>
<span className="text-[green]">about@npease</span>:<span className="text-[blue]">~</span>$ timedatectl --lastupdated<br/>
This website was last updated on {moment().format("dddd, MMMM Do YYYY")}.<br/>
<span className="text-[green]">about@npease</span>:<span className="text-[blue]">~</span>$ <span className="animate-blink"> </span>
</pre>
<div className="col-span-2">
<Terminal/>
</div>
</div>
</div>
@@ -69,6 +54,7 @@ function NotableProject({name}) {
function ProjectsHome() {
return (
<div className="mb-10">
<title>Home | nicholaspease.com</title>
<div className="pt-5 flex justify-center text-[45px]">Notable Projects</div>
<div className="md:grid md:grid-cols-3 auto-cols-auto gap-x-5 gap-y-5 ml-5 mr-5">
<NotableProject name="ChatMaps"/>
pease-portfolio/src/components/terminal.js
+67
View File
@@ -0,0 +1,67 @@
import { useEffect, useState } from "react";
import moment from "moment"
var commands = {
"uname -a": "Hello! My name is Nicholas Pease and I am currently a junior at the University of Maine pursuing a bachelors degree in Computer Science with a minor in Military Science. This website is a collection of both project / homework completed as required by my studies and as a showcase of some of the personal projects I have worked on. I will work to keep this up to date to the best of my ability. ",
"timedatectl": `This website was last updated on ${moment().format("dddd, MMMM Do YYYY")}.`
}
function Command({command, result}) {
return (
<div>
<span className="text-[green]">about@npease</span>:<span className="text-[blue]">~</span>$ {command}<br/>
<div>
{result? result: commands[command]}<br/>
</div>
</div>
)
}
export function Terminal() {
const [text, setText] = useState("")
const [history, setHistory] = useState([<Command command="uname -a"/>,<Command command="timedatectl"/>])
const handleKeyDown = event => {
event.preventDefault()
if (event.code == "Backspace") {setText(text.slice(0, -1))}
else if (event.code == "Enter") {
if (text == "clear") {
setHistory([])
} else {
commands[text] != null? setHistory([...history, <Command command={text}/>]): `Command '${text.split(" ")[0]}' not found.`
}
setText("")
}
else if (event.code == "ArrowUp") {history.length>0? setText(history[history.length-1].props.command): ""}
else if (event.code == "ArrowDown") {setText("")}
else if (event.code == "Minus") {setText(text + "-")}
else if (isValidKey(event)) {setText(text + event.key)}
};
return (
<div className="cursor-pointer outline-0 max-h-[420px] w-[100%] overflow-hidden max-lg:ml-5 max-lg:mr-5 flex flex-col-reverse p-1" onKeyDown={handleKeyDown} tabIndex={0}>
<pre className="bash text-wrap">
{history}
<div>
<span className="text-[green]">about@npease</span>:<span className="text-[blue]">~</span>$ {text}<span className="animate-blink"> </span>
</div>
</pre>
</div>
)
}
function isValidKey(event) {
const charCodes = [
'KeyA', 'KeyB', 'KeyC', 'KeyD', 'KeyE', 'KeyF', 'KeyG', 'KeyH', 'KeyI', 'KeyJ',
'KeyK', 'KeyL', 'KeyM', 'KeyN', 'KeyO', 'KeyP', 'KeyQ', 'KeyR', 'KeyS', 'KeyT',
'KeyU', 'KeyV', 'KeyW', 'KeyX', 'KeyY', 'KeyZ',
'KeyA', 'KeyB', 'KeyC', 'KeyD', 'KeyE', 'KeyF', 'KeyG', 'KeyH', 'KeyI', 'KeyJ',
'KeyK', 'KeyL', 'KeyM', 'KeyN', 'KeyO', 'KeyP', 'KeyQ', 'KeyR', 'KeyS', 'KeyT',
'KeyU', 'KeyV', 'KeyW', 'KeyX', 'KeyY', 'KeyZ',
'Digit0', 'Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6', 'Digit7', 'Digit8', 'Digit9',
'Space'
];
if (charCodes.includes(event.code)) {
return true;
} else {
return false;
}
}