diff --git a/dist/down.svg b/dist/down.svg new file mode 100644 index 0000000..f36759d --- /dev/null +++ b/dist/down.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index d48be67..8cafd57 100644 --- a/dist/index.html +++ b/dist/index.html @@ -30,7 +30,7 @@ -
+
Homepage of
Norman @@ -39,20 +39,40 @@ Code Artist
-
-

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.

+
+

+ Hi there! I am a + programmer, + open-source + enthusiast + and + hacker + based in Berlin, Germany. +

+

+ 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. +

+ +
-
diff --git a/dist/rubik-regular-minimal.woff2 b/dist/rubik-regular-minimal.woff2 new file mode 100644 index 0000000..84bad95 Binary files /dev/null and b/dist/rubik-regular-minimal.woff2 differ diff --git a/dist/style.css b/dist/style.css index 0733edc..5db00f5 100644 --- a/dist/style.css +++ b/dist/style.css @@ -4,6 +4,14 @@ --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) { :root { --page-bg-color: #efe9d9; @@ -11,7 +19,7 @@ --emboss-color: #fff; } - body>header { + .light\:invert { filter: invert(); } } @@ -31,7 +39,8 @@ body { 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; + font-family: 'rubikregular', sans-serif; + scroll-behavior: smooth; } body>header { @@ -40,6 +49,18 @@ body>header { 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 { font-size: 2rem; font-variant: small-caps; @@ -51,20 +72,34 @@ body>header { justify-content: space-between; align-items: center; gap: 1rem; - margin: 3rem 0 0 0; - text-align: center; } #menu>a { + padding: 2rem .5rem 0; display: flex; flex-flow: column nowrap; justify-content: center; - color: white; + align-items: center; + gap: 1rem; text-decoration: none; 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 { - max-width: 400px; - aspect-ratio: 400 / 281; + max-width: 200px; + opacity: .4; + transition: opacity .3s ease; +} + +#menu>a:hover>img { + opacity: .8; } \ No newline at end of file diff --git a/dist/term.svg b/dist/term.svg new file mode 100644 index 0000000..86fe98b --- /dev/null +++ b/dist/term.svg @@ -0,0 +1,4 @@ + + + + diff --git a/index.md b/index.md index 46c79cd..31b636c 100644 --- a/index.md +++ b/index.md @@ -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. diff --git a/layouts/index.html b/layouts/index.html index 840dbe8..60c43de 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -30,7 +30,7 @@ -
+
Homepage of
Norman @@ -39,19 +39,37 @@ Code Artist
+
+

+ Hi there! I am a + programmer, + open-source + enthusiast + and + hacker + based in Berlin, Germany. +

+

+ 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. +

+ + +
@contents
-
diff --git a/static/down.svg b/static/down.svg new file mode 100644 index 0000000..f36759d --- /dev/null +++ b/static/down.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/static/rubik-regular-minimal.woff2 b/static/rubik-regular-minimal.woff2 new file mode 100644 index 0000000..84bad95 Binary files /dev/null and b/static/rubik-regular-minimal.woff2 differ diff --git a/static/style.css b/static/style.css index 0733edc..5db00f5 100644 --- a/static/style.css +++ b/static/style.css @@ -4,6 +4,14 @@ --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) { :root { --page-bg-color: #efe9d9; @@ -11,7 +19,7 @@ --emboss-color: #fff; } - body>header { + .light\:invert { filter: invert(); } } @@ -31,7 +39,8 @@ body { 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; + font-family: 'rubikregular', sans-serif; + scroll-behavior: smooth; } body>header { @@ -40,6 +49,18 @@ body>header { 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 { font-size: 2rem; font-variant: small-caps; @@ -51,20 +72,34 @@ body>header { justify-content: space-between; align-items: center; gap: 1rem; - margin: 3rem 0 0 0; - text-align: center; } #menu>a { + padding: 2rem .5rem 0; display: flex; flex-flow: column nowrap; justify-content: center; - color: white; + align-items: center; + gap: 1rem; text-decoration: none; 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 { - max-width: 400px; - aspect-ratio: 400 / 281; + max-width: 200px; + opacity: .4; + transition: opacity .3s ease; +} + +#menu>a:hover>img { + opacity: .8; } \ No newline at end of file diff --git a/static/term.svg b/static/term.svg new file mode 100644 index 0000000..86fe98b --- /dev/null +++ b/static/term.svg @@ -0,0 +1,4 @@ + + + +