added new home layout

2024-12-27 13:15:58 +01:00 · 2024-12-27 13:15:58 +01:00 · 6e5614763d
commit 6e5614763d
parent 509f1a545d
8 changed files with 2381 additions and 33 deletions
--- a/docs/about/index.md
+++ b/docs/about/index.md
--- a/docs/assets/images/illustration.png
+++ b/docs/assets/images/illustration.png
--- a/docs/index.md
+++ b/docs/index.md
@ -1,15 +1,9 @@
-# Ein herzliches Willkommen!
+---
 template: home.html
 title: Stephan Hadan
 social:
  cards_layout_options:
    title: Documentation that simply works
 ---
-Hey, willkommen auf meiner Seite! Schön, dass du hier bist. Lass mich dir ein bisschen über mich erzählen.
+Welcome to Material for MkDocs.
 Mit über 25 Jahren Erfahrung als IT Operations Engineer kenne ich die Herausforderungen und Chancen in der IT-Welt genau. Als begeisterter Open-Source-Fan und Systemadministrator setze ich auf innovative Technologien, um Lösungen zu entwickeln, die effizient, sicher und nachhaltig sind.
 Einer meiner Schwerpunkte liegt auf **ISO 27001-Themen**, also allem, was mit Informationssicherheit zu tun hat. Ob es darum geht, Risiken zu bewerten, Sicherheitsrichtlinien zu erstellen oder ein ISMS aufzubauen – ich helfe dabei, Sicherheit auf das nächste Level zu bringen.
 Im Bereich **Endpoint Management** habe ich Erfahrung mit verschiedenen MDM-Lösungen wie MicroMDM, JamfNow! und Microsoft Intune. Damit sorge ich dafür, dass Geräte sicher und unkompliziert verwaltet werden können.
 Durch meine langjährige Arbeit als Entwickler eines ERP-Systems für die Schmuckbranche verstehe ich, worauf es in der Softwareentwicklung ankommt. Diese Perspektive hilft mir, eng mit Entwicklern zusammenzuarbeiten und **DevOps**-Prozesse zu optimieren.
 Als **System Reliability Engineer** ist es mein Ziel, Systeme so zu gestalten, dass sie stabil, skalierbar und automatisiert sind. Ich bin überzeugt, dass Open Source oft die bessere Wahl ist, und liebe es, neue Technologien auszuprobieren und kreative Lösungen zu finden.
 Ich freue mich darauf, gemeinsam an spannenden Projekten zu arbeiten und die IT-Welt ein Stück besser zu machen!
--- a/mkdocs.yml
+++ b/mkdocs.yml
@ -23,8 +23,7 @@ site_name: Stephan Hadan
 site_url: https://stephan.hadan.de/
 site_author: Stephan Hadan
 site_description: >-
-  Write your documentation in Markdown and create a professional static site in
+  💻 OSS enthusiast | 🔧 Mac & beyond sysadmin | 🤖 AI practitioner | 🆔 Zero Trust advocate | 🚀 Open Source > proprietary | Always exploring tech’s edge!
  minutes – searchable, customizable, in 60+ languages, for all devices
 # Repository
 repo_url: https://github.com/stiebke/stiebke.github.io
@ -202,10 +201,8 @@ extra_javascript:
 # Page tree
 nav:
-  - Home:
+  - Home: index.md
-    - Über mich: index.md
+  - Über mich: about/index.md
    - Changelog: changelog.md
    - Lizenz: license.md
  - Lebenslauf: cv/index.md
  - Projekte: projects/index.md
  - Tech Stack: techstack/index.md
--- a/overrides/home.html
+++ b/overrides/home.html
@ -0,0 +1,340 @@
 {% extends "overrides/main-styles.html" %}
 <!-- Render hero under tabs -->
 {% block tabs %}
 {{ super() }}
 <!-- Hero for landing page -->
 <!--binbash leverage documetation-->
 <section class="first-gradiant-body w-100">
  <div class="md-grid conteiner-row pt-1 pt-lg-5 my-4">
    <div class="px-3 ctx-header-text conteiner">
      <div class="conteiner-row">
        <p class="h1 text-xs-center">
          binbash
          <img src="assets/images/logos/leverage-title-logo.svg" class="mx-3 leverage-title-logo" height="22%"/>
          documentation
        </p>
      </div>
      <img src="assets/images/logos/binbash-landing-header.svg" class="laverage-header-img d-lg-none d-xl-none mx-auto mb-5" />
      <p class="h3 text-xs-center">The leading, easy to deploy, reusable and most automated solution for defining, provisioning and managing your secure and scalable multi-account AWS infrastructure environment.</p>
      <div class="conteiner-row conteiner-xs">
        <button
          type="button"
          title="{{ page.next_page.title | e }}"
          onclick="location.href='./concepts/'"
          class="btn-dark btn-xl-large btn-lg-large mx-3  mt-3 my-md-5 my-lg-5 my-xl-5 box-shadow"
        >
            Get Started
        </button>
        <button
          type="button"
          title="{{ page.next_page.title | e }}"
          onclick="window.open('https://join.slack.com/t/binbashar/shared_invite/zt-fw1692b6-9k4ADsWJ47lKacszphXM1w', '_blank')"
          class="btn-warning btn-xl-large btn-lg-large mx-3 mt-3 my-md-5 my-lg-5 my-xl-5 box-shadow"
        >
          Join Us on Slack
        </button>
      </div>
    </div>
    <div class="ctx-header-img d-lg">
      <img src="assets/images/logos/binbash-landing-header.svg" class="laverage-header-img mx-lg-5" />
    </div>
  </div>
 </section>
 <section class="second-gradiant-body w-100">
  <!--We ship it. You own it-->
  <div class="md-grid conteiner-row pt-4 my-4">
    <div class="card-white py-3 mx-xs-3 mx-sm-3 mx-4 mx-xl-0 ">
      <div class="conteiner-row">
        <div class="conteiner ctx-card-white-1 pt-4">
          <div class="d-sm text-align-center">
            <p class="display-3 Telegraf-UltraBold text-dark mx-auto mt-4">We ship it.</p>
            <p class="display-3 Telegraf-UltraBold text-pink mx-auto my-4">You own it.</p>
          </div>
          <div class="d-sm-none d-md-none d-lg-none d-xl-none text-align-center">
            <p class="display-4 Telegraf-UltraBold text-dark mx-auto mt-4">We ship it.</p>
            <p class="display-4 Telegraf-UltraBold text-pink mx-auto my-4">You own it.</p>
          </div>
          <div class="conteiner ctx-card-white-1 text-dark h3 d-lg-none d-xl-none my-xs-5 my-sm-5 my-md-5">
            <ul class="ul-home mx-xs-auto mx-sm-auto mx-md-auto my-xs-5 my-sm-5 my-md-5">
              <li>- Own your AWS infrastructure</li>
              <li>- Implement, reuse and scale faster</li>
              <li>- Bootstrap your AWS Landing Zone</li>
              <li>- Proven libraries and modules</li>
              <li>- Modern Terraform, Ansible, Helm, K8s Stack</li>
              <li>- Optimize your cloud costs by design</li>
              <li>- Secure your cloud assets and production workloads</li>
              <li>- Achieve compliance in AWS</li>
            </ul>
          </div>
          <button
            onclick="window.open('https://github.com/binbashar', '_blank')"
            title="{{ lang.t('source.link.title') }}"
            type="button"
            class="btn-white btn-xl-large btn-lg-large box-shadow mx-auto my-4"
          >
            Contribute on GitHub
          </button>
        </div>
        <div class="conteiner ctx-card-white-1 text-dark h3 d-lg">
          <ul>
            <li>- Own your AWS infrastructure</li>
            <li>- Implement, reuse and scale faster</li>
            <li>- Bootstrap your AWS Landing Zone</li>
            <li>- Proven libraries and modules</li>
            <li>- Modern Terraform, Ansible, Helm, K8s Stack</li>
            <li>- Optimize your cloud costs by design</li>
            <li>- Secure your cloud assets and production workloads</li>
            <li>- Achieve compliance in AWS</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--Whats is leverage-->
  <div class="conteiner-row-lg conteiner-row-xl conteiner py-5 my-5">
    <div class="conteiner" style="order:0; flex: 50%;">
      <div class="conteiner ctx-what-is mx-auto">
        <span class="display-3 text-dark Telegraf-UltraBold mt-4 text-align-center text-end-xl text-end-lg">What is Leverage?</span>
        <div class="conteiner text-dark h3 text-align-start text-end-xl text-end-lg my-xs-5 my-sm-5 my-md-5">
          <p class="my-3">
            <img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
            Our focus is on creating reusable, high quality AWS Cloud Infrastructure code, through our core components:
          </p>
          <p class="my-3 t-b">
            • Reference Architecture for AWS<br>
            • Infrastructure as Code (IaC) Library<br>
            • Leverage CLI<br>
          </p>
          <p class="my-3">
            <img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
            Because all the code and modules are already built, we can get your project up and running on AWS <span class="t-b">up to 10x faster</span>  than a consulting company.
          </p>
          <p class="my-3">
            <img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
            On top of code that is thoroughly documented, tested, and has been proven in production at dozens of other project deployments <span class="t-b">our Engineering Support Team.</span>
          </p>
          <button
            onclick="location.href='https://www.binbash.co/leverage'"
            title="{{ page.next_page.title | e }}"
            type="button"
            class="btn-dark btn-xl-large btn-lg-large my-4 box-shadow ml-auto mx-xs-auto mx-sm-auto mx-md-auto"
          >
            Product Features
          </button>
        </div>
      </div>
    </div>
    <div class="conteiner" style="order:1; flex: 50%; overflow:hidden;">
      <img src="assets/images/illustrations/mock-mac-book-16.png" class="laverage-mac-img my-xs-5 my-sm-5 my-md-5" />
    </div>
  </div>
 </section>
 <!--Why Leverage-->
 <section class="third-dark-body w-100">
  <div class="conteiner py-5 my-5">
    <img src="assets/images/illustrations/why-leverage.svg" class="why-laverage-img" />
    <img src="assets/images/illustrations/Ilustracion-Binbash.png" class="laverage-mac2-img" />
    <div class="conteiner-row">
      <div style="order:0; flex: 50%;">
        <div class="conteiner ctx-card-white-1 text-white h3 my-5 d-xl-none d-lg-none mx-auto w-70">
          <p class="my-3">
            <img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
            You will get your entire Cloud Native Application Infra in a few weeks.
          </p>
          <p class="my-3">
            <img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
            We've built every component based on the best recommended practices.
          </p>
          <p class="my-3">
            <img src="assets/images/icons/check-ok.svg" class="mx-2" width="20px" height="20px"/>
            Implement, reuse and scale your production workloads faster.
          </p>
        </div>
        <div class="conteiner ctx-card-white-1 text-white h3 my-5 mx-auto w-70">
          <btn
            onclick="window.open('https://www.binbash.co/competition','_blank')"
            title="{{ lang.t('source.link.title') }}"
            type="button"
            class="btn-rainbow btn-rainbow-custom btn-xl-large btn-lg-large mx-auto text-align-center cursor-pointer"
          >
            Leverage vs. Competition
          </btn>
        </div>
      </div>
      <div style="order:0; flex: 50%;" class="d-lg">
        <div class="card-rainbow second-gradiant-body px-5 py-5" style="order:1; flex: 100%;">
          <div class="conteiner ctx-card-white-1 text-dark h3">
            <p class="my-3">
              <img src="assets/images/icons/check-ok.svg" width="20px" height="20px"/>
              If you implement our <span class="t-b">Reference AWS Cloud Solutions Architecture</span> and the <span class="t-b">Infrastructure as Code (IaC) Library</span> via <span class="t-b">Leverage CLI</span>, you will get your entire Cloud Native Application Infra in a few weeks.
            </p>
            <p class="my-3">
              <img src="assets/images/icons/check-ok.svg" width="20px" height="20px"/>
              We've built every component based on the best-recommended practices, mainly following the <span class="t-b">AWS Well-Architected Framework</span>, granting you ownership to implement, reuse and scale your production workloads faster.
            </p>
            <p class="my-3">
              <img src="assets/images/icons/check-ok.svg" width="20px" height="20px"/>
              Leverage will solve your entire infrastructure and grant you complete control of the source code, and of course, you'll be able to run it without us.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
 </section>
 <!--Our tech stack-->
 <section class="four-gray-body w-100">
  <div class="md-grid conteiner pt-5  my-0 my-xl-4 my-lg-4">
    <p class="display-3 text-dark Telegraf-UltraBold mt-4 text-align-center text-start-xl text-start-lg">Our tech stack</p>
    <img src="assets/images/logos/stack-tecnology.svg" class="mx-auto my-5" width="80%"/>
    <div class="conteiner conteiner-row-lg conteiner-row-xl my-4">
      <div class="text-dark h3 mx-4 my-3 mx-lg-0 my-xl-0 mx-lg-0 my-xl-0" style="order:0; flex: 50%;">
        <p>Opinionated reference <span class="t-b">AWS solutions</span> composable architecture, based on the <span class="t-b">AWS Well-Architected Framework</span>. With over ten years of experience, Infra as code and best practices.</p>
      </div>
      <div class="text-dark h3 mx-4 my-3 mx-lg-0 my-xl-0 mx-lg-0 my-xl-0" style="order:0; flex: 50%;">
        <p>Leverage facilitates a collection of reusable, tested, production-ready E2E IaC solutions. They are leveraged by modules written in <span class="t-b">Terraform, Ansible, Dockerfiles, Helm Charts</span> and <span class="t-b">Python</span>.</p>
      </div>
    </div>
    <div class="conteiner conteiner-row-lg conteiner-row-xl my-4">
      <div class="text-dark h3 mx-4 my-3 mx-lg-0 my-xl-0 mx-lg-0 my-xl-0" style="order:0; flex: 50%;">
        <p>Automated deployment workflow via <span class="t-b">Leverage CLI.</span></p>
      </div>
      <div style="order:0; flex: 50%;">
        <button
          onclick="location.href='./concepts/our-tech-stack/'"
          title="{{ page.next_page.title | e }}"
          type="button"
          class="btn-dark btn-xl-large btn-lg-large my-4 box-shadow mx-auto"
        >
          Why our tech stack???
        </button>
      </div>
    </div>
    <!--    <img src="/assets/images/diagrams/AWS-ORGANIZATION.png" class="mx-auto mt-5 mb-3 d-sm" width="100%"/>-->
    <img src="assets/images/diagrams/ref-architecture-aws.png" class="mx-auto mt-5 mb-3 d-sm" width="100%"/>
    <img src="assets/images/diagrams/diagrama-organization-binbash.png" class="mx-auto mt-5 d-sm-none d-md-none d-lg-none d-xl-none" width="100%"/>
    <div class="conteiner-row my-0 my-xl-4 my-lg-4 stack-tenology-gradient">
      <img src="assets/images/logos/stack-tecnologico-2.svg" class="mx-auto py-3" width="60%"/>
    </div>
  </div>
 </section>
 <!--Footer-->
 <footer class="bg-dark w-100">
  <div class="md-grid conteiner-row-xl conteiner-row-lg conteiner pt-5 my-4">
    <div class="conteiner-row" style="flex:50%">
      <div class="text-white d-flex" style="flex: 40%;">
        <img src="assets/images/logos/logo-binbash.png" class="mx-auto" width="30%"/>
      </div>
      <div class="text-white h3" style="flex: 30%;">
        <div class="conteiner text-white h3">
          <ul>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/" target="_blank">Home</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/" target="_blank">Solutions</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/leverage" target="_blank">Leverage</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://medium.com/binbash-inc" target="_blank">Blog</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/contact" target="_blank">Contact</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="text-white h3" style="flex: 30%;">
        <div class="conteiner text-white h3">
          <ul>
            <li class="cursor-pointer item-text-footer">
              <a href="https://github.com/sponsors/binbashar" target="_blank">About Us</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/team" target="_blank">Team</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://github.com/binbashar" target="_blank">Resources</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/" target="_blank">Testimonials</a>
            </li>
            <li class="cursor-pointer item-text-footer">
              <a href="https://www.binbash.co/pricing" target="_blank">Pricing</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="conteiner-row mt-5 my-xl-0 mX-lg-0" style="flex:50%">
      <div class="text-white text-end h3" style="flex: 15%;">
          <span>Follow us on: </span>
      </div>
      <div class="text-white h3" style="flex: 55%;">
        <a href="https://join.slack.com/t/binbashar/shared_invite/zt-fw1692b6-9k4ADsWJ47lKacszphXM1w" target="_blank">
          <img
            src="assets/images/logos/socialmedia/slack.svg"
            title="Slack"
            class="mx-3 cursor-pointer item-social-media"
            width="9%"
          />
        </a>
        <a href="https://www.linkedin.com/company/binbash" target="_blank">
          <img
            src="assets/images/logos/socialmedia/linkedIn.svg"
            title="linkedIn"
            class="mr-3 cursor-pointer item-social-media"
            width="9%"
          />
        </a>
        <a href="https://github.com/binbashar" target="_blank">
          <img
            src="assets/images/logos/socialmedia/github.svg"
            title="Github"
            class="mr-3 cursor-pointer item-social-media"
            width="9%"
          />
        </a>
        <a href="https://twitter.com/binbash_devops" target="_blank">
          <img
            src="assets/images/logos/socialmedia/twitter.svg"
            title="Twitter"
            class="mr-3 cursor-pointer item-social-media"
            width="9%"
          />
        </a>
        <a href="https://www.instagram.com/binbash_devops/"  target="_blank">
          <img
            src="assets/images/logos/socialmedia/instagram.svg"
            title="Instagram"
            class="mr-3 cursor-pointer item-social-media"
            width="9%"
          />
        </a>
        <a href="https://medium.com/binbash-inc" target="_blank">
          <img
            src="assets/images/logos/socialmedia/medium.svg"
            title="Medium"
            class="mr-3 cursor-pointer item-social-media"
            width="9%"
          />
        </a>
      </div>
    </div>
  </div>
 </footer>
 {% endblock %}
--- a/overrides/main-styles.html
+++ b/overrides/main-styles.html
--- a/overrides/main.html
+++ b/overrides/main.html
@ -1,18 +1,55 @@
 {% extends "base.html" %}
-{% block announce %}
+<!-- Custom front matter -->
-  Für Updates folge bitte <strong>@stiebke</strong> auf
+{% block extrahead %}
-  <a rel="me" href="https://freiburg.social/@squidfunk">
+
-    <span class="twemoji mastodon">
+  <!-- Determine title -->
-      {% include ".icons/fontawesome/brands/mastodon.svg" %}
+  {% set title = config.site_name %}
-    </span>
+  {% if page and page.title and not page.is_homepage %}
-    <strong>freiburg.social</strong>
+    {% set title = config.site_name ~ " - " ~ page.title | striptags %}
-  </a>
+  {% endif %}
-  und <strong>stiebke.bsky.social</strong> auf
+
-  <a href="https://bsky.app/profile/stiebke.bsky.social">
+  <!-- The image needs to have an absolute URL -->
-    <span class="twemoji bluesky">
+  {% set image = config.site_url ~ 'assets/images/illustrations/banner.png' %}
-      {% include ".icons/fontawesome/brands/bluesky.svg" %}
+
-    </span>
+  <!-- Open graph meta tags -->
-    <strong>Bluesky</strong>
+  <meta property="og:type" content="website" />
-  </a>
+  <meta property="og:title" content="{{ title }}" />
  <meta property="og:description" content="{{ config.site_description }}" />
  <meta property="og:url" content="{{ page.canonical_url }}" />
  <meta property="og:image" content="{{ image }}" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1080" />
  <meta property="og:image:height" content="568" />
  <!-- google-site-verification meta-tag -->
  <meta name="google-site-verification" content="-Rj8YMCn9uu5IwOFdC-WfAzXp4ZOMJtYKxU40ZgcJIU" />
 <!-- Extra stylesheets -->
 <!--  <link
    rel="stylesheet"
    href="{{ 'assets/stylesheets/overrides.css' | url }}"
  />-->
 {% endblock %}
 <!-- Announcement bar -->
 {% block announce %}
  <!-- Extra stylesing -->
  <style>
      .md-announce a,
      .md-announce a:focus,
      .md-announce a:hover{color:currentColor}.md-announce
      strong{white-space:nowrap}.md-announce
  </style>
 <a href="https://www.linkedin.com/company/binbash">
  <p style="color: #D5EE1C">For updates follow <strong style="color: #D5EE1C">@binbash</strong> on
    <span class="twemoji linkedin" style="color: #0e76a8">
      {% include ".icons/fontawesome/brands/linkedin-in.svg" %}
    </span>
    <strong style="color: white">LinkedIn</strong>
  </p>
 </a>
 {% endblock %}
--- a/overrides/main.html.bak
+++ b/overrides/main.html.bak
@ -0,0 +1,18 @@
 {% extends "base.html" %}
 {% block announce %}
  Für Updates folge bitte <strong>@stiebke</strong> auf
  <a rel="me" href="https://freiburg.social/@squidfunk">
    <span class="twemoji mastodon">
      {% include ".icons/fontawesome/brands/mastodon.svg" %}
    </span>
    <strong>freiburg.social</strong>
  </a>
  und <strong>stiebke.bsky.social</strong> auf
  <a href="https://bsky.app/profile/stiebke.bsky.social">
    <span class="twemoji bluesky">
      {% include ".icons/fontawesome/brands/bluesky.svg" %}
    </span>
    <strong>Bluesky</strong>
  </a>
 {% endblock %}