~koehr/koehr.in

c6a04ee47c5c925c899f0716cfedc1de50872ee7 — koehr 3 months ago
initial
A  => config.toml +56 -0
@@ 1,56 @@
# This is a zola config. Use `zola serve` to preview the page

base_url = "https://koehr.in"
title = "the codeartist — programmer and engineer based in Berlin"
description = "The personal page and weblog of Norman Köhring"
default_language = "en"

compile_sass = false
build_search_index = true
minify_html = true
generate_feed = true
feed_filename = "rss.xml"

[markdown]
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = true
highlight_theme = "base16-ocean-dark"

# render Unicode emoji equivalent (e.g.: :smile: => 😄)
render_emoji = false

# Whether external links are to be opened in a new tab
# If this is true, a `rel="noopener"` will always automatically be added for security reasons
external_links_target_blank = true
external_links_no_follow = true
external_links_no_referrer = false
# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form)
# For example, `...` into `…`, `"quote"` into `“curly”` etc
smart_punctuation = true

[search]
include_title = true
include_description = false
include_path = false
include_content = true

[extra]
author = "Norman Köhring"
geo_lat = "51.3333"
geo_lng = "12.4167"
geo_region = "DE-BE"
geo_placename = "Berlin"
auth_endpoint = "https://indiecert.net/auth"
publickey = "ni:///sha-256;H5W3RSZHP6eNHUFQStlfqaUnnYXOtoibUL5PB2GRqNM?ct=application/x-x509-user-cert"

mainnav = [
  { title="blog", href="https://koehr.in/blog/"},
  { title="twitter", href="https://twitter.com/koehr_in"},
  { title="mastodon", href="https://mstdn.io/@koehr"},
  { title="github", href="https://github.com/nkoehring"},
  { title="sourcehut", href="https://sr.ht/~koehr"},
  { title="instagram", href="https://instagram.com/coffee_n_code"},
  { title="photography", href="https://500px.com/koehr"},
  { title="mail", href="mailto:n[at]koehr.in"},
]

A  => content/_index.md +39 -0
@@ 1,39 @@
+++
+++

<section id="introduction">
  <header>
    <h1><span>intro</span>duction</h1>
    <em>What to know about me</em>
  </header>

Hi there! I am a <a rel="me" title="Do you want to hire me?" href="/contact">programmer</a>, <a rel="noopener me" target="_blank" title="see my Github profile" href="https://github.com/nkoehring">OpenSource enthusiast</a> and <a rel="noopener" target="_blank" title="Read here to learn more about this word!" href="https://en.wikipedia.org/wiki/Hacker_culture">hacker</a> based in Berlin, Germany.

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.
</section>

<section id="experience">
  <header>
    <h1><span>exp</span>erience</h1>
    <em>My professional experience</em>
  </header>

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.

Some time in the year 2007 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](https://www.here.com) and [Deutsche Telekom Labs](https://laboratories.telekom.com).

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](https://github.com/nkoehring/cv/blob/master/cv.pdf) for a more detailed list.
</section>

<section id="coaching">
  <header>
    <h1><span>coach</span>ing</h1>
    <em>Whenever possible, I try to help others to learn</em>
  </header>

I’m the organizer of [Vuejs // Berlin](https://vuejs.berlin), a monthly meetup group around [Vue](https://vuejs.org) and web technologies in general.

Many people want to learn and grow. Whenever I can I try to help those people by sharing my experience and knowledge. I already voluntarily coached at [Code Curious](https://www.codecurious.org/), [Frauenloop](https://frauenloop.org) and [Jugend Hackt](https://jugendhackt.de). I also helped children with their first steps into the world of programming at the Berlin [CoderDojo](https://coderdojo.com).
</section>

A  => content/blog/_index.md +6 -0
@@ 1,6 @@
+++
title = "Blog"
+++

# Blog


A  => static/avatar.jpg +0 -0
A  => static/codeartist.png +0 -0
A  => static/codeartist2.png +0 -0
A  => static/favicon.png +0 -0
A  => static/fun.js +1 -0
@@ 1,1 @@
!function(){var e,t,n,i,a,d,r,l,c,m,u;e=document.getElementById("asidetoggle"),t=document.querySelector("body > aside"),n=document.getElementById("main"),e.addEventListener("click",function(){t.classList.toggle("open"),n.classList.toggle("wrapped")}),i=document.getElementById("siteheader"),a=document.querySelector("#siteheader h1"),d=document.querySelector("#siteheader h2"),r=i.offsetHeight,l=i.offsetWidth,c=i.offsetLeft,m=i.offsetTop,u=10,i.addEventListener("mousemove",function(e){if(!u--){u<=0&&(u=10);var t=Math.round(100*(e.layerX-c)/l),n=Math.round(100*(e.layerY-m)/r),o=100-t,s=40+n/5;i.style.backgroundPosition=o+"px "+s+"%",a.style.marginLeft=-o+"px",d.style.marginLeft=-o+"px",a.style.marginTop=-(50-n)+"px"}}),i.addEventListener("mouseleave",function(){i.style.backgroundPosition="",a.style.marginLeft="",d.style.marginLeft="",a.style.marginTop=""})}();
\ No newline at end of file

A  => static/iwona-regular-webfont.woff +0 -0
A  => static/iwona-regular-webfont.woff2 +0 -0
A  => static/style.css +131 -0
@@ 1,131 @@
body > header h1 > span {
  color: #999;
}

#asidetoggle {
  display: none;
  float: left;
  border: none;
  background-color: #494949;
  margin-top: -1.2rem;
  padding: .5rem 1rem;
  color: #FFF;
  font-size: 2rem;
  font-weight: 100;
}

#about .u-photo {
  float: left;
  width: 100px;
  margin-top: -2em;
  margin-left: 1em;
}

body > aside,
#main {
  transition: transform .2s ease;
}
body > aside nav,
body > aside ol,
body > aside ul {
  margin: 0;
  padding: 0;
  line-height: 2.1rem;
}
body > aside > section > header > h1 {
  margin: 0;
  margin-top: 1em;
  margin-bottom: .5em;
  font-size: 1.5rem;
}

#main.wrapped {
  transform: translate(50%) rotateY(45deg);
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
}
#main > section > header > h1 {
  display: inline-block;
  vertical-align: baseline;
  margin: .7em 0 .5em 0;
  font-size: 1.7rem;
}
#main > section > header > em {
  display: inline-block;
  vertical-align: baseline;
  font-size: 1rem;
  margin: 0 0 0 .5em;
}
#main > section > p {
  margin: .5rem 0;
}
#main > section > p:first-of-type {
  margin: 0;
}

#main header > h1 > span { transition: color 2s; }
#introduction > header > h1 > span { color: #0DA4A4; }
#experience   > header > h1 > span { color: #E66; }
#coaching     > header > h1 > span { color: #46A646; }

/* media queries */
@media screen and (max-width:960px) {
  body {
    width: 100%;
    overflow-x: hidden;
    margin: 0 0;
    border: none;
  }
}

@media screen and (max-width:639px) {
  body > header {
    padding: 0;
    height: 160px;
    background-size: 180%;
  }

  #main > section > header > h1,
  #main > section > header > em {
    display: block;
  }
  body > header h1 > span {
    display: block;
    margin-left: -.3rem;
    margin-bottom: -3rem;
    color: #777;
  }

  #asidetoggle {
    display: inline-block;
  }
  body > aside {
    position: absolute;
    width: 160px;
    padding-right: 0;
    transform: translateX(-250px);
  }
  body > aside.open {
    transform: translateX(0px);
  }

  #main {
    margin: 0;
    margin-left: 2%;
    width: 96%;
    text-align: left;
  }
  #footernav li {
    display: block;
  }
}

@media screen and (max-width:359px) {
  #main {
    margin-left: 5%;
    width: 90%;
  }
  #main.wrapped {
    margin-left: 10%;
  }
}

A  => static/title_bg.jpg +0 -0
A  => templates/base.html +230 -0
@@ 1,230 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{% block title %}{{ config.title }}{% endblock title %}</title>

  <meta name="author" content="{{ config.extra.author }}" />
  <meta name="DC.title" content="{{ config.title }}" />

  <meta name="ICBM" content="{{ config.extra.geo_lat }}, {{ config.extra.geo_lng }}" />
  <meta name="geo.position" content="{{ config.extra.geo_lat }}; {{ config.extra.geo_lng }}" />
  <meta name="geo.region" content="{{ config.extra.geo_region }}" />
  <meta name="geo.placename" content="{{ config.extra.geo_placename }}" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="manifest" href="/site.webmanifest" />
  <link rel="author" href="https://koehr.in" />
  <link rel="canonical" href="https://koehr.in" />
  <link rel="alternate" href="https://codearti.st" />
  <link rel="alternate" href="https://koehr.tech" />
  <link rel="alternate" href="https://k0r.eu" />

  {% if config.generate_feed %}
  <link rel="alternate" type={% if config.feed_filename == "atom.xml" %}"application/atom+xml"{% else %}"application/rss+xml"{% endif %} title="RSS" href="{{ get_url(path=config.feed_filename) | safe }}">
  {% endif %}

  <link rel="shortcut icon" href="/favicon.png" type="image/x-icon">
  <link rel="icon" href="/favicon.png" type="image/x-icon">

  <link rel="authorization_endpoint" href="{{ config.extra.auth_endpoint }}">
  <link rel="publickey" href="{{ config.extra.publickey }}">

  <style>
    @font-face {
        font-family: iwona;
        src: url('/iwona-regular-webfont.woff2') format('woff2'),
             url('/iwona-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    body {
      font-family: iwona, sans;
      font-weight: normal;
      font-size: 20px;
      line-height: 1.5em;
      color: #333;
      width: 960px;
      margin: 0 auto;
      padding: 0;
      background: white;
      border: 1px solid #CCC;
      perspective: 1000px;
    }

    body.legal {
      padding: 1em;
      text-align: justify;
    }

    a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted rgba(33,33,33,.5);
    }

    body > header {
      display: block;
      text-align: center;
      background: #4C4C4C url(/title_bg.jpg) center no-repeat;
      background-size: cover;
      color: #FFF;
      padding: 2.8rem 0;
      height: 108px;
      transition: background-position .5s ease;
    }
    body > header h1,
    body > header h2 {
      margin: 0;
      line-height: 1em;
      transition: margin .5s ease;
    }
    body > header h1 {
      font-size: 4rem;
    }
    body > header h2 {
      display: block;
      height: 1.8rem;
      margin-top: 1rem;
      color: rgba(0,0,0,0);
      background: transparent url(/codeartist2.png) center no-repeat;
      background-size: 120px;
    }
    #asidetoggle {
      display: none;
    }

    body > aside,
    #main {
      display: inline-block;
      vertical-align: top;
    }
    body > aside {
      width: 25%;
      text-align: right;
      font-size: 1rem;
      padding-right: 4%;
    }
    body > aside li {
      list-style: none;
    }
    #main {
      width: 65%;
      vertical-align: top;
      transform-origin: center left;
      text-align: justify;
    }
    body > footer {
      margin: 5rem 0;
      text-align: center;
    }
    nav.footernav li {
      display: inline;
      margin: 0 1em;
    }
  </style>
</head>
<body class="h-card">

  <header id="siteheader">
    <a href="https://koehr.in/" class="u-url" rel="me">
      <h1 class="p-name"><span>norman</span>köhring</h1>
      <h2>Code Artist</h2>
    </a>
    <button id="asidetoggle">&gt;</button>
  </header>

  {% block sidebar %}
  <aside>
    <section id="about">
      <header>
        <h1>about</h1>
        <img class="u-photo" width="100" height="100" src="/avatar.jpg">
      </header>
      <nav id="mainnav">
        {% for a in config.extra.mainnav %}
          <li class="{{ a.title }}"><a href="{{ a.href }}">{{ a.title}}</a></li>
        {% endfor %}
      </nav>
    </section>

    <section id="speaking">
      <header>
        <h1>speaking</h1>
      </header>
      <ol>
        <li>fluent English &amp; German</li>
      </ol>
    </section>

    <section id="working with">
      <header>
        <h1>working with</h1>
      </header>
      <ol>
        <li>JavaScript &amp; TypeScript</li>
        <li>CSS3, HTML5</li>
        <li>Ruby, Python, C</li>
        <li>Linux, Shell</li>
        <li>AWS, GCP, Azure</li>
        <li>MongoDB Atlas &amp; Stitch</li>
      </ol>
    </section>

    <section id="looking into">
      <header>
        <h1>looking into</h1>
      </header>
      <ol>
        <li>Rust</li>
        <li>ReasonML</li>
      </ol>
    </section>

    <section id="interests">
      <header>
        <h1>other interests</h1>
      </header>
      <ul>
        <li>Open Web</li>
        <li>Open Data</li>
        <li>Decentralization</li>
        <li>Archery</li>
        <li>Photography</li>
      </ul>
    </section>

  </aside>
  {% endblock sidebar %}

  <div id="main">
    {% block content %}
      {{ page.content | safe }}
    {% endblock %}
  </div>

  <footer>
    <nav class="footernav">
      <li rel="alternate" class="feed"><a rel="noopener" target="_blank" href="https://koehr.tech/feed/" title="blog feed">feed:koehr.tech</a></li>
      <li rel="me" class="github"><a rel="noopener" target="_blank" href="https://github.com/nkoehring" title="github">github:nkoehring</a></li>
      <li rel="me" class="twitter"><a rel="noopener" target="_blank" href="https://twitter.com/koehr_in" title="twitter">twitter:@koehr_in</a></li>
      <li rel="me" class="mail"><a href="mailto:n[at]koehr.in" title="mail">n[at]koehr.in</a></li>
    </nav>
    <p class="footernav">
      <a rel="copyright noopener" target="_blank" href="https://github.com/nkoehring/homepage/blob/master/LICENSE" title="ISC licensed">©2021 Norman Köhring</a>
    </p>
    <nav class="footernav">
      <li class="disclaimer"><a href="/impressum#disclaimer" title="disclaimer">Disclaimer</a></li>
      <li class="impressum"><a href="/impressum" title="impressum">Impressum</a></li>
      <li class="datenschutz"><a href="/impressum#datenschutz" title="datenschutz">Datenschutz</a></li>
      <li rel="source"><a rel="noopener" target="_blank" href="https://git.sr.ht/~koehr/koehr.in" title="source code of my homepage and blog">Source</a></li>
    </nav>
  </footer>

  <link rel="stylesheet" href="/style.css" />
  <script async src="/fun.js"></script>
  <script data-goatcounter="https://koehr.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>

A  => templates/index.html +5 -0
@@ 1,5 @@
{% extends "base.html" %}

{% block content %}
{{ section.content | safe }}
{% endblock content %}