diff --git a/docs/about/index.md b/docs/about/index.md new file mode 100644 index 0000000..29ba7bd --- /dev/null +++ b/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! \ No newline at end of file diff --git a/docs/assets/brand/Satoshi-Variable.ttf b/docs/assets/brand/Satoshi-Variable.ttf new file mode 100644 index 0000000..976e85c Binary files /dev/null and b/docs/assets/brand/Satoshi-Variable.ttf differ diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css new file mode 100644 index 0000000..bf30fc5 --- /dev/null +++ b/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); + } + } \ No newline at end of file diff --git a/docs/assets/js/mathjax.js b/docs/assets/js/mathjax.js new file mode 100644 index 0000000..0be88e0 --- /dev/null +++ b/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() +}) diff --git a/docs/javascripts/tablesort.js b/docs/assets/js/tablesort.js similarity index 100% rename from docs/javascripts/tablesort.js rename to docs/assets/js/tablesort.js diff --git a/docs/assets/js/typewriter.js b/docs/assets/js/typewriter.js new file mode 100644 index 0000000..bf0be40 --- /dev/null +++ b/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, + }); +}) \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index bbaa2cf..f27d958 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,15 +1,10 @@ -# Ein herzliches Willkommen! - -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! \ No newline at end of file +--- +template: home.html +title: Stephan Hadan +pdf: false +hide: + - toc + - navigation + - feedback + - title +--- diff --git a/mkdocs.yml b/mkdocs.yml index b403af2..2113bf9 100644 --- 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 - minutes – searchable, customizable, in 60+ languages, for all devices + 💻 OSS enthusiast | 🔧 Mac & beyond sysadmin | 🤖 AI practitioner | 🆔 Zero Trust advocate | 🚀 Open Source > proprietary | Always exploring tech’s edge! # Repository repo_url: https://github.com/stiebke/stiebke.github.io @@ -37,27 +36,21 @@ copyright: Copyright © 2024-2025 Stephan Hadan theme: name: material custom_dir: overrides - palette: - - media: "(prefers-color-scheme)" + palette: + # - media: "(prefers-color-scheme: dark)" + - scheme: slate + accent: amber toggle: - icon: material/link - name: Switch to light mode - - media: "(prefers-color-scheme: light)" - scheme: default - primary: indigo - accent: indigo + icon: material/brightness-2 + name: "Switch to light mode" + # - media: "(prefers-color-scheme: light)" + - scheme: default + accent: deep purple toggle: - icon: material/toggle-switch - name: Switch to dark mode - - media: "(prefers-color-scheme: dark)" - scheme: slate - primary: black - accent: indigo - toggle: - icon: material/toggle-switch-off - name: Switch to system preference + icon: material/brightness-5 + name: "Switch to dark mode" font: - text: Roboto + text: Noto Sans code: Roboto Mono logo: assets/logo.png favicon: images/favicon.png @@ -138,6 +131,10 @@ plugins: categories: - categories - tags + - social: + cards_layout_options: + background_color: "#151819" + color: "#5FFFD7" - macros # Additional configuration @@ -165,6 +162,9 @@ extra: link: https://stephan.hadan.de/feed_rss_created.xml name: Neueste Blogbeiträge +extra_css: + - assets/css/custom.css + # Extensions markdown_extensions: - abbr @@ -198,14 +198,16 @@ markdown_extensions: # Extra Javascript extra_javascript: - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js - - javascripts/tablesort.js + - assets/js/tablesort.js + - assets/js/mathjax.js + - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js + - assets/js/typewriter.js + - https://unpkg.com/typewriter-effect@latest/dist/core.js # Page tree nav: - - Home: - - Über mich: index.md - - Changelog: changelog.md - - Lizenz: license.md + - Home: index.md + - Über mich: about/index.md - Lebenslauf: cv/index.md - Projekte: projects/index.md - Tech Stack: techstack/index.md diff --git a/overrides/home.html b/overrides/home.html new file mode 100644 index 0000000..2562f02 --- /dev/null +++ b/overrides/home.html @@ -0,0 +1,102 @@ +{% extends "base.html" %} + +{% block tabs %} + {{ super() }} + + + + +
+
+
+
+

Stephan Hadan
Systemadministrator

+

{{ config.site_description }}

+ + Über mich + + + Lebenslauf + +
+
+
+
+{% endblock %} \ No newline at end of file diff --git a/overrides/main.html b/overrides/main.html.old similarity index 92% rename from overrides/main.html rename to overrides/main.html.old index 48a115f..88abfbc 100644 --- a/overrides/main.html +++ b/overrides/main.html.old @@ -1,6 +1,5 @@ {% extends "base.html" %} - -{% block announce %} +