mirror of
https://github.com/maciejpedzich/maciejpedzi.ch.git
synced 2024-11-27 15:45:47 +01:00
Version 2.3.0 release
This commit is contained in:
Maciej Pędzich
parent
d9f725c592
commit
269e4d647e
@ -1,5 +1,10 @@
|
||||
# Changelog
|
||||
|
||||
## 2.3.0
|
||||
|
||||
- Add special _'help'_ command for dummies
|
||||
- Add `::selection` styling rules
|
||||
|
||||
## 2.2.0
|
||||
|
||||
- Change copyright header
|
||||
|
||||
@ -1,74 +1,84 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: whitesmoke;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body,
|
||||
#cmd {
|
||||
color: black;
|
||||
}
|
||||
body,
|
||||
#cmd {
|
||||
color: black;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: black;
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
#cmd {
|
||||
font-family: 'VGA 437';
|
||||
font-size: 1.5rem;
|
||||
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;
|
||||
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;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -11,71 +11,74 @@ 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.toLowerCase()) {
|
||||
default:
|
||||
output.style.color = 'red';
|
||||
output.textContent = `ERROR: Unknown command '${command}'`;
|
||||
break;
|
||||
case 'about':
|
||||
const timeDiff = today.getTime() - new Date('2005-05-08').getTime();
|
||||
const age = Math.floor(timeDiff / (3600 * 24 * 365 * 1000));
|
||||
switch (command.toLowerCase()) {
|
||||
default:
|
||||
output.style.color = 'red';
|
||||
output.textContent = `ERROR: Unknown command '${command}'`;
|
||||
break;
|
||||
case 'about':
|
||||
const timeDiff = today.getTime() - new Date('2005-05-08').getTime();
|
||||
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 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 'cls':
|
||||
cmdHistoryElement.textContent = '';
|
||||
break;
|
||||
case 'contact':
|
||||
output.innerHTML = `Email address:
|
||||
break;
|
||||
case 'cls':
|
||||
cmdHistoryElement.textContent = '';
|
||||
break;
|
||||
case 'contact':
|
||||
output.innerHTML = `Email address:
|
||||
<a href="mailto:contact@maciejpedzi.ch">contact@maciejpedzi.ch</a>`;
|
||||
break;
|
||||
case 'github':
|
||||
window.open('https://github.com/maciejpedzich');
|
||||
break;
|
||||
case 'help':
|
||||
output.innerHTML = `<p>about - shows everything you need to know about Maciej</p>
|
||||
break;
|
||||
case 'github':
|
||||
window.open('https://github.com/maciejpedzich');
|
||||
break;
|
||||
case "'help'":
|
||||
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>contact - displays contact information</p>
|
||||
<p>github - opens Maciej's Github profile</p>
|
||||
<p>help - displays a list of available commands</p>
|
||||
<p>skills - presents a set of current skills</p>
|
||||
<p>If on desktop/laptop, use up and down arrows to retype commands</p>`;
|
||||
break;
|
||||
case 'skills':
|
||||
output.innerHTML = `<p>Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js</p>
|
||||
break;
|
||||
case 'skills':
|
||||
output.innerHTML = `<p>Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js</p>
|
||||
<p>Backend: JavaScript, TypeScript, Node.js, Express</p>
|
||||
<p>Database: MongoDB, PostgreSQL</p>
|
||||
<p>Tooling: Git, Visual Studio Code, Bash, Windows PowerShell, Postman</p>
|
||||
<p>Hosting/Deployment: Netlify, Heroku, Amazon Web Services, MongoDB Atlas</p>`;
|
||||
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];
|
||||
}
|
||||
}
|
||||
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];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
46
index.html
46
index.html
@ -1,26 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="description"
|
||||
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" />
|
||||
<title>Maciej Pędzich</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<p>maciejpedzi.ch [Version 2.2.0]</p>
|
||||
<p>(C) Maciej Pedzich <span id="current-year"></span></p>
|
||||
<p id="hint">Welcome! Type 'help' for more information</p>
|
||||
</div>
|
||||
<div id="cmd-history"></div>
|
||||
<div id="input-container">
|
||||
<div id="bracket">></div>
|
||||
<input type="text" id="cmd" />
|
||||
</div>
|
||||
<script src="./assets/js/script.js"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="description"
|
||||
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" />
|
||||
<title>Maciej Pędzich</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<p>maciejpedzi.ch [Version 2.3.0]</p>
|
||||
<p>(C) Maciej Pedzich <span id="current-year"></span></p>
|
||||
<p id="hint">Welcome! Type 'help' for more information</p>
|
||||
</div>
|
||||
<div id="cmd-history"></div>
|
||||
<div id="input-container">
|
||||
<div id="bracket">></div>
|
||||
<input type="text" id="cmd" />
|
||||
</div>
|
||||
<script src="./assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user