chore: add website

README.md

@@ -1,2 +1,3 @@
-# Überschrift
-## Test
+# klitsche.de / website
+
+https://klitsche.de

css/index.css

@@ -0,0 +1,232 @@
+/* Fira Sans License: https://github.com/mozilla/Fira/blob/master/LICENSE */
+/* latin-ext */
+@font-face {
+    font-family: 'Fira Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(./va9B4kDNxMZdWfMOD5VnPKreSBf6Xl7Gl3LX.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Fira Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(./va9B4kDNxMZdWfMOD5VnPKreRhf6Xl7Glw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Fira Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(./va9B4kDNxMZdWfMOD5VnLK3eSBf6Xl7Gl3LX.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Fira Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(./va9B4kDNxMZdWfMOD5VnLK3eRhf6Xl7Glw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+body {
+    font-family: "Fira Sans", "ff-enzo-web", Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    color: #777777;
+    font-size: 18px;
+    margin: 40px;
+    background-image: url('../images/kosmos-computerpraxis.jpg');
+    background-position: right top;
+    background-repeat: no-repeat;
+}
+
+a {
+    text-decoration: none;
+    color: #777777;
+}
+
+a:hover {
+    text-decoration: underline;
+    color: #FF3E35;
+}
+
+header, footer {
+    margin-top: 40px;
+    text-shadow: white 0 0 2px;
+}
+
+main {
+    max-width: 480px;
+    margin-bottom: 80px;
+}
+
+h1 {
+    font-weight: 700;
+    font-style: normal;
+    color: #FF3E35;
+    font-size: 52px;
+    letter-spacing: -1px;
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+h1 span {
+    font-weight: 300;
+    font-style: normal;
+    color: #777777;
+    letter-spacing: -2px;
+}
+
+main ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+main ul li {
+    display: inline;
+    border-radius: 5px;
+    background-color: #9B9B9B;
+    border: 1px solid #9B9B9B;
+    color: #ffffff;
+    padding: 6px 8px;
+    line-height: 40px;
+    margin-right: 3px;
+    white-space: nowrap;
+}
+
+main ul li:hover {
+    cursor: pointer;
+    color: #FF3E35;
+    border: 1px dotted #FF3E35;
+    background-color: #ffffff;
+}
+
+address {
+    font-style: normal;
+}
+
+p a {
+    margin-right: 23px;
+    opacity: 0.5;
+}
+
+p a:hover {
+    opacity: 1;
+}
+
+a[href*=xing] {
+    background-image: url('../images/xing.svg');
+    background-size: auto 36px;
+    background-repeat: no-repeat;
+    width: 31px;
+    height: 36px;
+    display: inline-block;
+}
+
+a[href*=linkedin] {
+    background-image: url('../images/linkedin.svg');
+    background-size: auto 36px;
+    background-repeat: no-repeat;
+    width: 36px;
+    height: 36px;
+    display: inline-block;
+}
+
+a[href*=github] {
+    background-image: url('../images/github.svg');
+    background-size: auto 36px;
+    background-repeat: no-repeat;
+    width: 38px;
+    height: 36px;
+    display: inline-block;
+}
+
+a[href*=bitbucket] {
+    background-image: url('../images/bitbucket.svg');
+    background-size: auto 36px;
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 36px;
+    display: inline-block;
+}
+
+a[href*=dev] {
+    background-image: url('../images/devto.svg');
+    background-size: auto 36px;
+    background-repeat: no-repeat;
+    width: 39px;
+    height: 36px;
+    display: inline-block;
+}
+
+@media (max-width: 480px) {
+    body {
+        background: none;
+        margin: 10px;
+    }
+
+    header {
+        margin-top: 0;
+    }
+
+    header span:first-child {
+        display: inline;
+    }
+
+    header span {
+        display: block;
+    }
+}
+
+@media (min-width: 482px) and (max-width: 767px) {
+    body {
+        background-size: 60%;
+    }
+
+    main {
+        max-width: 320px;
+    }
+
+    header {
+        width: 50%;
+    }
+
+    header span {
+        display: block;
+    }
+
+    header span:first-child {
+        display: inline;
+    }
+}
+
+@media (min-width: 768px) {
+    body {
+        background-size: 50%;
+    }
+
+    header {
+        width: 50%;
+    }
+}
+
+@media (min-width: 992px) {
+    body {
+        background-size: 50%;
+    }
+}
+
+@media (min-width: 1200px) {
+    body {
+        background-size: 50%;
+    }
+}

index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>klitsche.de / web-software-development</title>
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="klitsche.de / web-software-development">
+    <meta property="og:description" content="Konzeption und Implementierung webbasierter Software">
+    <meta property="og:image" content="https://klitsche.de/images/og.png">
+    <meta property="og:image:secure_url" content="https://klitsche.de/images/og.png">
+    <link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="images/touch-icon-ipad.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="images/touch-icon-iphone-retina.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="images/touch-icon-ipad-retina.png">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+</head>
+<body>
+<header><h1>klitsche.de<span class="slash">/</span><span>web-software-</span><span>development</span></h1></header>
+<main>
+    <ul>
+        <li>PHP8</li>
+        <li>Typescript</li>
+        <li>Roadrunner</li>
+        <li>MySQL</li>
+        <li>mongoDB</li>
+        <li>Yii2 PHP Framework</li>
+        <li>TYPO3</li>
+        <li>WordPress</li>
+        <li>SilverStripe</li>
+        <li>Stencil.js</li>
+        <li>styled components</li>
+        <li>react</li>
+        <li>Vue.js</li>
+        <li>Google APIs</li>
+        <li>Amazon Web Services</li>
+        <li>docker</li>
+        <li>kubernetes</li>
+        <li>Kafka</li>
+        <li>PhpStorm</li>
+        <li>Performance benchmarking</li>
+        <li>Continuous Delivery</li>
+        <li>DDD</li>
+        <li>Event Storming</li>
+        <li>Splitting the monolith</li>
+        <li>15 factor app</li>
+        <li>Enterprise Software Architecture</li>
+    </ul>
+</main>
+<footer>
+    <address itemscope itemtype="http://schema.org/LocalBusiness">
+        <strong itemprop="name">klitsche.de</strong><br>
+        <span itemprop="alternateName">Dirk Adler</span><br>
+
+        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
+            <span itemprop="streetAddress">Eschengraben 18</span><br>
+            <span itemprop="postalCode">13189</span> <span itemprop="addressLocality">Berlin</span><br><br>
+        </div>
+
+        Umsatzsteuer ID DE199453261<br><br>
+
+        t <a href="tel:+493055578166"><span itemprop="telephone">+493055578166</span></a><br>
+        e <a href="mailto:[email protected]"><span itemprop="email">[email protected]</span></a>
+    </address>
+
+    <p>
+        <a href="https://www.xing.com/profile/DirkAlban_Adler"></a>
+        <a href="https://de.linkedin.com/in/dirk-adler-3b484091"></a>
+        <a href="https://github.com/klitsche"></a>
+        <a href="https://bitbucket.org/klitsche"></a>
+        <a href="https://dev.to/dirx"></a>
+    </p>
+</footer>
+</body>
+</html>