jolzem/jolzem.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernized website look

Browse Source
This commit is contained in:
Johannes Olzem 2024-05-15 12:08:00 +02:00
parent 692db759dc
commit 69d183d689
Signed by: jolzem
GPG Key ID: DB5485828E95A447
20 changed files with 250 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
404.html
View File

@ -10,16 +10,19 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>404 Error</h1> <h1>404 Error</h1>
<p>The page you requested couldn't be found. </p> <p style='text-align: center;'>The page you requested couldn't be found. </p>
<a href='/'>Return to homepage</a> <a href='/'>Return to homepage</a>
</main> </main>
<footer> <footer>

15
about/index.html
View File

@ -10,13 +10,16 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav>
<a href='/blog/'>Blog</a>
<a href='#'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main> <main>
<h2>About Me</h2> <h2>About Me</h2>
<!--<img src='/img/me.png' style='float:left;margin:1rem;border-radius:1rem;height:256px;'>--> <!--<img src='/img/me.png' style='float:left;margin:1rem;border-radius:1rem;height:256px;'>-->

BIN
assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/logogradient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

15
blog/how-to-create-a-rust-server-on-linux/index.html
View File

@ -10,13 +10,16 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main> <main>
<h1>How to create a Rust server on Linux</h1> <h1>How to create a Rust server on Linux</h1>
<div class='author'>Johannes Olzem</div> <div class='author'>Johannes Olzem</div>

17
blog/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='#'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h2>Blog</h2> <h2>Blog</h2>
<div class='blog-entries'> <div class='blog-entries'>
<a href='quick-fixes/'>Quick Fixes</a> <a href='quick-fixes/'>Quick Fixes</a>

17
blog/quick-fixes/android-pihole-no-internet/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>Connected without internet on Android after setting PiHole as DNS server.</h1> <h1>Connected without internet on Android after setting PiHole as DNS server.</h1>
<br> <br>
<p> <p>

17
blog/quick-fixes/homeassistant-proxy/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>HomeAssistant not connecting over reverse proxy</h1> <h1>HomeAssistant not connecting over reverse proxy</h1>
<br> <br>
<p> <p>

15
blog/quick-fixes/index.html
View File

@ -10,13 +10,16 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main> <main>
<h2>Quick Fixes</h2> <h2>Quick Fixes</h2>
<h3>This is a page with small problems, to which I have found easy solutions, so as to not litter the blog page.</h3> <h3>This is a page with small problems, to which I have found easy solutions, so as to not litter the blog page.</h3>

17
blog/quick-fixes/nextcloud-file-not-supported/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>Nextcloud file not supported error</h1> <h1>Nextcloud file not supported error</h1>
<h2><code>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code></h2> <h2><code>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code></h2>
<br> <br>

17
blog/quick-fixes/pacman-404/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>Pacman install fails with 404</h1> <h1>Pacman install fails with 404</h1>
<h2><code>error: failed retrieving file 'X' from Y : The requested URL returned error: 404</code></h2> <h2><code>error: failed retrieving file 'X' from Y : The requested URL returned error: 404</code></h2>
<br> <br>

72
blog/quick-fixes/pages.html
View File

@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Quick Fixes - Blog - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace.">
<meta charset='utf-8'>
<link rel='stylesheet' href='/css/style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='icon' href='/favico.ico'>
</head>
<body class='quick-fixes'>
<header>
<a href='/'>Johannes Olzem's Webspace</a>
</header>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h2>Quick Fixes</h2>
<p>
This is a page with small problems, to which I have found easy solutions,
so as to not litter the blog page.
</p><br>
<table class='quick-fixes-table'>
<tr>
<th>Problem</th>
<th>Solution</th>
<th>Explanation</th>
</tr>
<tr>
<td>Nextcloud File not supported Error (<code style='line-break: anywhere'>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code>).</td>
<td>Upload over IP and port rather than over nginx proxy.</td>
<td>The request payload (the data you are trying to upload) is too large for nginx.</td>
</tr>
<tr>
<td><code>Connected without internet</code> on Android after setting PiHole as DNS Server.<br></td>
<td>Make sure you forward both <b>TCP</b> and <b>UDP</b> of Port 53 from your Docker container.</td>
<td></td>
</tr>
<tr>
<td>ThinkPad R61 (or any older ThinkPad model, I believe) repeated beep at startup.</td>
<td>Check keyboard connector / swap out keyboard.</td>
<td>No keyboard detected on bootup.</td>
</tr>
<tr>
<td>Pacman install fails with 404 (<code>error: failed retrieving file 'X' from Y : The requested URL returned error: 404</code>).</td>
<td>
Replace <code>/etc/pacman.d/mirrorlist</code> with a new file generated at <a href='https://archlinux.org/mirrorlist/'>https://archlinux.org/mirrorlist/</a>.<br>
Then run <code>sudo pacman -Syyu</code> to update with the new mirrorlist. Make sure to use 2 y's, to force the new changes.
</td>
<td>Your mirrorlist is outdated, possibly due to the recent <a href='https://archlinux.org/news/git-migration-completed/'>pacman git migration</a>.</td>
</tr>
<tr>
<td>Proton / Wine Audio stuttering when using qpaeq equalizer</td>
<td>Switch to normal audio device</td>
<td></td>
</tr>
<tr>
<td>HomeAssistant not connecting over reverse proxy</td>
<td>Make sure you have enabled <em>Websockets Support</em> or similar functionality in your reverse proxy client.</td>
<td>HomeAssistant uses websockets for its frontend.</td>
</tr>
</table>
</main>
<footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6>
</footer>
</body>
</html>

17
blog/quick-fixes/proton-audio-stuttering/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>Proton / Wine audio stuttering when using qpaeq equalizer</h1> <h1>Proton / Wine audio stuttering when using qpaeq equalizer</h1>
<br> <br>
<p> <p>

17
blog/quick-fixes/template.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>{{ Title }}</h1> <h1>{{ Title }}</h1>
<h2>{{ Problem }}</h2> <h2>{{ Problem }}</h2>
<br> <br>

17
blog/quick-fixes/thinkpad-r61-beep/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main>
<h1>Thinkpad R61 repeated beep on startup</h1> <h1>Thinkpad R61 repeated beep on startup</h1>
<h2>(or any older ThinkPad model, I believe)</h2> <h2>(or any older ThinkPad model, I believe)</h2>
<br> <br>

15
blog/the-current-state-of-software-is-utterly-ridiculous/index.html
View File

@ -10,13 +10,16 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main> <main>
<h1>The current state of software is utterly ridiculous</h1> <h1>The current state of software is utterly ridiculous</h1>
<div class='author'>Johannes Olzem</div> <div class='author'>Johannes Olzem</div>

17
contact/index.html
View File

@ -10,14 +10,17 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav> <main class='full'>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='#'>Contact</a>
</nav>
<main>
<h2>Contact</h2> <h2>Contact</h2>
<p> <p>
Email me: Email me:

102
css/style.css
View File

@ -17,27 +17,61 @@
} }
:root { :root {
--txt: #f2f4f8; --header-bg: rgba(0, 0, 0, 0.95);
--body-bg: #161616; --txt: #eee;
--body-bg: #111;
--accent: #6690d9; --accent: #6690d9;
--border: #222; --border: #aaa;
--font-body: 'Work Sans', sans-serif; --font-body: 'Work Sans', sans-serif;
} }
body { body {
font-family: var(--font-body); font-family: var(--font-body);
color: var(--txt); color: var(--txt);
text-align: center;
background-color: var(--body-bg); background-color: var(--body-bg);
margin: 0; text-align: center;
max-width: 800px;
margin: 0 auto; margin: 0 auto;
position: relative;
min-height: 100vh;
} }
header { header {
margin: 1.5rem 0 2.5rem 0; margin-bottom: 2.5rem;
font-weight: bold; background-color: var(--header-bg);
font-size: 2rem; padding: 1.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
position: sticky;
top: 0;
z-index: 100;
}
header img {
height: 3rem;
margin-left: 1.5rem;
display: block;
}
.home-ref {
display: flex;
align-items: center;
justify-content: center;
}
.home-ref span {
margin-left: 1.5rem;
font-size: 1.5rem;
color: var(--txt);
max-width: 0;
white-space: nowrap;
overflow: hidden;
transition: max-width 0.5s ease-in-out;
}
.home-ref:hover span {
max-width: 200px;
} }
header a { header a {
@ -45,37 +79,61 @@ header a {
text-decoration: none; text-decoration: none;
} }
nav, nav {
footer { margin-right: 1.5rem;
margin-bottom: 1rem;
} }
nav a { nav a {
background-color: var(--border);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: .3rem; border-radius: .3rem;
margin: .7rem; margin: .7rem;
padding: .4rem 1.2rem; padding: .4rem 1.2rem;
text-decoration: none; text-decoration: none;
box-shadow: 0px 2px 3px 2px rgba(0,0,0,.3);
user-select: none; user-select: none;
cursor: pointer;
display: inline-block; display: inline-block;
color: var(--txt);
transition: 0.5s;
} }
nav a:hover { nav a:hover, nav a:active {
background-color: var(--body-bg); background-color: var(--txt);
border: 1px solid var(--border); border: 1px solid var(--border);
color: var(--txt); color: var(--header-bg);
} }
main { main {
padding-bottom: 2.5rem;
overflow: hidden; overflow: hidden;
padding: 0 2.5rem 5rem 2.5rem;
max-width: 800px;
margin: 0 auto;
} }
main p { main p {
margin: 0 auto; margin: 0 auto;
text-align: justify;
}
.full {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.full p {
text-align: justify-all !important;
max-width: 600px;
}
.arrow {
position: absolute;
bottom: 0;
}
.full-secondary {
height: 100vh;
} }
main ul { main ul {
@ -127,6 +185,12 @@ main ul {
border: none; border: none;
} }
footer {
position: absolute;
bottom: 0;
width: 100%;
}
p { p {
margin: 1rem; margin: 1rem;
font-size: 1.1em; font-size: 1.1em;

33
donate/index.html
View File

@ -1,31 +1,2 @@
<!DOCTYPE html> <p>This is only here so I can copy my Monero adress when I need it and don't want to/cannot access my wallet. Don't give me money.</p>
<html lang='en'> <p style='overflow-wrap: anywhere;'>4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
<head>
<title>Donate - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace.">
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='/css/style.css'>
<link rel='icon' href='/favico.ico'>
</head>
<body>
<header>
<a href='/'>Johannes Olzem's Webspace</a>
</header>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
<a href='#'>Donate</a>
</nav>
<main>
<h2>Donate</h2>
<p>This is only here so I can copy my Monero adress when I need it and don't want to/cannot access my wallet. Don't give me money.</p>
<br>
<p style='overflow-wrap: anywhere;'>4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
</main>
<footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6>
</footer>
</body>
</html>

49
index.html
View File

@ -10,29 +10,36 @@
</head> </head>
<body> <body>
<header> <header>
<a href='/'>Johannes Olzem's Webspace</a> <a href='/' class='home-ref'>
<img src='/assets/logo.png' alt='Johannes Olzem'>
<span>Johannes Olzem</span>
</a>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<nav>
<a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a>
<a href='/contact/'>Contact</a>
</nav>
<main> <main>
<h2>Welcome to my Webspace!</h2> <div class='full'>
<p> <h2>Welcome to my Webspace!</h2>
Here I maintain my <a href='/blog/' class='inline'>blog</a> <p>
about various topics and with various guides.<br /> Here I maintain my <a href='/blog/' class='inline'>blog</a>
You can learn more about me <a href='/about/' class='inline'>here</a>.<br /> about various topics and with various guides.<br />
</p> You can learn more about me <a href='/about/' class='inline'>here</a>.<br />
<h2>Why run this website?</h2> </p>
<p> <span class='arrow'>&darr;</span>
I strive to expand and restore the minimal web by running this website without the clutter and distractions that are prevalent on many modern websites. </div>
Additionally, as you (should) know, most websites collect data about you. <div class='full full-secondary'>
This is especially true for social media sites, which this is supposed to be a substitute for. <h2>Why run this website?</h2>
While I still occasionally use social media platforms like WhatsApp or (very rarely) Instagram, I strictly limit my usage to connecting with people I know in real life for social interactions only. But back to my rant:<br /> <p>
So the only logical option in my mind was to make a website with some kind of blog function to share my opinion and help people with problems, that I have had and solved.<br /> As you (should) know, most websites collect data about you.
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site. This is especially true for social media sites, which this is supposed to be a substitute for.
</p> While I still occasionally use social media platforms like WhatsApp or (very rarely) Instagram, I strictly limit my usage to connecting with people I know in real life for social interactions only. But back to my rant:<br />
So the only logical option in my mind was to make a website with some kind of blog function to share my opinion and help people with problems, that I have had and solved.<br />
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site.
</p>
</div>
<br> <br>
<p class='cowsay'> <p class='cowsay'>
_____________________________ _____________________________