initial
This commit is contained in:
koehr
commit
385a6ccb11
11 changed files with 279 additions and 0 deletions
6
README.md
Normal file
6
README.md
Normal file
|
|
@ -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`.
|
||||
6
config.toml
Normal file
6
config.toml
Normal file
|
|
@ -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
Normal file
BIN
dist/header.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
62
dist/index.html
vendored
Normal file
62
dist/index.html
vendored
Normal file
|
|
@ -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>
|
||||
BIN
dist/interactive-homepage.jpg
vendored
Normal file
BIN
dist/interactive-homepage.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
70
dist/style.css
vendored
Normal file
70
dist/style.css
vendored
Normal file
|
|
@ -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;
|
||||
}
|
||||
5
index.md
Normal file
5
index.md
Normal file
|
|
@ -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.
|
||||
60
layouts/index.html
Normal file
60
layouts/index.html
Normal file
|
|
@ -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>
|
||||
BIN
static/header.jpg
Normal file
BIN
static/header.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
static/interactive-homepage.jpg
Normal file
BIN
static/interactive-homepage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
70
static/style.css
Normal file
70
static/style.css
Normal file
|
|
@ -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…
Add table
Reference in a new issue