<DOCTYPE html>
<html>
    <head>
        <title>Craig Pirrall - Full Stack Developer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=Caveat+Brush|Caveat:400,700" rel="stylesheet">
        <script src="https://use.fontawesome.com/22d5991346.js"></script>
        
        <link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
       
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"
                    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
                    crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        <script type="text/javascript" src="/scripts/script.js"></script>   
        
    </head>
    <body>
    
        <nav class="navbar navbar-default" id="navbarTop">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarLinks" aria-expanded="false">
                        <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" href="/">Craig Pirrall</a>-->
                </div>
                <div class="collapse navbar-collapse" id="navbarLinks">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/home#hire" id="hireMe">Hire Me!</a></li>
                        <li><a href="/" >Home</a></li>
                        <li><a href="/home#samples">Samples</a></li>
                        <li><a href="/home#about">About</a></li>
                        <li><a href="/home#contact">Contact</a></li>
                        
                    </ul>

                </div>
            </div>
        </nav>
        
        <div class="container">
            
            
        </div>



<div  id="titleBox">
    <div class="container">
        <h1 id="meTitle">| &nbspCraig Pirrall&nbsp |</h1>
        <h2>What can we build together?</h2>
        <a href="#samples"><i id="scrollDown" class="fa fa-chevron-circle-down" aria-hidden="true"></i></a>
    </div>
</div>


<!--========================
        SAMPLES
========================-->

<!--Show projects on homepage ordered by order id-->
<div class="container sections" id="samples">
    <h1>- Samples -</h1>
    <div class="row text-center thumbContainer">
        
        <!--for each project, add the order id to the array-->
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
        <!--sort the array from lowest to highest-->
        
        <!-- Show projects by calling from array by order-->
        
            
                
            
                
            
                
            
                
            
                
            
                
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/5a3a0f996ba2820011a8ff44">
                                <h2>Travel Journal</h2>
                                <img src="https://github.com/Pixelsavvy72/travel-journal/blob/master/screenshots/03.png?raw=true">
                                <div class="captions">
                                    Angular single page app that gives users the ability to display their images and travel notes as they travel. As users add entries they are displayed in a list for easy navigation.<br /><br />
                                    Angular 5, Node.js, Express, Typescript, Javascript, HTML, CSS
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
             <!--end forEach-->
        
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/59156975b1a7d10bfa245569">
                                <h2>Overlook Resort Hotel</h2>
                                <img src="https://github.com/Pixelsavvy72/Resort-Hotel-Demo/raw/master/ResortHotelScreenshot01.png">
                                <div class="captions">
                                    A mobile-first hotel website that provides information about the hotel facilities as well as account and reservation management for both customers and staff.<br /><br />
                                    C#, ASP.NET, SQL, Enitity Framework, Javascript, Bootstrap, JQuery, HTML5, CSS3
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
            
                
            
                
            
                
            
                
            
                
            
                
             <!--end forEach-->
        
            
                
            
                
            
                
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/591825217b1b5a10197f4448">
                                <h2>Portfolio Site</h2>
                                <img src="/images/CraigPortfolioHomeLoggedIn.png">
                                <div class="captions">
                                    This mobile-first portfolio website combines design and functionality by utilizing forms and dynamic data to create new projects in one easy step.<br /><br />
                                    Node.js, Express, MongoDB, Javascript, jQuery, HTML5, CSS3 
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
            
                
            
                
            
                
             <!--end forEach-->
        
            
                
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/5916686935e5430895f0003a">
                                <h2>Employment Submission Tracker</h2>
                                <img src="https://raw.githubusercontent.com/Pixelsavvy72/Employment-Submission-Tracker/master/EmploymentSubmissionTracker.png">
                                <div class="captions">
                                    A Microsoft Windows desktop application that makes it easy to track your job-hunting submissions when Excel just won&#39;t do. Attractive, easy, and fun.<br /><br />
                                    C#, Windows Forms, .NET, SQL, Entity Framework
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
            
                
            
                
            
                
            
                
            
                
             <!--end forEach-->
        
            
                
            
                
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/5916f873bc20fe0844a4aee2">
                                <h2>Salary Tracker</h2>
                                <img src="https://github.com/Pixelsavvy72/Salary-Calculator/blob/master/SalaryCalcScreenshotDateRangeView.png?raw=true">
                                <div class="captions">
                                    Keeping tabs on your monthly payment can be a drag. This web application helps users by tracking their hours worked and how much they were paid. <br /><br />
                                    C#, ASP.NET, SQL, Enitity Framework, Javascript, Bootstrap, JQuery
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
            
                
            
                
            
                
            
                
             <!--end forEach-->
        
            
                
            
                
            
                
            
                
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/59166e6235e5430895f0003b">
                                <h2>WordPress Themed Website</h2>
                                <img src="/images/CraigsdeskHomeTop.png">
                                <div class="captions">
                                    My hobby website. This initially started as a blog site and grew from there. Come for the code, stay for the art.<br /><br />
                                    Wordpress, Genesis Framework, Customized Minimum Theme, Yoast SEO, Assorted Plugins
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
            
                
            
                
             <!--end forEach-->
        
            
                
            
                
            
                
            
                
            
                
            
                
                    
                    <div class="col-xs-12 col-md-6 col-lg-4 nohover">
                        <div class="thumbnail indexThumbnail">
                            <a class="nohover" style="color: black;" href="/projects/59bb989d289a5000110e2cc0">
                                <h2>Interactive Fiction Designer</h2>
                                <img src="https://github.com/Pixelsavvy72/Portfolio-Site/blob/master/public/images/DiveNotLoggedIn.png?raw=true">
                                <div class="captions">
                                    In Progress - This single page Angular app gives users an easy way to create interactive fiction. Pages can be added, edited, and deleted. Includes 2 way data-binding for instantaneous image previews.<br /><br />
                                    Angular 4, Typescript, Node.js, Firebase, Javascript, HTML5, CSS3 
                                </div>
                            </a>
                        </div> <!--end thumbnail-->
                        <hr class="indexHr">
                    </div>
                    
                
            
                
             <!--end forEach-->
          <!-- end for --> 
    </div> <!--end row-->
</div>  <!-- End samples container -->

<!--========================
        ABOUT
========================-->

<div class="container sections" id="about">
    <h1>- About -</h1>
    <div class="container">
        <p>I'm a full-stack web developer with a focus on creativity. I love making things. It doesn’t matter if it’s developing applications, creating art, or building Lego with my children. Creativity is what keeps life exciting. I have been fortunate to have had the freedom in my professional career to exercise creativity through the building of products, services, systems, and staff. Through training and education I've also helped others to be creative and build their own dreams. 
            <br /> <br />
            What can we build together? If I can be of assistance to you or your organization I'd love to <a href="#contact">hear</a> from you.</p>        
    </div>
    
</div>

<!--========================
        HIRE ME
========================-->

<div class="container sections" id="hire">
    <h1>- Hire Me! -</h1>
    <div class="container">
        <p>Thank you for your interest. I am available for permanent full-time employment or on a per project basis. You can read the details of my work history and all of the traditional professional information at my <a href="https://www.linkedin.com/in/craig-pirrall-58815631/" target="_blank">Linkedin</a> profile. I am actively looking for web development positions in America, Canada, or Japan but I would be happy to discuss opportunities in other locations as well. Let's <a href="#contact">talk!</a></p>
    </div>
    
</div>


<!--========================
        CONTACT
========================-->

<div class="container sections" id="contact">
    <h1>- Contact -</h1>
    <div class="row">
        <div class="container col-xs-12 col-md-4" id="email">
            <a href="mailto:craigpir@outlook.com"><i class="fa fa-envelope contactIcons" aria-hidden="true"></i></a>
        </div>
        <div class="container col-xs-12 col-md-4" id="linkedin">
            <a href="https://www.linkedin.com/in/craig-pirrall-58815631/" target="_blank"><i class="fa fa-linkedin-square contactIcons" aria-hidden="true"></i></a>
        </div>
        <div class="container col-xs-12 col-md-4" id="twitter">
            <a href="https://twitter.com/Pixelsavvy72" target="_blank"><i class="fa fa-twitter contactIcons" aria-hidden="true"></i></a>
        </div>

    </div>
</div>


    </body>
    <footer>
        <hr>
        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container text-center">
                <span><a href="/" >Home | </a></span>
                <span><a href="/home#samples">Samples | </a></span>
                <span><a href="/home#about">About | </a></span>
                <span><a href="/home#contact">Contact | </a></span>
                
                    <span><a href="/login">Login | </a></span>
                
                <span><a href="#navbarTop">Top</a></span>
            
            </div>
            
        </div>


    </footer>
</html>