blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blog | Karl Alberto's Portfolio</title>
    <link rel="icon" type="image/png" href="assets/karlFavicon.png" />
    <!-- Using sha256, sha384 and sha512 SRI -->
    <link href="./blog-style.css" rel="stylesheet" integrity="sha256-e7gBVx5SpTK7R1xrLno9+jaVQitfIIuj101cUclTKL0= sha384-522AD59QH4tgB7jmzvB5SX4j9t2ZzCQayk4T4cgJDZH3Q05yNQUWvfAi7cEC0/P8 sha512-348KzDbGhAsPwdo/MDfKJSnOjc/8MZ/5sMP2txaVsPlhsoB2KuMLWosMLEdw8ykhkqBMFPfjDOeMF2LehJ85jQ==" crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <header>
        <img id="header-logo" type="image/png" src="assets/karlLogo.png" alt="Origami logo" height="50px" />
        <h1>Blog</h1>        
        <nav id="main-nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="work.html">Work</a></li>
                <li>Blog</li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>


    <section id="top">
        <div id="blog-intro">
            <h2>Welcome to my blog!</h2>            
            <p>
                Just a small space for my thoughts, insights and random ramblings! Thanks for taking the time to visit. I do hope there's something meaningful to be found in some of these musings. I like to encourage people to share their views, as there is always value to be had from different perspectives and experiences... so here's me, trying to take my own advice!
            </p>
        </div>
    </section>


    <section id="contents">
        <div>
            <ul>
                <li><strong>Jump to article:</strong></li>
                <li>09.06.2021 - <a href="#first">Why Cosplay Production is Like Writing CSS</a></li>
                <li>08.06.2021 - <a href="#second">Choosing the Best Mechanical Switches for Office Use</a></li>
                <li>03.06.2021 - <a href="#third">The Work/Life Balance Myth</a></li>
                <li>28.05.2021 - <a href="#fourth">Learning to Code with Kids</a></li>
                <li>24.05.2021 - <a href="#fifth">Finding the Perfect Coffee for Your Coding Moods</a></li>
            </ul>
        </div>

    </section>

    <section class="blog-post">
        <article id="first">
            <h3 class="post-title">Why Cosplay Production is Like Writing CSS</h3>
            <img class="post-img" src="assets/PorgVader.jpg" type="image/jpg" alt="Karl as a giant porg, with Darth Vader" />
            <p>
                <em>Sometimes, you really just need to keep playing around with concepts until something sticks (and doesn’t break too many other elements).</em> For some things, you just need good, old-fashioned gaffer tape and super glue; other times, you need to break out the contact cement and epoxy. Kind of like trying to use Flexbox vs CSS Grid! (I definitely stuck to using gaffer tape in here)
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            </p>

            <p class="post-date">
                09 June 2021
            </p>

            <p>
                <a href="#top" class="top-link">Back to top</a>
            </p>
        </article>

        <article id="second">
            <h3 class="post-title">Choosing the Best Mechanical Switches for Office Use</h3>
            <h5>(without making workmates want to strangle you)</h5>
            <img class="post-img" src="assets/keyboardSwitches.jpg" type="image/jpg" alt="A selection of mechanical keyboard switches" />
            <p>
                Honestly, just don’t use clicky switches.
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>
                Nunc accumsan scelerisque magna, at fermentum lectus scelerisque nec. Nulla fringilla elementum est ac mollis. Sed eu accumsan arcu. Sed at sodales nisi. Quisque justo quam, vehicula vulputate dolor ut, rhoncus accumsan nisl. Donec varius dui vitae libero pharetra pretium. Praesent venenatis feugiat justo non vestibulum. In hac habitasse platea dictumst.
            </p>

            <p class="post-date">
                08 June 2021
            </p>

            <p>
                <a href="#top" class="top-link">Back to top</a>
            </p>
        </article>

        <article id="third">
            <h3 class="post-title">The Work/Life Balance Myth</h3>
            <img class="post-img" src="assets/karlSEELE.jpg" type="image/jpg" alt="Karl channeling his inner Gendo Ikari" />
            <p>
                Probably one of the hardest things to find while you have young kids... but still doable!
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum risus id ante ultrices aliquet. Donec rhoncus nisl at fermentum eleifend. Mauris vitae pharetra est, sit amet euismod diam. Proin eu placerat ante, et condimentum libero. Morbi est lectus, auctor in lobortis ut, eleifend id sapien. Phasellus id justo mauris. Aenean sit amet tristique nibh. Nullam elementum nunc sit amet nulla condimentum feugiat. Mauris id convallis neque. In quis nisi malesuada, feugiat ante a, iaculis risus. Sed iaculis risus sed accumsan venenatis. Etiam turpis massa, blandit et odio ac, tincidunt scelerisque sapien. Nam placerat auctor nisi, sit amet pretium augue euismod in. Nam sollicitudin ante blandit, accumsan purus quis, hendrerit lacus. Cras iaculis ex augue, ac vehicula justo interdum id. Sed felis erat, commodo nec dui ut, iaculis consectetur sem.
            </p>
            
            <p>
                Vivamus vitae blandit mauris. Nam elementum rhoncus eros a fermentum. In hac habitasse platea dictumst. Donec ultrices arcu justo, eget porttitor tortor finibus laoreet. Nulla facilisi. Vivamus vel congue tellus. Vestibulum porttitor tincidunt feugiat. Sed vehicula, orci id malesuada laoreet, justo purus venenatis ante, quis gravida ex purus id enim. In justo nunc, sagittis non ultricies vitae, volutpat id libero. Sed eu hendrerit mi, eget mollis purus. Phasellus aliquam eleifend ornare. Integer quis sapien quis augue dictum dignissim.
            </p>

            <p class="post-date">
                03 June 2021
            </p>

            <p>
                <a href="#top" class="top-link">Back to top</a>
            </p>
        </article>

        <article id="fourth">
            <h3 class="post-title">Learning to Code with Kids</h3>
            <h5>They'll help you learn new things too!</h5>
            <img class="post-img" src="assets/liamMeme.jpg" type="image/jpg" alt="My son browsing quality dev memes" />
            <p>
                People say the best way to learn is to teach... or was it the other way around? Let's test that!
            </p>
                
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>
                Mauris iaculis, urna vel mattis tristique, orci arcu consectetur odio, eget bibendum libero dui quis sapien. Etiam egestas erat sapien, molestie interdum tortor mollis a. Integer porta metus sed nulla iaculis accumsan. Sed nec faucibus massa, ut ultrices odio. Nulla imperdiet luctus arcu a mattis. Vestibulum convallis risus ac porttitor tempus. Nullam non eleifend lectus. Maecenas elit sapien, pretium et ipsum vel, sollicitudin aliquam sapien. Aliquam pellentesque massa sit amet magna dictum euismod. Maecenas eget dui dignissim, bibendum ipsum ut, mattis neque. Sed vitae iaculis elit. Fusce laoreet non arcu fermentum bibendum.
            </p>

            <p class="post-date">
                28 May 2021
            </p>

            <p>
                <a href="#top" class="top-link">Back to top</a>
            </p>

        </article>

        <article id="fifth">
            <h3 class="post-title">Finding the Perfect Coffee for Your Coding Moods</h3>
            <img class="post-img" src="assets/afternoonTea.jpg" type="image/jpg" alt="Cappucino and banana bread" />
            <p>
                Early morning? Ease in with a Long Black. Afternoon pick me up? Double espresso. Late night and widing down? Even this coffee drinker will recommend tea, then sleep! And the taste of decaf just isn't worth the calories. Ever.
            </p>
                
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>
                Vestibulum eu justo est. Phasellus neque ligula, mollis vel efficitur eu, volutpat ut dolor. Praesent bibendum in tellus a scelerisque. Duis vel metus tempus dolor feugiat tincidunt. Pellentesque ornare turpis eget nunc vulputate ultrices. Praesent sollicitudin rhoncus risus ut cursus. Fusce vel ipsum quis metus hendrerit ultrices quis non sapien. Donec aliquam lorem at ante congue vestibulum vel a ante. Donec nec arcu placerat, auctor odio in, imperdiet nulla. Quisque egestas ante et porttitor luctus. Cras non facilisis arcu.
            </p>

            <p class="post-date">
                24 May 2021
            </p>

            <p>
                <a href="#top" class="top-link">Back to top</a>
            </p>
        </article>


    </section>

    <footer>
        <nav id="socials">
            <ul>
                <li><a href="https://www.linkedin.com/in/karl-francis-alberto" target="_blank">LinkedIn</a></li>
                <li><a href="https://twitter.com/Kei_Eff" target="_blank">Twitter</a></li>
                <li><a href="https://stackoverflow.com/users/15528466/kei" target="_blank">Stackoverflow</a></li>
                <li><a href="https://github.com/Kei-Eff" target="_blank">Github</a></li>
            </ul>
        </nav>

        <div>
            <span>Design by Karl Alberto | Copyright © 2021 | <a href="sitemap.xml">Sitemap</a></span>
        </div>

    </footer>

</body>

</html>