Redo website styling

2025-11-09 20:06:24 +01:00
parent 202b607fa5
commit 4633c08da8
36 changed files with 639 additions and 496 deletions
@@ -8,21 +8,28 @@
  <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">
+<body>
+  <nav>
+    <a href="/" class="header-logo">
+      <img src="/img/header-logo.webp" alt="logo">
    </a>
-    <a href="/about/">About</a>
-    <a href="/blog/">Blog</a>
-    <a href="/contact/">Contact</a>
-  </header>
+    <span class="header-text">Johannes Olzem</span>
+    <ul>
+      <li>
+        <a href="/about/">About</a>
+      </li>
+      <li>
+        <a href="/blog/">Blog</a>
+      </li>
+      <li>
+        <a href="/contact/">Contact</a>
+      </li>
+    </ul>
+  </nav>
  <main>
-    <h1>Johannes Olzem</h1>
-    <blockquote>Less is more</blockquote>
-    <h2>About me</h2>
+    <h1>About me</h1>
    <p>
-      Hey there!
+      Hey there!<br>
      My name is Johannes, and I'm a computer enthusiast born and raised in
      Germany. Recently, I graduated from school, majoring in IT and English,
      and I am now training to become an IT specialist. I am passionate about
@@ -34,10 +41,14 @@
      from computers I enjoy making my own pourover coffee, I am a big fan of
      technical fashion and I like cars.
    </p>
-    <h2>My Skills</h2>
-    <p>I have at least basic knowledge in the following technologies:</p>
+    <h1>
+      My Skills
+    </h1>
+    <p>
+      I have at least basic knowledge in the following technologies:
+    </p>
    <div style="float:left" class="skills">
-      <h3>Languages</h3>
+      <h2>Languages</h2>
      <ul>
        <li>HTML &amp; CSS</li>
        <li>Java</li>
@@ -46,7 +57,7 @@
      </ul>
    </div>
    <div style="float:right" class="skills">
-      <h3>Other technologies</h3>
+      <h2>Other technologies</h2>
      <ul>
        <li>Linux</li>
        <li>Git</li>
@@ -55,26 +66,35 @@
        <li>Docker</li>
      </ul>
    </div>
-    <br>
-    <h2>About this website</h2>
+    <h1>About this website</h1>
    <p>
      While I might not have been using the internet much or at all during the
-      web 1.0 times (which this site is heavily modeled after) I do believe that
-      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.
+      web 1.0 times (which this site was originally modeled after) I do believe
+      that 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>
      <br>
      <a href="https://git.olzem.org/jolzem/olzem.org">Source code</a>
    </p>
+    <h1>What happened to this site?</h1>
+    <p>
+      I have recently taken an interest in a lot of different elements of
+      design. While I was previously already quite interested in interior
+      design, my recent deep dive into the design rabbit hole led me to learn
+      about a lot of different design languages, different designers, and
+      aspects of design like product design or, more importantly, graphic
+      design. After seeing a few different images online, I felt inspired and
+      decided to redesign my own website.
+    </p>
  </main>
  <footer>
    &copy; 2021 - <script>document.write(new Date().getFullYear())</script> Johannes Olzem