Major design overhaul

This commit is contained in:
Maciej Pędzich 2020-11-27 23:12:38 +01:00
commit 94e5c92f5b
4 changed files with 152 additions and 0 deletions

62
assets/css/style.css Normal file
View File

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

BIN
assets/fonts/vga437.ttf Normal file

Binary file not shown.

65
assets/js/script.js Normal file
View File

@ -0,0 +1,65 @@
const input = document.querySelector('#cmd');
const cmdHistoryElement = document.querySelector('#cmd-history');
const today = new Date();
const cmdHistory = [];
let cmdIndex = 0;
document.querySelector('#currentYear').textContent = today.getFullYear();
input.focus();
input.addEventListener('blur', (evt) => input.focus());
window.addEventListener('keypress', (evt) => {
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);
switch (command) {
default:
output.style.color = 'red';
output.textContent = `ERROR: Unkown 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:
<a href="mailto:contact@maciejpedzi.ch">contact@maciejpedzi.ch</a>`;
break;
case 'exit':
window.close();
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>
<p>contact - displays contact information</p>
<p>exit - closes this page</p>
<p>github - shows Maciej's Github profile</p>
<p>help - displays a list of available commands</p>
<p>skills - presents a set of current skills</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, Linux Bash, Windows PowerShell</p>
<p>Hosting/Deployment: Netlify, Amazon Web Services, MongoDB Atlas</p>`;
break;
}
cmdHistory.push(command);
cmdHistoryElement.append(output);
input.value = '';
input.scrollIntoView();
}
});

25
index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Maciej Pędzich - 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</p>
<p>
(c) Maciej Pedzich, 2020-<span id="currentYear"></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>