You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

166 lines
11 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<base href="https://koehr.in/">
<title>Norman Köhring // the codeartist — programmer and engineer based in Berlin</title>
<meta content="The personal page and weblog of Norman Köhring" name=description>
<meta content="Norman Köhring" name=author>
<meta content="the codeartist — programmer and engineer based in Berlin" name=DC.title>
<meta content="52.4595, 13.5335" name=ICBM>
<meta content="52.4595; 13.5335" name=geo.position>
<meta content=DE-BE name=geo.region>
<meta content=Berlin name=geo.placename>
<meta content="width=device-width,initial-scale=1.0" name=viewport>
<link href=https://koehr.in rel=author>
<link href=https://koehr.in rel=canonical>
<link href=https://k0r.in rel=alternate>
<link href=https://koehr.ing rel=me>
<link href=@Koehr@mstdn.io rel=me>
<link href=https://sr.ht/~koehr/ rel=me>
<link href=https://git.k0r.in rel=me>
<link href=https://threads.net/@coffee_n_code rel=me>
<link href=https://instagram.com/@coffee_n_code rel=me>
<link href=https://ko-fi.com/koehr rel=me>
<link href=https://reddit.com/user/koehr rel=me>
<link href=https://koehr.in/rss.xml rel=alternate title=RSS type=application/rss+xml>
<link href=/favicon.png rel=icon type=image/x-icon>
<link href=/style.css rel=stylesheet>
</head>
<body>
<main>
<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>
<p>
Looking for expert advice and development services for a short-term project? I offer guidance on software
architecture decisions, coding solutions and performance optimizations tailored to your needs. Let's work
together to solve your challenges.
<a title="Contact me" href="#contact">Get in touch</a>!
</p>
<div id=menu>
<a href="#content">
Learn more about me and my work, here
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m16 10-4 4-4-4" />
</svg>
</a>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
</svg>
</a>
</div>
</div>
<div id=content>
<h1>experience</h1>
<blockquote>
<p>Thirteen years of professional experience in a couple of tweets</p>
</blockquote>
<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>
<h1>coaching</h1>
<blockquote>
<p>Whenever possible, I try to help others to learn</p>
</blockquote>
<p>Im the organizer of Vuejs // Berlin, a monthly meetup group around Vue and web technologies in general.</p>
<p>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, Frauenloop and Jugend Hackt. I also helped children with their first steps into the world of programming at the Berlin CoderDojo.</p>
<h1>contact</h1>
<blockquote>
<p>You can find me all over the interwebs</p>
</blockquote>
<div id="contact" class="contacts">
<p><img src="/mail.svg" alt="Mail"> n@&lt;this domain&gt;</p>
<p><img src="/fediverse.svg" alt="Fediverse / Mastodon"> <a href="https://mstdn.io/@Koehr/">@Koehr@mstdn.io</a></p>
<p><img src="/gitforge.svg" alt="Gitforge"> <a href="https://git.k0r.in/">git.k0r.in</a></p>
<p><img src="/linkedin.svg" alt="LinkedIn"> <a href="https://linkedin.com/in/norman-k%C3%B6hring-950448109/">Norman Köhring</a></p>
<p><img src="/instagram.svg" alt="Instagram"> <a href="https://instagram.com/coffee_n_code/">coffee_n_code</a></p>
<p><img src="/threads.svg" alt="Threads"> <a href="https://instagram.com/coffee_n_code/">coffee_n_code</a></p>
<p><img src="/reddit.svg" alt="Reddit"> <a href="https://www.reddit.com/user/koehr/">/u/koehr</a></p>
<p><img src="/github.svg" alt="Github"> <a href="https://github.com/nkoehring/">nkoehring</a></p>
<p><img src="/twitter.svg" alt="Twitter"> <a href="https://twitter.com/koehr_in/">koehr_in</a></p>
</div>
</div>
<footer>
<a href="#intro">back to top</a>
</footer>
</main>
<div id="spacer"></div>
<header id="header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 832.4 143.1">
<path id="header-underscore"
d="M832.4 131.1q0 5.5-3.1 8.6-3 3.4-8.2 3.3h-75.5q-5.2 0-8.2-3.3-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8 0-5.5 3.1-8.7 1.6-1.7 3.7-2.4 2.2-.8 4.5-.8h75.5q5.2 0 8.2 3.2 3 3.1 3 8.7z" />
<path id="header-bracket"
d="M731.9 81.4q0 6.7-6.5 10.7l-1 .6-74.3 39.2q-2.5 1.3-5.2 1.2-4.8 0-8.1-3.8-3.2-3.6-3.2-8.4 0-3.3 1.7-6 1.8-2.9 4.6-4.4l55.3-29.1-55.3-29q-2.8-1.6-4.6-4.3-1.7-2.7-1.7-6.2 0-4.7 3.2-8.4 3.3-4 8-3.7 2.7 0 5.3 1.2l74.4 39.2q3.3 1.7 5.3 4.7 2 2.8 2 6.5z" />
<path id="header-r"
d="M588.7 66.5q0 5-3.5 8.5-3.5 3.4-8.1 3.5-4.4 0-8.3-4.3-10-10.7-20.9-10.6-2.2 0-4.3.3-2.1.3-4 1-1.8.6-3.7 1.6-1.7 1-3.4 2.3-1.7 1.3-3.3 2.9-7.8 8.2-7.6 19.7V131q0 5.5-3.1 8.6-3 3.4-8.3 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V51.6q0-5.4 3-8.6 3-3.4 8.3-3.3 2 0 3.7.6 1.8.6 3.3 1.8 1.4 1 2.2 2.7 1 1.5 1.6 3.3 11.8-8.4 27-8.4 10.6 0 21 5 11.3 5.4 17.2 14.5 2.5 3.7 2.5 7.3z" />
<path id="header-h"
d="M483.9 131.1q0 5.5-3.1 8.6-3 3.4-8.3 3.3-5.2 0-8.2-3.3-3.2-3.1-3.1-8.6V84.8q0-4.6-1.5-8.2-1.4-3.5-4.4-6.9-2.1-2-4.3-3.4-2.2-1.4-4.7-2-2.4-.7-5.3-.7-4.3 0-7.8 1.5-3.3 1.5-6.4 4.6-5.9 6.3-5.8 15v46.4q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v33q1.5-1 3-1.6l3.2-1.2 3.4-1q1.6-.5 3.3-.8l3.5-.4 3.6-.2q4.4 0 8.5 1 4.1.7 7.9 2.4 3.8 1.6 7.3 4.1 3.5 2.5 6.6 5.8Q484 66 484 84.8z" />
<path id="header-e"
d="M387.5 111.1q0 1.2-.3 2.3-.1 1-.5 2l-.9 2q-6.6 12-19.4 19-12 6.6-25.4 6.6-20.8 0-35.8-14.6-15.9-15-15.9-37 0-22.1 15.9-37.1 15-14.6 35.8-14.6 3.9 0 7.8.7 4 .7 8 2.2 9.2 3.1 18.2 10 6 4.6 9.1 9.3 3.3 4.7 3.3 10 0 1.3-.3 2.5-.2 1.3-.7 2.4-1.5 3.4-5 5.3l-56.9 32.2q7.2 4.9 16.5 4.9 7.2 0 12.6-2.5 5.5-2.5 9.7-7.4l.7-1 .8-1 .9-1.3 1-1.5q3.3-4.2 7.4-5.1l1.8-.2q4.4 0 8 3.4 3.6 3.5 3.6 8.5zm-29.9-42.7q-7.2-4.8-16.6-4.8-6 0-11 2-4.9 1.8-9.3 6-4.5 4-6.7 9-2 4.8-2 10.8l.1 2.9z" />
<path id="header-o"
d="M286.8 91.4q0 4.2-.6 8.3-.6 4-1.8 7.7-1.1 3.8-2.9 7.4-1.7 3.5-4 6.9-2.4 3.3-5.2 6.1Q258 143 237.7 143T203 128q-14.3-15.2-14.3-36.6 0-21.5 14.3-36.6 14.4-15 34.7-15 4 0 7.8.5 3.9.7 7.5 1.9t7 3q3.3 1.9 6.4 4.3 3.2 2.4 5.9 5.4 14.4 15 14.5 36.5zm-22.6 0q0-2.4-.4-4.5-.2-2.2-.9-4.2-.6-2-1.5-3.9-1-2-2.2-3.7-1.2-1.7-2.8-3.4-4-4.2-8.6-6.1-4.5-2-10-2-11 0-18.7 8.2-7.8 8-7.8 19.6 0 11.4 7.8 19.7 7.8 8 18.6 8 5.6 0 10.1-1.9 4.6-2 8.6-6.1 4-4.3 5.8-9 2-4.9 2-10.7z" />
<path id="header-k"
d="M186.3 131q0 4.7-3.3 8.3-1.5 1.8-3.7 2.7-2 1.1-4.3 1.1-3.5 0-6.6-2L119.2 105v26q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v65.9l49.2-36.1q3.2-2 6.6-2 4.7 0 8 3.7t3.3 8.4q-.2 6-5 9.6l-41 30 41 29.9q2.3 1.7 3.6 4.2 1.4 2.5 1.4 5.4z" />
<path id="header-tilde"
d="M73.1 91q0 2-.6 3.9T71 98.6q-3.2 5.7-8.9 8.5-5.6 2.8-12.9 2.8-8.8 0-18-7.8-2.4-2.3-4.5-3.7-2.1-1.5-3-1.7-1.5 0-2.1.3l-.8 1.3q-.3.7-.8 1.2l-1 1-.9.8q-2.7 2-6.4 2-1.7 0-3.2-.3-1.4-.3-3-1.1-1.5-.8-2.6-2.1-2.8-3.1-2.8-8v-1.3q0-.7.2-1.2l.2-1 .4-1 .4-1q.1-.6.5-1.1l.5-1q3.2-5.7 8.8-8.5 5.7-2.9 13-2.9 3.2 0 6.2 1 3 .9 6 2.7 2.9 1.6 5.7 4.2 5.2 4.6 7.6 5.4 1 0 1.6-.2l.7-.4q.3-.1.5-.4 3.6-5.6 9.2-5.6 5.7 0 8.8 3.5 2.8 3 2.8 8z" />
</svg>
Homepage of
<div class=p-name>
<span class=first-name>Norman</span>
<span class=last-name>Köhring</span>
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<link href=/extended.css rel=stylesheet>
<script>
const el = document.getElementById('header')
const threshhold = 24
let headerIsSmall = false
window.addEventListener("scroll", () => {
if (window.scrollY > threshhold && !headerIsSmall) {
el.classList.add('small')
headerIsSmall = true
} else if (window.scrollY <= threshhold && headerIsSmall) {
el.classList.remove('small')
headerIsSmall = false
}
})
</script>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
</body>
</html>