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

add main menu

Browse Source
main
Norman Köhring 5 months ago
parent 934d47c2b5
commit f7b6eb1643
4 changed files with 122 additions and 24 deletions
Show Stats Download Patch File Download Diff File

62
dist/extended.css vendored
Unescape Escape View File

@ -0,0 +1,62 @@
#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;
}
}
#main-menu {
margin: 0;
padding: 0;
display: flex;
gap: 2em;
list-style: none;
justify-content: center;
}
body>header:not(.small) + #main-menu {
position: fixed;
color: red;
top: var(--header-height);
height: 1.2em;
width: 100vw;
padding: .1em 0;
background: black;
}
body>header.small + #main-menu {
color: green;
margin: 2em 0;
}

40
dist/index.html vendored
Unescape Escape View File

@ -47,15 +47,14 @@
art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability
and architecture. and architecture.
</p> </p>
<p>
Looking for expert advice and development services for a short-term project? I offer guidance on software
architecture decisions, coding solutions and performance optimizations tailored to your needs. Let's work
together to solve your challenges.
<a title="Contact me" href="#contact">Get in touch</a>!
</p>
<div id=menu> <div id=menu>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
</svg>
</a>
<a href="#content"> <a href="#content">
Learn more about me and my work, here Learn more about me and my work, here
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@ -65,12 +64,19 @@
d="m16 10-4 4-4-4" /> d="m16 10-4 4-4-4" />
</svg> </svg>
</a> </a>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
</svg>
</a>
</div> </div>
</div> </div>
<div id=content> <div id=content>
<h1>experience</h1> <h1>experience</h1>
<blockquote> <blockquote>
<p>My professional experience spans over thirteen years.</p> <p>Thirteen years of professional experience in a couple of tweets</p>
</blockquote> </blockquote>
<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> <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>
<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> <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>
@ -78,15 +84,15 @@
<p>Please see my CV for a more detailed list.</p> <p>Please see my CV for a more detailed list.</p>
<h1>coaching</h1> <h1>coaching</h1>
<blockquote> <blockquote>
<p>Whenever possible, I try to help others to learn.</p> <p>Whenever possible, I try to help others to learn</p>
</blockquote> </blockquote>
<p>I’m the organizer of Vuejs // Berlin, a monthly meetup group around Vue and web technologies in general.</p> <p>I’m the organizer of Vuejs // Berlin, a monthly meetup group around Vue and web technologies in general.</p>
<p>Many people want to learn and grow. Whenever I can I try to help those people by sharing my experience and knowledge. I already voluntarily coached at Code Curious, Frauenloop and Jugend Hackt. I also helped children with their first steps into the world of programming at the Berlin CoderDojo.</p> <p>Many people want to learn and grow. Whenever I can I try to help those people by sharing my experience and knowledge. I already voluntarily coached at Code Curious, Frauenloop and Jugend Hackt. I also helped children with their first steps into the world of programming at the Berlin CoderDojo.</p>
<h1>contact</h1> <h1>contact</h1>
<blockquote> <blockquote>
<p>You can contact me in many ways</p> <p>You can find me all over the interwebs</p>
</blockquote> </blockquote>
<div class="contacts"> <div id="contact" class="contacts">
<p><img src="/mail.svg" alt="Mail"> n@&lt;this domain&gt;</p> <p><img src="/mail.svg" alt="Mail"> n@&lt;this domain&gt;</p>
<p><img src="/fediverse.svg" alt="Fediverse / Mastodon"> <a href="https://mstdn.io/@Koehr/">@Koehr@mstdn.io</a></p> <p><img src="/fediverse.svg" alt="Fediverse / Mastodon"> <a href="https://mstdn.io/@Koehr/">@Koehr@mstdn.io</a></p>
<p><img src="/gitforge.svg" alt="Gitforge"> <a href="https://git.k0r.in/">git.k0r.in</a></p> <p><img src="/gitforge.svg" alt="Gitforge"> <a href="https://git.k0r.in/">git.k0r.in</a></p>
@ -98,6 +104,9 @@
<p><img src="/twitter.svg" alt="Twitter"> <a href="https://twitter.com/koehr_in/">koehr_in</a></p> <p><img src="/twitter.svg" alt="Twitter"> <a href="https://twitter.com/koehr_in/">koehr_in</a></p>
</div> </div>
</div> </div>
<footer>
<a href="#intro">back to top</a>
</footer>
</main> </main>
<div id="spacer"></div> <div id="spacer"></div>
<header id="header"> <header id="header">
@ -126,6 +135,15 @@
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu">
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<script> <script>
const el = document.getElementById('header') const el = document.getElementById('header')

8
index.md
Unescape Escape View File

@ -1,6 +1,6 @@
# experience # experience
> My professional experience spans over thirteen years. > Thirteen years of professional experience in a couple of tweets
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. 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.
@ -12,7 +12,7 @@ Please see my CV for a more detailed list.
# coaching # coaching
> Whenever possible, I try to help others to learn. > Whenever possible, I try to help others to learn
I’m the organizer of Vuejs // Berlin, a monthly meetup group around Vue and web technologies in general. I’m the organizer of Vuejs // Berlin, a monthly meetup group around Vue and web technologies in general.
@ -20,9 +20,9 @@ Many people want to learn and grow. Whenever I can I try to help those people by
# contact # contact
> You can contact me in many ways > You can find me all over the interwebs
<div class="contacts"> <div id="contact" class="contacts">
![Mail](/mail.svg) n@&lt;this domain&gt; ![Mail](/mail.svg) n@&lt;this domain&gt;

32
layouts/index.html
Unescape Escape View File

@ -47,15 +47,14 @@
art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability
and architecture. and architecture.
</p> </p>
<p>
Looking for expert advice and development services for a short-term project? I offer guidance on software
architecture decisions, coding solutions and performance optimizations tailored to your needs. Let's work
together to solve your challenges.
<a title="Contact me" href="#contact">Get in touch</a>!
</p>
<div id=menu> <div id=menu>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
</svg>
</a>
<a href="#content"> <a href="#content">
Learn more about me and my work, here Learn more about me and my work, here
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@ -65,11 +64,21 @@
d="m16 10-4 4-4-4" /> d="m16 10-4 4-4-4" />
</svg> </svg>
</a> </a>
<a href="https://koehr.ing" target="_blank">
Try the Interactive Homepage Experiment
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
</svg>
</a>
</div> </div>
</div> </div>
<div id=content> <div id=content>
@contents @contents
</div> </div>
<footer>
<a href="#intro">back to top</a>
</footer>
</main> </main>
<div id="spacer"></div> <div id="spacer"></div>
<header id="header"> <header id="header">
@ -98,6 +107,15 @@
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu">
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<script> <script>
const el = document.getElementById('header') const el = document.getElementById('header')

Write Preview
Loading…
Cancel
Save