* added new entry page

This commit is contained in:
Stephan Hadan 2024-12-27 17:54:58 +01:00
parent 6e5614763d
commit e500631b7f
13 changed files with 666 additions and 2373 deletions

View file

@ -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!

Binary file not shown.

495
docs/assets/css/custom.css Normal file
View file

@ -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);
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 193 KiB

19
docs/assets/js/mathjax.js Normal file
View file

@ -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()
})

View file

@ -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,
});
})

View file

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

View file

@ -37,26 +37,20 @@ theme:
name: material name: material
custom_dir: overrides custom_dir: overrides
palette: palette:
- media: "(prefers-color-scheme)" # - media: "(prefers-color-scheme: dark)"
- scheme: slate
accent: amber
toggle: toggle:
icon: material/link icon: material/brightness-2
name: Switch to light mode name: "Switch to light mode"
- media: "(prefers-color-scheme: light)" # - media: "(prefers-color-scheme: light)"
scheme: default - scheme: default
primary: indigo accent: deep purple
accent: indigo
toggle: toggle:
icon: material/toggle-switch icon: material/brightness-5
name: Switch to dark mode 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
font: font:
text: Roboto text: Noto Sans
code: Roboto Mono code: Roboto Mono
logo: assets/logo.png logo: assets/logo.png
favicon: images/favicon.png favicon: images/favicon.png
@ -137,6 +131,10 @@ plugins:
categories: categories:
- categories - categories
- tags - tags
- social:
cards_layout_options:
background_color: "#151819"
color: "#5FFFD7"
- macros - macros
# Additional configuration # Additional configuration
@ -164,6 +162,9 @@ extra:
link: https://stephan.hadan.de/feed_rss_created.xml link: https://stephan.hadan.de/feed_rss_created.xml
name: Neueste Blogbeiträge name: Neueste Blogbeiträge
extra_css:
- assets/css/custom.css
# Extensions # Extensions
markdown_extensions: markdown_extensions:
- abbr - abbr
@ -197,7 +198,11 @@ markdown_extensions:
# Extra Javascript # Extra Javascript
extra_javascript: extra_javascript:
- https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js - 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 # Page tree
nav: nav:

View file

@ -1,340 +1,102 @@
{% extends "overrides/main-styles.html" %} {% extends "base.html" %}
<!-- Render hero under tabs -->
{% block tabs %} {% block tabs %}
{{ super() }} {{ super() }}
<!-- Hero for landing page --> <!-- Additional styles for landing page -->
<style>
.mdx-container {
background: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='0 0 1123 258' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g transform='matrix(-1.01432,0,0,0.388868,1134.41,161.501)'><path d='M1124,2L1124,258L-1,258L-1,210C-1,210 15,215 54,215C170,215 251,123 379,123C500,123 493,169 633,169C773,169 847,2 1205,3L1124,2Z' style='fill:rgb(250, 250, 250);fill-rule:nonzero;'/></g></svg>")
no-repeat bottom,
linear-gradient(to bottom, rgb(255 255 255/.8), #00C2CE 99%, var(--md-default-bg-color) 99%);
background-size: contain;
padding-top: 1rem;
}
[data-md-color-scheme="slate"] .mdx-container {
background: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='0 0 1123 258' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g transform='matrix(-1.01432,0,0,0.388868,1134.41,161.501)'><path d='M1124,2L1124,258L-1,258L-1,210C-1,210 15,215 54,215C170,215 251,123 379,123C500,123 493,169 633,169C773,169 847,2 1205,3L1124,2Z' style='fill:rgb(26, 26, 27);fill-rule:nonzero;'/></g></svg>")
no-repeat bottom, rgba(9, 9, 9, 0.95);
background-size: contain;
}
<!--binbash leverage documetation--> .mdx-hero {
<section class="first-gradiant-body w-100"> color: var(--hb-hero-color);
<div class="md-grid conteiner-row pt-1 pt-lg-5 my-4"> margin: 0 0.8rem;
<div class="px-3 ctx-header-text conteiner"> }
<div class="conteiner-row"> .mdx-hero h1 {
<p class="h1 text-xs-center"> color: currentcolor;
binbash margin-bottom: 1rem;
<img src="assets/images/logos/leverage-title-logo.svg" class="mx-3 leverage-title-logo" height="22%"/> font-size: 2.6rem;
documentation }
</p> @media screen and (max-width: 29.9375em) {
</div> .mdx-hero h1 {
<img src="assets/images/logos/binbash-landing-header.svg" class="laverage-header-img d-lg-none d-xl-none mx-auto mb-5" /> font-size: 1.4rem;
<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 .mdx-hero__content {
type="button" padding-bottom: 6rem;
title="{{ page.next_page.title | e }}" }
onclick="location.href='./concepts/'" @media screen and (min-width: 60em) {
class="btn-dark btn-xl-large btn-lg-large mx-3 mt-3 my-md-5 my-lg-5 my-xl-5 box-shadow" .mdx-hero {
> align-items: stretch;
Get Started display: flex;
</button> }
<button .mdx-hero__content {
type="button" margin-top: 3.5rem;
title="{{ page.next_page.title | e }}" max-width: 38rem;
onclick="window.open('https://join.slack.com/t/binbashar/shared_invite/zt-fw1692b6-9k4ADsWJ47lKacszphXM1w', '_blank')" padding-bottom: 14vw;
class="btn-warning btn-xl-large btn-lg-large mx-3 mt-3 my-md-5 my-lg-5 my-xl-5 box-shadow" }
> .mdx-hero__image {
Join Us on Slack order: 1;
</button> transform: translateX(4rem);
</div> width: 38rem;
</div> }
<div class="ctx-header-img d-lg"> }
<img src="assets/images/logos/binbash-landing-header.svg" class="laverage-header-img mx-lg-5" /> @media screen and (min-width: 76.25em) {
</div> .mdx-hero__image {
</div> transform: translateX(8rem);
}
}
.mdx-hero .md-button {
color: var(--hb-hero-color);
border-color: var(--hb-hero-color);
}
[data-md-color-scheme="slate"] .mdx-hero .md-button--primary {
color: var(--md-primary-fg-color);
}
.mdx-hero .md-button--primary {
color: var(--md-primary-fg-color);
background-color: var(--hb-hero-color);
border-color: transparent;
margin-right: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
</section> .md-main .md-button--primary {
color: var(--md-primary-fg-color);
background-color: var(--hb-hero-color);
border-color: transparent;
}
<section class="second-gradiant-body w-100"> nav[class="md-tabs"] {
<!--We ship it. You own it--> border-bottom: none;
<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 "> </style>
<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"> <section class="mdx-container">
<ul class="ul-home mx-xs-auto mx-sm-auto mx-md-auto my-xs-5 my-sm-5 my-md-5"> <div class="md-grid md-typeset">
<li>- Own your AWS infrastructure</li> <div class="mdx-hero">
<li>- Implement, reuse and scale faster</li> <div class="mdx-hero__content">
<li>- Bootstrap your AWS Landing Zone</li> <h1>Stephan Hadan<div id="typewriter">Systemadministrator</div></h1>
<li>- Proven libraries and modules</li> <h3>{{ config.site_description }}</h3>
<li>- Modern Terraform, Ansible, Helm, K8s Stack</li> <a href="/about/" class="md-button md-button--primary">
<li>- Optimize your cloud costs by design</li> Über mich
<li>- Secure your cloud assets and production workloads</li> </a>
<li>- Achieve compliance in AWS</li> <a href="/cv/" class="md-button" target="_blank">
</ul> Lebenslauf
</div> </a>
<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>
</div> </div>
</div> </section>
<!--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 %} {% endblock %}

File diff suppressed because it is too large Load diff

View file

@ -1,55 +0,0 @@
{% extends "base.html" %}
<!-- Custom front matter -->
{% block extrahead %}
<!-- Determine title -->
{% set title = config.site_name %}
{% if page and page.title and not page.is_homepage %}
{% set title = config.site_name ~ " - " ~ page.title | striptags %}
{% endif %}
<!-- The image needs to have an absolute URL -->
{% set image = config.site_url ~ 'assets/images/illustrations/banner.png' %}
<!-- Open graph meta tags -->
<meta property="og:type" content="website" />
<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 %}

View file

@ -1,6 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
<!--{% block announce %}
{% block announce %}
Für Updates folge bitte <strong>@stiebke</strong> auf Für Updates folge bitte <strong>@stiebke</strong> auf
<a rel="me" href="https://freiburg.social/@squidfunk"> <a rel="me" href="https://freiburg.social/@squidfunk">
<span class="twemoji mastodon"> <span class="twemoji mastodon">
@ -15,4 +14,4 @@
</span> </span>
<strong>Bluesky</strong> <strong>Bluesky</strong>
</a> </a>
{% endblock %} {% endblock %}-->