landing page redesign, newsletter CTA

klausbreyer · Apr 22, 2024 · 9e974b4 · 9e974b4
1 parent 16778cc
commit 9e974b4
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 121 deletions.
diff --git a/config.toml b/config.toml
@@ -21,7 +21,7 @@ defaultContentLanguage = 'en'
 
 [params]
  repo = "https://github.com/klausbreyer/v01.io/blob/main/content/"
- description = "I’m Klaus Breyer. With a lifetime in tech, a degree in Software Engineering, and a passion for innovation, I went from founding my first startup in 2010 to playing key roles as CTO/CTPO in many others."
+ description = "15 years of product and tech leadership, with a track record of building startups and a corporate business units. Insights and strategies shared from the frontline, always with the v01 mindset: start, iterate, fight bullshit."
  image = 'images/klaus-breyer.jpg'
 
 [privacy]
@@ -34,22 +34,22 @@ defaultContentLanguage = 'en'
 
 
 [[menu.header]]
- name = 'Present / Now'
+ name = 'Now'
  url = '/pages/now/'
  weight = 20
 
 [[menu.header]]
- name = 'Past / CV'
+ name = 'Past'
  url = '/pages/cv/'
  weight = 30
 
 [[menu.header]]
- name = 'Public Speaking'
+ name = 'Speaking'
  url = '/pages/appearances/'
  weight = 50
 
 [[menu.header]]
- name = 'My Bookshelf'
+ name = 'Bookshelf'
  url = '/categories/bookshelf/'
  weight = 66
 

diff --git a/content/_index.md b/content/_index.md
@@ -5,57 +5,31 @@ summary: I'm Klaus Breyer. With a lifetime in tech, a degree in Software Enginee
 image: /images/preview.png
 ---
 
-# Crafting Technological Futures
+# Start, Iterate, Fight Bullshit.
 
-{{< gallery "/images/klaus-breyer-b-full.jpg,/images/klaus-breyer-b-small.jpg|/images/klaus-breyer-a-full.jpg,/images/klaus-breyer-a-small.jpg" "[&&]:justify-start" >}}
+![That's me!](/images/klaus-breyer-a-landscape.jpg)
+I'm Klaus Breyer and I bring [15 years of product and tech leadership]({{< relref "/pages/cv" >}}), with a track record of building startups and a corporate business units. Currently transforming a corporate digital project into an empowered product team.
 
-I'm Klaus Breyer. With [a lifetime in tech]({{< relref "/pages/cv" >}}), a degree in Software Engineering, and a passion for innovation, I went from founding my first startup in 2010 to playing key roles as CTO/CTPO in many others.
+Focused on breaking down silos and building holistic, interdisciplinary, diverse teams. Passionate about the tooling, methods, and leadership of remote teams and committed to creating effective solutions that provide customer value and work for the business.
 
-As I bootstrap my next startup idea, I'm _available for consulting and interim leadership gigs_, leveraging my extensive experience.
+## Mailing List
 
-## Proven Impact and Expertise
+Subscribe to my newsletter for insights as they emerge — straight from the frontline and always with the v01 mindset: start, iterate, fight bullshit.
 
-I turn visionary business goals into concrete results, with focused expertise at the intersection of product and tech organization.
-It's not merely about coding; it's about crafting standout products that make a mark and drive business forward.
+{{< newsletter >}}
 
-1. Startup strategy & product-market fit – turning ideas into impactful ventures.
-1. Selling the tech vision – whether it's to investors or stakeholders.
-1. Prototyping & Crafting the first version of a product from scratch, if need be.
-1. Assembling and Nurturing a Killer Team – Remote or in Berlin, transitioning from chaotic ad-hoc development to structured product delivery cadence.
-1. Bringing product & engineering processes up to speed - fostering asynchronous collaboration.
+(After clicking subscribe your email address is submitted to MailChimp, the provider I use for my mailinglist. Your email address is never sold or shared).
 
-## Shape Up
+## Welcome Guide
 
-I'm all in on [Shape Up]({{< relref "/tags/shapeup/" >}}) - Agile's got a new face, and it's thrilling: Fixed time, variable scope. The only way to deliver quality - on time.
+If this is your first visit, here's a guide to what you'll find on this site:
 
-It is all about the people: Developers, designers, product managers – all on the same page, sculpting ideas into reality.
+- **[Now](/pages/now/)** - Discover what I am currently focusing on. This page is regularly updated.
 
-Want to spar about it? I offer free 1-hour sessions. Need a deep dive? I'm here for hands-on guidance.
+- **[Past](/pages/cv/)** - Take a look at my curriculum vitae and explore my past experiences and achievements.
 
-## Modern Web Stacks & Leadership
+- **[Speaking](/pages/appearances/)** - A summary of events where I have shared my insights and expertise.
 
-From startup monoliths to large microservice environments, I've led and launched.
+- **[Bookshelf](/categories/bookshelf/)** - My virtual bookshelf, where I share summaries and insights from the books I've read.
 
-But beyond the tech, I build infrastructures that empower.
-
-[Teams that innovate and Projects that matter]({{< relref "cv" >}}).
-
-## Writer & Speaker
-
-I've penned down my thoughts in [articles]({{< ref "/posts/">}}) and shared them out loud at [conferences]({{< relref "appearances">}}). Whether it's a page or a stage, I'm there.
-
-## My v0.1 Manifest
-
-> Good software is always used but never finished.
-
-That's it.
-
-## Connect with Me
-
-Tech, product, business – that's where I thrive.
-
-For me it is not about code, it's about weaving the tech fabric into the company's culture.
-
-For agencies, SME or fledgling startups.
-
-Interested? Drop me a line at [kb@v01.io](mailto:kb@v01.io)!
+- **[Blogposts](/posts/)** - Explore my blog posts categorized under Business, Code, Management, Meta, Open Source, and Product.
diff --git a/content/pages/appearances.md b/content/pages/appearances.md
@@ -1,6 +1,7 @@
 ---
-title: "Appearances"
+title: "Public Speaking"
 date: 2022-12-19
+lastmod:
 aliases:
  - "talks"
 ---

diff --git a/content/pages/cv.md b/content/pages/cv.md
@@ -1,7 +1,7 @@
 ---
 title: CV
 date: 2023-09-01
-lastmod: 2024-03-26
+lastmod: 2024-04-22
 ---
 
 {{< gallery "/images/klaus-breyer-b-full.jpg,/images/klaus-breyer-b-small.jpg|/images/klaus-breyer-a-full.jpg,/images/klaus-breyer-a-small.jpg" "[&&]:justify-start" >}}
@@ -19,22 +19,28 @@ It's not merely about coding; it's about crafting standout products that make a
 1. Assembling and Nurturing a Killer Team – Remote or in Berlin, transitioning from chaotic ad-hoc development to structured product delivery cadence.
 1. Bringing product & engineering processes up to speed - fostering asynchronous collaboration.
 
-From startup monoliths to large microservice environments, I've led and launched.
+Tech, product, business – that's where I thrive.
 
-But beyond the tech, I build infrastructures that empower.
+For me it is not about code, it's about weaving the tech fabric into the company's culture.
 
-Teams that innovate and Projects that matter.
+For agencies, SME or fledgling startups - Teams that innovate and Projects that matter.
 
-I've penned down my thoughts in [articles]({{< ref "/posts/">}}) and shared them out loud at [conferences]({{< relref "appearances">}}). Whether it's a page or a stage, I'm there.
+> Start, Iterate, Fight Bullshit.
 
-> Good software is always used but never finished.
+That is my Motto and I've penned down my thoughts in [articles]({{< ref "/posts/">}}) and shared them out loud at [conferences]({{< relref "appearances">}}). Whether it's a page or a stage, I'm there.
 
 That's all.
 
 ## Founding & Management Experience
 
 Throughout my career, I've led the development and launch of numerous cutting-edge projects in modern web stacks. I pride myself on my ability to balance technical excellence with a strategic vision, enabling my teams to focus on solving problems that truly matter and delivering value to users.
 
+### [edding AG](https://edding.com.com/)
+
+**Head of Product & Technology (2023-now)**
+
+My primary focus is steering the innovative **easycheck product**, a cutting-edge solution for digital driver's license control, towards greater heights by transforming it from a corporate project to an empowered product team.
+
 ### [Hydro Pocket](https://hydropocket.com/)
 
 **Tech Lead in Industrial IoT (2019–2023)**

diff --git a/content/pages/now.md b/content/pages/now.md
@@ -1,28 +1,20 @@
 ---
 title: Now
 date: 2023-01-03
-lastmod: 2024-01-03
+lastmod: 2024-04-22
 ---
 
 This page reflects my current focus and will be regularly updated to capture the evolving dynamics of my professional and entrepreneurial journey.
 
-## Head of Technology & Product at edding AG | Startup Bootstrapper | Podcast Interview
+## Head of Technology & Product at edding AG | Podcast Interview
 
-### Startup Venture: Dumplink
+### Consulting Endeavor: edding AG & easycheck
 
-Parallel to my role at edding, I'm passionately bootstrapping a new startup idea: the **Dumplink Project**. Dumplink is more than just a tool; it's a revolutionary approach to project management for teams enamored with the Shape Up methodology.
+Currently, I'm harnessing my expertise in technology and product management as the **Head of Technology & Product at edding AG**. My primary focus? Steering the innovative **easycheck product**, a cutting-edge solution for digital driver's license control, towards greater heights.
 
-[Explore Dumplink!](https://dump.link)
+[Learn more about easycheck!](https://easycheck-by-edding.com/)
 
-Dumplink specializes in translating high-level project visions into actionable tasks. Its core features - Dump, Cluster, Sequence, Arrange, and Risk Assessment - are meticulously designed to enhance workflow and strategic planning. It's a game-changer for teams seeking a more organized, efficient way to bring their ideas to fruition.
-
-### Consulting Endeavor: Edding AG & EasyCheck
-
-Currently, I'm harnessing my expertise in technology and product management as the **Head of Technology & Product at edding AG**. My primary focus? Steering the innovative **EasyCheck product**, a cutting-edge solution for digital driver's license control, towards greater heights.
-
-[Learn more about EasyCheck!](https://easycheck-by-edding.com/)
-
-EasyCheck by edding epitomizes the fusion of digitalization and automation, offering unparalleled ease and flexibility for businesses. It's transforming the way companies handle driver's license checks - making the process simpler, faster, and more secure.
+easycheck by edding epitomizes the fusion of digitalization and automation, offering unparalleled ease and flexibility for businesses. It's transforming the way companies handle driver's license checks - making the process simpler, faster, and more secure.
 
 ### Podcast: Building Tools for Shape Up – Klaus Breyer & Matt Lane
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -32,7 +32,7 @@
 
  {{ partial "header.html" . }}
  <main>
- <div class="container grid grid-cols-1 gap-4 px-4 pb-4 mx-auto print:p-0 lg:px-8 sm:grid-cols-4 print:grid-cols-1">
+ <div class="container grid max-w-screen-xl grid-cols-1 gap-8 px-4 pb-4 mx-auto print:p-0 lg:px-8 sm:grid-cols-4 print:grid-cols-1">
 
  <div class="border-t-2 sm:col-span-3 print:border-t-0 ">
  {{ partial "print_header.html" . }}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -20,7 +20,7 @@
 </div>
 {{ end }}
 
-<article class='{{.File.Dir }} {{.File.BaseFileName}} pt-10  print:my-0 {{partial "prose.html"}}'>
+<article class='{{.File.Dir }} {{.File.BaseFileName}} pt-10 print:my-0 {{partial "prose.html"}}'>
  <h1 class="my-4 text-4xl font-bold"> {{ .Title }}</h1>
  {{ .Content }}
 </article>
@@ -30,19 +30,24 @@ <h1 class="my-4 text-4xl font-bold"> {{ .Title }}</h1>
 </div>
 {{ end }}
 
-
-
 {{ with .Params.Pure}}
 {{ else }}
-<div class="grid grid-cols-1 gap-4 print:hidden">
- <aside class="mt-6 border-t-2">
- <h4 class="mb-2 text-xl">Meta</h4>
+<div class="print:hidden">
+ <aside class="mt-6 mb-20 border-t-2">
+ <h4 class="mb-2 text-xl">Article Meta</h4>
  <ul class="space-y-2 ">
  <li><span>Published On:</span>
  <time datetime='{{ .Date.Format "2006-01-02" }}'>
  {{ .Date.Format "2006-01-02" }}
  </time>
  </li>
+ {{ if ne .Date .Lastmod }}
+ <li><span>Last Modified:</span>
+ <time datetime='{{ .Lastmod.Format "2006-01-02" }}'>
+ {{ .Lastmod.Format "2006-01-02" }}
+ </time>
+ </li>
+ {{ end }}
  {{if .Params.Social }}
  <li><span>Want to leave a public comment?</span> <a href="{{.Params.Social}}" class="text-primary hover:underline" target="_blank">Join the discussion on LinkedIn.</a>
  </li>

diff --git a/layouts/index.html b/layouts/index.html
@@ -3,9 +3,8 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="container mx-auto">
+<main class="container mx-auto mb-20">
  <article class='{{ if .File }}{{.File.Dir }} {{.File.BaseFileName}} {{ end }} {{partial "prose.html"}} prose-h1:pt-10 '>
-
  {{.Content}}
  </article>
 </main>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,36 +1,34 @@
-<div class="container p-4 mx-auto lg:p-8 print:hidden">
- <div class="grid grid-cols-1 gap-4 mb-8 sm:grid-cols-2">
+<div class="container max-w-screen-xl p-4 mx-auto lg:p-8 print:hidden">
+ <div class="grid grid-cols-1 gap-8 mb-8 sm:grid-cols-2">
  <div class=" about">
- <h3 class="mb-2 text-xl ">About</h3>
- <p class="leading-7 ">{{.Site.Params.Description}}</p>
- <p class="leading-7">Reach me via: <a href="mailto:kb@v01.io?subject=v01.io" class="text-primary hover:underline">E-Mail</a> or follow me on
+ <h3 class="mb-2 text-xl font-bold ">About</h3>
+ <p class="mb-2 leading-6 ">15 years of product and tech leadership, with a track record of building startups and business units. Currently transforming a corporate digital project into an empowered product team.
+ </p>
+ <p class="mb-2 leading-6 ">Focused on breaking down silos and building holistic, interdisciplinary, diverse teams. Passionate about the tooling, methods, and leadership of remote teams and committed to creating effective solutions that provide customer value and work for the business.</p>
+
+ <p class="mb-2 leading-6">Reach me via: <a href="mailto:kb@v01.io?subject=v01.io" class="text-primary hover:underline">E-Mail</a> or follow me on
  <a href="https://www.linkedin.com/in/klaus-breyer/" class="text-primary hover:underline" target="_blank">LinkedIn</a> & <a href="https://twitter.com/klausbreyer" class="text-primary hover:underline" target="_blank">Twitter</a>.
  </p>
  </div>
  <div class="">
- <h3 class="mb-2 text-xl ">Mailing List</h3>
- <p class="mb-2 leading-7">If you want to be informed about something significant happening here, please subscribe to my Mailing List.</p>
+ <h3 class="mb-2 text-xl font-bold ">Mailing List</h3>
+ <p class="mb-2 leading-7">Subscribe to my newsletter for insights as they emerge — straight from the frontline and always with the v01 mindset: <span class="text-text bg-dark">start, iterate, fight bullshit</span>.</p>
 
- <div id="mc_embed_signup" class="mb-2">
- <form action="https://v01.us17.list-manage.com/subscribe/post?u=cfd815a1237e74355cd80711b&amp;id=6be736aa2f&amp;f_id=009b62e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
- <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required="">&nbsp;
- <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="px-4 py-2 font-bold text-white rounded cursor-pointer bg-primary button hover:opacity-90">
- </form>
- </div>
+ {{ partial "newsletter.html"}}
 
  <p class="text-xs">(After clicking subscribe your email address is submitted to MailChimp, the provider I use for my mailinglist. Your email address is never sold or shared).</p>
  </div>
  </div>
 
  <nav class="mb-8">
- <h3 class="mb-2 text-xl ">Categories</h3>
- <ul class="flex flex-wrap gap-x-5 justify-stretch">
+ <h3 class="mb-2 text-xl font-bold ">Categories</h3>
+ <ul class="flex flex-wrap gap-x-5 ">
 
  {{ $categories := .Site.Taxonomies.categories }}
  {{ range $categories }}
 
- <li class=" grow group hover:border-primary">
- <a href="{{ .Page.Permalink }}" class=" text-text group-hover:text-primary">
+ <li class="">
+ <a href="{{ .Page.Permalink }}" class=" text-text hover:text-primary">
  <span class="text-primary">&rsaquo;</span>
  Posts in {{ .Page.Title }} ({{ .Count }})
  </a>
@@ -41,9 +39,9 @@ <h3 class="mb-2 text-xl ">Categories</h3>
 </div>
 
 <div class="text-white copyright bg-footer print:hidden">
- <div class="container flex items-center justify-between p-4 mx-auto lg:p-8">
+ <div class="container flex items-center justify-between max-w-screen-xl p-4 mx-auto lg:p-8">
  <a class="p-1 border-t-2 hover:text-primary hover:border-primary" href="/">{{$.Site.Copyright }}</a>
- <span class="flex gap-4">
+ <span class="flex gap-8">
  <a href="{{ .Page.Permalink }}" class="p-1 border-t-2 hover:text-primary hover:border-primary" target="_blank">Permalink</a>
  <a href="{{ .Site.BaseURL }}posts/index.xml" class="p-1 border-t-2 hover:text-primary hover:border-primary" target="_blank">RSS Feed</a>
  <a href="https://www.iubenda.com/privacy-policy/96468474/full-legal" class="p-1 border-t-2 hover:text-primary hover:border-primary" target="_blank">Imprint</a>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 {{$section_heading := .Site.GetPage "section" .Section }}
 
-<header class="container grid grid-cols-1 gap-4 px-4 pt-2 mx-auto mb-4 print:hidden lg:px-8">
+<header class="container grid max-w-screen-xl grid-cols-1 gap-4 px-4 pt-2 mx-auto mb-4 print:hidden lg:px-8">
 
  <a lang="en" class="text-5xl italic font-bold uppercase sm:text-6xl hover:border-primary hover:text-primary author font-share-tech border-primary text-primary font-sharetech" href="/">
  Klaus

diff --git a/layouts/partials/newsletter.html b/layouts/partials/newsletter.html
@@ -1,25 +1,6 @@
-<div id="mc_embed_signup" style="border:1px dashed black; padding: 2em;">
- <div style="margin: auto; max-width: 680px;">
- <h3>Newsletter</h3>
- <form
- action="https://v01.us17.list-manage.com/subscribe/post?u=cfd815a1237e74355cd80711b&amp;id=6be736aa2f&amp;f_id=009b62e0f0"
- method="post" id="mc-embedded-subscribe-form"
- name="mc-embedded-subscribe-form" class="validate" target="_self"
- style="display: flex;flex-wrap: wrap;justify-content: space-between;">
-
- <input type="email" value="" name="EMAIL" class="required email"
- id="mce-EMAIL" required="" style="font-size: 1em;flex: 0.9;">
- <input type="submit" value="Subscribe" name="subscribe"
- id="mc-embedded-subscribe" class="button"
- style="font-weight: bold;font-size: 1em;">
-
- </form>
- <p> After clicking
- subscribe,
- your email address is
- submitted to MailChimp, the provider I use for my mailinglist.
- Your
- email address is never sold or shared.</p>
- <p></p>
- </div>
+<div id="mc_embed_signup" class="mb-2">
+ <form action="https://v01.us17.list-manage.com/subscribe/post?u=cfd815a1237e74355cd80711b&amp;id=6be736aa2f&amp;f_id=009b62e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
+ <input type="email" value="" name="EMAIL" class="rounded required email" id="mce-EMAIL" required="">&nbsp;
+ <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="px-4 py-2 font-bold text-white rounded cursor-pointer bg-primary button hover:opacity-90">
+ </form>
 </div>
diff --git a/layouts/partials/prose.html b/layouts/partials/prose.html
@@ -1,10 +1,11 @@
 {{/* https://tailwindcss.com/docs/typography-plugin */}}
+max-w-none
 prose prose-invert lg:prose-xl
 prose-headings:text-text print:prose-headings:text-bg prose-headings:font-sharetech prose-headings:font-bold prose-headings:mb-0 prose-headings:mt-8
 prose-h1:mt-0
 prose-h2:mt-10
 prose-em:not-italic prose-em:text-text prose-em:bg-dark prose-em:py-0.5 prose-em:px-1 print:prose-em:text-white
-prose-p:text-text prose-p:my-1.5 print:prose-p:text-bg
+prose-p:text-text prose-p:my-3 print:prose-p:text-bg
 prose-ol:my-1.5 prose-ol:text-text print:prose-ol:text-bg
 prose-ul:my-1.5 prose-ul:text-text print:prose-ul:text-bg
 prose-li:text-text print:prose-li:text-bg