diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cd66cf..57b44b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## v2.1.0 + +- Remove unnecessary "exit" command +- Remove native webstie scrollbar +- Add command retyping using up and down arrows + ## v2.0.1 - Fix "unkown" typo @@ -7,4 +13,4 @@ ## v2.0.0 -- Initial version 2.x.x release +- Initial version 2.x.y release diff --git a/assets/css/style.css b/assets/css/style.css index 46900b8..f2a7ba4 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,62 +1,72 @@ @font-face { - font-family: "VGA 437"; - src: url("../fonts/vga437.ttf"); + font-family: 'VGA 437'; + src: url('../fonts/vga437.ttf'); } @media (prefers-color-scheme: dark) { - body, #cmd { - color: whitesmoke; - } + body, + #cmd { + color: whitesmoke; + } - body { - background-color: black; - } + body { + background-color: black; + } } @media (prefers-color-scheme: light) { - body, #cmd { - color: black; - } + body, + #cmd { + color: black; + } - body { - background-color: whitesmoke; - } + body { + background-color: whitesmoke; + } } -body, #cmd { - font-family: "VGA 437"; - font-size: 1.5rem; +body { + overflow: hidden; +} + +body, +#cmd { + font-family: 'VGA 437'; + font-size: 1.5rem; } #cmd-history > p { - line-height: 2rem; + line-height: 2rem; } #header > p { - margin: 0.5rem auto; + margin: 0.5rem auto; } -#header > #hint, #input-container, #cmd-history { - margin-top: 1.8rem; +#header > #hint, +#input-container, +#cmd-history { + margin-top: 1.8rem; } #input-container { - display: flex; + display: flex; } #bracket { - padding-right: 0.75rem; - text-align: center; - vertical-align: middle; - line-height: 1.7rem; + padding-right: 0.75rem; + text-align: center; + vertical-align: middle; + line-height: 1.7rem; } #cmd { - border: none; - background: none; - flex: 1 + border: none; + background: none; + flex: 1; } -#cmd:active, #cmd:focus { - outline: none; +#cmd:active, +#cmd:focus { + outline: none; } diff --git a/assets/js/script.js b/assets/js/script.js index f00085a..ce69732 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -10,56 +10,65 @@ input.focus(); input.addEventListener('blur', (evt) => input.focus()); window.addEventListener('keypress', (evt) => { - const command = input.value.trim(); + const command = input.value.trim(); - if (evt.key === 'Enter' && command.length > 0) { - const cmdToSave = document.createElement('p'); - const output = document.createElement('p'); - cmdToSave.textContent = `> ${command}`; - cmdHistoryElement.append(cmdToSave); + if (evt.key === 'Enter' && command.length > 0) { + const cmdToSave = document.createElement('p'); + const output = document.createElement('p'); + cmdToSave.textContent = `> ${command}`; + cmdHistoryElement.append(cmdToSave); - switch (command) { - default: - output.style.color = 'red'; - output.textContent = `ERROR: Unknown command '${command}'`; - break; - case 'about': - const age = today.getFullYear() - new Date('2005-05-08').getFullYear() - output.textContent = `Maciej Pedzich is a ${age}-year-old high school student from Kielce, Poland. + switch (command.toLowerCase()) { + default: + output.style.color = 'red'; + output.textContent = `ERROR: Unknown command '${command}'`; + break; + case 'about': + const age = today.getFullYear() - new Date('2005-05-08').getFullYear(); + output.textContent = `Maciej Pedzich is a ${age}-year-old high school student from Kielce, Poland. He makes web applications using Vue.js, Node.js, Express and MongoDB/PostgreSQL, but he likes experimenting with other solutions too. He believes that by being creative and cooperating with others, you can achieve success. When not coding he is probably watching an F1 race or playing retro video games.`; - break; - case 'contact': - output.innerHTML = `Email address: + break; + case 'contact': + output.innerHTML = `Email address: contact@maciejpedzi.ch`; - break; - case 'exit': - window.close(); - break; - case 'github': - window.open('https://github.com/maciejpedzich'); - break; - case 'help': - output.innerHTML = `

about - shows everything you need to know about Maciej

+ break; + case 'github': + window.open('https://github.com/maciejpedzich'); + break; + case 'help': + output.innerHTML = `

about - shows everything you need to know about Maciej

contact - displays contact information

-

exit - closes this page

github - shows Maciej's Github profile

help - displays a list of available commands

-

skills - presents a set of current skills

`; - break; - case 'skills': - output.innerHTML = `

Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js

+

skills - presents a set of current skills

+

Use up and down arrows to retype previous commands

`; + break; + case 'skills': + output.innerHTML = `

Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js

Backend: JavaScript, TypeScript, Node.js, Express

Database: MongoDB, PostgreSQL

Tooling: Git, Visual Studio Code, Linux Bash, Windows PowerShell

Hosting/Deployment: Netlify, Amazon Web Services, MongoDB Atlas

`; - break; - } + break; + } - cmdHistory.push(command); - cmdHistoryElement.append(output); - input.value = ''; - input.scrollIntoView(); - } + cmdHistory.push(command); + cmdHistoryElement.append(output); + input.value = ''; + input.scrollIntoView(); + } +}); + +window.addEventListener('keydown', (evt) => { + if (cmdHistory.length > 0) { + if (evt.key === 'ArrowUp') { + cmdIndex - 1 >= 0 ? cmdIndex-- : (cmdIndex = cmdHistory.length - 1); + input.value = cmdHistory[cmdIndex]; + } else if (evt.key === 'ArrowDown') { + cmdIndex + 1 < cmdHistory.length ? cmdIndex++ : (cmdIndex = 0); + input.value = cmdHistory[cmdIndex]; + } + } }); diff --git a/index.html b/index.html index 712d7d6..3a0abac 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,26 @@ - - - - - Maciej Pędzich - - - - -
-
-
>
- -
- - + + + + + Maciej Pędzich + + + + +
+
+
>
+ +
+ +