header split and links to k0r.386 and local version

6 months ago · 2378f9d4e9
parent 385a6ccb11
commit 2378f9d4e9
11 changed files with 172 additions and 42 deletions
--- a/dist/down.svg
+++ b/dist/down.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path id="Vector" d="M 3 15.8 L 3 8.2 C 3 7.08 3 6.52 3.218 6.092 C 3.41 5.715 3.715 5.41 4.092 5.218 C 4.52 5 5.08 5 6.2 5 L 17.8 5 C 18.92 5 19.48 5 19.907 5.218 C 20.284 5.41 20.591 5.715 20.782 6.092 C 21 6.519 21 7.079 21 8.197 L 21 15.803 C 21 16.921 21 17.48 20.782 17.907 C 20.591 18.284 20.284 18.591 19.907 18.782 C 19.48 19 18.921 19 17.803 19 L 6.197 19 C 5.079 19 4.519 19 4.092 18.782 C 3.715 18.591 3.41 18.284 3.218 17.907 C 3 17.48 3 16.92 3 15.8 Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="path-1" d="M 15.93 10.015 L 11.93 14.015 L 7.93 10.015" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/dist/index.html
+++ b/dist/index.html
@ -30,7 +30,7 @@
 </head>

 <body>
-  <header>
+  <header class="light:invert">
    Homepage of
    <div class=p-name>
      <span class=first-name>Norman</span>
@ -39,21 +39,41 @@
    Code Artist
  </header>
  <main>
-    <div id=content>
-      <h1>introduction</h1>
-<p>Hi there! I'm a programmer, OpenSource enthusiast and hacker, based in Berlin.</p>
-<p>I call myself a code artist, because programming can and should be seen as a creative process; therefore code is art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability and architecture.</p>
-    </div>
+    <div id=intro>
+      <p>
+        Hi there! I am a
+        <a title="Do you want to hire me?" href="#contact">programmer</a>,
+        <a rel="noopener" title="see some of my projects" href="https://git.k0r.in" target="_blank">open-source
+          enthusiast</a>
+        and
+        <a title="What is a hacker, actually?" href="https://en.wikipedia.org/wiki/Hacker_culture" rel="noopener"
+          target="_blank">hacker</a>
+        based in Berlin, Germany.
+      </p>
+      <p>
+        I call myself a code artist, because programming can and should be seen as a creative process; therefore code is
+        art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability
+        and architecture.
+      </p>
+
      <div id=menu>
        <a href="https://koehr.ing" target="_blank">
          Try the Interactive Homepage Experiment
-        <img src="/interactive-homepage.jpg" />
+          <img class="light:invert" src="/term.svg" />
        </a>
-      <a href="/about.html">
+        <a href="#content">
          Learn more about me and my work, here
-        <img src="/header.jpg" />
+          <img class="light:invert" src="/down.svg" />
        </a>
      </div>
+    </div>
+    <div id=content>
+      <h1>experience</h1>
+<p>Pretty early in my life I realized that I work best on my own terms. That does not mean that I prefer to work alone. Working with clients, team mates, designers and managers is a crucial part of any development process.</p>
+<p>Some time in the year 2009 I decided to not only live up to my way of working but also share my experience even more. I decided to become a freelancing programmer and consultant. Since then many different places benefited from my work. Start-Ups in their first months as well as well known companies like HERE and Deutsche Telekom Labs.</p>
+<p>Together with entrepreneurs, UI/UX experts and engineers of many fields I created novel and beautiful applications that still influence the live of thousands of people.</p>
+<p>Please see my CV for a more detailed list.</p>
+    </div>
  </main>
  <link href=/extended.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
--- a/dist/rubik-regular-minimal.woff2
+++ b/dist/rubik-regular-minimal.woff2
--- a/dist/style.css
+++ b/dist/style.css
@ -4,6 +4,14 @@
  --emboss-color: #000;
 }

+@font-face {
+  font-family: 'rubikregular';
+  src: url('/rubik-regular-minimal.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
@media (prefers-color-scheme: light) {
  :root {
    --page-bg-color: #efe9d9;
@ -11,7 +19,7 @@
    --emboss-color: #fff;
  }

-  body>header {
+  .light\:invert {
    filter: invert();
  }
 }
@ -31,7 +39,8 @@ body {
  background: var(--page-bg-color);
  color: var(--page-fg-color);
  font-size: 20px;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: 'rubikregular', sans-serif;
+  scroll-behavior: smooth;
 }

 body>header {
@ -40,6 +49,18 @@ body>header {
  color: transparent;
 }

+a {
+  color: var(--page-fg-color);
+}
+
+#intro {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  height: calc(100vh - 420px);
+  margin: 2rem 0;
+}
+
 #content>h1 {
  font-size: 2rem;
  font-variant: small-caps;
@ -51,20 +72,34 @@ body>header {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
-  margin: 3rem 0 0 0;
-  text-align: center;
 }

 #menu>a {
+  padding: 2rem .5rem 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
-  color: white;
+  align-items: center;
+  gap: 1rem;
  text-decoration: none;
  font-variant: small-caps;
+  font-size: 2rem;
+  text-align: center;
+  background-color: rgba(128, 128, 128, .1);
+  transition: background-color .3s ease;
+  border-radius: 12px;
+}
+
+#menu>a:hover {
+  background-color: rgba(128, 128, 128, .2);
 }

 #menu>a>img {
-  max-width: 400px;
-  aspect-ratio: 400 / 281;
+  max-width: 200px;
+  opacity: .4;
+  transition: opacity .3s ease;
+}
+
+#menu>a:hover>img {
+  opacity: .8;
 }
--- a/dist/term.svg
+++ b/dist/term.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M17 15H12M7 10L10 12.5L7 15M3 15.8002V8.2002C3 7.08009 3 6.51962 3.21799 6.0918C3.40973 5.71547 3.71547 5.40973 4.0918 5.21799C4.51962 5 5.08009 5 6.2002 5H17.8002C18.9203 5 19.4796 5 19.9074 5.21799C20.2837 5.40973 20.5905 5.71547 20.7822 6.0918C21 6.5192 21 7.07899 21 8.19691V15.8031C21 16.921 21 17.48 20.7822 17.9074C20.5905 18.2837 20.2837 18.5905 19.9074 18.7822C19.48 19 18.921 19 17.8031 19H6.19691C5.07899 19 4.5192 19 4.0918 18.7822C3.71547 18.5905 3.40973 18.2837 3.21799 17.9074C3 17.4796 3 16.9203 3 15.8002Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/index.md
+++ b/index.md
@ -1,5 +1,9 @@
-# introduction
+# experience

-Hi there! I'm a programmer, OpenSource enthusiast and hacker, based in Berlin.
+Pretty early in my life I realized that I work best on my own terms. That does not mean that I prefer to work alone. Working with clients, team mates, designers and managers is a crucial part of any development process.

-I call myself a code artist, because programming can and should be seen as a creative process; therefore code is art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability and architecture.
+Some time in the year 2009 I decided to not only live up to my way of working but also share my experience even more. I decided to become a freelancing programmer and consultant. Since then many different places benefited from my work. Start-Ups in their first months as well as well known companies like HERE and Deutsche Telekom Labs.
+
+Together with entrepreneurs, UI/UX experts and engineers of many fields I created novel and beautiful applications that still influence the live of thousands of people.
+
+Please see my CV for a more detailed list.
--- a/layouts/index.html
+++ b/layouts/index.html
@ -30,7 +30,7 @@
 </head>

 <body>
-  <header>
+  <header class="light:invert">
    Homepage of
    <div class=p-name>
      <span class=first-name>Norman</span>
@ -39,19 +39,37 @@
    Code Artist
  </header>
  <main>
-    <div id=content>
-      @contents
-    </div>
+    <div id=intro>
+      <p>
+        Hi there! I am a
+        <a title="Do you want to hire me?" href="#contact">programmer</a>,
+        <a rel="noopener" title="see some of my projects" href="https://git.k0r.in" target="_blank">open-source
+          enthusiast</a>
+        and
+        <a title="What is a hacker, actually?" href="https://en.wikipedia.org/wiki/Hacker_culture" rel="noopener"
+          target="_blank">hacker</a>
+        based in Berlin, Germany.
+      </p>
+      <p>
+        I call myself a code artist, because programming can and should be seen as a creative process; therefore code is
+        art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability
+        and architecture.
+      </p>
+
      <div id=menu>
        <a href="https://koehr.ing" target="_blank">
          Try the Interactive Homepage Experiment
-        <img src="/interactive-homepage.jpg" />
+          <img class="light:invert" src="/term.svg" />
        </a>
-      <a href="/about.html">
+        <a href="#content">
          Learn more about me and my work, here
-        <img src="/header.jpg" />
+          <img class="light:invert" src="/down.svg" />
        </a>
      </div>
+    </div>
+    <div id=content>
+      @contents
+    </div>
  </main>
  <link href=/extended.css rel=stylesheet>
  <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
--- a/static/down.svg
+++ b/static/down.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path id="Vector" d="M 3 15.8 L 3 8.2 C 3 7.08 3 6.52 3.218 6.092 C 3.41 5.715 3.715 5.41 4.092 5.218 C 4.52 5 5.08 5 6.2 5 L 17.8 5 C 18.92 5 19.48 5 19.907 5.218 C 20.284 5.41 20.591 5.715 20.782 6.092 C 21 6.519 21 7.079 21 8.197 L 21 15.803 C 21 16.921 21 17.48 20.782 17.907 C 20.591 18.284 20.284 18.591 19.907 18.782 C 19.48 19 18.921 19 17.803 19 L 6.197 19 C 5.079 19 4.519 19 4.092 18.782 C 3.715 18.591 3.41 18.284 3.218 17.907 C 3 17.48 3 16.92 3 15.8 Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="path-1" d="M 15.93 10.015 L 11.93 14.015 L 7.93 10.015" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/static/rubik-regular-minimal.woff2
+++ b/static/rubik-regular-minimal.woff2
--- a/static/style.css
+++ b/static/style.css
@ -4,6 +4,14 @@
  --emboss-color: #000;
 }

+@font-face {
+  font-family: 'rubikregular';
+  src: url('/rubik-regular-minimal.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
@media (prefers-color-scheme: light) {
  :root {
    --page-bg-color: #efe9d9;
@ -11,7 +19,7 @@
    --emboss-color: #fff;
  }

-  body>header {
+  .light\:invert {
    filter: invert();
  }
 }
@ -31,7 +39,8 @@ body {
  background: var(--page-bg-color);
  color: var(--page-fg-color);
  font-size: 20px;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: 'rubikregular', sans-serif;
+  scroll-behavior: smooth;
 }

 body>header {
@ -40,6 +49,18 @@ body>header {
  color: transparent;
 }

+a {
+  color: var(--page-fg-color);
+}
+
+#intro {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  height: calc(100vh - 420px);
+  margin: 2rem 0;
+}
+
 #content>h1 {
  font-size: 2rem;
  font-variant: small-caps;
@ -51,20 +72,34 @@ body>header {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
-  margin: 3rem 0 0 0;
-  text-align: center;
 }

 #menu>a {
+  padding: 2rem .5rem 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
-  color: white;
+  align-items: center;
+  gap: 1rem;
  text-decoration: none;
  font-variant: small-caps;
+  font-size: 2rem;
+  text-align: center;
+  background-color: rgba(128, 128, 128, .1);
+  transition: background-color .3s ease;
+  border-radius: 12px;
+}
+
+#menu>a:hover {
+  background-color: rgba(128, 128, 128, .2);
 }

 #menu>a>img {
-  max-width: 400px;
-  aspect-ratio: 400 / 281;
+  max-width: 200px;
+  opacity: .4;
+  transition: opacity .3s ease;
+}
+
+#menu>a:hover>img {
+  opacity: .8;
 }
--- a/static/term.svg
+++ b/static/term.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M17 15H12M7 10L10 12.5L7 15M3 15.8002V8.2002C3 7.08009 3 6.51962 3.21799 6.0918C3.40973 5.71547 3.71547 5.40973 4.0918 5.21799C4.51962 5 5.08009 5 6.2002 5H17.8002C18.9203 5 19.4796 5 19.9074 5.21799C20.2837 5.40973 20.5905 5.71547 20.7822 6.0918C21 6.5192 21 7.07899 21 8.19691V15.8031C21 16.921 21 17.48 20.7822 17.9074C20.5905 18.2837 20.2837 18.5905 19.9074 18.7822C19.48 19 18.921 19 17.8031 19H6.19691C5.07899 19 4.5192 19 4.0918 18.7822C3.71547 18.5905 3.40973 18.2837 3.21799 17.9074C3 17.4796 3 16.9203 3 15.8002Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>