M README => README +22 -1
@@ 1,1 1,22 @@
-What could I say? It's my homepage.
+# Norman Köhring
+Code Artist
+
+## Introduction
+
+Hi there! I am a programmer, OpenSource enthusiast and hacker based in Berlin, Germany.
+
+I call myself a code artist because programming can and should be seen as a creative process – and that is what I strive for! Just like a painter loves to paint or a musician loves to sing or play an instrument, I love to think about concepts and patterns, and craft pieces of art with code.
+
+I'm working for [Wunderdog](https://wunder.dog). We design and develop digital experiences. Do you want to create something beautiful and make the world a better place? We'd love to help you! Leave me a message any time and I will come back to you as soon as possible.
+
+## Experience
+
+Since 2007 I am freelancing as programmer and consultant. I worked at a lot of different places, from little known start-ups to well known companies like Nokia and Telekom.
+
+Together with entrepreneurs, UI/UX experts and engineers of many fields I created new and beautiful things.
+
+Please see [my CV](https://github.com/nkoehring/cv/blob/master/cv.pdf) for a more detailed list.
+
+## Coaching
+
+Many people want to learn and grow their experience. Whenever I can, I try to help them with my knowledge and experience. I already voluntarily coached at RailsGirls and JugendHackt. I also helped children with their first steps in programming at the Berlin CoderDojo.
D => +0 -55
@@ 1,55 0,0 @@
(function fancy_header() {
function fancy_header() {
var el = document.getElementById("siteheader"),
h1 = document.querySelector("#siteheader h1"),
h2 = document.querySelector("#siteheader h2"),
elH = el.offsetHeight,
elW = el.offsetWidth,
elX = el.offsetLeft,
elY = el.offsetTop,
trigger = 10
el.addEventListener("mousemove", function(evt) {
if(trigger--) return
if(trigger <= 0) trigger = 10
var x = Math.round((evt.layerX - elX) * 100.0 / elW),
y = Math.round((evt.layerY - elY) * 100.0 / elH),
xDelta = 100-x,
yDelta = 40+y/5
el.style.backgroundPosition = xDelta+"px "+yDelta+"%"
h1.style.marginLeft = (-xDelta)+"px"
h2.style.marginLeft = (-xDelta)+"px"
h1.style.marginTop = (-(50-y))+"px"
})
el.addEventListener("mouseleave", function() {
el.style.backgroundPosition = ""
h1.style.marginLeft = ""
h2.style.marginLeft = ""
h1.style.marginTop = ""
})
}
function aside_toggle() {
var button = document.getElementById("asidetoggle"),
aside = document.querySelector("body > aside"),
main = document.getElementById("main")
button.addEventListener("click", function() {
aside.classList.toggle("open")
main.classList.toggle("wrapped")
})
}
fancy_header()
aside_toggle()
})()
A homepage.js => homepage.js +51 -0
@@ 0,0 1,51 @@
+(function homepage () {
+
+ function addMenuToggle () {
+ var button = document.getElementById("asidetoggle")
+ var aside = document.querySelector("body > aside")
+ var main = document.getElementById("main")
+
+ button.addEventListener("click", function () {
+ aside.classList.toggle("open")
+ main.classList.toggle("wrapped")
+ })
+ }
+
+ function addHeaderEffect () {
+ var el = document.getElementById("siteheader")
+ var h1 = document.querySelector("#siteheader h1")
+ var h2 = document.querySelector("#siteheader h2")
+ var elH = el.offsetHeight
+ var elW = el.offsetWidth
+ var elX = el.offsetLeft
+ var elY = el.offsetTop
+ var trigger = 10
+
+ el.addEventListener("mousemove", function(evt) {
+ if (trigger--) return
+ if (trigger <= 0) trigger = 10
+
+ var x = Math.round((evt.layerX - elX) * 100.0 / elW)
+ var y = Math.round((evt.layerY - elY) * 100.0 / elH)
+ var xDelta = 100 - x
+ var yDelta = 40 + y / 5
+
+ el.style.backgroundPosition = xDelta + 'px ' + yDelta + '%'
+ h1.style.marginLeft = -xDelta + 'px'
+ h2.style.marginLeft = -xDelta + 'px'
+ h1.style.marginTop = -(50 - y) + 'px'
+ })
+
+ el.addEventListener("mouseleave", function () {
+ el.style.backgroundPosition = ""
+ h1.style.marginLeft = ""
+ h2.style.marginLeft = ""
+ h1.style.marginTop = ""
+ })
+ }
+
+
+ addMenuToggle()
+ addHeaderEffect()
+})()
+
A homepage.min.js => homepage.min.js +1 -0
@@ 0,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
M index.html => index.html +33 -14
@@ 16,7 16,7 @@
<link rel="author" href="https://koehr.in" />
<link rel="alternate" type="application/rss+xml"
- title="RSS" href="https://log.koehr.in/feed.rss" />
+ title="RSS Feed" href="https://koehr.tech/feed/" />
<link rel="authorization_endpoint" href="https://indiecert.net/auth">
<link rel="publickey" href="ni:///sha-256;H5W3RSZHP6eNHUFQStlfqaUnnYXOtoibUL5PB2GRqNM?ct=application/x-x509-user-cert">
@@ 146,11 146,11 @@
<img class="u-photo" src="https://avatars3.githubusercontent.com/u/246402?v=3&s=100">
</header>
<nav id="mainnav">
- <li class="blog"><a target="_blank" href="https://log.koehr.in" title="blog" rel="noopener me">blog</a></li>
+ <li class="blog"><a target="_blank" href="https://koehr.tech" title="blog" rel="noopener me">blog</a></li>
<li class="twitter"><a target="_blank" href="https://twitter.com/koehr_in" title="twitter" rel="noopener me">twitter</a></li>
<li class="mastodon"><a target="_blank" href="https://mstdn.io/@koehr" title="mastodon" rel="noopener me">mastodon</a></li>
<li class="github"><a target="_blank" href="https://github.com/nkoehring" title="github" rel="noopener me">github</a></li>
- <li class="instagram"><a target="_blank" href="https://instagram.com/nkoehring" title="instagram" rel="noopener me">instagram</a></li>
+ <li class="instagram"><a target="_blank" href="https://instagram.com/coffee_n_code" title="instagram" rel="noopener me">instagram</a></li>
<li class="500px"><a target="_blank" href="https://500px.com/koehr" title="500px" rel="noopener me">500px</a></li>
<li class="mail u-email"><a href="mailto:n[at]koehr.in" title="mail" rel="noopener me">mail</a></li>
<li class="location">
@@ 170,14 170,27 @@
</ol>
</section>
- <section id="programming">
+ <section id="working with">
<header>
- <h1>programming</h1>
+ <h1>working with</h1>
</header>
<ol>
- <li>JavaScript & Ruby</li>
+ <li>JavaScript & TypeScript</li>
<li>CSS3, HTML5</li>
- <li>Shell, Rust</li>
+ <li>Ruby, Python, C</li>
+ <li>Linux, Shell</li>
+ <li>AWS, GCP, Azure</li>
+ <li>MongoDB Atlas & Stitch</li>
+ </ol>
+ </section>
+
+ <section id="looking into">
+ <header>
+ <h1>looking into</h1>
+ </header>
+ <ol>
+ <li>Rust</li>
+ <li>ReasonML</li>
</ol>
</section>
@@ 191,8 204,6 @@
<li>Decentralization</li>
<li>Archery</li>
<li>Photography</li>
- <li>Philosophy</li>
- <li>Linguistics</li>
</ul>
</section>
@@ 234,8 245,11 @@
</header>
<p>
Since 2007 I am freelancing as programmer and consultant. I worked
- at a lot of different places, from little known start-ups to well
- known companies like Nokia and Telekom.
+ at a lot of different places, from start-ups in their first months
+ to well known companies like Nokia and Deutsche Telekom.
+ </p>
+ <p>
+ In 2018 I joined Wunderdog as a Senior Web Development Consultant.
</p>
<p>
Together with entrepreneurs, UI/UX experts and engineers of many
@@ 253,6 267,11 @@
<h2>Whenever possible I love to help others to learn</h2>
</header>
<p>
+ I'm the organizer of
+ <a target="_blank" rel="noopener" title="Vuejs // Berlin" href="https://vuejs.berlin">Vuejs // Berlin</a>,
+ a monthly meetup group around Vuejs and frontend development.
+ </p>
+ <p>
Many people want to learn and grow. Whenever I can, I help them with
my knowledge and experience. I already voluntarily coached at
<a target="_blank" rel="noopener" title="Rails Girls Berlin" href="http://railsgirlsberlin.de">RailsGirls</a>
@@ 265,13 284,13 @@
<footer>
<nav class="footernav">
- <li rel="alternate" class="feed"><a rel="noopener" target="_blank" href="https://log.koehr.in/atom.xml" title="blog feed">feed:log.koehr.in</a></li>
+ <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">©2018 Norman Köhring</a>
+ <a rel="copyright noopener" target="_blank" href="https://github.com/nkoehring/homepage/blob/master/LICENSE" title="ISC licensed">©2019 Norman Köhring</a>
</p>
<nav class="footernav">
<li class="disclaimer"><a href="/disclaimer.html" title="disclaimer">Disclaimer</a></li>
@@ 282,6 301,6 @@
</footer>
<link rel="stylesheet" href="/assets/style.css" />
- <script async src="header.js"></script>
+ <script async src="homepage.min.js"></script>
</body>
</html>
D sensors/index.html => sensors/index.html +0 -44
@@ 1,44 0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- .output {min-height: 1em; background: #EEE; margin: .2em;}
- .output::after {display: block; float: right; color: #888;}
- #motion::after {content: "motion"}
- #proximity::after {content: "proximity"}
- #orientation::after {content: "orientation"}
- #light::after {content: "light"}
- </style>
-</head>
-<body>
- <div class="output" id="motion">waiting</div>
- <div class="output" id="proximity">waiting</div>
- <div class="output" id="orientation">waiting</div>
- <div class="output" id="light">waiting</div>
- <script>
- const EL = {
- motion: document.getElementById("motion"),
- proximity: document.getElementById("proximity"),
- orientation: document.getElementById("orientation"),
- light: document.getElementById("light")
- }
- function log(where, value) {
- const el = EL[where]
- el.innerText = JSON.stringify(value)
- }
-
- if (!window.DeviceMotionEvent) EL.motion.innerText = "not supported"
- if (!window.DeviceProximityEvent) EL.proximity.innerText = "not supported"
- if (!window.DeviceOrientationEvent) EL.orientation.innerText = "not supported"
- if (!window.DeviceLightEvent) EL.light.innerText = "not supported"
-
-
- window.addEventListener("devicemotion", evt => log('motion', [evt.acceleration.x, evt.acceleration.y, evt.acceleration.z]))
- window.addEventListener("deviceproximity", evt => log('proximity', evt.value))
- window.addEventListener("deviceorientation", evt => log('orientation', [evt.alpha, evt.beta, evt.gamma]))
- window.addEventListener("devicelight", evt => log('light', evt.value))
- </script>
-</body>
-</html>