Compare commits

...

2 Commits

Author SHA1 Message Date
5e3c51e6be
website redesign pt. 2 2024-08-10 10:32:38 +02:00
db91653f97
website redesign 2024-08-10 10:03:59 +02:00
12 changed files with 180 additions and 420 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

BIN
assets/palette.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -6,15 +6,12 @@
--color: #000;
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color);
background-color: var(--background);
font-family: 'Inconsolata', sans-serif;
@ -22,92 +19,49 @@ body {
}
#container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
max-width: 50%;
text-align: center;
height: 100%;
width: 100%;
}
#container>* {
width: 50%;
#shadow {
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 30em 10em rgb(114, 114, 114);
}
[data-tooltip] {
.tags {
gap: 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tags>* {
border: 2px solid var(--color);
padding: 10px 20px 10px 20px;
}
#switch_theme {
cursor: pointer;
text-decoration: underline;
position: fixed;
margin: 10px;
bottom: 0;
right: 0;
display: block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid var(--color);
}
[data-tooltip]:hover:after {
content: " (" attr(data-tooltip) ")";
#switch_theme > img {
width: 50px;
}
a {
color: var(--color);
}
ul.vertical li {
display: inline-block;
}
ul.vertical li:not(:first-child)::before {
content: " - ";
font-weight: bold;
}
input,
a,
#result {
transition: background 0.3s ease-in-out;
}
input {
font-family: 'Inconsolata', sans-serif;
font-size: 150%;
outline: none;
border: none;
border-bottom: 1px solid;
color: var(--color);
background-color: transparent;
}
#result {
background-color: transparent;
white-space: preserve;
color: var(--color);
height: 100%;
overflow-y: auto;
align-content: center;
}
#switch_theme,
#help {
text-decoration: underline;
cursor: pointer;
}
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.image-grid>* {
max-width: 100%;
max-height: 50%;
}
@media screen and (max-width: 798px) {
#container {
flex-direction: column !important;
}
#container>* {
width: 100%;
}
}

View File

@ -11,3 +11,23 @@ body.dark #result,
body.dark a {
color: var(--background) !important;
}
body.dark .tags > * {
border: 2px solid var(--background);
}
body.dark #shadow {
box-shadow: 0 0 30em 10em rgb(161, 148, 147);
}
body.dark a {
color: var(--background);
}
body.dark #switch_theme {
border: 1px solid var(--background) !important;
}
body.dark #switch_theme > img {
filter: invert() !important;
}

View File

@ -7,10 +7,11 @@
<link rel="shortcut icon" href="assets/logo.png">
<link rel="stylesheet" href="css/style.css">
<title>sador - something weird happened</title>
<title>something weird happened</title>
</head>
<body>
<div id="shadow"></div>
<div id="container">
<h1 id="code">{{placeholder "http.error.status_code"}}</h1>
<p id="explanation">{{placeholder "http.error.message"}}.</p>

View File

@ -5,27 +5,101 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/commands.js" defer></script>
<script src="js/script.js" defer></script>
<script src="js/data.js" defer></script>
<script src="script.js" defer></script>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="assets/logo.png">
<title>sador</title>
<title>hi</title>
</head>
<body>
<div id="shadow"></div>
<div id="container">
<div>
<h1>welcome to my website</h1>
<h2 id="switch_theme">switch theme</h2>
<p>type <span id="help">'help'</span> to list all commands</p>
<span>[guest@website ~]$ </span>
<input type="text" id="command">
<h1>hi</h1>
<h3>who i am</h3>
<div class="tags">
<span>Franek</span>
<span><span id="age">???</span> years old</span>
<span>introvert</span>
</div>
<div id="result">
<h3>what are my hobbies</h3>
<div class="tags">
<span>IT</span>
<span>old automotive</span>
<span>music</span>
</div>
<h3>what i can</h3>
<div class="tags">
<span>play keyboard instruments</span>
<span>mess with PCs from software to hardware</span>
<span>program various apps and scripts</span>
</div>
<h3>what music genres do I like</h3>
<div class="tags">
<span>black metal</span>
<span>depressive suicidal black metal</span>
<span>doom metal</span>
<span>nu metal</span>
<span>rock</span>
</div>
<h3>what bands/singers do I like</h3>
<div class="tags">
<span>Mgła</span>
<span>Behemoth</span>
<span>Burzum</span>
<span>Venom</span>
<span>Darkthrone</span>
<span>Ancient North</span>
<span>Rammstein</span>
<span>None</span>
<span>Decalius</span>
<span>Slipknot</span>
<span>Lil Peep</span>
<span>ABBA</span>
<span>Alphaville</span>
<span>MGMT</span>
<span>Depeche Mode</span>
<span>Evanescence</span>
<span>Loreen</span>
</div>
<h3>on which platforms I am on</h3>
<div class="tags">
<a href="https://instagram.com/sadorowo">instagram</a>
<a href="https://github.com/sadorowo">github</a>
<a href="https://git.sador.me/sadorowo">gitea</a>
</div>
<h3>what tools/frameworks do I know</h3>
<div class="tags">
<span>React</span>
<span>Flutter</span>
<span>JavaScript</span>
<span>TypeScript</span>
<span>Rust</span>
<span>Go</span>
</div>
<h3>what software I'm using</h3>
<div class="tags">
<span>Arch Linux + Hyprland</span>
<span>Firefox</span>
<span>VSCodium</span>
<span>YouTube Music</span>
<span>LibreOffice</span>
<span>Thunderbird</span>
</div>
<a href="mailto:contact@sador.me">
<h3>write a letter to me</h3>
</a>
<h4>maybe i'll write something interesting here soon. who knows.</h4>
<div id="switch_theme">
<img src="assets/palette.png" alt="palette logo">
</div>
</div>
</body>

View File

@ -1,193 +0,0 @@
const COMMANDS = [
{
name: 'help',
description: 'shows list of all commands',
usage: '<command?>',
usage_examples: ['help help', 'help music'],
arguments: [
{
name: 'command',
description: 'command name',
required: false,
check: (command) => !!command && !COMMANDS.find(c => c.name === command)
? "invalid command"
: null
}
],
output: (command) => !!command
? getCommandHelp(command.toLowerCase())
: COMMANDS
.map(c => `${c.name}: ${c.description}`)
.join('\n')
},
{
name: 'music',
description: 'show information about my music taste',
usage: '<genre?>',
usage_examples: ['music heavy metal', 'music gothic metal', 'music'],
arguments: [
{
name: 'genre',
description: 'music genre',
required: false,
multiword: true,
check: (genre) => !!genre && !getGenre(genre)
? "no informations about this music genre, run 'music' command to find available genres"
: null
}
],
output: (...partialGenre) => {
const genre = partialGenre.join(' ')
return !!genre
? getGenreHelp(genre)
: `
if you want to get more info about specific genre, use <b>music [name/alias]</b>
i am listening to these music genres:
${MUSIC_METADATA
.map(genre_data => !!genre_data.aliases?.length
? `${genre_data.name} (aliases: ${genre_data.aliases.join(', ')})`
: genre_data.name)
.join('\n')}
`
}
},
{
name: 'hardware',
description: 'show information about my hardware',
usage: '',
usage_examples: ['hardware'],
arguments: [],
output: () => [
'cpu: intel i5-4590',
'gpu: radeon rx 5500 xt',
'bluetooth & wi-fi: fenvi t919',
'keyboard: microsoft all-in-one media keyboard',
'headphones: beats studio buds',
'display: lg m2450d',
'motherboard: asrock h97m pro4',
'ram: 16gb ddr3',
'ssd: adata 500gb'
].join('\n')
},
{
name: 'software',
description: 'show information about my software',
usage: '',
usage_examples: ['software'],
arguments: [],
output: () => [
'recording/editing:',
'',
'gimp',
'davinci resolve',
'',
'programming/web dev.:',
'',
'vscodium',
'android studio',
'ssh in terminal',
'postman',
'git',
'internet:',
'firefox',
'',
'music - tidal',
'',
'other:',
'',
'bitwarden (self-hosted)',
'libreoffice'
].join('\n')
},
{
name: 'plans',
description: 'show my plans',
usage: '',
usage_examples: ['plans'],
arguments: [],
output: () => [
'i want to:',
'',
'change style/look',
'have maximum privacy',
'forget about my past',
'be happy',
'be successful',
'meet some kind and respective people'
].join('\n')
},
{
name: 'links',
description: 'show URLs related to me & my services',
usage: '',
usage_examples: ['links'],
arguments: [],
output: () => Object.entries(LINKS)
.map(([name, url]) => `<a href="${url}" target="_blank">${name}</a>`)
.join('\n')
},
{
name: 'desktop',
description: 'Show some desktop screenshots',
usage: '',
usage_examples: [],
arguments: [],
output: () => {
let result = [];
for (let i = 0; i < 3;) {
result.push(`<img src="assets/desktop_screenshots/${++i}.png" alt="Desktop screenshot"/>`)
}
return `
<div class="image-grid">
${result.join('\n')}
</div>
`
}
}
]
function getGenreHelp(genreName) {
const genre = getGenre(genreName)
if (!genre) return 'music: no informations about this music genre';
return `
i enjoy listening to ${genre.name}.
example ${genreName} artists/bands that i am listening to:
${genre.artists.join('\n')}
`
}
function getGenre(genreName) {
return MUSIC_METADATA.find(genre =>
genre.name === genreName ||
genre.aliases.includes(genreName));
}
function getCommandHelp(commandName) {
const command = COMMANDS.find(c => c.name === commandName)
if (!command) return 'help: invalid command';
return `
-> ${command.name} command
${command.description}
usage:
${command.name} ${command.usage}
arguments:
${command.arguments
.map(a => `${a.required ? 'required: ' : ''}${a.name} - ${a.description}`)
.join('\n')}
examples:
${command.usage_examples.join('\n')}
`
}

View File

@ -1,41 +0,0 @@
const LINKS = {
'gitea': 'https://git.sador.me/sadorowo',
'instagram': 'https://instagram.com/sadorowo',
'matrix': 'https://matrix.sador.me',
'email': 'mailto:contact@sador.me',
}
const MUSIC_METADATA = [
{
name: 'heavy metal',
aliases: ['hm', 'heavy'],
artists: [
'Poisonblack',
'Metallica'
]
},
{
name: 'depressive suicidal black metal',
aliases: ['dsbm'],
artists: [
'Totalselfhatred',
'Lifelover',
'минута агонии',
'Decalius'
]
},
{
name: 'black metal',
aliases: ['bm', 'black'],
artists: [
'Behemoth',
'Venom',
'Mgła',
'Watain',
'Bathory',
'Carpathian Forest',
'Darkthrone',
'Rotting Christ'
]
}
]

View File

@ -1,90 +0,0 @@
// update age
function updateAge() {
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
age.textContent = difference.toFixed(4);
}
// process command function
function processCommand(input) {
const [commandName, ...args] = input.split(' ') || [input]
const suppliedCommand = COMMANDS.find(c => c.name === commandName)
if (!suppliedCommand) {
result.textContent = '';
return;
}
const { arguments, output } = suppliedCommand;
for (const i in arguments) {
const argument = arguments[i]
if (argument.required && !args[i]) {
result.textContent = `argument ${argument.name} is missing`;
return
}
const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
if (typeof errorMessage === 'string') {
result.textContent = `error while executing ${suppliedCommand.name}: ${errorMessage}`;
return
}
}
result.innerHTML = output(...args).replaceAll(TAB, '')
}
// wrapper for setInterval
const runEvery = (task, ms) => {
task()
setInterval(task, ms)
}
// smooth scrolling
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
smoothScrollLinks.forEach(link => {
link.addEventListener('click', event => {
event.preventDefault();
const target = document.querySelector(event.target.hash);
target.scrollIntoView({ behavior: 'smooth' });
});
});
// theme management
switch_theme?.addEventListener('click', () => {
const theme = localStorage.getItem('theme');
localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light');
document.body.classList.toggle('dark')
})
// command management
const TAB = ' ';
command?.addEventListener('focusout', () => {
setTimeout(() => command.focus(), 0);
})
command?.addEventListener('input', () => processCommand(command.value))
// run all tasks
if (typeof age !== 'undefined') runEvery(updateAge, 10 * 1000)
command?.focus()
// initial theme configuration
const theme = localStorage.getItem('theme');
if (theme === 'dark')
document.body.classList.add('dark')
// listen to help tooltip
help.addEventListener('click', () => {
command.value = 'help';
processCommand('help');
})
// ignore context menu
document.addEventListener('contextmenu', e => e.preventDefault());
// check for command in input
if (command?.value) processCommand(command.value);

35
script.js Normal file
View File

@ -0,0 +1,35 @@
// update age
function updateAge() {
const difference = new Date().getFullYear() - 2007;
age.textContent = difference;
}
// smooth scrolling
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
smoothScrollLinks.forEach(link => {
link.addEventListener('click', event => {
event.preventDefault();
const target = document.querySelector(event.target.hash);
target.scrollIntoView({ behavior: 'smooth' });
});
});
// theme management
switch_theme?.addEventListener('click', () => {
const theme = localStorage.getItem('theme');
localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light');
document.body.classList.toggle('dark')
})
// run all tasks
if (typeof age !== 'undefined') updateAge()
// initial theme configuration
const theme = localStorage.getItem('theme');
if (theme === 'dark')
document.body.classList.add('dark')
// ignore context menu
document.addEventListener('contextmenu', e => e.preventDefault());