add main menu
This commit is contained in:
Norman Köhring
parent
934d47c2b5
commit
f7b6eb1643
4 changed files with 122 additions and 24 deletions
62
dist/extended.css
vendored
Normal file
62
dist/extended.css
vendored
Normal 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;
|
||||
}
|
||||
42
dist/index.html
vendored
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>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>
|
||||
<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@<this domain></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>
|
||||
|
|
|
|||
8
index.md
8
index.md
|
|
@ -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
|
||||
|
||||
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
|
||||
|
||||
> You can contact me in many ways
|
||||
> You can find me all over the interwebs
|
||||
|
||||
<div class="contacts">
|
||||
<div id="contact" class="contacts">
|
||||
|
||||
 n@<this domain>
|
||||
|
||||
|
|
|
|||
|
|
@ -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…
Reference in a new issue