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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Not Your Average Joe</title>

    <!-- FAVICON -->
    <link rel="icon" type="image/png" href="facefavicon.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="facefavicon.png" sizes="16x16" />


    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- LIGHTBOX -->
    <link href="css/featherlight.min.css" type="text/css" rel="stylesheet" />
    <link href="css/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />

    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet" type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans:700" rel="stylesheet" type='text/css'>
    <!-- FONT AWESOME ICONS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">

    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">

    <!-- Styles CSS -->
    <link rel="stylesheet" href="css/styles.css" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top">

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- <a class="navbar-brand page-scroll" href="#page-top"><img src="img/joe_logo_03.png" alt="" class="logo"></a> -->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Skills</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>


    <div class="container-fluid no-padding">
      <div class="header">
            <img src="img/portfolio/Face.png" alt="" class="img-responsive center-block face">
              <div class="fade-in">
                <img src="img/eye_images/snowy_eye.png" class="img-responsive" alt="" id="f1">
                <img src="img/eye_images/tree_eye.png" class="img-responsive" alt="" id="f2">
                <img src="img/eye_images/graffiti_eye.png" class="img-responsive" alt="" id="f3">
                <img src="img/eye_images/windmill_eye.png" class="img-responsive" alt="" id="f4">
                <img src="img/eye_images/mountain_eye.png" class="img-responsive" alt="" id="f5">
                <!-- <img src="img/eye_images/sunset_eye.png" alt="" id="f6"> -->
              </div>
             <!-- <a href="#about" class="btn btn-primary page-scroll"><i class="fa fa-chevron-circle-down"></i></a> -->
        </div>
    </div>

    <div id="loader-wrapper" class="img-responsive center-block">
      <div id="loader"></div>

        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>

    </div>


    <section class="bg-primary" id="about">
        <div class="container">
            <div class="row no-gutter">
                <div class="col-sm-6 text-center">
                    <h2 class="section-heading">DESIGNER</h2>
                    <!-- <hr class="light"> -->
                    <p class="text-faded">Specializing in branding by creating clean, stylish, and unique graphics to capture the core purpose of each project. Quickly establish meaningful relationships with quality designs for each client's vision. Being able to connect a bond between visual and emotional ties within a piece of artwork is what I live for.</p>
                </div>
                <div class="col-sm-6 text-center">
                    <h2 class="section-heading">DEVELOPER</h2>
                    <!-- <hr class="light"> -->
                    <p class="text-faded">Learning and growing every day as a front end developer who focuses on writing efficient and functional code that brings the designs created to life with a click. Love the integration between design and code to create web based pieces of art to help promote personal and business growth.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <div class="row no-gutter">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Skills</h2>
                    <hr class="primary">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <img src="img/Adobe.png" class="wow fadeIn text-primary" data-wow-delay=".2s" alt="" alt="">
                        <h3>ADOBE</h3>
                        <p class="text-muted">Proficient in Illustrator, Photoshop, and InDesign with over five years experience.</p>
                    </div>
                </div>
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <i class="fa fa-code wow fadeIn text-primary sr-icons" data-wow-delay=".5s"></i>
                        <h3>HTML & CSS</h3>
                        <p class="text-muted">Fluent in both HTML5 and CSS3, but still learning each day to create more elegant sites.</p>
                    </div>
                </div>
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <img src="img/git.png" class="wow fadeIn text-primary sr-icons" data-wow-delay=".8s">
                        <h3>GITHUB</h3>
                        <p class="text-muted">Constantly growing in command line, hosting, and collaborating with each project on Github.</p>
                    </div>
                </div>
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <img src="img/bootstrap.png" class="wow fadeIn text-primary sr-icons" data-wow-delay="1.1s">
                        <h3>BOOTSTRAP</h3>
                        <p class="text-muted">Favorite framework to create structured, stunning, and responsive websites.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="no-padding" id="portfolio">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="col-lg-4 col-sm-6">
                  <a href="#" class="portfolio-box" data-toggle="modal" data-target=".magazine-ad">
                      <img src="img/portfolio/flipside_thumb.jpg" class="img-responsive" alt="">
                      <div class="portfolio-box-caption">
                          <div class="portfolio-box-caption-content">
                              <div class="project-category text-faded">
                                  Magazine Ad
                              </div>
                              <div class="project-name">
                                  Flipside
                              </div>
                          </div><!-- END OF PORTFOLIO BOX CONTENT -->
                      </div><!-- END OF PORTFOLIO BOX CAPTION -->
                  </a>
                </div><!-- END OF COLUMN FLIPSIDE MAG AD -->
                <div class="modal fade magazine-ad" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/Flipside_pg1.jpg">
                        <img src="img/portfolio/Flipside_pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Flipside_pg2.jpg">
                        <img src="img/portfolio/Flipside_pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Flipside_pg3.jpg">
                        <img src="img/portfolio/Flipside_pg3.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL FLIPSIDE MAG AD -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".logo-and-bc">
                        <img src="img/portfolio/fractal_Bcard.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Logo & Business Card
                                </div>
                                <div class="project-name">
                                    Fractal
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN FRACTAL -->
                <div class="modal fade logo-and-bc" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content">
                      <img src="img/portfolio/Fractal_MockUp.jpg" alt="" class="center-block">
                    </div>
                  </div>
                </div><!-- END OF MODAL FRACTAL -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".poster">
                        <img src="img/portfolio/DoeJoe_Thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Custom Font & Typography Poster
                                </div>
                                <div class="project-name">
                                    <NAME>
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN DOEJOE -->
                <div class="modal fade poster" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content">
                      <img src="img/portfolio/DoeJoe_TypoPost.jpg" alt="" class="center-block">
                    </div>
                  </div>
                </div><!-- END OF MODAL DOEJOE -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".olive-oil">
                        <img src="img/portfolio/olive_thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Olive Oil Logo & Label
                                </div>
                                <div class="project-name">
                                    California Crete
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN OLIVE OIL -->
                <div class="modal fade olive-oil" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content">
                      <img src="img/portfolio/Olive.jpg" alt="" class="center-block">
                    </div>
                  </div>
                </div><!-- END OF MODAL OLIVE OIL -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".ariel">
                        <img src="img/portfolio/Ariel_Thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Character Building
                                </div>
                                <div class="project-name">
                                    <NAME>
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN ARIEL -->
                <div class="modal fade ariel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/Ariel_Pg1.jpg">
                        <img src="img/portfolio/Ariel_Pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Ariel_Pg2.jpg">
                        <img src="img/portfolio/Ariel_Pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Ariel_Pg3.jpg">
                        <img src="img/portfolio/Ariel_Pg3.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL ARIEL -->
                <div class="col-lg-4 col-sm-6">
                    <a href="https://geekwiseb2.github.io/restaurante-joeron86/" target="_blank" class="portfolio-box">
                        <img src="img/portfolio/restaurante_thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Website
                                </div>
                                <div class="project-name">
                                    Restaurante
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN RESTAURANTE WEBSITE -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".500-menu">
                        <img src="img/portfolio/500_Thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Menu
                                </div>
                                <div class="project-name">
                                    500 Club Casino
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN 500 CLUB MENU -->
                <div class="modal fade 500-menu" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/500_Drinks_Pg1.jpg">
                        <img src="img/portfolio/500_Drinks_Pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/500_Drinks_Pg2.jpg">
                        <img src="img/portfolio/500_Drinks_Pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/500_Drinks_Pg3.jpg">
                        <img src="img/portfolio/500_Drinks_Pg3.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/500_Drinks_Pg4.jpg">
                        <img src="img/portfolio/500_Drinks_Pg4.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL 500 MENU -->
                <div class="col-lg-4 col-sm-6">
                    <a href="https://geekwiseb2.github.io/pet-store-joeron86/index.html" target="_blank" class="portfolio-box">
                        <img src="img/portfolio/Pstore_thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Website
                                </div>
                                <div class="project-name">
                                    Pet Store
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN PET STORE WEBSITE -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".cpj-menu">
                        <img src="img/portfolio/Pizza_Junction.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Logo & Menu
                                </div>
                                <div class="project-name">
                                    Clovis Pizza Junction
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN CPJ MENU -->
                <div class="modal fade cpj-menu" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/CPJ_Menu_Pg2.jpg">
                        <img src="img/portfolio/CPJ_Menu_Pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/CPJ_Menu_Pg1.jpg">
                        <img src="img/portfolio/CPJ_Menu_Pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/CPJ_Menu_Pg3.jpg">
                        <img src="img/portfolio/CPJ_Menu_Pg3.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL CPJ MENU -->
            </div><!-- END OF PORTFOLIO ROW -->
        </div><!-- END OF CONTAINER FLUID PORTFOLIO -->
    </section><!-- END OF PORTFOLIO SECTION -->

    <!-- BOOTSTRAP PLUGIN -->
    <!-- <aside class="bg-dark">
        <div class="container text-center">
            <div class="call-to-action">
                <h2>Free Download at Start Bootstrap!</h2>
                <a href="#" class="btn btn-default btn-xl wow tada">Download Now!</a>
            </div>
        </div>
    </aside> -->

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center contact-pitch">
                    <h3 class="section-heading">I'm currently available for freelance work.</h3>
                    <!-- <hr class="primary"> -->
                    <p>If you have a project and think that I could be some help please feel free to get ahold of me in whichever method you prefer. Let's make something amazing together!</p>
                </div>
                <!-- <div class="col-lg-4 col-lg-offset-2 text-center">
                    <i class="fa fa-phone fa-3x wow fadeIn"></i>
                    <p>559-960-2642</p>
                </div> -->
                <div class="center-block text-center">
                    <!-- <p class="btn email">
                      <i class= data-wow-delay=".1s"></i>
                      <a class="mail" href=""><EMAIL></a>
                    </p>
                </div> -->
                <div class="center-block text-center socail-icons">
                  <a href="mailto:<EMAIL>" target="_blank" class="email"><i class="fa fa-envelope-square"></i></a>
                  <a href="https://www.facebook.com/joe.halderman.5" target="_blank" class="facebook"><i class="fa fa-facebook-square"></i></a>
                  <a href="https://www.linkedin.com/in/joseph-halderman-62315a41?trk=hp-identity-name" target="_blank" class="linkedin"><i class="fa fa-linkedin-square"></i></a>
                  <a href="https://twitter.com/joehald" target="_blank" class="twitter"><i class="fa fa-twitter-square"></i></a>
                </div>
            </div>

        </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>

    <!-- LIGHTBOX -->
    <script src="js/featherlight.min.js" type="text/javascript"></script>
    <script src="js/featherlight.gallery.min.js" type="text/javascript"></script>


    <!-- Custom javascript -->
    <script src="js/script.js"></script>
</body>

</html><commit_msg>conficts<commit_after><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Not Your Average Joe</title>

    <!-- FAVICON -->
    <link rel="icon" type="image/png" href="facefavicon.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="facefavicon.png" sizes="16x16" />


    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- LIGHTBOX -->
    <link href="css/featherlight.min.css" type="text/css" rel="stylesheet" />
    <link href="css/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />

    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet" type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans:700" rel="stylesheet" type='text/css'>
    <!-- FONT AWESOME ICONS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">

    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">

    <!-- Styles CSS -->
    <link rel="stylesheet" href="css/styles.css" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top">

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- <a class="navbar-brand page-scroll" href="#page-top"><img src="img/joe_logo_03.png" alt="" class="logo"></a> -->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Skills</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>


    <div class="container-fluid no-padding">
      <div class="header">
            <img src="img/portfolio/Face.png" alt="" class="img-responsive center-block face">
              <div class="fade-in">
                <img src="img/eye_images/snowy_eye.png" class="img-responsive" alt="" id="f1">
                <img src="img/eye_images/tree_eye.png" class="img-responsive" alt="" id="f2">
                <img src="img/eye_images/graffiti_eye.png" class="img-responsive" alt="" id="f3">
                <img src="img/eye_images/windmill_eye.png" class="img-responsive" alt="" id="f4">
                <img src="img/eye_images/mountain_eye.png" class="img-responsive" alt="" id="f5">
                <!-- <img src="img/eye_images/sunset_eye.png" alt="" id="f6"> -->
              </div>
             <a href="#about" class="btn btn-primary page-scroll" id="page-scroll-btn"><i class="fa fa-chevron-circle-down"></i></a>
        </div>
    </div>

    <div id="loader-wrapper" class="img-responsive center-block">
      <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>

    <section class="bg-primary" id="about">
        <div class="container">
            <div class="row no-gutter">
                <div class="col-sm-6 text-center">
                    <h2 class="section-heading">DESIGNER</h2>
                    <!-- <hr class="light"> -->
                    <p class="text-faded">Specializing in branding by creating clean, stylish, and unique graphics to capture the core purpose of each project. Quickly establish meaningful relationships with quality designs for each client's vision. Being able to connect a bond between visual and emotional ties within a piece of artwork is what I live for.</p>
                </div>
                <div class="col-sm-6 text-center">
                    <h2 class="section-heading">DEVELOPER</h2>
                    <!-- <hr class="light"> -->
                    <p class="text-faded">Learning and growing every day as a front end developer who focuses on writing efficient and functional code that brings the designs created to life with a click. Love the integration between design and code to create web based pieces of art to help promote personal and business growth.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <div class="row no-gutter">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Skills</h2>
                    <hr class="primary">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <img src="img/Adobe.png" class="wow fadeIn text-primary" data-wow-delay=".2s" alt="" alt="">
                        <h3>ADOBE</h3>
                        <p class="text-muted">Proficient in Illustrator, Photoshop, and InDesign with over five years experience.</p>
                    </div>
                </div>
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <i class="fa fa-code wow fadeIn text-primary sr-icons" data-wow-delay=".5s"></i>
                        <h3>HTML & CSS</h3>
                        <p class="text-muted">Fluent in both HTML5 and CSS3, but still learning each day to create more elegant sites.</p>
                    </div>
                </div>
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <img src="img/git.png" class="wow fadeIn text-primary sr-icons" data-wow-delay=".8s">
                        <h3>GITHUB</h3>
                        <p class="text-muted">Constantly growing in command line, hosting, and collaborating with each project on Github.</p>
                    </div>
                </div>
                <div class="col-sm-3 text-center">
                    <div class="service-box">
                        <img src="img/bootstrap.png" class="wow fadeIn text-primary sr-icons" data-wow-delay="1.1s">
                        <h3>BOOTSTRAP</h3>
                        <p class="text-muted">Favorite framework to create structured, stunning, and responsive websites.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="no-padding" id="portfolio">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="col-lg-4 col-sm-6">
                  <a href="#" class="portfolio-box" data-toggle="modal" data-target=".magazine-ad">
                      <img src="img/portfolio/flipside_thumb.jpg" class="img-responsive" alt="">
                      <div class="portfolio-box-caption">
                          <div class="portfolio-box-caption-content">
                              <div class="project-category text-faded">
                                  Magazine Ad
                              </div>
                              <div class="project-name">
                                  Flipside
                              </div>
                          </div><!-- END OF PORTFOLIO BOX CONTENT -->
                      </div><!-- END OF PORTFOLIO BOX CAPTION -->
                  </a>
                </div><!-- END OF COLUMN FLIPSIDE MAG AD -->
                <div class="modal fade magazine-ad" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/Flipside_pg1.jpg">
                        <img src="img/portfolio/Flipside_pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Flipside_pg2.jpg">
                        <img src="img/portfolio/Flipside_pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Flipside_pg3.jpg">
                        <img src="img/portfolio/Flipside_pg3.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL FLIPSIDE MAG AD -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".logo-and-bc">
                        <img src="img/portfolio/fractal_Bcard.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Logo & Business Card
                                </div>
                                <div class="project-name">
                                    Fractal
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN FRACTAL -->
                <div class="modal fade logo-and-bc" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content">
                      <img src="img/portfolio/Fractal_MockUp.jpg" alt="" class="center-block">
                    </div>
                  </div>
                </div><!-- END OF MODAL FRACTAL -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".poster">
                        <img src="img/portfolio/DoeJoe_Thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Custom Font & Typography Poster
                                </div>
                                <div class="project-name">
                                    doe joe
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN DOEJOE -->
                <div class="modal fade poster" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content">
                      <img src="img/portfolio/DoeJoe_TypoPost.jpg" alt="" class="center-block">
                    </div>
                  </div>
                </div><!-- END OF MODAL DOEJOE -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".olive-oil">
                        <img src="img/portfolio/olive_thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Olive Oil Logo & Label
                                </div>
                                <div class="project-name">
                                    California Crete
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN OLIVE OIL -->
                <div class="modal fade olive-oil" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content">
                      <img src="img/portfolio/Olive.jpg" alt="" class="center-block">
                    </div>
                  </div>
                </div><!-- END OF MODAL OLIVE OIL -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".ariel">
                        <img src="img/portfolio/Ariel_Thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Character Building
                                </div>
                                <div class="project-name">
                                    <NAME>
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN ARIEL -->
                <div class="modal fade ariel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/Ariel_Pg1.jpg">
                        <img src="img/portfolio/Ariel_Pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Ariel_Pg2.jpg">
                        <img src="img/portfolio/Ariel_Pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/Ariel_Pg3.jpg">
                        <img src="img/portfolio/Ariel_Pg3.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL ARIEL -->
                <div class="col-lg-4 col-sm-6">
                    <a href="https://geekwiseb2.github.io/restaurante-joeron86/" target="_blank" class="portfolio-box">
                        <img src="img/portfolio/restaurante_thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Website
                                </div>
                                <div class="project-name">
                                    Restaurante
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN RESTAURANTE WEBSITE -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".500-menu">
                        <img src="img/portfolio/500_Thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Menu
                                </div>
                                <div class="project-name">
                                    500 Club Casino
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN 500 CLUB MENU -->
                <div class="modal fade 500-menu" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/500_Drinks_Pg1.jpg">
                        <img src="img/portfolio/500_Drinks_Pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/500_Drinks_Pg2.jpg">
                        <img src="img/portfolio/500_Drinks_Pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/500_Drinks_Pg3.jpg">
                        <img src="img/portfolio/500_Drinks_Pg3.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/500_Drinks_Pg4.jpg">
                        <img src="img/portfolio/500_Drinks_Pg4.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL 500 MENU -->
                <div class="col-lg-4 col-sm-6">
                    <a href="https://geekwiseb2.github.io/pet-store-joeron86/index.html" target="_blank" class="portfolio-box">
                        <img src="img/portfolio/Pstore_thumb.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Website
                                </div>
                                <div class="project-name">
                                    Pet Store
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN PET STORE WEBSITE -->
                <div class="col-lg-4 col-sm-6">
                    <a href="#" class="portfolio-box" data-toggle="modal" data-target=".cpj-menu">
                        <img src="img/portfolio/Pizza_Junction.jpg" class="img-responsive" alt="">
                        <div class="portfolio-box-caption">
                            <div class="portfolio-box-caption-content">
                                <div class="project-category text-faded">
                                    Logo & Menu
                                </div>
                                <div class="project-name">
                                    Clovis Pizza Junction
                                </div>
                            </div><!-- END OF PORTFOLIO BOX CONTENT -->
                        </div><!-- END OF PORTFOLIO BOX CAPTION -->
                    </a>
                </div><!-- END OF COLUMN CPJ MENU -->
                <div class="modal fade cpj-menu" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-md">
                    <div class="modal-content" data-featherlight-gallery data-featherlight-filter="a">
                      <a href="img/portfolio/CPJ_Menu_Pg2.jpg">
                        <img src="img/portfolio/CPJ_Menu_Pg2.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/CPJ_Menu_Pg1.jpg">
                        <img src="img/portfolio/CPJ_Menu_Pg1.jpg" class="thumbnail">
                      </a>
                      <a href="img/portfolio/CPJ_Menu_Pg3.jpg">
                        <img src="img/portfolio/CPJ_Menu_Pg3.jpg" class="thumbnail">
                      </a>
                    </div>
                  </div>
                </div><!-- END OF MODAL CPJ MENU -->
            </div><!-- END OF PORTFOLIO ROW -->
        </div><!-- END OF CONTAINER FLUID PORTFOLIO -->
    </section><!-- END OF PORTFOLIO SECTION -->

    <!-- BOOTSTRAP PLUGIN -->
    <!-- <aside class="bg-dark">
        <div class="container text-center">
            <div class="call-to-action">
                <h2>Free Download at Start Bootstrap!</h2>
                <a href="#" class="btn btn-default btn-xl wow tada">Download Now!</a>
            </div>
        </div>
    </aside> -->

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center contact-pitch">
                    <h3 class="section-heading">I'm currently available for freelance work.</h3>
                    <!-- <hr class="primary"> -->
                    <p>If you have a project and think that I could be some help please feel free to get ahold of me in whichever method you prefer. Let's make something amazing together!</p>
                </div>
                <!-- <div class="col-lg-4 col-lg-offset-2 text-center">
                    <i class="fa fa-phone fa-3x wow fadeIn"></i>
                    <p>559-960-2642</p>
                </div> -->
                <div class="center-block text-center">
                    <!-- <p class="btn email">
                      <i class= data-wow-delay=".1s"></i>
                      <a class="mail" href=""><EMAIL></a>
                    </p>
                </div> -->
                <div class="center-block text-center socail-icons">
                  <a href="mailto:<EMAIL>" target="_blank" class="email"><i class="fa fa-envelope-square"></i></a>
                  <a href="https://www.facebook.com/joe.halderman.5" target="_blank" class="facebook"><i class="fa fa-facebook-square"></i></a>
                  <a href="https://www.linkedin.com/in/joseph-halderman-62315a41?trk=hp-identity-name" target="_blank" class="linkedin"><i class="fa fa-linkedin-square"></i></a>
                  <a href="https://twitter.com/joehald" target="_blank" class="twitter"><i class="fa fa-twitter-square"></i></a>
                </div>
            </div>

        </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>

    <!-- CHECK IF SAFARI BROWSER -->
    <script>
      var isChrome = !!window.chrome && !!window.chrome.webstore;
      var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
      var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || !isChrome && !isOpera && window.webkitAudioContext !== undefined;
      if(isSafari) {
        document.getElementById('page-scroll-btn').style.display = 'none';
      }
    </script>

    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>

    <!-- LIGHTBOX -->
    <script src="js/featherlight.min.js" type="text/javascript"></script>
    <script src="js/featherlight.gallery.min.js" type="text/javascript"></script>


    <!-- Custom javascript -->
    <script src="js/script.js"></script>
</body>

</html>
{'fraction_non_alphanumeric': 0.14708388656586274, 'fraction_numerical': 0.009987911456372248, 'mean_word_length': 1.3955376216472821, 'pattern_counts': {'":': 0, '<': 1050, '<?xml version=': 0, '>': 1052, 'https://': 24, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 46, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4276922', 'n_tokens_mistral': 14585, 'n_tokens_neox': 13446, 'n_words': 2826}