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

Redo website

Browse Source
This commit is contained in:
Johannes Olzem 2025-02-09 15:00:01 +01:00
parent b35dc3c761
commit 18250e0cc8
Signed by: jolzem
GPG Key ID: DB5485828E95A447
33 changed files with 672 additions and 593 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
404.html Executable file → Normal file
View File

@ -1,32 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Page not found - Johannes Olzem</title> <title>Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem"s personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>404 Error</h1> <h1>Johannes Olzem</h1>
<p style='text-align: center;'>The page you requested couldn't be found. </p> <blockquote>Less is more</blockquote>
<a href='/'>Return to homepage</a> <h2>404 Not Found</h2>
<p>
The resource you requested was not found on this server. Click
<a href="/">here</a> to return home.
</p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

114
about/index.html Executable file → Normal file
View File

@ -1,64 +1,84 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>About - Johannes Olzem</title> <title>About - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' href='/css/style.css'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main> <main>
<h2>About Me</h2> <h1>Johannes Olzem</h1>
<!--<img src='/img/me.png' style='float:left;margin:1rem;border-radius:1rem;height:256px;'>--> <blockquote>Less is more</blockquote>
<p style='margin-bottom: 2rem;'> <h2>About me</h2>
Hey there!<br /> <img src="/img/portrait.png" alt="Me" class="portrait">
My name is Johannes, and I'm a computer enthusiast born and raised in Germany. <p>
Recently, I graduated from school, majoring in IT and English, and I am now training to become an IT specialist. Hey there!
I am passionate about most things related to technology, but specifically I am passionate about using free and open-source software, My name is Johannes, and I'm a computer enthusiast born and raised in
exploring different aspects of Linux, setting up and tinkering with servers, Germany. Recently, I graduated from school, majoring in IT and English,
and learning about privacy and security. When I'm not busy with the command line, I enjoy playing video games and building/modifying mechanical keyboards. and I am now training to become an IT specialist. I am passionate about
Apart from computers, I also have an interest in cars, ranging from classic to modern sports cars, and like riding my somewhat odd looking bicycle. most things related to technology, but specifically I am passionate about
using free and open-source software, exploring different aspects of
Linux, setting up and tinkering with servers, and learning about online
privacy and security. When I'm not busy with the command line, I enjoy
playing video games and building/modifying mechanical keyboards. Apart
from computers I enjoy making my own pourover coffee, I am a big fan of
technical fashion and I like cars.
</p> </p>
<h2>My Skills</h2> <h2>My Skills</h2>
<h3>Languages</h3> <p>I have at least basic knowledge in the following technologies:</p>
<p style='margin: 1rem !important; text-align: center;'>I have at least basic knowledge in the following programming languages:</p> <div style="float:left" class="skills">
<ul> <h3>Languages</h3>
<li>HTML &amp; CSS</li> <ul>
<li>Java</li> <li>HTML &amp; CSS</li>
<li>Python</li> <li>Java</li>
<li>PHP</li> <li>Python</li>
</ul> <li>PHP</li>
<h3>Other Technologies</h3> </ul>
<ul> </div>
<li>Linux</li> <div style="float:right" class="skills">
<li>Git</li> <h3>Other technologies</h3>
<li>SQL</li> <ul>
<li>LaTeX</li> <li>Linux</li>
<li>Docker</li> <li>Git</li>
</ul> <li>SQL</li>
<p>If you are interested in a research paper I wrote for a mandatory school project about Linux you can find it <a href='/facharbeit.pdf'>here</a>. My grade for this project was a 13 out of 15 possible grade points.</p> <li>LaTeX</li>
<li>Docker</li>
</ul>
</div>
<br>
<h2>About this website</h2> <h2>About this website</h2>
<p> <p>
This website has no ads or trackers and does not use cookies.<br> While I might not have been using the internet much or at all during the
It is also free and open source under the <a href='/LICENSE.txt'>GNU General Public License v3</a>.<br> web 1.0 times (which this site is heavily modeled after) I do believe that
<a href='https://github.com/jolzem/jolzem.github.io/'>View Source Code</a><br> modern websites are unnecessarly bloated in many ways. They contain ads and
trackers (that's just how capitalism works, I can't really complain about
that) but also so much useless JavaScript. I agree that it is very useful
in certain areas but sometimes it is just not needed. Like in the case of a
news site, or a recipe site, which in my opinion could just be served
statically without much (or any) JavaScript. Because of this, I created
this website, to make a small contribution to the debloated minimal web.
Just pure HTML and CSS with some (useful) quality of life JavaScript.
No ads, trackers, or cookies.
<br>
It is also free and Open Source under the GNU
General Public License V3, which you can find <a href="/LICENSE.txt">here.</a>
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

109
blog/how-to-create-a-rust-server-on-linux/index.html Executable file → Normal file
View File

@ -1,69 +1,68 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>How to create a Rust server on Linux - Blog - Johannes Olzem</title> <title>How to create a Rust server on Linux - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main> <main class="blog-entry">
<h1>How to create a Rust server on Linux</h1> <h1>Johannes Olzem</h1>
<div class='author'>Johannes Olzem</div> <blockquote>Less is more</blockquote>
<div class='date'>May 23, 2023</div> <h2>How to create a Rust server on Linux</h2>
<div class="author">Johannes Olzem</div>
<div class="date">May 23, 2023</div>
<h2>Table of Contents</h2> <h2>Table of Contents</h2>
<ul> <ul>
<li><a href='#Requirements'>Requirements</a></li> <li><a href="#Requirements">Requirements</a></li>
<li><a href='#SteamCMD'>SteamCMD</a><br /></li> <li><a href="#SteamCMD">SteamCMD</a><br /></li>
<li><a href='#Installing'>Installing</a><br /></li> <li><a href="#Installing">Installing</a><br /></li>
<li><a href='#Running'>Running</a></li> <li><a href="#Running">Running</a></li>
</ul> </ul>
<h2 id='Requirements'>Requirements</h2> <h2 id="Requirements">Requirements</h2>
<ul> <ul>
<li>Debian Linux</li> <li>Debian Linux</li>
<li>&#62;5GB of RAM</li> <li>&#62;5GB of RAM</li>
<li>&#62;4.5GB of free disc space</li> <li>&#62;4.5GB of free disc space</li>
</ul> </ul>
<h2 id='SteamCMD'>SteamCMD</h2> <h2 id="SteamCMD">SteamCMD</h2>
<h3>Configuring the envoirenment</h3> <h3>Configuring the envoirenment</h3>
<p> <p>
Create a user with the name 'steam' and give it a password. Create a user with the name "steam" and give it a password.
</p> </p>
<p class='code'> <p class="code cmd">
sudo useradd -m steam sudo useradd -m steam
</p> </p>
<p class='code'> <p class="code cmd">
sudo passwd steam sudo passwd steam
</p> </p>
<br /> <br />
<p> <p>
When prompted, enter a new password for the 'steam' user. <br /> When prompted, enter a new password for the "steam" user. <br />
Then switch to the 'steam' user and go to its home folder. Then switch to the "steam" user and go to its home folder.
</p> </p>
<p class='code'> <p class="code cmd">
su steam su steam
</p> </p>
<p class='code'> <p class="code cmd">
cd cd
</p> </p>
<br /> <br />
<p> <p>
Enable the contrib and non-free repositories by changing your <code>/etc/apt/sources.list</code> to resemble the following: Enable the contrib and non-free repositories by changing your <code>/etc/apt/sources.list</code> to resemble the following:
</p> </p>
<p class='code no-dollar' style='text-align:left;'> <p class="code no-dollar" style="text-align:left;">
deb http://deb.debian.org/debian bullseye main contrib non-free<br /> deb http://deb.debian.org/debian bullseye main contrib non-free<br />
deb-src http://deb.debian.org/debian bullseye main contrib non-free<br /> deb-src http://deb.debian.org/debian bullseye main contrib non-free<br />
<br /> <br />
@ -77,15 +76,15 @@
<p> <p>
Finally, to install SteamCMD run: Finally, to install SteamCMD run:
</p> </p>
<p class='code'> <p class="code cmd">
sudo apt install steamcmd sudo apt install steamcmd
</p> </p>
<br /> <br />
<h2 id='Installing'>Installing</h2> <h2 id="Installing">Installing</h2>
<p> <p>
Run SteamCMD Run SteamCMD
</p> </p>
<p class='code'> <p class="code cmd">
steamcmd steamcmd
</p> </p>
<br /> <br />
@ -93,14 +92,14 @@
After a short update period, a prompt like <code>Steam&#62;</code> should appear.<br /> After a short update period, a prompt like <code>Steam&#62;</code> should appear.<br />
To login anonymously type: To login anonymously type:
</p> </p>
<p class='code no-dollar'> <p class="code">
login anonymous login anonymous
</p> </p>
<br /> <br />
<p> <p>
Now install the Rust Dedicated Server application. Now install the Rust Dedicated Server application.
</p> </p>
<p class='code no-dollar'> <p class="code">
app_update 258550 app_update 258550
</p> </p>
<p> <p>
@ -109,22 +108,22 @@
<br /> <br />
Afterwards you can quit the SteamCMD shell. Afterwards you can quit the SteamCMD shell.
</p> </p>
<p class='code no-dollar'> <p class="code">
quit quit
</p> </p>
<br /> <br />
<h2 id='Running'>Running</h2> <h2 id="Running">Running</h2>
<p> <p>
First navigate to the Rust server directory. First navigate to the Rust server directory.
</p> </p>
<p class='code'> <p class="code cmd">
cd ~/Steam/steamapps/common/rust_dedicated cd ~/Steam/steamapps/common/rust_dedicated
</p> </p>
<br /> <br />
<p> <p>
Finally, start up the Rust server by running: Finally, start up the Rust server by running:
</p> </p>
<p class='code'> <p class="code cmd">
./RustDedicated -batchmode ./RustDedicated -batchmode
</p> </p>
<br /> <br />
@ -185,14 +184,14 @@
<tr> <tr>
<td><code>+server.hostname</code> <td><code>+server.hostname</code>
</td> </td>
<td><code>'Your Server Name'</code> <td><code>"Your Server Name"</code>
</td> </td>
<td>The displayed name of your server. <td>The displayed name of your server.
</td></tr> </td></tr>
<tr> <tr>
<td><code>+server.identity</code> <td><code>+server.identity</code>
</td> </td>
<td><code>'my_server_identity'</code> <td><code>"my_server_identity"</code>
</td> </td>
<td>Changes path to your server data rust/server/my_server_identity. Useful for running multiple instances. <td>Changes path to your server data rust/server/my_server_identity. Useful for running multiple instances.
</td></tr> </td></tr>
@ -227,7 +226,7 @@
<tr> <tr>
<td><code>+rcon.password</code> <td><code>+rcon.password</code>
</td> </td>
<td><code>'YourPassword'</code> <td><code>"YourPassword"</code>
</td> </td>
<td>Sets the RCON password <td>Sets the RCON password
</td></tr> </td></tr>
@ -236,35 +235,37 @@
</td> </td>
<td><code>gamelog.txt</code> <td><code>gamelog.txt</code>
</td> </td>
<td>If you're using a script, you'd better put the current date as a filename, otherwise, it'll be erased on every start. <td>If you"re using a script, you"d better put the current date as a filename, otherwise, it"ll be erased on every start.
</td></tr> </td></tr>
<tr> <tr>
<td><code>-silent-crashes</code> <td><code>-silent-crashes</code>
</td> </td>
<td><code> - </code> <td><code> - </code>
</td> </td>
<td>Won't display a crash dialog and will restart automatically if server is installed as service. <td>Won"t display a crash dialog and will restart automatically if server is installed as service.
</td></tr></tbody> </td></tr></tbody>
</table> </table>
<br /> <br />
<h2>Sources</h2> <h2>Sources</h2>
<ul> <ul>
<li> <li>
<a href='https://wiki.facepunch.com/rust/Creating-a-server'>Rust Wiki, 'Creating a server'</a> <a href="https://wiki.facepunch.com/rust/Creating-a-server">Rust Wiki, "Creating a server"</a>
</li> </li>
<li> <li>
<a href='https://developer.valvesoftware.com/wiki/SteamCMD#Linux'>Valve Developer Community, 'SteamCMD'</a> <a href="https://developer.valvesoftware.com/wiki/SteamCMD#Linux">Valve Developer Community, "SteamCMD"</a>
</li> </li>
<li> <li>
<a href='https://www.rustafied.com/how-to-host-your-own-rust-server'>Rustafied, 'How to: Host your own Rust Dedicated Server'</a> <a href="https://www.rustafied.com/how-to-host-your-own-rust-server">Rustafied, "How to: Host your own Rust Dedicated Server"</a>
</li> </li>
<li> <li>
<a href='https://developer.valvesoftware.com/wiki/Rust_Dedicated_Server'>Valve Developer Community, 'Rust Dedicated Server'</a> <a href="https://developer.valvesoftware.com/wiki/Rust_Dedicated_Server">Valve Developer Community, "Rust Dedicated Server"</a>
</li> </li>
</ul> </ul>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

57
blog/index.html Executable file → Normal file
View File

@ -1,35 +1,46 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Blog - Johannes Olzem</title> <title>Blog - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2>Blog</h2> <h2>Blog</h2>
<div class='blog-entries'> <ul>
<a href='quick-fixes/'>Quick Fixes</a> <li>
<a href='the-current-state-of-software-is-utterly-ridiculous/'>The current state of software is utterly ridiculous</a> <a href="/blog/quick-fixes/">Quick fixes</a>
<a href='how-to-create-a-rust-server-on-linux/'>How to create a Rust server on Linux</a> </li>
</div> <li>
<a href="/blog/the-current-state-of-software-is-utterly-ridiculous/">
The current state of software is utterly ridiculous
</a>
</li>
<li>
<a href="/blog/how-to-create-a-rust-server-on-linux/">
How to create a Rust server on linux.
</a>
</li>
</ul>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

47
blog/quick-fixes/android-pihole-no-internet/index.html Executable file → Normal file
View File

@ -1,34 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Connected without internet on Android after setting PiHole as DNS server.</h1> <h1>Johannes Olzem</h1>
<br> <blockquote>Less is more</blockquote>
<h2>
Connected without internet on Android after setting PiHole as DNS server.
</h2>
<p> <p>
Make sure you forward both TCP and UDP of port 53 from your Docker container. Make sure you forward both TCP and UDP of port 53 from your Docker
container.
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

60
blog/quick-fixes/homeassistant-proxy/index.html Executable file → Normal file
View File

@ -1,48 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>HomeAssistant not connecting over reverse proxy</h1> <h1>Johannes Olzem</h1>
<br> <blockquote>Less is more</blockquote>
<h2>HomeAssistant not connecting over reverse proxy</h2>
<p> <p>
Make sure you have enabled <em>Websockets Supports</em> or similar functionality in your reverse proxy client.<br><br> Make sure you have enabled <em>Websockets Supports</em> or similar
If you are getting a <em>400 Bad Request</em> error, find the HomeAssistant log file and look for the following error message:<br> functionality in your reverse proxy client.<br><br>
<code>A request from a reverse proxy was received from 12.34.56.78, but your HTTP integration is not set-up for reverse proxies</code><br><br> If you are getting a <em>400 Bad Request</em> error, find the
HomeAssistant log file and look for the following error message:<br>
<code>A request from a reverse proxy was received from 12.34.56.78, but
your HTTP integration is not set-up for reverse proxies</code><br><br>
In your <code>configuration.yaml</code> file, add the following lines:<br> In your <code>configuration.yaml</code> file, add the following lines:<br>
<pre style="text-align:left;"> <pre>
http:<br> http:<br>
use_x_forwarded_for: true<br> use_x_forwarded_for: true<br>
trusted_proxies:<br> trusted_proxies:<br>
- 12.34.56.78 # The IP address from the error message - 12.34.56.78 # The IP address from the error message
</pre> </pre>
</p> </p>
<h2>Explanation</h2> <h3>Explanation</h3>
<p> <p>
HomeAssistant uses websockets to communicate with the browser.<br><br> HomeAssistant uses websockets to communicate with the browser.<br><br>
If you are using a reverse proxy, the IP address of the incoming connection is not trusted and gets rejected by HomeAssistant.<br> If you are using a reverse proxy, the IP address of the incoming
connection is not trusted and gets rejected by HomeAssistant.<br>
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

75
blog/quick-fixes/index.html Executable file → Normal file
View File

@ -1,39 +1,68 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang='en'>
<head> <head>
<title>Quick Fixes - Johannes Olzem</title> <title>Quick fixes - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name='description' content='Johannes Olzem's personal website'>
<meta charset='utf-8'> <meta charset='utf-8'>
<link rel='stylesheet' href='/css/style.css'> <link rel='stylesheet' href='/css/style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='icon' href='/favico.ico'> <link rel='icon' href='/favico.ico'>
</head> </head>
<body> <body class='body'>
<header> <header>
<a href='/' class='home-ref'> <a href='/'>
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src='/img/logo.png'>
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href='/about/'>About</a>
<a href='/blog/'>Blog</a> <a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a> <a href='/contact/'>Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main> <main>
<h2>Quick Fixes</h2> <h1>Johannes Olzem</h1>
<h3>This is a page with small problems, to which I have found easy solutions, so as to not litter the blog page.</h3> <blockquote>Less is more</blockquote>
<div class='blog-entries'> <h2>Quick fixes</h2>
<a href='nextcloud-file-not-supported/'>Nextcloud file not supported error</a> <p>
<a href='android-pihole-no-internet/'>Connected without internet on Android after setting PiHole as DNS server.</a> This is a page with small problems, to which I have found easy
<a href='thinkpad-r61-beep/'> Thinkpad R61 repeated beep on startup</a> solutions, so as to not litter the blog page.
<a href='pacman-404/'>Pacman install fails with 404</a> </p>
<a href='proton-audio-stuttering/'>Proton / Wine audio stuttering when using qpaeq equalizer</a> <ul>
<a href='homeassistant-proxy/'>HomeAssistant not connecting over reverse proxy</a> <li>
</div> <a href='/blog/quick-fixes/android-pihole-no-internet/'>
Connected without internet on Android after setting PiHole as DNS
server
</a>
</li>
<li>
<a href='/blog/quick-fixes/homeassistant-proxy/'>
HomeAssistant not connecting over reverse proxy
</a>
</li>
<li>
<a href='/blog/quick-fixes/nextcloud-file-not-supported/'>
Nextcloud file not supported error
</a>
</li>
<li>
<a href='/blog/quick-fixes/pacman-404/'>
Pacman install fails with 404
</a>
</li>
<li>
<a href='/blog/quick-fixes/proton-audio-stuttering/'>
Proton / Wine audio stuttering when using qpaeq equalizer
</a>
</li>
<li>
<a href='/blog/quick-fixes/thinkpad-r61-beep/'>
Thinkpad R61 repeated beep on startup
</a>
</li>
</ul>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

58
blog/quick-fixes/nextcloud-file-not-supported/index.html Executable file → Normal file
View File

@ -1,39 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Nextcloud file not supported error</h1> <h1>Johannes Olzem</h1>
<h2><code>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code></h2> <blockquote>Less is more</blockquote>
<br> <h2>Nextcloud file not supported error</h2>
<h3>
<code>
exif_read_data(): File not supported at
/var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59
</code>
</h3>
<p>Upload over IP and port rather than over nginx proxy.</p>
<h3>Explanation</h3>
<p> <p>
Upload over IP and port rather than over nginx proxy. The request payload (the data your are trying to upload) is too large for
</p> nginx.
<h2>Explanation</h2>
<p>
The request payload (the data your are trying to upload) is too large for nginx.
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

63
blog/quick-fixes/pacman-404/index.html Executable file → Normal file
View File

@ -1,41 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Pacman install fails with 404</h1> <h1>Johannes Olzem</h1>
<h2><code>error: failed retrieving file 'X' from Y : The requested URL returned error: 404</code></h2> <blockquote>Less is more</blockquote>
<br> <h2>Pacman install fails with 404</h2>
<h3><code>error: failed retrieving file 'X' from Y : The requested URL
returned error: 404</code></h3>
<p> <p>
Replace <code>/etc/pacman.d/mirrorlist</code> with a new file generated at <a href='https://archlinux.org/mirrorlist/'>https://archlinux.org/mirrorlist/</a>. Replace <code>/etc/pacman.d/mirrorlist</code> with a new file generated
<br> at
Then run <code>sudo pacman -Syyu</code> to update the package database with the new mirrorlist. Make sure to use 2 y's, to force the new changes. <a href='https://archlinux.org/mirrorlist/'>
https://archlinux.org/mirrorlist/
</a>.
<br>
Then run <code>sudo pacman -Syyu</code> to update the package database
with the new mirrorlist. Make sure to use 2 y's, to force the new changes.
</p> </p>
<h2>Explanation</h2> <h3>Explanation</h3>
<p> <p>
Your mirrorlist is outdated, possibly due to the recent <a href='https://archlinux.org/news/git-migration-completed/'>pacman git migration</a>. Your mirrorlist is outdated, possibly due to the recent
<a href='https://archlinux.org/news/git-migration-completed/'>
pacman git migration
</a>.
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

46
blog/quick-fixes/proton-audio-stuttering/index.html Executable file → Normal file
View File

@ -1,34 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Proton / Wine audio stuttering when using qpaeq equalizer</h1> <h1>Johannes Olzem</h1>
<br> <blockquote>Less is more</blockquote>
<p> <h2>Proton / Wine audio stuttering when using qpaeq equalizer</h2>
Switch to normal audio device. <p>Switch to normal audio device.</p>
</p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

52
blog/quick-fixes/template.html Executable file → Normal file
View File

@ -1,39 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>{{ Title }}</h1> <h1>Johannes Olzem</h1>
<h2>{{ Problem }}</h2> <blockquote>Less is more</blockquote>
<br> <h2>Title</h2>
<h3>Problem</h3>
<p>Fix</p>
<h3>Explanation</h3>
<p> <p>
{{ Fix }} Explanation
</p>
<h2>Explanation</h2>
<p>
{{ Explanation }}
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

50
blog/quick-fixes/thinkpad-r61-beep/index.html Executable file → Normal file
View File

@ -1,39 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Quick Fix - Blog - Johannes Olzem</title> <title>Quick fix - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Thinkpad R61 repeated beep on startup</h1> <h1>Johannes Olzem</h1>
<h2>(or any older ThinkPad model, I believe)</h2> <blockquote>Less is more</blockquote>
<br> <h2>Thinkpad R61 repeated beep on startup</h2>
<p> <h3>(or any older ThinkPad model, I believe)</h3>
Check keyboard connector / swap out keyboard. <p>Check keyboard connector / swap out keyboard.</p>
</p> <h3>Explanation</h3>
<h2>Explanation</h2>
<p> <p>
No keyboard detected on bootup. No keyboard detected on bootup.
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

36
blog/template.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ Title }} - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's personal website">
<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="body">
<header>
<a href="/">
<img src="/img/logo.png">
</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
</header>
<main class="blog-entry">
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2>Title</h2>
<div class="author">Johannes Olzem</div>
<div class="date"></div>
<p>
</p>
</main>
<footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer>
</body>

31
blog/the-current-state-of-software-is-utterly-ridiculous/index.html Executable file → Normal file
View File

@ -1,27 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang='en'>
<head> <head>
<title>The current state of software is utterly ridiculous - Blog - Johannes Olzem</title> <title>The current state of software is utterly ridiculous - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name='description' content='Johannes Olzem's personal website'>
<meta charset='utf-8'> <meta charset='utf-8'>
<link rel='stylesheet' href='/css/style.css'> <link rel='stylesheet' href='/css/style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='icon' href='/favico.ico'> <link rel='icon' href='/favico.ico'>
</head> </head>
<body> <body class='body'>
<header> <header>
<a href='/' class='home-ref'> <a href='/'>
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src='/img/logo.png'>
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href='/about/'>About</a>
<a href='/blog/'>Blog</a> <a href='/blog/'>Blog</a>
<a href='/about/'>About Me</a> <a href='/contact/'>Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main> <main class='blog-entry'>
<h1>The current state of software is utterly ridiculous</h1> <h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2>The current state of software is utterly ridiculous</h2>
<div class='author'>Johannes Olzem</div> <div class='author'>Johannes Olzem</div>
<div class='date'>May 15, 2023</div> <div class='date'>May 15, 2023</div>
<p> <p>
@ -61,7 +60,9 @@
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

46
contact/index.html Executable file → Normal file
View File

@ -1,38 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Contact - Johannes Olzem</title> <title>Contact - Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem"s personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' href='/css/style.css'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main class='full'> <main>
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2>Contact</h2> <h2>Contact</h2>
<p> <p>
Email me: Email me: <a href="mailto:johannes@jolzem.com">johannes@jolzem.com</a>
<a href='mailto:jolzem@pm.me?subject=Hi!' target='_blank'>jolzem@pm.me</a> <br>
</p> Find me on <a href="https://github.com/jolzem">Github</a>
<br>
<p>
Find me on <a href='https://github.com/jolzem'>GitHub</a>.
</p> </p>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>

BIN
css/WorkSans-Italic.woff2
View File

Binary file not shown.

BIN
css/WorkSans-Medium.woff2
View File

Binary file not shown.

BIN
css/WorkSans-Regular.woff2
View File

Binary file not shown.

248
css/style.css Executable file → Normal file
View File

@ -1,156 +1,99 @@
@font-face {
font-family: 'Work Sans';
src: url('WorkSans-Regular.woff2');
font-weight: normal;
}
@font-face {
font-family: 'Work Sans';
src: url('WorkSans-Medium.woff2');
font-weight: bold;
}
@font-face {
font-family: 'Work Sans';
src: url('WorkSans-Italic.woff2');
font-style: italic;
}
:root { :root {
--header-bg: rgba(0, 0, 0, 0.95); --bg: #152528;
--txt: #eee; --dark-bg: #0f1c1e;
--body-bg: #111; --txt: #e6eaea;
--accent: #6690d9; --header-txt: #e85c51;
--border: #aaa; --sec-header-txt: #ff8349;
--font-body: 'Work Sans', sans-serif; --link-txt: #5a93aa;
} }
body { body {
font-family: var(--font-body); background: var(--bg);
color: var(--txt); color: var(--txt);
background-color: var(--body-bg); font-family: 'Consolas', 'Courier', monospace;
text-align: center; font-size: 130%
margin: 0 auto;
position: relative;
min-height: 100vh;
} }
header { header {
margin-bottom: 2.5rem; min-height: 52pt;
background-color: var(--header-bg);
padding: 1.5rem 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; max-width: 95vw;
flex-wrap: wrap; margin: 0 auto;
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 {
color: var(--accent);
text-decoration: none;
}
nav {
margin-right: 1.5rem;
}
nav a {
border: 1px solid var(--border);
border-radius: .3rem;
margin: .7rem;
padding: .4rem 1.2rem;
text-decoration: none;
user-select: none;
display: inline-block; display: inline-block;
color: var(--txt); padding: 4pt 12pt;
transition: 0.5s;
} }
nav a:hover, nav a:active { header img {
background-color: var(--txt); height: 24pt;
border: 1px solid var(--border); }
color: var(--header-bg);
blockquote {
font-style: italic;
padding-bottom: 24pt;
} }
main { main {
overflow: hidden; max-width: min(800px, 80vw);
padding: 0 2.5rem 5rem 2.5rem;
max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding-bottom: 24pt;
} }
main p { .cowsay-wrapper {
margin: 0 auto; min-width: 100%;
text-align: justify;
}
.full {
height: 80vh;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
position: relative;
} }
.full p { .cowsay {
text-align: justify-all !important; font-family: monospace;
max-width: 600px;
}
.arrow {
position: absolute;
bottom: 0;
}
.full-secondary {
height: 100vh;
}
main ul {
margin: 0 auto;
margin-bottom: 2rem;
max-width: fit-content;
text-align: left; text-align: left;
white-space: pre;
max-width: fit-content;
display: inline-block;
} }
.blog-entries a { .cards {
padding-top: 1rem; display: flex;
display: block; justify-content: space-evenly;
margin-bottom:48pt;
}
.portrait {
max-width: min(220px, 60vw);
}
.skills {
float: left !important;
width: 100%;
margin-bottom: 24pt;
}
/* float right when on desktop */
@media (min-width: 500px) {
.portrait {
float: right;
height: 300px;
margin-left: 2rem;
}
.skills {
width: 50%;
height: 14rem;
}
}
.blog-entry p {
margin: 0;
} }
.author { .author {
float: left; float: left;
max-width: 400px; max-width: 400px;
margin-bottom: 2rem;
} }
.date { .date {
@ -160,64 +103,41 @@ main ul {
} }
.code { .code {
font-family: monospace; background: var(--dark-bg);
padding: .2rem .3rem; padding: 1rem;
border-radius: .3rem; border-radius: 1rem;
border: 1px solid var(--border);
margin: .3rem;
} }
.code::before { .cmd::before {
content: '$ '; content: '$ ';
user-select: none;
}
.no-dollar::before {
content: '';
}
.cowsay {
font-family: monospace;
text-align: left;
white-space: pre;
max-width: fit-content;
display: inline-block;
border: none;
} }
footer { footer {
position: absolute;
bottom: 0;
width: 100%; width: 100%;
text-align: center;
}
h1 {
color: var(--header-txt);
}
h2, h3, h4, h5, h6 {
color: var(--sec-header-txt);
} }
p { p {
margin: 1rem; margin: 16pt;
font-size: 1.1em; display: block;
line-height: 1.5rem; text-align: justify;
line-height: 1.25;
} }
a { a {
color: var(--txt); color: var(--link-txt);
text-decoration: underline; text-decoration-color: rgba(0,0,0,0);
transition: 300ms; transition: text-decoration .3s;
} }
h1, a:hover, a:active {
h2, text-decoration-color: var(--link-txt);
h3,
h4,
h5,
h6,
a:hover,
a:active {
color: var(--accent);
} }
code {
padding: .2rem .3rem;
border-radius: .3rem;
border: 1px solid var(--border);
margin: .3rem;
}

2
donate/index.html
View File

@ -1,2 +0,0 @@
<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>
<p style='overflow-wrap: anywhere;'>4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>

32
empty.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<title> - Johannes Olzem</title>
<meta name='description' content='Johannes Olzem's personal website'>
<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='body'>
<header>
<a href='/'>
<img src='/img/logo.png'>
</a>
<a href='/about/'>About</a>
<a href='/blog/'>Blog</a>
<a href='/contact/'>Contact</a>
</header>
<main>
<h1>Johannes Olzem</h1>
<blockquote>Less is more</blockquote>
<h2></h2>
</main>
<footer>
&copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer>
</body>

BIN
facharbeit.pdf
View File

Binary file not shown.

BIN
favico.ico Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
img/bestvieweddesktop.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
img/internetprivacy.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
img/linux_powered.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

0
assets/logo.png → img/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
img/nocookie.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 581 B

BIN
img/portrait.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

3
img/portrait.png:Zone.Identifier Normal file
View File

@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=about:internet

BIN
img/smile.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 760 B

BIN
img/vim.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

88
index.html Executable file → Normal file
View File

@ -1,47 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang="en">
<head> <head>
<title>Johannes Olzem</title> <title>Johannes Olzem</title>
<meta name='description' content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem"s personal website">
<meta charset='utf-8'> <meta charset="utf-8">
<link rel='stylesheet' href='/css/style.css'> <link rel="stylesheet" href="/css/style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='icon' href='/favico.ico'> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body class="body">
<header> <header>
<a href='/' class='home-ref'> <a href="/">
<img src='/assets/logo.png' alt='Johannes Olzem'> <img src="/img/logo.png">
<span>Johannes Olzem</span>
</a> </a>
<nav> <a href="/about/">About</a>
<a href='/blog/'>Blog</a> <a href="/blog/">Blog</a>
<a href='/about/'>About Me</a> <a href="/contact/">Contact</a>
<a href='/contact/'>Contact</a>
</nav>
</header> </header>
<main> <main>
<div class='full'> <h1>Johannes Olzem</h1>
<h2>Welcome to my Webspace!</h2> <blockquote>Less is more</blockquote>
<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 /> I'm Johannes, a computer enthusiast from Germany. On this website I
You can learn more about me <a href='/about/' class='inline'>here</a>.<br /> maintain my <a href="blog">blog</a> about various topics and you can
</p> learn more about me <a href="/about/">here.</a> If you want to get in
<span class='arrow'>&darr;</span> touch with me, you can do that <a href="/contact/">here</a>.
</div> </p>
<div class='full full-secondary'> <h2>Why run this website?</h2>
<h2>Why run this website?</h2> <p>
<p> The internet used to be a place of personal expression, not just
As you (should) know, most websites collect data about you. corporate dominance. I believe in keeping that spirit alive.
This is especially true for social media sites, which this is supposed to be a substitute for. <br>
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 /> This site is a small step towards a more independent web.
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 /> It also allows me to share my experiences, how I do things, and other
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site. stuff that I want to put out into the world.
</p> <br>
</div> Please feel free to explore every crevasse of this site! Don't know where
to start? Try the <a href="/about/">about</a> page, to learn more about
who I am.
</p>
<br> <br>
<p class='cowsay'> <div class="cowsay-wrapper">
<p class="cowsay">
_____________________________ _____________________________
&#60; Have fun on this website! &#62; &#60; Have fun on this website! &#62;
----------------------------- -----------------------------
@ -50,11 +51,22 @@ _____________________________
(__)\ )\/\ (__)\ )\/\
||----w | ||----w |
|| || || ||
</p> </p>
</div>
<br> <br>
<div class="cards">
<img src="/img/linux_powered.gif" alt="Linux powered">
<img src="/img/vim.gif" alt="vim">
<img src="/img/nocookie.gif" alt="No Cookies">
<img src="/img/bestvieweddesktop.gif" alt="Best viewed with desktop">
<img src="/img/internetprivacy.gif" alt="Internet privacy now!">
<img src="/img/smile.gif" alt="Have a smile">
</div>
</main> </main>
<footer> <footer>
<h6><a href><script>document.write(window.location.href);</script></a></h6> &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem
<br>
<small>This website is free software. You can redistribute and modify it under the terms of the GNU General Public License V3.</small>
</footer> </footer>
</body> </body>
</html>