index.html

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Joe Spall IV</title>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-PG6DL3D');</script>
    <!-- End Google Tag Manager -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="assets/css/main.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" src="assets/js/smoothscroll.js"></script>
    <script src="assets/js/Chart.js"></script>
    <!-- HTML5 shim and Respond.js
         IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE
         9]>
      <script src="assets/js/html5shiv.js"></script> <script
         src="assets/js/respond.min.js"></script>
      <![endif]-->
      <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-661QF3TGYF"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-661QF3TGYF');
    </script>
</head>

<body data-spy="scroll" data-offset="0" data-target="#nav">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PG6DL3D"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="section-topbar">
        <div id="topbar-inner">
            <div class="container">
                <div class="row">
                    <div class="dropdown">
                        <ul id="nav" class="nav">
                            <li class="menu-item">
                              <a href="#about" title="About"><i class="icon-user"></i></a>
                            </li>
                            <li class="menu-item">
                              <a href="#projects" title="Projects"><i class="icon-book"></i></a>
                            </li>
                            <li class="menu-item">
                              <a href="#contact" title="Contact"><i class="icon-envelope"></i></a>
                            </li>
                        </ul>
                        <!--/ uL#nav -->
                    </div>
                    <!-- /.dropdown -->
                    <div class="p-3 mx-auto">
                        <h5 id="name">Joe Spall IV</h5>
                    </div>
                    <div class="clear"></div>
                </div>
                <!--/.row -->
            </div>
            <!--/.container -->
            <div class="clear"></div>
        </div>
        <!--/ #topbar-inner -->
    </div>
    <!--/ #section-topbar -->
    <div id="headerwrap">
        <div class="container">
            <div class="row centered">
                <div class="col-lg-12">
                    <h1>Joe Spall IV</h1>
                    <h3>joe.spall.iv@gmail.com</h3>
                </div>
                <!--/.col-lg-12 -->
            </div>
            <!--/.row -->
        </div>
        <!--/.container -->
    </div>
    <!--/.#headerwrap -->
    <section id="about" name="about"></section>
    <div id="intro">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-lg-offset-1">
                    <h5>ABOUT</h5>
                </div>
                <div class="col-lg-6">
                    <p>
                        I work at Microsoft working on cool test tools.
                        <br> 
                        I have a MS in Electrical and Computer Engineering with a focus in Controls and DSP from Georgia Tech and a BS in Electrical Engineering with a Minor in Robotics from Georgia Tech.                        <br> 
                        <br>
                        I make robots and other projects in my free time.
                    </p>
                </div>
                <div class="col-lg-3">
                    <h5>Links</h5>
                    <p>
                        <a href="https://www.linkedin.com/in/joe-spall-iv">
                            <i class="icon-linkedin"></i>
                        </a>
                        <a href="https://github.com/joe-spall">
                            <i class="icon-github"></i>
                        </a>
                    </p>
                </div>
            </div>
            <!--/.row -->
        </div>
        <!--/.container -->
    <!--/.container-->
    <section id="media" name="media"></section>
    <div id="media" class="container desc">
        <div class="row">
            <div class="col-lg-2 col-lg-offset-1">
                <h5>MEDIA</h5>
            </div>
            <div class="col-lg-6">
                <!--Media Content-->
                <div id="media_content">
                    <p>Listed are some articles in which I am/what I have worked on is featured:</p>
                    <ul>
                        <li><a href="https://www.delawareonline.com/story/life/2014/02/05/crossroads-disaster-inspires-archmere-students-to-develop-phone-app/5234547/">Crossroads: Disaster inspires Archmere students to develop phone app</a></li>
                        <li><a href="https://www.therecord.com/news/waterloo-region/2019/07/14/a-penne-for-your-thoughts-watch-uw-life-in-the-pasta-lane.html">A penne for your thoughts? Watch UW life in the 'pasta' lane</a></li>
                        <li><a href="http://me.gatech.edu/RoboJackets-Win-IARRC">RoboJackets Place First at Annual IARRC</a></li>
                        <li><a href="https://robojackets.org/2020/09/30/roboracing-evgrand-prix-and-rigatoni/">RoboRacing – evGrand Prix and Rigatoni</a>
                        <li><a href="https://robojackets.org/2021/04/07/profiles-in-presidency-joe-spall-and-alex-field/">Profiles in Presidency: Joe Spall and Alex Field</a></li>
                    </ul>
                    <p>Listed are some articles that I wrote:</p>
                    <ul>
                        <li><a href="https://robojackets.org/2020/09/02/introducing-aimi-a-robojackets-hobby-project/">Introducing Aimi: A RoboJackets Hobby Project</a></li>
                        <li><a href="https://robojackets.org/2021/01/05/robowrestling-january-2021-update/">RoboWrestling – January 2021 Update</a></li>
                        <li><a href="https://robojackets.org/2021/02/02/pcb-competition/">PCB Competition</a></li>
                    </ul>
                </div>
                <!--/Media Content-->
            </div>
            </div>
        </div>
    </div>

    <!--PROJECTS DESCRIPTION-->
    <div id="projects" class="container desc">
        <div class="row">
            <div class="col-lg-2 offset-lg-1">
                <h5>PROJECTS</h5>
            </div>

            <!--Rigatoni-->
            <div class="col-lg-6">
                <!--Rigatoni Content-->
                <div id="rigatoni_content">
                    <a href="rigatoni.html" id="rigatoni_title">
                        <t>RIGATONI</t>
                        <img class="d-block w-100" src="assets/img/rigatoni/rigatoni_img_1.jpg" alt="Rigatoni">
                    </a>
                </div>
                <!--/Rigatoni Content-->
            </div>
            <!--/Rigatoni-->

            <!--Tactio-->
            <div class="col-lg-6">
                <!--Tactio Content-->
                <div id="tactio_content">
                    <a href="tactio.html" id="tactio_title">
                        <t>TACTIO</t>
                        <img class="d-block w-100" src="assets/img/tactio/tactio_img_1.jpg" alt="Tactio">
                    </a>
                </div>
                <!--/Tactio Content-->
            </div>
            <!--/Tactio-->
        

            <!--Pacman-->
            <div class="col-lg-6">
                <!--Pacman Content-->
                <div id="pacman_content">
                    <a href="pacman.html" id="pacman_title">
                        <t>PACMAN</t>
                        <img class="d-block w-100" src="assets/img/pacman/pacman_img_1.jpg" alt="Pacman">
                    </a>
                </div>
                <!--/Pacman Content-->
            </div>
            <!--/Pacman-->

            <!--Sedani-->
            <div class="col-lg-6">
                <!--Sedani Content-->
                <div id="sedani_content">
                    <a href="sedani.html" id="sedani_title">
                        <t>SEDANI</t>
                        <img class="d-block w-100" src="assets/img/sedani/sedani_img_1.jpg" alt="Sedani">
                    </a>
                </div>
                <!--/Sedani Content-->
            </div>
            <!--/Sedani-->

            <!--Trainii-->
            <div class="col-lg-6">
                <!--Trainii Content-->
                <div id="trainii_content">
                    <a href="trainii.html" id="trainii_title">
                        <t>TRAINII</t>
                        <img class="d-block w-100" src="assets/img/trainii/trainii_img_1.jpg" alt="Trainii">
                    </a>
                </div>
                <!--/Trainii Content-->
            </div>
            <!--/Trainii-->

            <!--Bigoli-->
            <div class="col-lg-6">
                <!--Bigoli Content-->
                <div id="bigoli_content">
                    <a href="bigoli.html" id="bigoli_title">
                        <t>BIGOLI</t>
                        <img class="d-block w-100" src="assets/img/bigoli/bigoli_img_1.jpg" alt="Bigoli">
                    </a>
                </div>
                <!--/Bigoli Content-->
            </div>
            <!--/Bigoli-->

            <!--Macaroni-->
            <div class="col-lg-6">
                <!--Macaroni Content-->
                <div id="macaroni_content">
                    <a href="macaroni.html" id="macaroni_title">
                        <t>MACARONI</t>
                        <img class="d-block w-100" src="assets/img/macaroni/macaroni_img_1.jpg" alt="Macaroni">
                    </a>
                </div>
                <!--/Macaroni Content-->
            </div>
            <!--/Macaroni-->

            <!--Lighthouse-->
            <div class="col-lg-6">
                <!--Lighthouse Content-->
                <div id="lighthouse_content">
                    <a href="lighthouse.html" id="lighthouse_title">
                        <t>LIGHTHOUSE</t>
                        <img class="d-block w-100" src="assets/img/lighthouse/lighthouse_img_1.jpg" alt="Lighthouse">
                    </a>
                </div>
                <!--/Lighthouse Content-->
            </div>
            <!--/Lighthouse-->

            <!--FTC-->
            <div class="col-lg-6">
                <!--FTC Content-->
                <div id="ftc_content">
                    <a href="ftc.html" id="ftc_title">
                        <t>FTC #395</t>
                        <img class="d-block w-100" src="assets/img/ftc/ftc_img_1.jpg" alt="FTC">
                    </a>
                </div>
                <!--/FTC Content-->
            </div>
            <!--/FTC-->

        </div>
        <!--/.row -->
        <br>
        <hr>
    </div>
    <!--/.container -->

    
    <section id="contact" name="contact"></section>
    <!--FOOTER DESCRIPTION-->
    <div id="footwrap">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 offset-lg-1">
                    <h5>CONTACT</h5>
                </div>
                <div class="col-lg-6">
                    <p>
                        <t>Email</t>
                        <br/> joe.spall.iv@gmail.com
                        <br/>
                    </p>
                </div>
            </div>
            <!--/.row -->
        </div>
        <!--/.container -->
    </div>
    <!--/ #footer -->
    <div id="c">
        <div class="container">
            <p>Created by Joe Spall IV and <a href="http://www.blacktie.co">BLACKTIE.CO</a> </p>
        </div>
    </div>
</body>
</html>