<!--
──────────────────────────────────
────────────██████████────────────
────────███████████████████───────
──────███████████████████████─────
────██████████████████████████────
───█████████████▀──────────▀███───
──█████████████──────────────███──
─████████████────────────────████─
─██████████───────────────────███─
██████████▀───────────────────████
████████▀─────────────────────████
██████▀────────────────────────███
█████──▄▀▀▀▀▀▀▀▄────▄▀▀▀▀▀▀▀▄──███
█████────▄▄▄▄▄────────▄▄▄▄▄────███
█████──▄▀───▄██▄────▄▀───▄██▄──███ I see you enjoy looking at the source.
█████──▀▄───▀▀█▀────▀▄───▀▀█▀──███ I too, look at the source sometimes.
█▀──█────▀▀▀▀▀────────▀▀▀▀▀────███
█───█──────────────────────────█─█
█────────────────────▄───────────█
█───────────▄▀────────▀▄─────────█
▀█─▄█───────▀▄─▀██──██───────────█
─▀██────────────────────────────██
──██────▄▀▀──────█─█──────▀▀▄──██─
───█──────█▀▄────▀─▀────▄▀█────█──
───█──────▀──▀▀▄▄▄▄▄▄▄▀▀──▀────█──
───▀█─────────────────────────█▀──
────▀█───────────────────────█▀───
─────▀█─────────────────────█▀────
──────▀█───────────────────█▀─────
───────▀█─────────────────█▀──────
────────▀█───▄───────▄───█▀───────
─────────▀█▄──▀▄▄▄▄▄▀──▄█▀────────
───────────▀▀█▄▄▄▄▄▄▄█▀▀──────────
────────────────███───────────────
──────────────███████─────────────
─────────────██─███─██────────────
────────────██──███──██───────────
───────────██───███───██──────────
──────────██────███────██─────────
-->


<!doctype html>
<html lang="en">
 <head>
    <title> ( ͡° ͜ʖ ͡°) </title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="Description" content="Come see what I'm up to!">
    <meta property="og:title" content="Home of Félix Paradis" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://v1.felixparadis.com" />
    <meta property="og:image" content="https://v2.felixparadis.com/assets/portrait.png" />
    <meta name="author" content="Félix Paradis">

    <style>
        @keyframes crazyBG {
            0%   {background-color: #F00;}
            33.3%  {background-color: #0F0;}
            66.6%  {background-color: #00F;}
            100%  {background-color: #F00;}
        }
        
        @keyframes fall {
            0%   {top: -10vh;}
            90%   {top: 110vh;}
            91%   {opacity:1;}
            92%   {top: 110vh;}
            93%   {opacity:0;}
            100%   {top: -10vh;
                opacity:0;}
        }
        
        @keyframes rotate {
            0%   {transform: rotate(0deg);}
            100%   {transform: rotate(360deg);}
        }

        @keyframes zoomies {
            0%   {font-size: 1em;}
            50%   {font-size: 4em;}
            100%   {font-size: 1em;}
        }

        .joy {
            animation: fall 5s infinite linear,
                        rotate 4s infinite linear;
            position:absolute;
            font-size: 3em;
        }

        .wow {
            color: #FFF;
            animation: zoomies 3s infinite;
        }

        li {
            margin: 0.25em 0;
            padding: 0.25em;        
        }
      </style>
 </head>

 <body>

    <h1><span lang="fr">Bonjour!</span> Hi!</h1>
     
    <hr/>
          
    <h2> I am a great full stack web developer with a slight focus on the back-end. </h2>
		 
    <p>
        I heard about CSS once. Maybe I'll try it someday.
    </p>
    <p>
        While you wait for me to do something interesting here, you can find me online at various places:
    </p>

    <ul>
        <li>
            <a href="https://medium.com/@FelDev">Medium</a>
        </li>
        <li>
            <a href="https://www.linkedin.com/in/felix-paradis/">LinkedIn</a>
        </li>
        <li>
            <a href="https://github.com/FelDev">GitHub</a>
        </li>
        <li>
            <a href="https://codepen.io/FelDev/">Code Pen</a>
        </li>
        <li>
            <a href="https://stackoverflow.com/users/5941620/feldev?tab=profile">Stack Overflow</a>
        </li>
        <li>
            <a href="#" onclick="funnyGuy()">Club Penguin</a><span id="jokeP"></span>
        </li>
    </ul>
    
    <footer>
        © Félix Paradis 2018 – <span id="time"></span>
    </footer>
    
     <script type="text/javascript">  
        
        function addZeroIfNeeded(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
        }

        function startTime() {
        var today = new Date();
        var y = today.getFullYear();
        var M = addZeroIfNeeded(today.getMonth()+1);
        var d = addZeroIfNeeded(today.getDate());
        var h = today.getHours();
        var m = addZeroIfNeeded(today.getMinutes());
        var s = addZeroIfNeeded(today.getSeconds());
        
        document.getElementById('time').innerHTML = d + "/" + M + "/" + y + " " + h + ":" + m + ":" + s;
        t = setTimeout(function() {
            startTime()
        }, 500);
        }
        startTime();

        function funnyGuy() {
            document.getElementById("jokeP").innerHTML = " No, not really."
        }
     
        
        // activateCheats()
        // the 'official' Konami Code sequence
        var konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];

        // a variable to remember the 'position' the user has reached so far.
        var konamiCodePosition = 0;

        // add keydown event listener
        window.addEventListener('keydown', function(e) {
        var key = e.code;
        var requiredKey = konamiCode[konamiCodePosition];
        if (key == requiredKey) {
            console.log("😱")
            konamiCodePosition++;

            if (konamiCodePosition == konamiCode.length) {
            activateCheat();
            konamiCodePosition = 0;
            }
        } else {
            konamiCodePosition = 0;
        }
        });

        function activateCheat() {
            document.body.style.animation = "crazyBG 2s infinite";

            var screenWidth = screen.width

            for(var i = 0; i < screenWidth; i+=100) {
                var node = document.createElement("span");
                node.innerHTML = "🎉"
                node.style.animation = "fall 5s infinite linear, rotate 4s infinite linear"
                node.className += "joy"
                node.style.left = i + "px"
                document.body.appendChild(node);       
            }
            var congrats = document.createElement("h1");
            congrats.innerHTML = "¡CONGRATULATIONS!"
            congrats.className += "wow"
            document.body.appendChild(congrats)
        }   

     </script>

    <img src="https://app.piratepx.com/ship?p=4a819009-8828-4b89-8dc7-b0a547406820&i=V1.felixparadis.com" alt="" width="1" height="1"/>

</body>
    
</html>