initial
koehr
8 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"]
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@ -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 |
@ -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…
Reference in New Issue