* added new entry page

docs/about/index.md

@@ -0,0 +1,15 @@
+# Über mich
+
+Hey, willkommen auf meiner Seite! Schön, dass du hier bist. Lass mich dir ein bisschen über mich erzählen.
+
+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!

docs/assets/css/custom.css

@@ -0,0 +1,495 @@
+@font-face {
+    font-family: 'Satoshi';
+    src: url("/assets/brand/Satoshi-Variable.ttf") format("truetype");
+    font-display: swap;
+  }
+  
+  /* Define brand */
+  :root, [data-md-color-scheme="default"] {
+    --md-default-bg-color: rgb(250, 250, 250);
+    --md-primary-fg-color: rgb(255, 255, 255);
+    --md-primary-fg-color--light: #5FFFD7;
+    --md-primary-fg-color--dark:  #E549FF;
+    --md-primary-bg-color: rgba(0,0,0,.75);
+    --md-primary-bg-color--light: rgba(0,0,0,.54);
+    --md-accent-fg-color: #E549FF;
+    --pg-light-border: rgb(229, 231, 235);
+    --hb-hero-color: rgb(45, 45, 45);
+  }
+  :root, [data-md-color-scheme="slate"] {
+    --md-default-bg-color: rgb(26, 26, 27);
+    --md-primary-fg-color: rgb(15, 15, 15);
+    --md-primary-fg-color--light: #5FFFD7;
+    --md-primary-fg-color--dark:  #FCDB17;
+    --md-primary-bg-color: rgba(0,0,0,.75);
+    --md-primary-bg-color--light: rgba(0,0,0,.54);
+    --md-accent-fg-color: #FCDB17;
+    --pg-light-border: rgb(47, 47, 47);
+    --hb-hero-color: #5FFFD7;
+    /* --md-footer-bg-color--dark: var(--md-default-bg-color); */
+  }
+  
+  /* Better contrast link colors */
+  [data-md-color-scheme="default"] > * {
+    --md-typeset-a-color: #00B1BB;
+  }
+  [data-md-color-scheme="slate"] > * {
+    --md-typeset-a-color: #5FFFD7;
+  }
+  
+  /* Hide shadow under navigation */
+  .md-header[data-md-state="shadow"],
+  .md-header--shadow {
+    box-shadow: none;
+  }
+  
+  /* buttons */
+  .md-typeset .md-button {
+    color: var(--md-typeset-color);
+    background: none;
+    border: 1px solid var(--pg-light-border);
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
+  }
+  .md-typeset .md-button--primary {
+    color: var(--md-typeset-a-color);
+    background-color: var(--md-primary-fg-color);
+  }
+  
+  .md-typeset .grid.cards > :is(ul, ol) > li, .md-typeset .grid > .card { /* Firefox */
+    color: var(--md-typeset-color);
+    background: var(--md-primary-fg-color);
+    border: 1px solid var(--pg-light-border);
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
+    transition: none;
+  }
+  
+  .md-typeset .grid.cards>:-webkit-any(ul,ol)>li, .md-typeset .grid>.card { /* Webkit */
+    color: var(--md-typeset-color);
+    background: var(--md-primary-fg-color);
+    border: 1px solid var(--pg-light-border);
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
+    transition: none;
+  }
+  
+  .md-typeset .grid.cards > :is(ul, ol) > li:is(:focus-within, :hover), .md-typeset .grid > .card:is(:focus-within, :hover) { /* Firefox */
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
+    border-color: var(--md-accent-fg-color);
+  }
+  
+  .md-typeset .grid.cards>:-webkit-any(ul,ol)>li:-webkit-any(:focus-within,:hover) { /* Webkit */
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
+    border-color: var(--md-accent-fg-color);
+  }
+  
+  /* typewriter */
+  
+  #typewriter {
+    color: var(--md-accent-fg-color);
+  }
+  
+  /* header font */
+  
+  .md-header__topic:first-child {
+    font-family: 'Satoshi';
+    font-weight: 700;
+  }
+  
+  .md-typeset h1 {
+    font-family: 'Satoshi';
+    font-weight: 700;
+    color: var(--md-typeset-a-color);
+  }
+  
+  h2, h3 {
+    font-family: 'Satoshi';
+  }
+  
+  /* Correct page icon size */
+  .md-nav__link svg {
+    width: 22px;
+  }
+  
+  /* Un-sticky sidebar without JS */
+  .no-js .md-sidebar {
+    align-self: auto;
+  }
+  
+  /* Make header icons smaller */
+  .md-header__button.md-icon svg {
+    height: 1rem;
+    width: 1rem;
+  }
+  
+  /* override language selector */
+  .md-select button img.twemoji {
+    height: 1rem;
+    vertical-align: middle;
+  }
+  
+  .md-select__link img.twemoji {
+    height: 1rem;
+    vertical-align: text-bottom;
+    margin-right: 1%;
+  }
+  
+  /* Custom header + nav */
+  .md-header >*, .md-tabs {
+    background: none;   
+  }
+  
+  [data-md-color-scheme="slate"] .md-header >*, [data-md-color-scheme="slate"] .md-tabs {
+    color: #fff;
+  }
+  
+  .md-header__button {
+    color: var(--md-default-fg-color--light);
+  }
+  
+  .md-header, .md-tabs { /* firefox fallback */
+    background-color: rgba(255, 255, 255, .95);
+  }
+  
+  [data-md-color-scheme="slate"] .md-header, [data-md-color-scheme="slate"] .md-tabs { /* firefox fallback */
+    background-color: rgba(9, 9, 9, 0.95);
+  }
+  
+  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+    .md-header, .md-tabs {
+        background-color: rgba(255, 255, 255, .6);
+        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(12px);
+    }
+    [data-md-color-scheme="slate"] .md-header, [data-md-color-scheme="slate"] .md-tabs {
+        background-color: rgba(0, 0, 0, 0.5);
+        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(12px);
+    }
+  }
+  
+  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"] {
+    color: var(--md-typeset-a-color)
+  }
+  
+  header[class="md-header md-header--shadow"], nav[class="md-tabs"] {
+    border-bottom: 1px solid var(--pg-light-border);
+  }
+  
+  @media screen and (min-width: 60em) {
+    .md-search__overlay {
+        background-color: transparent;
+    }
+  
+    .md-search__form {
+        border: 1px solid var(--pg-light-border);
+        background-color: var(--md-primary-fg-color) !important;
+        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 1px 2px -1px;
+        border-radius: 6px;
+        height: 1.4rem;
+    }
+  
+    [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
+        border-radius: 6px 6px 0 0;
+    }
+  
+    [dir="ltr"] .md-search__output {
+        top: initial;
+        border-radius: 0 0 6px 6px;
+    }
+  
+    [data-md-toggle="search"]:checked ~ .md-header .md-search__output {
+        box-shadow: 0 0 .6rem rgba(0,0,0,.07);
+    }
+  
+    .md-search__input {
+        font-size: .6rem;
+    }
+  
+    .md-search__options {
+        top: .05rem;
+    }
+  
+    .md-search__icon, .md-search__input::placeholder {
+        color: var(--md-default-fg-color--light) !important;
+    }
+  
+    .md-search__icon svg {
+        width: .75rem;
+        height: .75rem;
+    }
+  }
+  
+  .md-tabs__link--active {
+      background:
+          radial-gradient(farthest-side, var(--md-typeset-a-color) 98%,transparent 100%) bottom right/2px 2px,
+          radial-gradient(farthest-side, var(--md-typeset-a-color) 98%,transparent 100%) bottom left /2px 2px,
+          linear-gradient(var(--md-typeset-a-color),var(--md-typeset-a-color)) bottom/calc(100% - 2px) 2px;
+      background-repeat:no-repeat;
+      background-origin: padding-box;
+      padding-bottom: 2px;
+  }
+  
+  .md-footer {
+    margin-top: 1rem;
+    border-top: 1px solid var(--pg-light-border);
+  }
+  
+  /* Wide card grids */
+  .md-typeset .grid.wide {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (max-width: 768px) {
+    .md-typeset .grid.wide {
+        grid-template-columns: repeat(1, 1fr);
+    }
+  }
+  
+  
+  /* Primary buttons */
+  .md-main .md-button--primary {
+    color: var(--md-primary-fg-color);
+    background-color: var(--hb-hero-color);
+    border-color: transparent;
+  }
+  
+  .md-typeset hr {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+  
+  
+  /* Testimonial cards */
+  .testimonial {
+    padding: 40px 20px;
+    border: 1px solid var(--pg-light-border);
+    border-radius: 6px;
+    background-color: var(--md-primary-fg-color);
+    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s; */
+  
+    .quote {
+      font-size: 0.9rem;
+      font-weight: 300;
+    }  
+  
+    .headshot {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 50%;
+      object-fit: cover; /* Ensures the image keeps its aspect ratio */
+    }
+  
+    .author {
+      font-weight: bold;
+      font-size: 1rem;
+    }
+  
+    .logo {
+      width: 7rem; /* You can adjust this based on the size you want */
+      object-fit: contain; /* Ensures the logo keeps its aspect ratio */
+      transition: opacity 0.3s;
+    }
+  
+    .logo:hover {
+      opacity: 0.8;
+    }
+  
+    .role {
+      font-size: 0.9rem;
+      color: var(--md-default-fg-color--light);
+      /* margin-top: 0.5rem; */
+    }
+  }
+  
+  /* Accent color */
+  .accent {
+    color: var(--md-typeset-a-color);
+  }
+  .accent a {
+    font-weight: 500;
+  }
+  
+  /* Centered item */
+  .centered {
+    display: block;
+    margin: 0 auto;
+    width: fit-content;
+  }
+  
+  /* Announcement Bar */
+  .md-banner {
+    background-color: var(--md-typeset-a-color);
+    color: var(--md-default-bg-color);
+    font-weight: 700;
+  }
+  
+  /* Logo Grids */
+  .flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+  .flex-item {
+    flex-basis: calc(50% - 10px);
+  }
+  .flex-item img {
+    padding: 3rem 1rem;
+  }
+  
+  /* Botcamp - 4 col grid */
+  
+  .botcamp > .flex-item {
+    flex-basis: calc(25% - 10px);  /* adjust this value for different screen sizes */
+    margin: 5px;
+  }
+  .botcamp > .flex-item img {
+    padding: 1rem 3rem;
+    width: 100%;
+    height: auto;
+  }
+  @media only screen and (min-width: 769px) {
+    .botcamp > .flex-item {
+      flex-basis: calc(25% - 10px);
+    }
+  }
+  @media (max-width: 768px) {
+    .flex-item {
+      flex-basis: calc(50% - 10px);
+    }
+    .botcamp > .flex-item img {
+      padding: 3rem 1rem;
+    }
+  }
+  
+  /* Home - 3 col grid */
+  
+  .home > .flex-item {
+    flex-basis: calc(33% - 10px);  /* adjust this value for different screen sizes */
+    margin: 5px;
+  }
+  .home > .flex-item img {
+    padding: 1rem 3rem;
+    width: 100%;
+    height: auto;
+  }
+  @media only screen and (min-width: 769px) {
+    .home > .flex-item {
+      flex-basis: calc(33% - 10px);
+    }
+  }
+  @media (max-width: 768px) {
+    .home > .flex-item {
+      flex-basis: calc(50% - 10px);
+    }
+    .home > .flex-item img {
+      padding: 3rem 1rem;
+    }
+  }
+  
+  
+  [data-md-color-scheme="default"] .dark-logo {
+    display: none;
+  }
+  
+  [data-md-color-scheme="slate"] .light-logo {
+    display: none;
+  }
+  
+  /* Two Thirds Grids */
+  .grid.two-thirds {
+    grid-template-columns: 2fr 1fr; /* Default to 2/3 and 1/3 width columns */
+  }
+  @media (max-width: 768px) {
+    .grid.two-thirds {
+      grid-template-columns: 1fr; /* All items will stack on top of each other */
+    }
+  }
+  
+  /* Highlights text to link color */
+  .text-highlight {
+    color: var(--md-typeset-a-color);
+  }
+  
+  /* Highlights 2nd card in a card grid to the hover state */
+  .highlight-second-card > ul > li:nth-child(2) {
+    border-color: var(--md-accent-fg-color) !important;
+  }
+  
+  /* Fix mobile search with blurred header 
+  Causes a delay when opening search, not optimal */
+  [data-md-scrolllock] .md-header,
+  [data-md-scrolllock] .md-tabs {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+  
+  /* Custom Metrics Display */
+  .md-typeset .custom-metric {
+    text-align: center !important;
+    padding: 2rem 0 !important;
+    margin: 1rem 0 !important;
+  }
+  
+  .md-typeset .custom-metric .metric-value {
+    font-size: 4rem !important;
+    font-weight: 700 !important;
+    color: var(--md-primary-fg-color--dark) !important;
+    line-height: 1.2 !important;
+    font-family: 'Satoshi', sans-serif !important;
+  }
+  
+  .md-typeset .custom-metric .metric-label {
+    font-size: 1rem !important;
+    color: var(--md-default-fg-color) !important;
+    margin-top: 0.5rem !important;
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .md-typeset .custom-metric .metric-value {
+      font-size: 3rem !important;
+    }
+    
+    .md-typeset .custom-metric .metric-label {
+      font-size: 0.9rem !important;
+    }
+  }
+  
+  
+  /* Exchange Grid */
+  .exchange-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 10px;
+    align-items: center;
+    justify-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  
+  .exchange-grid .flex-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .exchange-grid img {
+    max-width: 100%;
+    height: auto;
+    padding: 0rem 1rem;
+  }
+  
+  @media (max-width: 1200px) {
+    .exchange-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+  
+  @media (max-width: 600px) {
+    .exchange-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }

docs/assets/js/mathjax.js

@@ -0,0 +1,19 @@
+window.MathJax = {
+  tex: {
+    inlineMath: [["\\(", "\\)"]],
+    displayMath: [["\\[", "\\]"]],
+    processEscapes: true,
+    processEnvironments: true
+  },
+  options: {
+    ignoreHtmlClass: ".*|",
+    processHtmlClass: "arithmatex"
+  }
+};
+
+document$.subscribe(() => { 
+  MathJax.startup.output.clearCache()
+  MathJax.typesetClear()
+  MathJax.texReset()
+  MathJax.typesetPromise()
+})

docs/assets/js/typewriter.js

@@ -0,0 +1,14 @@
+document$.subscribe(() => {
+    const instance = new Typewriter('#typewriter', {
+        strings: [
+            'Systemadministrator', 
+            'Site Reliability Engineer',
+            'DevOps Engineer',
+            'IT Operations Engineer',
+            'Informationssicherheit',
+            'Datenschutz',
+        ],
+        autoStart: true,
+        loop: true,
+    });
+})

docs/index.md

@@ -1,9 +1,10 @@
 ---
 template: home.html
 title: Stephan Hadan
-social:
-  cards_layout_options:
-    title: Documentation that simply works
+pdf: false
+hide:
+  - toc
+  - navigation
+  - feedback
+  - title
 ---
-
-Welcome to Material for MkDocs.