diff --git a/assets/desktop_screenshots/1.png b/assets/desktop_screenshots/1.png deleted file mode 100644 index 7a7b5dc..0000000 Binary files a/assets/desktop_screenshots/1.png and /dev/null differ diff --git a/assets/desktop_screenshots/2.png b/assets/desktop_screenshots/2.png deleted file mode 100644 index dcad9aa..0000000 Binary files a/assets/desktop_screenshots/2.png and /dev/null differ diff --git a/assets/desktop_screenshots/3.png b/assets/desktop_screenshots/3.png deleted file mode 100644 index 7ce6ea1..0000000 Binary files a/assets/desktop_screenshots/3.png and /dev/null differ diff --git a/css/style.css b/css/style.css index 5461639..51c1492 100644 --- a/css/style.css +++ b/css/style.css @@ -23,8 +23,8 @@ body { #container { display: flex; - flex-direction: row; align-items: center; + flex-direction: column; justify-content: center; text-align: center; @@ -32,82 +32,26 @@ body { width: 100%; } -#container>* { - width: 50%; +#shadow { + position: absolute; + top: 50%; + left: 50%; + box-shadow: 0 0 30em 10em rgb(114, 114, 114); } -[data-tooltip] { - text-decoration: underline; -} - -[data-tooltip]:hover:after { - content: " (" attr(data-tooltip) ")"; -} - -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 { +.tags { + gap: 5px; display: flex; flex-wrap: wrap; - gap: 5px; + justify-content: center; } -.image-grid>* { - max-width: 100%; - max-height: 50%; +.tags > * { + border: 2px solid var(--color); + padding: 10px 20px 10px 20px; } -@media screen and (max-width: 798px) { - #container { - flex-direction: column !important; - } - - #container>* { - width: 100%; - } +#switch_theme { + cursor: pointer; + text-decoration: underline; } \ No newline at end of file diff --git a/css/style.dark.css b/css/style.dark.css index 62afb47..b214cde 100644 --- a/css/style.dark.css +++ b/css/style.dark.css @@ -10,4 +10,12 @@ body.dark input { 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 rgba(255, 189, 184, 1); } \ No newline at end of file diff --git a/error.html b/error.html index 8205642..0d0db45 100644 --- a/error.html +++ b/error.html @@ -7,10 +7,11 @@ - sador - something weird happened + something weird happened +

{{placeholder "http.error.status_code"}}

{{placeholder "http.error.message"}}.

diff --git a/index.html b/index.html index 0347269..6ae91a2 100644 --- a/index.html +++ b/index.html @@ -5,28 +5,62 @@ - - - + - sador + hi +
-
-

welcome to my website

-

switch theme

- -

type 'help' to list all commands

- [guest@website ~]$ - +

hi

+

who i am

+
+ Franek + ??? years old
-
+

what i like

+
+ IT + old automotive + music
+ +

what i can

+
+ play keyboard instruments + mess with PCs from software to hardware + program various apps and scripts +
+ +

what i'm listening to

+
+ Mgła + Behemoth + Venom + Darkthrone + Slipknot + Lil Peep + Alphaville + Depeche Mode +
+ +

on which platforms I am on

+ + + +

write an letter to me

+
+ +

maybe i'll write something interesting here soon. who knows.

+

switch theme

diff --git a/js/commands.js b/js/commands.js deleted file mode 100644 index a4f3b88..0000000 --- a/js/commands.js +++ /dev/null @@ -1,193 +0,0 @@ -const COMMANDS = [ - { - name: 'help', - description: 'shows list of all commands', - usage: '', - 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: '', - 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 music [name/alias] - 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]) => `${name}`) - .join('\n') - }, - { - name: 'desktop', - description: 'Show some desktop screenshots', - usage: '', - usage_examples: [], - arguments: [], - output: () => { - let result = []; - - for (let i = 0; i < 3;) { - result.push(`Desktop screenshot`) - } - - return ` -
- ${result.join('\n')} -
- ` - } - } -] - -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')} - ` -} \ No newline at end of file diff --git a/js/data.js b/js/data.js deleted file mode 100644 index eb6b616..0000000 --- a/js/data.js +++ /dev/null @@ -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' - ] - } -] \ No newline at end of file diff --git a/js/script.js b/js/script.js deleted file mode 100644 index fcfddc0..0000000 --- a/js/script.js +++ /dev/null @@ -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); \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e0bcd2e --- /dev/null +++ b/script.js @@ -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()); \ No newline at end of file