main
koehr 4 months ago
commit 385a6ccb11

@ -0,0 +1,6 @@
# Homepage of Norman Köhring
## Build Instructions
This homepage uses [VSS](https://github.com/vssio/vss/). To build, use:
`vss build` or `vss serve`.

@ -0,0 +1,6 @@
title = "Norman Köhring"
description = "Homepage, Portfolio and CV of Norman Köhring"
base_url = 'https://koehr.in/'
[build]
ignore_files = ["README.md", "TODO"]

BIN
dist/header.jpg vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

62
dist/index.html vendored

@ -0,0 +1,62 @@
<!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>
<header>
Homepage of
<div class=p-name>
<span class=first-name>Norman</span>
<span class=last-name>Köhring</span>
</div>
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=menu>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<img src="/interactive-homepage.jpg" />
</a>
<a href="/about.html">
Learn more about me and my work, here
<img src="/header.jpg" />
</a>
</div>
</main>
<link href=/extended.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

70
dist/style.css vendored

@ -0,0 +1,70 @@
:root {
--page-bg-color: #101626;
--page-fg-color: #fff8e7;
--emboss-color: #000;
}
@media (prefers-color-scheme: light) {
:root {
--page-bg-color: #efe9d9;
--page-fg-color: #261b00;
--emboss-color: #fff;
}
body>header {
filter: invert();
}
}
* {
transition: color, background-color 200ms ease;
}
html,
body {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 960px;
max-width: 98vw;
margin: auto;
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;
}
body>header {
height: 420px;
background: url(/header.jpg) center no-repeat;
color: transparent;
}
#content>h1 {
font-size: 2rem;
font-variant: small-caps;
text-shadow: 1px 1px 0 var(--emboss-color);
}
#menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 3rem 0 0 0;
text-align: center;
}
#menu>a {
display: flex;
flex-flow: column nowrap;
justify-content: center;
color: white;
text-decoration: none;
font-variant: small-caps;
}
#menu>a>img {
max-width: 400px;
aspect-ratio: 400 / 281;
}

@ -0,0 +1,5 @@
# introduction
Hi there! I'm a programmer, OpenSource enthusiast and hacker, based in Berlin.
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.

@ -0,0 +1,60 @@
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<base href="@base_url">
<title>@title // 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>
<header>
Homepage of
<div class=p-name>
<span class=first-name>Norman</span>
<span class=last-name>Köhring</span>
</div>
Code Artist
</header>
<main>
<div id=content>
@contents
</div>
<div id=menu>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<img src="/interactive-homepage.jpg" />
</a>
<a href="/about.html">
Learn more about me and my work, here
<img src="/header.jpg" />
</a>
</div>
</main>
<link href=/extended.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

@ -0,0 +1,70 @@
:root {
--page-bg-color: #101626;
--page-fg-color: #fff8e7;
--emboss-color: #000;
}
@media (prefers-color-scheme: light) {
:root {
--page-bg-color: #efe9d9;
--page-fg-color: #261b00;
--emboss-color: #fff;
}
body>header {
filter: invert();
}
}
* {
transition: color, background-color 200ms ease;
}
html,
body {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 960px;
max-width: 98vw;
margin: auto;
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;
}
body>header {
height: 420px;
background: url(/header.jpg) center no-repeat;
color: transparent;
}
#content>h1 {
font-size: 2rem;
font-variant: small-caps;
text-shadow: 1px 1px 0 var(--emboss-color);
}
#menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 3rem 0 0 0;
text-align: center;
}
#menu>a {
display: flex;
flex-flow: column nowrap;
justify-content: center;
color: white;
text-decoration: none;
font-variant: small-caps;
}
#menu>a>img {
max-width: 400px;
aspect-ratio: 400 / 281;
}
Loading…
Cancel
Save