add main menu

main
Norman Köhring 2 months ago
parent 934d47c2b5
commit f7b6eb1643

62
dist/extended.css vendored

@ -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;
}

42
dist/index.html vendored

@ -47,15 +47,14 @@
art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability
and architecture.
</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>
<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">
Learn more about me and my work, here
<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" />
</svg>
</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 id=content>
<h1>experience</h1>
<blockquote>
<p>My professional experience spans over thirteen years.</p>
<p>Thirteen years of professional experience in a couple of tweets</p>
</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>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>
<h1>coaching</h1>
<blockquote>
<p>Whenever possible, I try to help others to learn.</p>
<p>Whenever possible, I try to help others to learn</p>
</blockquote>
<p>Im 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>
<h1>contact</h1>
<blockquote>
<p>You can contact me in many ways</p>
<p>You can find me all over the interwebs</p>
</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="/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>
@ -98,6 +104,9 @@
<p><img src="/twitter.svg" alt="Twitter"> <a href="https://twitter.com/koehr_in/">koehr_in</a></p>
</div>
</div>
<footer>
<a href="#intro">back to top</a>
</footer>
</main>
<div id="spacer"></div>
<header id="header">
@ -126,6 +135,15 @@
</div>
Code Artist
</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>
<script>
const el = document.getElementById('header')
@ -144,4 +162,4 @@
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
</body>
</html>
</html>

@ -1,6 +1,6 @@
# 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.
@ -12,7 +12,7 @@ Please see my CV for a more detailed list.
# coaching
> Whenever possible, I try to help others to learn.
> Whenever possible, I try to help others to learn
Im 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
> 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;

@ -47,15 +47,14 @@
art. I love to craft pieces of art with code, that are beautiful and elegant in their simplicity, readability
and architecture.
</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>
<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">
Learn more about me and my work, here
<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" />
</svg>
</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 id=content>
@contents
</div>
<footer>
<a href="#intro">back to top</a>
</footer>
</main>
<div id="spacer"></div>
<header id="header">
@ -98,6 +107,15 @@
</div>
Code Artist
</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>
<script>
const el = document.getElementById('header')
@ -116,4 +134,4 @@
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
</body>
</html>
</html>

Loading…
Cancel
Save