index.html

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>David Petrey Web Developer</title>
    <meta name="description" content="David Petrey Web Developer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="sss/sss.css">


</head>

<body>
    <!-- <header id="nav">
        <div class="custom-wrapper pure-g" id="menu">
            <div class="pure-u-1 pure-u-md-1-2">
                <div class="pure-menu">
                    <a href="index.html" id="header-name" class="pure-menu-heading custom-brand">Home</a>
                    <a href="javascript:void(0)" class="custom-toggle" id="toggle">
                        <s class="bar"></s>
                        <s class="bar"></s>
                    </a>
                </div>
            </div>
            <div class="pure-u-1 pure-u-md-1-2">
                <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
                    <ul class="pure-menu-list">
                        <li class="pure-menu-item"><a href="#badges-top" class="pure-menu-link">About</a></li>
                        <li class="pure-menu-item"><a href="portfolio.html" class="pure-menu-link">Portfolio</a></li>
                        <li class="pure-menu-item"><a href="contact.html" class="pure-menu-link">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header> -->


    <section class="title-section">
        <div class="title-container">
            <div class="lr-border">
                <h1>David Petrey
                    <br> web developer
                </h1>
            </div>
            <div class="tb-border">
            </div>
        </div>
        <div class="intro">
            <div class="container">
              <div>
                Hi, I'm Dave.
                <br>I'm a Front-End Web Developer with a passion for creating excellent customer experiences... <em>with code</em>.

              </div>
                <a class="view-button" href="portfolio.html">View my portfolio</a>
            </div>

        </div>
    </section>


    <section class="port">

        <div class="container clear">
            <div id="portScroll"></div>
            <h1>Portfolio</h1>

            <div class="nasa-api clear">
                <h3>
                    Images From Space
                    <p><span>Small Ajax project using NASA's Mars Rover API</span></p>
                </h3>
                <div class="ex-wrapper col-12 col-10-tablet clear">
                    <a href="/nasa-api/" target="_blank">
                        <span></span>
                        <img src="img/new/images-from-space2-opt.png" class="img-fluid">
                        <span>Try it</span>
                    </a>
                </div>
            </div>


			<div class="lennox">
				<h3>Lennox International</h3>
				<div class="wyw">
					<div class="ex-wrapper col-12 col-10-tablet clear">
						<h4 class="">Warranty Your Way Product Registration Web Application</h4>
						<p>
							<span>11ty Framework, Javascript, AJAX, Custom REST API's, Google Autocomplete and reCAPTCHA integration</span>
						</p>
						<div class="slider2">
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-1-home.jpg" class="img-fluid"> <span>Go to WarrantyYourWay.com</span> </a>
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-2-home modal.jpg" class="img-fluid"> <span>Go to WarrantyYourWay.com</span> </a>
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-3-form.jpg" class="img-fluid"><span>Go to WarrantyYourWay.com</span> </a>
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-4-form validation.jpg" class="img-fluid"><span>Go to WarrantyYourWay.com</span> </a>
							<!-- <a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-5-equipment.jpg" class="img-fluid"><span>Go to WarrantyYourWay.com</span> </a> -->
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-7-equipment2.jpg" class="img-fluid"><span>Go to WarrantyYourWay.com</span> </a>
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-8-coverage.jpg" class="img-fluid"><span>Go to WarrantyYourWay.com</span> </a>
							<a href="https://www.warrantyyourway.com" target="_blank"> <img src="img/new/wyw-9-review.jpg" class="img-fluid"><span>Go to WarrantyYourWay.com</span> </a>
						</div>
					</div>
				</div>


				<div class="ex-wrapper col-12 col-8-tablet clear">
					<h4>LennoxPros.com Marketing and Content pages</h4>
					<div class="slider1">
						<div class="">
							<a href="https://www.lennoxpros.com/news/new-proposal-builder-1803" target="_blank">
								<img src="img/new/lennox-lp-sm-1.jpg" class="img-fluid" alt="New Proposal Builder information page">
								<span>Visit page</span>
							</a>
						</div>
						<div class="">
							<a href="https://www.lennoxpros.com/warranty-your-way" target="_blank">
								<img src="img/new/lennox-lp-sm-3.jpg" class="img-fluid" alt="Warranty Your Way landing page">
								<span>Visit page</span>
							</a>
						</div>
						<div class="">
							<a href="https://www.lennoxpros.com/news/merit-series" target="_blank">
								<img src="img/new/lennox-lp-sm-2.jpg" class="img-fluid" alt="Merit Series information page">
								<span>Visit page</span>
							</a>
						</div>
					</div>
				</div>
			</div>


		</div>


		<div class="container clear">

            <h3>Oak Cliff Bible Fellowship
                <p>
					<span> I worked on this project at AM Digital Agency. Implemented various features and fixes, performed testing, and developed custom post types along with their templates and pages.</span>
				</p>
            </h3>


            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="https://www.ocbfchurch.org" target="_blank">
                    <span>Oak Cliff Bible Fellowship</span>
                    <img src="img/ocbf1.jpg" class="img-fluid">
                </a>
            </div>
            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="https://www.ocbfchurch.org/careeropportunities/career-search-home/" target="_blank">
                    <span>Careers Search page</span>
                    <div class="i-container">
                    <img src="img/ocbf3.jpg" class="img-fluid">
                    </div>
                </a>
            </div>

        </div>


        <div class="container clear">

            <h3>T-Mobile Email templates &amp; Landing pages

                <p>Tech: <span>HTML, CSS, JavaScript, jQuery</span></p>
            </h3>

            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="tmobile/EM/email.html" target="_blank">
                    <span>T-Mobile HTML Email</span>
                    <img src="img/t-mobile-em.jpg" class="img-fluid">
                </a>
            </div>
            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="tmobile/LP/index.html" target="_blank">
                    <span>T-Mobile Landing page</span>
                    <img src="img/t-mobile-lp.jpg" class="img-fluid">
                </a>
            </div>

        </div>

        <div class="container clear reap">

            <h3>Websites built while working at Reap Marketing
                <p>Tech: <span>HTML5, CSS3, Bootstrap, JavaScript, jQuery, PHP, SQL, WordPress, Shopify, Git, Optimizely, Litmus</span></p>
            </h3>


			<div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="https://lightingconnection.com/products/everly-pendant-1" target="_blank">
                    <span>Lighting Connection:</span>
                    <p class="p-descript">Shopify Product detail page redesign</p>
                    <img src="img/lc.jpg" class="img-fluid">
                </a>
            </div>
            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="https://www.asdonline.com" target="_blank">
                    <span>ASD MARKETWEEK:</span>
                    <p class="p-descript">Homepage and Optimizely testing</p>
                    <img src="img/asd.jpg" class="img-fluid">
                </a>
            </div>


			<div class="ex-wrapper col-12 col-6-tablet clear">
				<a href="http://go.thedec.co/we-work-uptown" target="_blank">
					<span>Dallas Entrepreneur Center:</span>
					<p class="p-descript">Landing page</p>
					<img src="img/dec.jpg" class="img-fluid">
				</a>
			</div>
            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="https://www.robcarman.com" target="_blank">
                    <span>Robcarman:</span>
                    <p class="p-descript">WordPress complete site build</p>
                    <img src="img/rc.jpg" class="img-fluid">
                </a>
            </div>


        </div>


        <div class="container clear">

            <h3>Custom WordPress sites I built while working at AutoRevo
                <p>Tech: <span>HTML5, CSS3, JavaScript, jQuery, WordPress, WordPress Plugins, Base, Font Awesome & Google Font</span></p>
            </h3>


            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="http://www.texashotrides.com" target="_blank">
                    <span>Texas Hot Rides (2015)</span>
                    <img src="img/texashotrides.jpg" class="img-fluid">
                </a>
            </div>
            <div class="ex-wrapper col-12 col-6-tablet clear">
                <a href="javascript:void(0)">
                    <span>Corvette Center Dallas (2015)</span>
                    <img src="img/ccdallas.jpg" class="img-fluid">
                </a>
            </div>

        </div>

    </section>


    <footer>
        <section>
                <span>
                    <a href="https://www.linkedin.com/in/davidpetrey" target="_blank">Linkedin</a>
                    <a href="https://github.com/davidpetrey" target="_blank">GitHub</a>
                </span>
                <span>
                    &copy; 2022 David Petrey
                </span>
        </section>
    </footer>


    <script src="js/vendor/jquery-1.12.2.min.js"></script>
    <!-- <script src="js/menu.js"></script> -->


	<script src="sss/sss.min.js"></script>


	<script>
		// import { tns } from "node_modules/tiny-slider/src/tiny-slider.js";
      $(document).ready(function() {
          $("a.view-button").click(function(event) {
              event.preventDefault();
				document.getElementById('portScroll').scrollIntoView({
				behavior: 'smooth'
			});
        });


		$('.slider1').sss({
			slideShow : true, // Set to false to prevent SSS from automatically animating.
			startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
			transition : 400, // Length (in milliseconds) of the fade transition.
			speed : 5000, // Slideshow speed in milliseconds.
			showNav : true // Set to false to hide navigation arrows.
		});

		$('.slider2').sss({
			slideShow : true,
			startOn : 0,
			transition : 400,
			speed : 4000,
			showNav : true
		});

      });
	</script>
</body>

</html>