maciejpedzich/maciejpedzi.ch
1
0
Fork 0
mirror of https://github.com/maciejpedzich/maciejpedzi.ch.git synced 2024-09-19 17:56:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Version 2.3.0 release

Browse Source
This commit is contained in:
Maciej Pędzich 2021-01-17 19:45:35 +01:00
parent d9f725c592
commit 269e4d647e
4 changed files with 120 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -1,5 +1,10 @@
# Changelog # Changelog
## 2.3.0
- Add special _'help'_ command for dummies
- Add `::selection` styling rules
## 2.2.0 ## 2.2.0
- Change copyright header - Change copyright header

76
assets/css/style.css
View File

@ -1,74 +1,84 @@
@font-face { @font-face {
font-family: 'VGA 437'; font-family: 'VGA 437';
src: url('../fonts/vga437.ttf'); src: url('../fonts/vga437.ttf');
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body, body,
#cmd { #cmd {
color: whitesmoke; color: whitesmoke;
} }
body { body {
background-color: black; background-color: black;
} }
::selection {
background-color: whitesmoke;
color: black;
}
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body, body,
#cmd { #cmd {
color: black; color: black;
} }
body { body {
background-color: whitesmoke; background-color: whitesmoke;
} }
::selection {
background-color: black;
color: whitesmoke;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
body { body {
overflow: hidden; overflow: hidden;
} }
} }
body, body,
#cmd { #cmd {
font-family: 'VGA 437'; font-family: 'VGA 437';
font-size: 1.5rem; font-size: 1.5rem;
} }
#cmd-history > p { #cmd-history > p {
line-height: 2rem; line-height: 2rem;
} }
#header > p { #header > p {
margin: 0.5rem auto; margin: 0.5rem auto;
} }
#header > #hint, #header > #hint,
#input-container, #input-container,
#cmd-history { #cmd-history {
margin-top: 1.8rem; margin-top: 1.8rem;
} }
#input-container { #input-container {
display: flex; display: flex;
} }
#bracket { #bracket {
padding-right: 0.75rem; padding-right: 0.75rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
line-height: 1.7rem; line-height: 1.7rem;
} }
#cmd { #cmd {
border: none; border: none;
background: none; background: none;
flex: 1; flex: 1;
} }
#cmd:active, #cmd:active,
#cmd:focus { #cmd:focus {
outline: none; outline: none;
} }

95
assets/js/script.js
View File

@ -11,71 +11,74 @@ input.focus();
input.addEventListener('blur', (evt) => input.focus()); input.addEventListener('blur', (evt) => input.focus());
window.addEventListener('keypress', (evt) => { window.addEventListener('keypress', (evt) => {
const command = input.value.trim(); const command = input.value.trim();
if (evt.key === 'Enter' && command.length > 0) { if (evt.key === 'Enter' && command.length > 0) {
const cmdToSave = document.createElement('p'); const cmdToSave = document.createElement('p');
const output = document.createElement('p'); const output = document.createElement('p');
cmdToSave.textContent = `> ${command}`; cmdToSave.textContent = `> ${command}`;
cmdHistoryElement.append(cmdToSave); cmdHistoryElement.append(cmdToSave);
switch (command.toLowerCase()) { switch (command.toLowerCase()) {
default: default:
output.style.color = 'red'; output.style.color = 'red';
output.textContent = `ERROR: Unknown command '${command}'`; output.textContent = `ERROR: Unknown command '${command}'`;
break; break;
case 'about': case 'about':
const timeDiff = today.getTime() - new Date('2005-05-08').getTime(); const timeDiff = today.getTime() - new Date('2005-05-08').getTime();
const age = Math.floor(timeDiff / (3600 * 24 * 365 * 1000)); const age = Math.floor(timeDiff / (3600 * 24 * 365 * 1000));
output.textContent = `Maciej Pedzich is a ${age}-year-old high school student from Kielce, Poland. 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 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. 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.`; When not coding, he is probably watching an F1 race, or playing retro video games.`;
break; break;
case 'cls': case 'cls':
cmdHistoryElement.textContent = ''; cmdHistoryElement.textContent = '';
break; break;
case 'contact': case 'contact':
output.innerHTML = `Email address: output.innerHTML = `Email address:
<a href="mailto:contact@maciejpedzi.ch">contact@maciejpedzi.ch</a>`; <a href="mailto:contact@maciejpedzi.ch">contact@maciejpedzi.ch</a>`;
break; break;
case 'github': case 'github':
window.open('https://github.com/maciejpedzich'); window.open('https://github.com/maciejpedzich');
break; break;
case 'help': case "'help'":
output.innerHTML = `<p>about - shows everything you need to know about Maciej</p> output.textContent = 'Without the quotes, dummy.';
break;
case 'help':
output.innerHTML = `<p>about - shows everything you need to know about Maciej</p>
<p>cls - clears screen</p> <p>cls - clears screen</p>
<p>contact - displays contact information</p> <p>contact - displays contact information</p>
<p>github - opens Maciej's Github profile</p> <p>github - opens Maciej's Github profile</p>
<p>help - displays a list of available commands</p> <p>help - displays a list of available commands</p>
<p>skills - presents a set of current skills</p> <p>skills - presents a set of current skills</p>
<p>If on desktop/laptop, use up and down arrows to retype commands</p>`; <p>If on desktop/laptop, use up and down arrows to retype commands</p>`;
break; break;
case 'skills': case 'skills':
output.innerHTML = `<p>Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js</p> output.innerHTML = `<p>Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js</p>
<p>Backend: JavaScript, TypeScript, Node.js, Express</p> <p>Backend: JavaScript, TypeScript, Node.js, Express</p>
<p>Database: MongoDB, PostgreSQL</p> <p>Database: MongoDB, PostgreSQL</p>
<p>Tooling: Git, Visual Studio Code, Bash, Windows PowerShell, Postman</p> <p>Tooling: Git, Visual Studio Code, Bash, Windows PowerShell, Postman</p>
<p>Hosting/Deployment: Netlify, Heroku, Amazon Web Services, MongoDB Atlas</p>`; <p>Hosting/Deployment: Netlify, Heroku, Amazon Web Services, MongoDB Atlas</p>`;
break; break;
} }
cmdHistory.push(command); cmdHistory.push(command);
cmdHistoryElement.append(output); cmdHistoryElement.append(output);
input.value = ''; input.value = '';
input.scrollIntoView(); input.scrollIntoView();
} }
}); });
window.addEventListener('keydown', (evt) => { window.addEventListener('keydown', (evt) => {
if (cmdHistory.length > 0) { if (cmdHistory.length > 0) {
if (evt.key === 'ArrowUp') { if (evt.key === 'ArrowUp') {
cmdIndex - 1 >= 0 ? cmdIndex-- : (cmdIndex = cmdHistory.length - 1); cmdIndex - 1 >= 0 ? cmdIndex-- : (cmdIndex = cmdHistory.length - 1);
input.value = cmdHistory[cmdIndex]; input.value = cmdHistory[cmdIndex];
} else if (evt.key === 'ArrowDown') { } else if (evt.key === 'ArrowDown') {
cmdIndex + 1 < cmdHistory.length ? cmdIndex++ : (cmdIndex = 0); cmdIndex + 1 < cmdHistory.length ? cmdIndex++ : (cmdIndex = 0);
input.value = cmdHistory[cmdIndex]; input.value = cmdHistory[cmdIndex];
} }
} }
}); });

46
index.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta <meta
name="description" name="description"
content="Maciej Pędzich - future full-stack web developer, high school student, retro video games and F1 fan. All in one person." content="Maciej Pędzich - future full-stack web developer, high school student, retro video games and F1 fan. All in one person."
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Maciej Pędzich</title> <title>Maciej Pędzich</title>
<link rel="stylesheet" href="./assets/css/style.css" /> <link rel="stylesheet" href="./assets/css/style.css" />
</head> </head>
<body> <body>
<div id="header"> <div id="header">
<p>maciejpedzi.ch [Version 2.2.0]</p> <p>maciejpedzi.ch [Version 2.3.0]</p>
<p>(C) Maciej Pedzich <span id="current-year"></span></p> <p>(C) Maciej Pedzich <span id="current-year"></span></p>
<p id="hint">Welcome! Type 'help' for more information</p> <p id="hint">Welcome! Type 'help' for more information</p>
</div> </div>
<div id="cmd-history"></div> <div id="cmd-history"></div>
<div id="input-container"> <div id="input-container">
<div id="bracket">></div> <div id="bracket">></div>
<input type="text" id="cmd" /> <input type="text" id="cmd" />
</div> </div>
<script src="./assets/js/script.js"></script> <script src="./assets/js/script.js"></script>
</body> </body>
</html> </html>