<!-- 
$$ZOOO8D8888888DO$7$7II+??+?=+=+==I~~=~$$O7$777$Z$Z$$77$$$$$$$$$?::::::::::::::.
$$OO888OZOZOOOOOOO88O$7I=I?+++=+~++=+++7O$7ZOOZZOZZZZZ$$7$$7$7$Z7:,::::::::::::.
ZZZ88OZ$$7$$$$$$ZZZZZOOZ$I7I??==+=I=??+$8D88OOOO8OZZ$$$Z$7$7$$$$$::::::::::::::.
ZZZOZ7I?+??777777$$$$$ZZZZ7II??=+I++???7888888OO88ZZOZ$$Z$$$7$$$$~,,,,,::,,:,::.
$+~~+===~~~:~=+++I7777$$$$$Z7??+II???I?78D88D888OODOZZOOZZ$$$77$7=:,,,:::::,,::,
I$7=+I+=~::~~~~~~~=??II7$7$$$$II?I?777IIZDD8D88O88OOOOOZZZO$$$$$7~:::::::::::::.
$$7I+I7+~~~~~:~~::::~=+II7777ZZ7I7II$II778DNDD888888OOOOOZZ$Z$7$7=:::::~~::::::.
$7?+??7$?~~:,:::::,,~~~==?I77$$ZZ77I$?7$ZODNDDDDDD8888OOOOOZZ$Z7$=:::::::::::::.
$+~+II?I=~~~:::::::::~~~~==+I$$ZO87$$I7$7ZDDDDDNDD8888888OOZOZZZ$=:::::::::::::.
7:=+?I=?+::::::~~:~~~~~~~~~~~I$$ZZOOZI$$7Z8NDDDDDDND88888OOOZZOZO=:::::::::::::.
~?777I=+=:::::~~~:~~~~======+++?7ZZO8OZ$OZO88DNNND8D8DD7Z88OOOZOO=:~::::~::~:::.
+7$ZZZ==:,:::~~::~~~=====?++?+=~=$ZO8888OZZ8OOOO8NMNDDD$$888D88OO~~~~~~~~~~~~~:,
7$ZZZ$+,,,:::~~~~~~=~=+====~=~=+?7$Z88888OZO8OOZOO8NNDDDDD8NDDO888O7??=~~~~~:~~,
?7Z$$7,,,::~::~::~~~===++==+=++?7$$ZOO888888O88OZZOO8NDDDD8D8D8ZNNNNNNDDDD888OO~
+?~+$=:,,::~::~:::~=++++=I$777$$$Z$ZZO888888O8888OZZOZODDDDDDDD8DNNNNNNNNNNNNNN=
:~=?7?:,::::~~~~::==+++=+I$OOO8DDD8OOOOOO8888OO888OOOOZOODDDNDD8DDDNNNNNNNNNNND=
++?II+,:~::~~~~~~~~==+?77$ZZOOZOO88DDDD8OOOO88O8888OOOOZZOO88NDDNNNNNNNDDNNNDND=
?III+,,:~~~~~~===~==+++?+?7$ZOOOZOOO88DDD88OOOOOZO888OO8OZZOO88NNNNNNNNND8DDDDD=
??~~:,:::~~=========++?I7$77$$ZZOO8888888D88OOOOOOO888888OOOZOOO88NNNNNNNNDDDDD=
IIII::~~~=~==++++++?+IIIIIIIIII7ZOO8888888OOOOZOOOOZO888O8OOOOOZO88DNNNNNNDDDDD=
~+~~::~=====++++?????II77III??II7$OO8O8OOOOOOZZO888DDDD8O88OOOOZOZZO8DNDDDD8888=
=+~~~~===+=+++?+???IIII7I7I?III7$ZOOOO8OOOZZZZZOO8ODNNDD88OOOOO8OOZ$O888DD88888=
+=~~===++++???????IIIII77IIII77$$ZZOOOOZ$$$Z$ZZZOOO8888DDOOI?OOOO8OOZ$O88OO8888=
?=~=+++++??????????I?IIII?III77$ZZZOOOOZ$7$$$$ZZOOO8OOZZZZ+++=IOOOOOOO$ZO8OOOOO=
7==++???+????+???+??II????III7$ZZZZOOOOZ$$$$$$ZOOZOOOO$$?~~~~~===?ZOOOOOZZZOOOO=
7+=+????????+?+?++?????????I7$$ZZZOO88O$I7II$$ZOOZOOZZZ7~~~~~~~~~~~=$OOOOOOZZ$7:
7I??I??I??????++++++++???II7$$ZZZZO88Z7~~=~~+?$ZOZZZZZ$?~~~~~~~~~~~~~~=$OOOOZOZ~
ZZ?III????+++++++++++?++?I7$$ZZZZOOOO$I?++==+?7$OZZZZ$$=~~~~~~~~~~~~~~~~~=+7OOO=
8O$7III??++?+++++++++???II$$ZZZOOOZOOO888ZII?I$ZZZZZ$$=:::::::::::::~~::~::::::,
D88$77II??+??++++????+??7$$ZZZOZZZOZOOZZZZZ$7$ZZZ$Z$$=~:~:~~~:~::::::::::::::::,
N888$77I??+???+?????I?I7$$ZOZZZZZZOOZOOOOOOZZZZZ$Z$7~::~:::::~::::::::::~~~:~::,
ND888$$7II????+????I??7$$ZZZZZZZZZZZZZZOOOOOZOZZZ$7:~::::::::::::::~~::::::::::,
NN88D8$$II???????IIII77ZZZZZZZZZZZZZZZZZOOOZOZZZ$7~:~:::~~:::::~::::~~::::::::~,
NNNDDDDZ$I?????IIII777ZZZZOZZZODOOOOOZZZZZZZZZZ$$~~~::~~~:::~:::::::~~~~:::::::,
MMNNDDNDO$77IIII7I77$ZZZOZZZ$$ZZZZO88OOZZZ$$ZZZ$~~~~~~::~~~~~::::~:::~~::~~~:::,
MMMNNDDDDO$77III77$$ZZZOOZZZZ$$Z$ZZZO888OOZZZZ$+~~~~::~:::~::~~~~:::::~~::::~::.
MMMMNDDNND8$$7777$$ZZOOOOOZZZZZZZZZZZZOZZZOOZ$~:::::::~::~~:::~~:~::~~~::::::::,
MMMMMNDDNNN8$Z$$$ZZZ$ZZZZZZZZZZOOOOOOZZZ$$ZZ$$+~~~~~~~:~~~:::~~:::::~~~~~::::~:,
MMMMMNDDDNNNDZZ$$Z$$7$$$ZZZZZZZOOOOOOOZZZZZOZ$7?~::::::~~~~~~~~::::::~~:::::~~~,
NMMMMMNDDNNNND8OOZ$$$$$$ZZZZZZZOOOOOZZZZZZDND$Z$I~=~:::~~~:~~::::::::~~:::::~::,
DNNMMMNNDDDDNNND8OOZ$Z$$$ZZZZZZOZZZZZ$ZONNNNNOZZ$?~~~:::~~~~~:::::::~~~~~:~~~~~,
88DNMMMMDDDDDDDDD8D8OOOOOOZOZOOOZOZZ$ONMNNNNN8$Z77?~~~~::~~~~~~~~~~:~~:::::~~~~,
ODDDNMMMMN8D88888DDDD88888OOOZOOZZZZONMMNNNNND$$$77+:::~~~:::::::~~:::~::~::~~~,
8ODDDNMMNMNN8888OODMNNDDD8888OOOOOO8NNMMNNNNNN$$$$77=:::::::~~:::~~~~~~:~~~~:::,
DDDDNNNMNNMMNNDDDNNDNNNNNNNDD8888NMMNNMMNMNNNN$$$7777~~~~~~::::::::::::::~:::::,
8DNNDDNNMMMMNNNNNNNNNNNNNMMMNNNNMMMMMNMMNNNNNN$$$$$77I:~~~:::::::~~~:::~~:::::~,
NDDNNDDDNMNMNNNNNNNNNNNNNMMMMNNNNMMMMNNMMMNNND$$$$$777?~~~~~::~~~~~~~::::~~~~~~,
DDNDDDNNDDNNNNNNNNNNNNNNNNMMMNNNNNMMMNNMNNNNN8$$$$$7777+~::::::~:~~~:::::~~~:::.
DDDNNNDNNDDNNNNNNNNNNNNNNNMMMNNNNNMMMNNMNNNNMZZ$$$$77777+:::~:~~~~~====:~::~:::,
DD8DDNNDDNNNNNNNNNNNNNNNNNMNMNNNNNNMMNNMMNNN8ZZ$$$$7$7777?~~~~~~:~:~~~~~~~:::~:,
=+?+++?+++?++++????????????????????????????+======~=~~~~~~:,,,,,,,,,,,,,,,,,,,,. 

                         /$$                                            
                        | $$                                            
 /$$  /$$  /$$  /$$$$$$ | $$  /$$$$$$$  /$$$$$$  /$$$$$$/$$$$   /$$$$$$ 
| $$ | $$ | $$ /$$__  $$| $$ /$$_____/ /$$__  $$| $$_  $$_  $$ /$$__  $$
| $$ | $$ | $$| $$$$$$$$| $$| $$      | $$  \ $$| $$ \ $$ \ $$| $$$$$$$$
| $$ | $$ | $$| $$_____/| $$| $$      | $$  | $$| $$ | $$ | $$| $$_____/
|  $$$$$/$$$$/|  $$$$$$$| $$|  $$$$$$$|  $$$$$$/| $$ | $$ | $$|  $$$$$$$
 \_____/\___/  \_______/|__/ \_______/ \______/ |__/ |__/ |__/ \_______/

   /$$                                            
  | $$                                            
 /$$$$$$    /$$$$$$        /$$$$$$/$$$$  /$$   /$$
|_  $$_/   /$$__  $$      | $$_  $$_  $$| $$  | $$
  | $$    | $$  \ $$      | $$ \ $$ \ $$| $$  | $$
  | $$ /$$| $$  | $$      | $$ | $$ | $$| $$  | $$
  |  $$$$/|  $$$$$$/      | $$ | $$ | $$|  $$$$$$$
   \___/   \______/       |__/ |__/ |__/ \____  $$
                                         /$$  | $$
                                        |  $$$$$$/
                                         \______/ 

                         /$$                 /$$   /$$              
                        | $$                |__/  | $$              
 /$$  /$$  /$$  /$$$$$$ | $$$$$$$   /$$$$$$$ /$$ /$$$$$$    /$$$$$$ 
| $$ | $$ | $$ /$$__  $$| $$__  $$ /$$_____/| $$|_  $$_/   /$$__  $$
| $$ | $$ | $$| $$$$$$$$| $$  \ $$|  $$$$$$ | $$  | $$    | $$$$$$$$
| $$ | $$ | $$| $$_____/| $$  | $$ \____  $$| $$  | $$ /$$| $$_____/
|  $$$$$/$$$$/|  $$$$$$$| $$$$$$$/ /$$$$$$$/| $$  |  $$$$/|  $$$$$$$
 \_____/\___/  \_______/|_______/ |_______/ |__/   \___/   \_______/

-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <title>Thomas Fitzgerald</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
    <script type="text/javascript">
        (function () {
            emailjs.init("user_cZEa5oVnr8VfGhTFYm2r9");
        })();
    </script>
</head>

<body>  
    <header>
        <!-- nav area -->
        <nav>
            <ul class="nav">
                <li class="logo"><a href="https://fitzcodes.github.io">
                        <h1><span>Thomas Fitzgerald</span></h1>
                    </a></li>
                <label tabindex="0"  class="switch" for="checkbox">
                    <input  type="checkbox" id="checkbox">
                    <span  class="slider round"></span>
                </label>
                <li class="item"><a href="https://fitzcodes.github.io"><span>Home</span></a></li>
                <li class="item"><a href="#about"><span>About</span></a></li>
                <li class="item"><a href="#contactMe"><span>Contact</span></a></li>
                <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
            </ul>
        </nav>
        <!-- end nav -->
    </header>
    <!-- begin hero area -->
    <div class="hero">
        <div class="background"></div>
        <div class="background background2"></div>
        <div class="background background3"></div>
        <img class="hero-img" src="img/COV-fitz.png" alt="Profile Picture" title="Thomas Fitzgerald">
        <p id="about" class="elevator">JavaScript Developer. My jam is creating beautiful and responsive websites with HTML, CSS, JavaScript and REACT. I think contributing to Open Source is incredibly important and essential to growth as a developer. </p>
    </div>
    <!-- end hero -->
    <div class="work-container">
        <!-- start left aside -->
        <aside class="blog" id="blog">
            <div class="blog-title">Check out my latest posts.</div>
            <div class="blog-card devArticle">
                <a target="_blank" rel="noopener" id="devArticle">
                    <h1 id="article_title"></h1>
                    <div class="article-info">
                        <div>
                            <img id="profile_image" style="width: 50px">
                        </div>
                            <div class="tag-container">
                                <p id="tags"></p>
                                <p id="username"></p>
                            </div>
                    </div>
                </a>
            </div>
        </aside>
        <!-- end left aside -->
        <!-- start right aside -->
        <aside class="work">
            <div class="work-title">Here are a few things I've been working on.</div>
            <div class="work-block">
                <a href="http://codepen.io/fitzcodes" target="_blank" rel="noopener"><i class="fab fa-codepen"></i></a>
                <p>Checkout my <a href="http://codepen.io/fitzcodes" target="_blank" rel="noopener">CODEPEN</a> for live examples of blog posts and fun projects.</p>
            </div>
            <div class="work-block">
                <a href="http://github.com/fitzcodes" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
                <p>Checkout my <a href="http://github.com/fitzcodes" target="_blank" rel="noopener">GITHUB</a> for code repositories of all my latest projects.</p>
            </div>
        </aside>
        <!-- end left aside -->
    </div>


    <footer class="footer">
        <div class="contact-modal">
            <div class="contact-modal-content">
                <form id="contact-form">
                    <span class="close-button" tabindex="0">&times;</span>
                    <input type="hidden" name="contact_number">
                    <label>Name:</label>
                    <input type="text" name="user_name" placeholder="First & Last">
                    <label>Email:</label>
                    <input type="email" name="user_email" placeholder="example@email.com">
                    <label>Message:</label>
                    <textarea name="message" placeholder="Let's chat!"></textarea>
                    <input class="button" type="submit" value="Send">
                </form>
            </div>
        </div>
        <div class="flex-footer-content">
            <div id="contactMe" class="footer-contact-button">
                <h2>Before you go.. </h2>
                <button class="contact-trigger footer-button">Hit Me Up!</button>
            </div>

            <p class="copyright">Thomas Fitzgerald &copy;
                <script language="javascript" type="text/javascript">
                    var today = new Date();
                    var year = today.getFullYear();
                    document.write(year);
                </script>
            </p>

        </div>
    </footer>

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('contact-form').addEventListener('submit', function (event) {
                event.preventDefault();
                // generate the contact number value
                this.contact_number.value = Math.random() * 100000 | 0;
                emailjs.sendForm('contact_service', 'contact_form', this);
                alert("Awesome, I can't wait to read your message!")
                document.getElementById("contact-form").reset();
            });
        }
    </script>
    <script src="scripts/scripts.js"></script>
</body>

</html>