diff --git a/dist/down.svg b/dist/down.svg deleted file mode 100644 index 0248e90..0000000 --- a/dist/down.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dist/fediverse.svg b/dist/fediverse.svg index 72f9dba..8475fd0 100644 --- a/dist/fediverse.svg +++ b/dist/fediverse.svg @@ -1 +1 @@ - + diff --git a/dist/gitforge.svg b/dist/gitforge.svg new file mode 100644 index 0000000..2f50935 --- /dev/null +++ b/dist/gitforge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dist/github.svg b/dist/github.svg index cc919f6..735c025 100644 --- a/dist/github.svg +++ b/dist/github.svg @@ -1 +1 @@ - + diff --git a/dist/header.jpg b/dist/header.jpg index ee867b3..08a223c 100644 Binary files a/dist/header.jpg and b/dist/header.jpg differ diff --git a/dist/index.html b/dist/index.html index bac34eb..2846fdb 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,7 +3,7 @@ - + Norman Köhring // the codeartist — programmer and engineer based in Berlin @@ -30,14 +30,6 @@ -
- Homepage of -
- Norman - Köhring -
- Code Artist -

@@ -59,11 +51,19 @@

@@ -89,6 +89,7 @@

Mail n@<this domain>

Fediverse / Mastodon @Koehr@mstdn.io

+

Gitforge git.k0r.in

LinkedIn Norman Köhring

Instagram coffee_n_code

Threads coffee_n_code

@@ -98,7 +99,48 @@
+
+ + diff --git a/dist/instagram.svg b/dist/instagram.svg index 7041024..570b3d6 100644 --- a/dist/instagram.svg +++ b/dist/instagram.svg @@ -1 +1 @@ - + diff --git a/dist/linkedin.svg b/dist/linkedin.svg index c00bc12..9ce8535 100644 --- a/dist/linkedin.svg +++ b/dist/linkedin.svg @@ -1 +1 @@ - + diff --git a/dist/mail.svg b/dist/mail.svg index 6e65b40..d812e12 100644 --- a/dist/mail.svg +++ b/dist/mail.svg @@ -1 +1 @@ - + diff --git a/dist/reddit.svg b/dist/reddit.svg index 629e64b..3a88f30 100644 --- a/dist/reddit.svg +++ b/dist/reddit.svg @@ -1 +1 @@ - + diff --git a/dist/style.css b/dist/style.css index 1ce2e82..d91d2df 100644 --- a/dist/style.css +++ b/dist/style.css @@ -1,6 +1,11 @@ :root { - --page-bg-color: #101626; - --page-fg-color: #fff8e7; + --header-bg-color: #1b1c1d; + --header-fg-color: #a3bd8d; + --header-height: 192px; + --header-multiplier: .25; + --page-bg-color: #232425; + --page-fg-color: #7e9fbe; + --highlight-fg-color: #eacb8b; --emboss-color: #000; } @@ -16,25 +21,27 @@ :root { --page-bg-color: #efe9d9; --page-fg-color: #261b00; + --header-fg-color: #143373; + --header-bg-color: #a49570; --emboss-color: #fff; } - .light\:invert { + .light\:invert, + .contacts img { filter: invert(); } } * { - transition: color, background-color 200ms ease; + transition: color 300ms ease, background-color 300ms ease, fill 500ms ease; } html, body { + width: 100vw; 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); @@ -43,10 +50,41 @@ body { scroll-behavior: smooth; } +body>#spacer, body>header { - height: 420px; - background: url(/header.jpg) center no-repeat; + position: fixed; + top: 0; + left: 0; + width: 100vw; + background-color: var(--header-bg-color); +} + +body>#spacer { + height: calc(var(--header-height) * var(--header-multiplier)); +} + +body>header { + height: var(--header-height); color: transparent; + transition: transform .3s ease-in-out; + transform-origin: top center; +} + +body>header.small { + transform: scale(var(--header-multiplier)); +} + +body>header>svg { + display: block; + width: 960px; + max-width: 98vw; + margin: .5em auto; + color: var(--header-fg-color); +} + +body>main { + width: 960px; + margin: var(--header-height) auto 4em; } a { @@ -57,15 +95,17 @@ a { display: flex; flex-flow: column nowrap; justify-content: center; - height: calc(100vh - 420px); + height: calc(100vh - var(--header-height)); margin: 2rem 0; } #content>h1 { - margin: 2em 0 .25em; + margin: 0 0 .25em; + padding-top: 2em; font-size: 2rem; font-variant: small-caps; text-shadow: 1px 1px 0 var(--emboss-color); + color: var(--header-fg-color); } #menu { @@ -102,26 +142,70 @@ blockquote { background-color: rgba(128, 128, 128, .2); } -#menu>a>img { +#menu>a>svg { + display: block; max-width: 200px; opacity: .3; transition: opacity .3s ease; } -#menu>a:hover>img { +#menu>a:hover>svg { opacity: .8; } .contacts { - columns: 2; + margin: 1.5em 0; + columns: 3; + column-fill: balance; } .contacts p { display: flex; align-items: center; gap: 1rem; + margin: 0 0 1em 0; } .contacts img { width: 3rem; +} + +#header-tilde, +#header-bracket, +#header-underscore { + fill: var(--highlight-fg-color); +} + +#header-k, +#header-o, +#header-e, +#header-h, +#header-r { + fill: var(--header-fg-color); +} + +#header-underscore { + animation: fade 2s linear infinite; +} + +@keyframes fade { + 0% { + opacity: 1.0; + } + + 50% { + opacity: 0.0; + } + + 60% { + opacity: 0.0; + } + + 80% { + opacity: 1.0; + } + + 100% { + opacity: 1.0; + } } \ No newline at end of file diff --git a/dist/term.svg b/dist/term.svg deleted file mode 100644 index 3d7aa93..0000000 --- a/dist/term.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dist/threads.svg b/dist/threads.svg index 8d45e80..3eb8092 100644 --- a/dist/threads.svg +++ b/dist/threads.svg @@ -1 +1 @@ - + diff --git a/dist/twitter.svg b/dist/twitter.svg index 7ea2b36..7941f7c 100644 --- a/dist/twitter.svg +++ b/dist/twitter.svg @@ -1 +1 @@ - + diff --git a/index.md b/index.md index 2b38315..8537a0e 100644 --- a/index.md +++ b/index.md @@ -28,6 +28,8 @@ Many people want to learn and grow. Whenever I can I try to help those people by ![Fediverse / Mastodon](/fediverse.svg) [@Koehr\@mstdn.io](https://mstdn.io/@Koehr/) + ![Gitforge](/gitforge.svg) [git.k0r.in](https://git.k0r.in/) + ![LinkedIn](/linkedin.svg) [Norman Köhring](https://linkedin.com/in/norman-köhring-950448109/) ![Instagram](/instagram.svg) [coffee_n_code](https://instagram.com/coffee_n_code/) diff --git a/layouts/index.html b/layouts/index.html index 60c43de..fd90d22 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -30,14 +30,6 @@ -
- Homepage of -
- Norman - Köhring -
- Code Artist -

@@ -59,11 +51,19 @@

@@ -71,7 +71,48 @@ @contents
+
+ + diff --git a/static/down.svg b/static/down.svg deleted file mode 100644 index 0248e90..0000000 --- a/static/down.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/fediverse.svg b/static/fediverse.svg index 72f9dba..8475fd0 100644 --- a/static/fediverse.svg +++ b/static/fediverse.svg @@ -1 +1 @@ - + diff --git a/static/gitforge.svg b/static/gitforge.svg new file mode 100644 index 0000000..2f50935 --- /dev/null +++ b/static/gitforge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/github.svg b/static/github.svg index cc919f6..735c025 100644 --- a/static/github.svg +++ b/static/github.svg @@ -1 +1 @@ - + diff --git a/static/header.jpg b/static/header.jpg index ee867b3..08a223c 100644 Binary files a/static/header.jpg and b/static/header.jpg differ diff --git a/static/instagram.svg b/static/instagram.svg index 7041024..570b3d6 100644 --- a/static/instagram.svg +++ b/static/instagram.svg @@ -1 +1 @@ - + diff --git a/static/linkedin.svg b/static/linkedin.svg index c00bc12..9ce8535 100644 --- a/static/linkedin.svg +++ b/static/linkedin.svg @@ -1 +1 @@ - + diff --git a/static/mail.svg b/static/mail.svg index 6e65b40..d812e12 100644 --- a/static/mail.svg +++ b/static/mail.svg @@ -1 +1 @@ - + diff --git a/static/reddit.svg b/static/reddit.svg index 629e64b..3a88f30 100644 --- a/static/reddit.svg +++ b/static/reddit.svg @@ -1 +1 @@ - + diff --git a/static/style.css b/static/style.css index 1ce2e82..d91d2df 100644 --- a/static/style.css +++ b/static/style.css @@ -1,6 +1,11 @@ :root { - --page-bg-color: #101626; - --page-fg-color: #fff8e7; + --header-bg-color: #1b1c1d; + --header-fg-color: #a3bd8d; + --header-height: 192px; + --header-multiplier: .25; + --page-bg-color: #232425; + --page-fg-color: #7e9fbe; + --highlight-fg-color: #eacb8b; --emboss-color: #000; } @@ -16,25 +21,27 @@ :root { --page-bg-color: #efe9d9; --page-fg-color: #261b00; + --header-fg-color: #143373; + --header-bg-color: #a49570; --emboss-color: #fff; } - .light\:invert { + .light\:invert, + .contacts img { filter: invert(); } } * { - transition: color, background-color 200ms ease; + transition: color 300ms ease, background-color 300ms ease, fill 500ms ease; } html, body { + width: 100vw; 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); @@ -43,10 +50,41 @@ body { scroll-behavior: smooth; } +body>#spacer, body>header { - height: 420px; - background: url(/header.jpg) center no-repeat; + position: fixed; + top: 0; + left: 0; + width: 100vw; + background-color: var(--header-bg-color); +} + +body>#spacer { + height: calc(var(--header-height) * var(--header-multiplier)); +} + +body>header { + height: var(--header-height); color: transparent; + transition: transform .3s ease-in-out; + transform-origin: top center; +} + +body>header.small { + transform: scale(var(--header-multiplier)); +} + +body>header>svg { + display: block; + width: 960px; + max-width: 98vw; + margin: .5em auto; + color: var(--header-fg-color); +} + +body>main { + width: 960px; + margin: var(--header-height) auto 4em; } a { @@ -57,15 +95,17 @@ a { display: flex; flex-flow: column nowrap; justify-content: center; - height: calc(100vh - 420px); + height: calc(100vh - var(--header-height)); margin: 2rem 0; } #content>h1 { - margin: 2em 0 .25em; + margin: 0 0 .25em; + padding-top: 2em; font-size: 2rem; font-variant: small-caps; text-shadow: 1px 1px 0 var(--emboss-color); + color: var(--header-fg-color); } #menu { @@ -102,26 +142,70 @@ blockquote { background-color: rgba(128, 128, 128, .2); } -#menu>a>img { +#menu>a>svg { + display: block; max-width: 200px; opacity: .3; transition: opacity .3s ease; } -#menu>a:hover>img { +#menu>a:hover>svg { opacity: .8; } .contacts { - columns: 2; + margin: 1.5em 0; + columns: 3; + column-fill: balance; } .contacts p { display: flex; align-items: center; gap: 1rem; + margin: 0 0 1em 0; } .contacts img { width: 3rem; +} + +#header-tilde, +#header-bracket, +#header-underscore { + fill: var(--highlight-fg-color); +} + +#header-k, +#header-o, +#header-e, +#header-h, +#header-r { + fill: var(--header-fg-color); +} + +#header-underscore { + animation: fade 2s linear infinite; +} + +@keyframes fade { + 0% { + opacity: 1.0; + } + + 50% { + opacity: 0.0; + } + + 60% { + opacity: 0.0; + } + + 80% { + opacity: 1.0; + } + + 100% { + opacity: 1.0; + } } \ No newline at end of file diff --git a/static/term.svg b/static/term.svg deleted file mode 100644 index 3d7aa93..0000000 --- a/static/term.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/threads.svg b/static/threads.svg index 8d45e80..3eb8092 100644 --- a/static/threads.svg +++ b/static/threads.svg @@ -1 +1 @@ - + diff --git a/static/twitter.svg b/static/twitter.svg index 7ea2b36..7941f7c 100644 --- a/static/twitter.svg +++ b/static/twitter.svg @@ -1 +1 @@ - +