index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="description" content="Pomagam osiągać lepsze efekty, wytwarzając oprogramowanie oraz dzieląc się wiedzą o tym, jak należy programować. Łączę inżynierskie spojrzenie z uśmiechem i dostrzeganiem pierwiastka ludzkiego w sofcie.">
    <meta name="author" content="mat3e">
    <meta charset="utf-8">

    <title>Mateusz Chrzonstowski - Software Engineer, IT Trainer, IT Showman</title>

    <link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free/css/fontawesome.min.css"></link>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet"></link>
    <link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free/css/brands.min.css"></link>

    <style>
        :root {
            --bg-transparency: .85;
        }

        body {
            margin: 0;
            font-family: 'Montserrat', sans-serif;
            overscroll-behavior-y: contain;
        }

        main {
            background-color: #000;
            height: 100vh;
            overflow: auto;
        }

        main::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background-image: url('img/bg.jpg');
            background-position: center;
            background-size: cover;
            width: 100%;
            height: 100%;
            opacity: 0.18;
            pointer-events: none;
        }

        #talks h2 {
            margin-bottom: 10px;
            margin-left: 24px;
            margin-right: 24px;
            padding-bottom: 10px;
            letter-spacing: 2px;
            border-bottom: 2px solid #000;
        }

        #talks ul li {
            margin-bottom: 10px;
        }

        /* technical */
        
        .full-link {
            display: inline-block;
            width: 100%;
        }

        .t-no-bullets {
            list-style-type: none;
        }

        .t-li-inline li {
            display: inline-block;
        }

        .t-li-centered li {
            margin-left: auto;
            margin-right: auto;
        }

        .t-no-padding {
            padding: 0;
        }

        .t-bg-fff {
            position: relative;
            background-color: #fff;
            z-index: 1;
            margin-left: 10px;
            margin-right: 10px;
        }

        .margin-bottom {
            margin-bottom: 100px !important;
        }

        .t-fs-11 {
            font-size: 1.1em;
        }

        .t-fb {
            /* font-weight: bold; */
        }

        .t-p-1 {
            padding: 1rem;
        }

        /* business */

        .big-txt {
            font-size: 1.4em;
            text-align: center;
            text-transform: uppercase;
            line-height: 1;
        }

        .buttons {
            padding-top: .2em;
            margin-bottom: 0;
        }

        .button {
            background-color: #fff;
            padding: .5em;
            max-width: 400px;
            margin-bottom: .25em;
            transform: scale(1);
            transition: transform 0.2s ease;
        }

        .button:hover {
            transform: scale(1.1);
            transition: transform 0.2s ease;
        }

        .content {
            overflow: auto;
            margin: 0 auto;
        }

        .links {
            font-size: 1.5em;
            width: 100%;
            margin-bottom: 20px;
        }

        .fab {
            margin-left: 10px;
            margin-right: 10px;
            color: #fff;
            font-size: 34px;
            transform: scale(1);
            transition: transform 0.2s ease;
        }

        .fab:hover {
            transform: scale(1.1);
            transition: transform 0.2s ease;
            color: #f2f2f2;
            transition: color 0.2s ease;
        }

        /* portrait */

        @media screen and (min-device-height: 30em) {
            .buttons {
                margin-top: 1em;
            }

            .links {
                position: absolute;
                bottom: .25em;
                right: .25em;
            }
        }

        @media screen and (min-device-height: 40em) {
            .buttons {
                margin-top: 0;
                padding-top: 3em;
            }
        }

        /* desktop */

        @media screen and (min-device-width: 100em) {

            /* technical */

            .t-coral-hover:hover {
                color: #0066ff;
            }

            /* business */

            .button:hover {
                cursor: pointer;
            }

            .content {
                max-width: 50rem;
            }
        }
    </style>
</head>

<body>
    <main>
        <ul class="t-no-bullets t-li-centered t-no-padding buttons">
            <li data-route="courses talks about" class="big-txt" style="margin-bottom: 20px;">
                <a href="#" style="text-decoration: none; border: solid 10px white; border-radius: 50%; background-color: white;">🔙</a>
            </li>
            <!-- <li class="green button t-coral-hover txt-white big-txt" data-route="courses">Kursy <img src="img/udemy.svg"
                    style="height: 1em; vertical-align: middle"></li> -->
            <!-- <li class="blue button t-coral-hover txt-white big-txt">Blog</li> -->
            <li class="button t-coral-hover txt-white big-txt" data-route="about">
                O mnie
            </li>
            <li class="button t-coral-hover txt-white big-txt" data-route="">
                <a href="https://github.com/mat3e/talks" class="full-link" style="text-decoration: none;">
                    Wystąpienia
                </a>
            </li>
            <!-- <li class="yellow button t-coral-hover txt-white big-txt" data-route="oss">Open Source</li> -->
            <!-- <li class="magenta button t-coral-hover txt-white big-txt" data-route="podcast">Podcast</li> -->
            <li class="button t-coral-hover txt-white big-txt" data-route="">
                <a href="https://full-stack.engineering/" class="full-link" style="text-decoration: none;">
                    Kursy online
                </a>
            </li>
            <li class="button t-coral-hover txt-white big-txt" data-route="">
                <a href="https://mat3e.github.io/trendy/" class="full-link" style="text-decoration: none;">
                    Mailing + PDF 🇵🇱
                </a>
            </li>
            <!-- <li class="button t-coral-hover txt-white big-txt" data-route="">
                <a href="https://mat3e.github.io/trends/" class="full-link" style="text-decoration: none;">
                    Mailing + PDF 🇺🇸
                </a>
            </li> -->
            <li data-route="courses" class="txt-white big-txt content">
                <m3-my-courses></m3-my-courses>
            </li>
            <li data-route="talks">
                <p class="t-p-1 t-fs-11 t-fb t-bg-fff" style="text-align: center">
                    Szukasz prelegenta? Skontaktuj się ze mną na
                    <a href="https://www.linkedin.com/in/mateusz-chrzonstowski" title="https://www.linkedin.com/in/mateusz-chrzonstowski"
                        alt="https://www.linkedin.com/in/mateusz-chrzonstowski" class="t-coral-hover" style="text-decoration: none">
                        <strong>LinkedIn</strong>
                    </a> i coś uradzimy :) Większość wymienionych tu prezentacji mogę powtórzyć praktycznie "od ręki".
                </p>
            </li>
            <li data-route="talks" class="content margin-bottom">
                <m3-my-talks></m3-my-talks>
            </li>
            <li data-route="about" class="content">
                <section class="t-bg-fff t-p-1 t-fb">
                    <p class="t-fs-11">
                        Pomagam osiągać lepsze efekty, wytwarzając oprogramowanie oraz dzieląc się wiedzą o
                        tym, jak należy programować. Łączę inżynierskie spojrzenie z uśmiechem i dostrzeganiem
                        pierwiastka ludzkiego w sofcie.
                    </p>
                    <p>
                        Początkowo nastawiony na front-end, później na JVM-a i integracje systemów, a&nbsp;ostatecznie
                        inżynier oprogramowania i programista full-stack. Od 2013 roku zarabiam na życie kodem. 
                        Dodatkowo, uczę tego innych, prowadząc szkolenia stacjonarne i produkując kursy na Udemy.
                    </p>
                    <p>
                        Występuję podczas meetupów, targów i konferencji.
                    </p>
                    <p>
                        Oprócz programowania i dzielenia się wiedzą, pasjonuję się jeszcze MMA, Dragon Ballem i
                        strategiami wielkich firm.
                    </p>
                </section>
            </li>
            <li class="txt-white big-txt">
                <ul class="t-no-bullets t-li-inline t-no-padding links">
                    <li>
                        <a href="https://www.linkedin.com/in/mateusz-chrzonstowski" title="https://www.linkedin.com/in/mateusz-chrzonstowski"
                            alt="https://www.linkedin.com/in/mateusz-chrzonstowski" class="txt-white t-coral-hover">
                            <i class="fab fa-linkedin"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com/_mat3e_" title="https://twitter.com/_mat3e_" alt="https://twitter.com/_mat3e_"
                            class="txt-white t-coral-hover">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://github.com/mat3e" title="https://github.com/mat3e" alt="https://github.com/mat3e"
                            class="txt-white t-coral-hover">
                            <i class="fab fa-github"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.npmjs.com/~mat3e" title="https://www.npmjs.com/~mat3e" 
                           alt="https://www.npmjs.com/~mat3e" class="txt-white t-coral-hover">
                            <i class="fab fa-npm"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://medium.com/@mat3e" title="https://medium.com/@mat3e" alt="https://medium.com/@mat3e"
                            class="txt-white t-coral-hover">
                            <i class="fab fa-medium"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.reddit.com/user/_mat3e_" title="https://www.reddit.com/user/_mat3e_" alt="https://www.reddit.com/user/_mat3e_"
                            class="txt-white t-coral-hover">
                            <i class="fab fa-reddit"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://stackoverflow.com/users/4774651/mat3e" title="https://stackoverflow.com/users/4774651/mat3e"
                            alt="https://stackoverflow.com/users/4774651/mat3e" class="txt-white t-coral-hover">
                            <i class="fab fa-stack-overflow"></i>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </main>
    <script>
        (function () {
            initRouting();
            document.querySelectorAll('.button')
                .forEach(b => {
                    b.addEventListener('click', () => {
                        changeRoute(b.dataset.route);
                    });
                });
            function initRouting() {
                changeRoute();
                window.addEventListener('hashchange', (e) => changeRoute());
            }
            function changeRoute(route = location.hash.substr(1)) {
                resetVisibility();
                location.hash = route;
                if (route) {
                    document.querySelectorAll('[data-route]')
                        .forEach(elem => {
                            elem.style.display = 'none';
                            if (elem.dataset.route.split(' ').includes(route)) {
                                elem.style.display = 'inherit';
                            }
                        });
                }
            }
            function resetVisibility() {
                document.querySelectorAll('.button[data-route]')
                    .forEach(elem => {
                        elem.style.display = 'inherit';
                    });
                document.querySelectorAll(':not(.button)[data-route]')
                    .forEach(elem => {
                        elem.style.display = 'none';
                    });
            }
            customElements.define('m3-youtube', class extends HTMLElement {
                constructor() {
                    super();
                    const videoId = this.getAttribute('video');
                    this.innerHTML = `
                    <iframe 
                        width="504" 
                        height="284" 
                        src="https://www.youtube.com/embed/${videoId}" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                    </iframe>
                `;
                }
            });
            customElements.define('m3-course', class extends HTMLElement {
                constructor() {
                    super();
                    const courseUrl = this.getAttribute('url');
                    const videoId = this.getAttribute('video');
                    const img = this.getAttribute('img');
                    const courseTitle = this.getAttribute('title');
                    const courseLang = this.getAttribute('lang');
                    const price = this.getAttribute('price');
                    this.innerHTML = `
                        <article style="text-align: center">
                            <h3 style="margin-top: .5em; margin-bottom: 0">
                                <a href="${courseUrl}" style="text-decoration: none" class="txt-white t-coral-hover">
                                    ${courseTitle}
                                </a>
                                ${courseLang}
                            </h3>
                            <a href="${courseUrl}" style="text-decoration: none; display: block; font-size: .75em" class="t-coral-hover">
                                [Kup teraz za ${price}]
                            </a>
                            ${videoId ? `<m3-youtube video="${videoId}"></m3-youtube>` : (img ? `<a href="${courseUrl}"><img src="${img}" alt="Course logo"></a>` : '')}
                        </article>
                    `;
                }
            });
            customElements.define('m3-my-courses', class extends HTMLElement {
                constructor() {
                    super();
                    // Udemy API?
                    this.innerHTML = `
                        <section class="t-bg-fff t-p-1">
                            <m3-course
                                title="Fajny JavaScript"
                                video="_2C_bJWStA4"
                                url="https://www.udemy.com/fajny-javascript/?couponCode=OPENALL"
                                lang="🇵🇱"
                                price="35 zł">
                            </m3-course>
                            <hr>
                            <m3-course
                                title="Java - ambitny start. Zbuduj aplikację!"
                                img="https://i.udemycdn.com/course/480x270/2258172_16f7.jpg"
                                url="https://www.udemy.com/java-ambitny-start/?couponCode=OPENALL"
                                lang="🇵🇱"
                                price="35 zł">
                            </m3-course>
                            <hr>
                            <m3-course
                                title="Front-end dla back-endowców"
                                img="https://i.udemycdn.com/course/480x270/2135176_d5b1.jpg"
                                url="https://www.udemy.com/fe4be-pl/?couponCode=OPENALL"
                                lang="🇵🇱"
                                price="35 zł">
                            </m3-course>
                            <hr>
                            <m3-course
                                title="Java - ambitious start. Create a real app!"
                                img="https://i.udemycdn.com/course/480x270/2265978_06dd.jpg"
                                url="https://www.udemy.com/java-ambitious-start/?couponCode=OPENALL"
                                lang="🇺🇸"
                                price="10 $">
                            </m3-course>
                            <hr>
                            <m3-course
                                title="Front-end for back-end developers"
                                img="https://i.udemycdn.com/course/480x270/2151724_eea9.jpg"
                                url="https://www.udemy.com/fe4be-en/?couponCode=OPENALL"
                                lang="🇺🇸"
                                price="10 $">
                            </m3-course>
                        </section>
                    `;
                }
            });
            customElements.define('m3-my-talks', class extends HTMLElement {
                constructor() {
                    super();
                    this.innerHTML = `
                        <section class="t-bg-fff t-p-1">
                            <mark-down id="talks"></mark-down>
                        </section>
                        <style>
                            mark-down h2:first-of-type {
                                margin-top: 0;
                            }
                            mark-down h2 {
                                margin-bottom: 0;
                            }
                            mark-down ul a {
                                text-decoration: none;
                                font-size: 1.5em;
                                vertical-align: middle;
                                line-height: 1;
                            }
                        </style>
                    `;
                    this.render();
                }

                async render() {
                    const resp = await fetch('https://raw.githubusercontent.com/mat3e/talks/master/README.md');
                    if (resp.ok) {
                        this.querySelector('#talks').innerHTML = await resp.text();
                    }
                }
            });
        })();
    </script>
    <script src="https://unpkg.com/markdown-element@2.0.2/dist/markdown-element.min.js"></script>
</body>

</html>