n/koehr.ing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

header split and links to k0r.386 and local version

Browse source
This commit is contained in:
koehr 2024-03-10 23:06:15 +01:00
parent 385a6ccb11
commit 2378f9d4e9
11 changed files with 172 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
dist/down.svg vendored Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M 3 15.8 L 3 8.2 C 3 7.08 3 6.52 3.218 6.092 C 3.41 5.715 3.715 5.41 4.092 5.218 C 4.52 5 5.08 5 6.2 5 L 17.8 5 C 18.92 5 19.48 5 19.907 5.218 C 20.284 5.41 20.591 5.715 20.782 6.092 C 21 6.519 21 7.079 21 8.197 L 21 15.803 C 21 16.921 21 17.48 20.782 17.907 C 20.591 18.284 20.284 18.591 19.907 18.782 C 19.48 19 18.921 19 17.803 19 L 6.197 19 C 5.079 19 4.519 19 4.092 18.782 C 3.715 18.591 3.41 18.284 3.218 17.907 C 3 17.48 3 16.92 3 15.8 Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="path-1" d="M 15.93 10.015 L 11.93 14.015 L 7.93 10.015" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 821 B

48
dist/index.html vendored
View file

@ -30,7 +30,7 @@
</head> </head>
<body> <body>
<header> <header class="light:invert">
Homepage of Homepage of
<div class=p-name> <div class=p-name>
<span class=first-name>Norman</span> <span class=first-name>Norman</span>
@ -39,20 +39,40 @@
Code Artist Code Artist
</header> </header>
<main> <main>
<div id=content> <div id=intro>
<h1>introduction</h1> <p>
<p>Hi there! I'm a programmer, OpenSource enthusiast and hacker, based in Berlin.</p> Hi there! I am a
<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> <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>
<div id=menu>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<img class="light:invert" src="/term.svg" />
</a>
<a href="#content">
Learn more about me and my work, here
<img class="light:invert" src="/down.svg" />
</a>
</div>
</div> </div>
<div id=menu> <div id=content>
<a href="https://koehr.ing" target="_blank"> <h1>experience</h1>
Try the Interactive Homepage Experiment <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>
<img src="/interactive-homepage.jpg" /> <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>
</a> <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>
<a href="/about.html"> <p>Please see my CV for a more detailed list.</p>
Learn more about me and my work, here
<img src="/header.jpg" />
</a>
</div> </div>
</main> </main>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>

BIN
dist/rubik-regular-minimal.woff2 vendored Normal file
View file

Binary file not shown.

49
dist/style.css vendored
View file

@ -4,6 +4,14 @@
--emboss-color: #000; --emboss-color: #000;
} }
@font-face {
font-family: 'rubikregular';
src: url('/rubik-regular-minimal.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--page-bg-color: #efe9d9; --page-bg-color: #efe9d9;
@ -11,7 +19,7 @@
--emboss-color: #fff; --emboss-color: #fff;
} }
body>header { .light\:invert {
filter: invert(); filter: invert();
} }
} }
@ -31,7 +39,8 @@ body {
background: var(--page-bg-color); background: var(--page-bg-color);
color: var(--page-fg-color); color: var(--page-fg-color);
font-size: 20px; font-size: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: 'rubikregular', sans-serif;
scroll-behavior: smooth;
} }
body>header { body>header {
@ -40,6 +49,18 @@ body>header {
color: transparent; color: transparent;
} }
a {
color: var(--page-fg-color);
}
#intro {
display: flex;
flex-flow: column nowrap;
justify-content: center;
height: calc(100vh - 420px);
margin: 2rem 0;
}
#content>h1 { #content>h1 {
font-size: 2rem; font-size: 2rem;
font-variant: small-caps; font-variant: small-caps;
@ -51,20 +72,34 @@ body>header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin: 3rem 0 0 0;
text-align: center;
} }
#menu>a { #menu>a {
padding: 2rem .5rem 0;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
color: white; align-items: center;
gap: 1rem;
text-decoration: none; text-decoration: none;
font-variant: small-caps; font-variant: small-caps;
font-size: 2rem;
text-align: center;
background-color: rgba(128, 128, 128, .1);
transition: background-color .3s ease;
border-radius: 12px;
}
#menu>a:hover {
background-color: rgba(128, 128, 128, .2);
} }
#menu>a>img { #menu>a>img {
max-width: 400px; max-width: 200px;
aspect-ratio: 400 / 281; opacity: .4;
transition: opacity .3s ease;
}
#menu>a:hover>img {
opacity: .8;
} }

4
dist/term.svg vendored Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M17 15H12M7 10L10 12.5L7 15M3 15.8002V8.2002C3 7.08009 3 6.51962 3.21799 6.0918C3.40973 5.71547 3.71547 5.40973 4.0918 5.21799C4.51962 5 5.08009 5 6.2002 5H17.8002C18.9203 5 19.4796 5 19.9074 5.21799C20.2837 5.40973 20.5905 5.71547 20.7822 6.0918C21 6.5192 21 7.07899 21 8.19691V15.8031C21 16.921 21 17.48 20.7822 17.9074C20.5905 18.2837 20.2837 18.5905 19.9074 18.7822C19.48 19 18.921 19 17.8031 19H6.19691C5.07899 19 4.5192 19 4.0918 18.7822C3.71547 18.5905 3.40973 18.2837 3.21799 17.9074C3 17.4796 3 16.9203 3 15.8002Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 749 B

10
index.md
View file

@ -1,5 +1,9 @@
# introduction # experience
Hi there! I'm a programmer, OpenSource enthusiast and hacker, based in Berlin. 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.
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. 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.
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.
Please see my CV for a more detailed list.

40
layouts/index.html
View file

@ -30,7 +30,7 @@
</head> </head>
<body> <body>
<header> <header class="light:invert">
Homepage of Homepage of
<div class=p-name> <div class=p-name>
<span class=first-name>Norman</span> <span class=first-name>Norman</span>
@ -39,19 +39,37 @@
Code Artist Code Artist
</header> </header>
<main> <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>
<div id=menu>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<img class="light:invert" src="/term.svg" />
</a>
<a href="#content">
Learn more about me and my work, here
<img class="light:invert" src="/down.svg" />
</a>
</div>
</div>
<div id=content> <div id=content>
@contents @contents
</div> </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> </main>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script> <script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

5
static/down.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M 3 15.8 L 3 8.2 C 3 7.08 3 6.52 3.218 6.092 C 3.41 5.715 3.715 5.41 4.092 5.218 C 4.52 5 5.08 5 6.2 5 L 17.8 5 C 18.92 5 19.48 5 19.907 5.218 C 20.284 5.41 20.591 5.715 20.782 6.092 C 21 6.519 21 7.079 21 8.197 L 21 15.803 C 21 16.921 21 17.48 20.782 17.907 C 20.591 18.284 20.284 18.591 19.907 18.782 C 19.48 19 18.921 19 17.803 19 L 6.197 19 C 5.079 19 4.519 19 4.092 18.782 C 3.715 18.591 3.41 18.284 3.218 17.907 C 3 17.48 3 16.92 3 15.8 Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="path-1" d="M 15.93 10.015 L 11.93 14.015 L 7.93 10.015" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 821 B

BIN
static/rubik-regular-minimal.woff2 Normal file
View file

Binary file not shown.

49
static/style.css
View file

@ -4,6 +4,14 @@
--emboss-color: #000; --emboss-color: #000;
} }
@font-face {
font-family: 'rubikregular';
src: url('/rubik-regular-minimal.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--page-bg-color: #efe9d9; --page-bg-color: #efe9d9;
@ -11,7 +19,7 @@
--emboss-color: #fff; --emboss-color: #fff;
} }
body>header { .light\:invert {
filter: invert(); filter: invert();
} }
} }
@ -31,7 +39,8 @@ body {
background: var(--page-bg-color); background: var(--page-bg-color);
color: var(--page-fg-color); color: var(--page-fg-color);
font-size: 20px; font-size: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: 'rubikregular', sans-serif;
scroll-behavior: smooth;
} }
body>header { body>header {
@ -40,6 +49,18 @@ body>header {
color: transparent; color: transparent;
} }
a {
color: var(--page-fg-color);
}
#intro {
display: flex;
flex-flow: column nowrap;
justify-content: center;
height: calc(100vh - 420px);
margin: 2rem 0;
}
#content>h1 { #content>h1 {
font-size: 2rem; font-size: 2rem;
font-variant: small-caps; font-variant: small-caps;
@ -51,20 +72,34 @@ body>header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin: 3rem 0 0 0;
text-align: center;
} }
#menu>a { #menu>a {
padding: 2rem .5rem 0;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
color: white; align-items: center;
gap: 1rem;
text-decoration: none; text-decoration: none;
font-variant: small-caps; font-variant: small-caps;
font-size: 2rem;
text-align: center;
background-color: rgba(128, 128, 128, .1);
transition: background-color .3s ease;
border-radius: 12px;
}
#menu>a:hover {
background-color: rgba(128, 128, 128, .2);
} }
#menu>a>img { #menu>a>img {
max-width: 400px; max-width: 200px;
aspect-ratio: 400 / 281; opacity: .4;
transition: opacity .3s ease;
}
#menu>a:hover>img {
opacity: .8;
} }

4
static/term.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M17 15H12M7 10L10 12.5L7 15M3 15.8002V8.2002C3 7.08009 3 6.51962 3.21799 6.0918C3.40973 5.71547 3.71547 5.40973 4.0918 5.21799C4.51962 5 5.08009 5 6.2002 5H17.8002C18.9203 5 19.4796 5 19.9074 5.21799C20.2837 5.40973 20.5905 5.71547 20.7822 6.0918C21 6.5192 21 7.07899 21 8.19691V15.8031C21 16.921 21 17.48 20.7822 17.9074C20.5905 18.2837 20.2837 18.5905 19.9074 18.7822C19.48 19 18.921 19 17.8031 19H6.19691C5.07899 19 4.5192 19 4.0918 18.7822C3.71547 18.5905 3.40973 18.2837 3.21799 17.9074C3 17.4796 3 16.9203 3 15.8002Z" stroke="#fff8e7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 749 B