Luke Kwitek

Web Developer

Fueled by a rekindled passion for creative problem-solving through coding. While I work to master new front-end and back-end development tools, my extensive client service experience allows me to bridge the gap between technical expertise and strong customer relationships. I thrive in innovative environments where sustainable coding solutions are created through collaboration, empowerment and customer trust.‎

Resume An illuminated MacBook sitting partially open in the dark

Capstone

A Fully Implemented E-commerce Site

An e-commerce shop featuring custom theme, design, branding, and code. Functional product shop with card layout. Large gallery style single product details, and customer reviews. Product images feature lightbox viewing. Functional payment processing, order processing and shipping via WooCommerce Payments and WooCommerce Shipping.

Front-end:

  • HTML
  • CSS
  • JS
  • jQuery

Back-end:

  • PHP
  • MySQL
  • Azure App
  • Azure Frontdoor CDN
  • Nginx
  • WordPress
  • WooCommerce/Shipping/Payments
  • WP Super Cache
  • WP Mail SMTP
  • phpMyAdmin
  • Google Analytics/Site Kit

Grid Design

Responsive Grid Layout

A responsive site design featuring a grid layout, hamburger navigation, animated cards, form validation and google maps integration.

Front-end:

  • HTML
  • CSS
  • JS
  • jQuery

Back-end:

  • Static
  • Google Maps

Flex Design

Responsive Flex Layout with Form Validation

A responsive website featuring hamburger navigation, card layout blog posts and reactive form validation.

Front-end:

  • HTML
  • CSS
  • JS

Back-end:

  • Static

WordPress

Content Management System and NWTC WordPress

A hub and spoke site mockup for the NWTC College of Business. Wordpress pre-fab theme, Google Analytics, Mailchimp email marketing, Jetpack social media pushing and Ninja form management.

Front-end:

  • HTML
  • CSS
  • JS
  • jQuery

Back-end:

  • Apache
  • MySQL
  • PHP
  • WordPress
  • phpMyAdmin
  • Google Analytics/Site Kit
  • Mailchimp

PHP

Blog

A blog capable of account creation, password protection and a back-end for editing. Sample of index:

Front-end:

  • HTML
  • CSS
  • JS
  • jQuery

Back-end:

  • Apache
  • MySQL
  • PHP
  • phpMyAdmin

<?php
## Set the timezone to your location
ini_set("date.timezone", "America/Chicago");

require_once '../includes/connection.php';

// Updated New Functions: convertToParas() and getFirst() php-7-solutions/Ch16/utility_funcs.php
require_once '../includes/utility_funcs.php';
// create database connection
$conn = dbConnect('read');
$sql = "SELECT
            article_id,
             image_id,
            title, 
            article, 
            DATE_FORMAT(created, '%W, %M %D, %Y') AS created_date, 
            filename, 
             caption
        FROM php_blog_blog 
        LEFT JOIN php_blog_images USING (image_id)
        ORDER BY created DESC"; //sorting by created 20xx-xx-xx not the alias

$result = $conn->query($sql);
if (!$result) {
    $error = $conn->error;
}


# Page specific variables.
$nav = "blog";
$title_section = "Blog";

# include functions
# Create a human friendly name based on file name.
include("../includes/title-page-name.php");

# The header section of the layout.
include("../includes/header.php");
?>

        <main>
            <h2>Local-<?php echo $title_section; ?><span><?php echo $title_page_name; ?></span></h2>

            <?php if (isset($error)) {
                echo "<p>$error</p>";
            } else {
                while ($row = $result->fetch_assoc()) {
                    echo "<h2 class=\"clear\">" . safe($row['title']) . "<span>{$row['created_date']}</span></h2>";
            ?>
                     <?php if (!empty($row['filename'])) { ?>
            
                <img src="/php/blog/images/thumbs/<?= safe($row['filename']) ?>" alt="<?= safe($row['caption']) ?>">
                
           
            <?php } 
                    if ($row) {
                    
                    $extract = getFirst($row['article']);
                    echo '<p>' . safe($extract[0]);
                    if ($extract[1]) {
                        echo '<a href="details.php?article_id=' . $row['article_id'] . '">
                            Read More&hellip;</a>';
                    }
                    echo '</p>';
                }
            }
}
            ?>
        </main>
<?php
# The side-bar section of the layout use custom path to load from a different folder.
include("sidebar.php");

# The footer section of the layout.
include("../includes/footer.php");
?>

JavaScript

jQuery Form Validation, JSON Loading, Location and Google Maps

Form validation using the jQuery Form Validation plugin, containing 3 inputs, a radio group, selects, check boxes and a text area. Requirement for all forms completed and the use of the 'novalidate' attribute. Additionally, create a JSON API call and load items into a page. Lastly, loading a Google Map and integrating the user's location.

Front-end:

  • HTML
  • CSS
  • JS
  • jQuery

Back-end:

  • N/A
$(function () {
            $("#form").validate({
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                    if (element.attr("name") == "vehicleType"
                        || element.attr("name") == "services[]") {
                        error.prependTo(element.parent());
                    }
                },
                success: function (label) {
                    label.parent().removeClass("error-parent");
                },
                highlight: function (element, errorClass) {
                    $(element).parent().addClass("error-parent");
                    $(element).parent().find(".error").fadeOut(function () {
                        $(this).fadeIn();
                    });
                },
                rules: {
                    username: {
                        required: true,
                        minlength: 5
                    },
                    password: {
                        required: true,
                        minlength: 7
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    vehicleType: {
                        required: true
                    },
                    'services[]': {
                        required: true,
                        minlength: 2
                    },
                    make: {
                        required: true
                    },
                    comments: {
                        required: true,
                    },
                },
                messages: {
                    username: {
                        required: "Please enter a username",
                        minlength: "Your username must consist of at least 5 characters"
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 7 characters long"
                    },
                    vehicleType: {
                        required: "Please select your vehicle type."
                    },
                    'services[]': {
                        required: "Please choose at least 4 services.",
                        minlength: "You must choose at least 4 services."
                    },
                    comments: {
                        required: "Please leave your feedback!"
                    }
                }
            }); 
        });
      
      $(function () {
      
        $.getJSON('https://randomuser.me/api/?results=5')
                .done(function (user) {
                    var newContent = '';
      
                    for (var i = 0; i < user.results.length; i++) { // Loop through object
                        newContent += '<div class="container">';
                        newContent += '<h2>Name&colon; ' + user.results[i].name.first + ' ' + user.results[i].name.last + '</h2>';
                        newContent += '<p>Email&colon; ' + user.results[i].email + '<br>';
                        newContent += '<b>Phone&colon; ' + user.results[i].phone + '</b></p>';
                        newContent += '</div>';
                    }
      
                     // Update the page with the new content
                    document.getElementById('content').innerHTML = newContent;
      
                }).fail(function () {
                    console.log('Failed to load user data.');
                });
      });
      
      var msg = 'Sorry, we were unable to get your location.';    // No location msg
      
      navigator.geolocation.getCurrentPosition(success, fail);  // Ask for location
      
      function success(position) {
        buildGoogleMap(position.coords.latitude, position.coords.longitude);
      }
      
      function fail(msg) {
        console.log('Could not find your location!');
      }
      
      function buildGoogleMap(lat, lon) {
      
        var mapOptions = {
          zoom: 18,
          center: {
            lat: lat,
            lng: lon
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          panControl: false,
          zoomControl: true,
          zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_RIGHT
          },
      
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.TOP_LEFT
          },
      
          scaleControl: true,
          scaleControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER
          },
          streetViewControl: false,
          overviewMapControl: false,
      
          styles: [
            {
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#242f3e"
                }
              ]
            },
            {
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#746855"
                }
              ]
            },
            {
              "elementType": "labels.text.stroke",
              "stylers": [
                {
                  "color": "#242f3e"
                }
              ]
            },
            {
              "featureType": "administrative.land_parcel",
              "elementType": "labels",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative.locality",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#d59563"
                }
              ]
            },
            {
              "featureType": "poi",
              "elementType": "labels.text",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "poi",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#d59563"
                }
              ]
            },
            {
              "featureType": "poi.park",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#263c3f"
                }
              ]
            },
            {
              "featureType": "poi.park",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#6b9a76"
                }
              ]
            },
            {
              "featureType": "road",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#38414e"
                }
              ]
            },
            {
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": [
                {
                  "color": "#212a37"
                }
              ]
            },
            {
              "featureType": "road",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#9ca5b3"
                }
              ]
            },
            {
              "featureType": "road.arterial",
              "elementType": "labels",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#746855"
                }
              ]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [
                {
                  "color": "#1f2835"
                }
              ]
            },
            {
              "featureType": "road.highway",
              "elementType": "labels",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "road.highway",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#f3d19c"
                }
              ]
            },
            {
              "featureType": "road.local",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "road.local",
              "elementType": "labels",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "transit",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#2f3948"
                }
              ]
            },
            {
              "featureType": "transit.station",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#d59563"
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#17263c"
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#515c6d"
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "labels.text.stroke",
              "stylers": [
                {
                  "color": "#17263c"
                }
              ]
            }
          ]
        };
      
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      
        var marker = new google.maps.Marker({
          position: {
            lat: lat,
            lng: lon
          },
          map: map,
          animation: google.maps.Animation.DROP,
          icon: "img/cat.png"
        });

ASP.NET(C#)

Bookstore with Filtering and Back-end Model Interaction

A bookstore page following the Model-View-Controller design pattern. The store site features an option to filter by Author, Location, Publisher, styled by CSS/Bootstrap and the back-end is supported through Entity Framework and Microsoft SQL Server and queries through SQL and LINQ. Code snippets below represent the View, while the C# section contains a sample of Models and Controllers.

Front-end:

  • HTML
  • CSS/Bootstrap
  • JS

Back-end:

  • ASP.NET MVC
  • C#
  • Razor
  • Entity Framwork
  • Microsoft SQL Server
  • SQL and LINQ
@{
  ViewBag.Title = "Home Page";
}
<h2 class="text-danger text-center">FOR INTERNAL USE ONLY</h2>
<div class="row">
    <div class="col-md-3">
        <div class="panel-group">
            <div class="panel panel-success">
                <div class="panel-heading text-center">Browse Inventory</div>
                <div class="panel-body">
                    <a href='@Url.Action("Inventory","Home")'>
                        <img class="img-rounded" src='@Url.Content("~/Content/Images/inventory.jpg")' />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel-group">
            <div class="panel panel-success">
                <div class="panel-heading text-center">Browse Author</div>
                <div class="panel-body">
                    <a href='@Url.Action("Index","Author")'>
                        <img class="img-rounded" src='@Url.Content("~/Content/Images/author.jpg")' />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel-group">
            <div class="panel panel-success">
                <div class="panel-heading text-center">Browse by Publisher</div>
                <div class="panel-body">
                    <a href='@Url.Action("Index","Publisher")'>
                        <img class="img-rounded" src='@Url.Content("~/Content/Images/publisher.jpg")' />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel-group">
            <div class="panel panel-success">
                <div class="panel-heading text-center">Browse by Location</div>
                <div class="panel-body">
                    <a href='@Url.Action("Index","Location")'>
                        <img class="img-rounded" src='@Url.Content("~/Content/Images/bookstore.jpg")' />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

C#

Controllers and Model for Bookstore

In addition to coding Visual C# to learn the principals of Object-Orientated Programming (Abstraction, Encapsulation, Inheritance and Polymorphism), C# was then later used with ASP.NET MVC for server side coding. Code examples reflected below are a Controller and Model file from the ASP.NET bookstore project.

Front-end:

  • N/A

Back-end:

  • C#
using BookStore.Models;
using BookStore.Models.DatabaseFramework;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BookStore.Controllers {
  public class HomeController : Controller {
    private BookStoreEntities database = new BookStoreEntities();
    public ActionResult Index() { return View(); }

    public ActionResult Inventory() {
      ViewBag.Message = "
      Browse Inventory& quot;
      ;

      List& lt;
      BOOK& gt;
      bookList = database.BOOK.ToList();

      return View(bookList);
    }

    public ActionResult Contact() {
      ViewBag.Message = "
      Contact Us& quot;
      ;

      return View();
    }
    [HttpPost]
    public JsonResult Contact(Feedback model) {
      ViewBag.Message = "
      Your registration page.& quot;
      ;

      if ((String.IsNullOrEmpty(model.firstName)) ||
          (String.IsNullOrEmpty(model.lastName)) ||
          (String.IsNullOrEmpty(model.email)) ||
          (String.IsNullOrEmpty(model.confirmEmail)) ||
          (String.IsNullOrEmpty(model.location)) ||
          (String.IsNullOrEmpty(model.comments))) {
        ModelState.AddModelError(
            " ", "
            Please Complete Every Field in the Form & quot;);
      }
      return Json(model);
    }
  }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BookStore.Models
{
    public class AuthorFilterSearch
    {
        public string UserAuthorSelected { get; set; }
        public IEnumerable<SelectListItem> AllAuthorOptions { get; set; }
    }
}

SQL

Horse Race Database

Table creation, read, update and deletion of a horse racing database. This includes data manipulation, multiple table queries, view creation, triggers and the use of a cursor.

Front-end:

  • N/A

Back-end:

  • Microsoft SQL Server
  • T-SQL

-- LUKE KWITEK
-- SQL FINAL

-- PHYSICAL DESIGN
CREATE TABLE OWNER(
OWNER_ID INT IDENTITY(1,1) PRIMARY KEY,
OWNER_FNAME VARCHAR(50) NOT NULL,
OWNER_LNAME VARCHAR(50) NOT NULL
)

CREATE TABLE TRAINER(
TRAINER_ID INT IDENTITY(1,1) PRIMARY KEY,
TRAINER_FNAME VARCHAR(50) NOT NULL,
TRAINER_LNAME VARCHAR(50) NOT NULL,
TRAINER_FEE DECIMAL(7,2) NOT NULL,
HORSE_WIN BIT
)

CREATE TABLE RACE(
RACE_ID INT IDENTITY(1,1) PRIMARY KEY,
RACE_NAME VARCHAR(250) NOT NULL,
RACE_PURSE DECIMAL(10,2) NOT NULL,
RACE_DATE DATE
)

CREATE TABLE JOCKEY(
JOCKEY_ID INT IDENTITY(1,1) PRIMARY KEY,
JOCKEY_FNAME VARCHAR(50) NOT NULL,
JOCKEY_LNAME VARCHAR(50) NOT NULL
)

CREATE TABLE HORSE(
HORSE_ID INT IDENTITY(1,1) PRIMARY KEY,
HORSE_NAME VARCHAR(100) NOT NULL
)

CREATE TABLE HORSE_OWNER(
HORSE_ID INT REFERENCES HORSE(HORSE_ID) NOT NULL,
OWNER_ID INT REFERENCES OWNER(OWNER_ID) NOT NULL,
PRIMARY KEY (HORSE_ID, OWNER_ID)
)

CREATE TABLE HORSE_JOCKEY(
HORSE_ID INT REFERENCES HORSE(HORSE_ID) NOT NULL,
JOCKEY_ID INT REFERENCES JOCKEY(JOCKEY_ID) NOT NULL,
PRIMARY KEY (HORSE_ID, JOCKEY_ID)
)

CREATE TABLE HORSE_TRAINER(
HORSE_ID INT REFERENCES HORSE(HORSE_ID) NOT NULL,
TRAINER_ID INT REFERENCES TRAINER(TRAINER_ID) NOT NULL,
PRIMARY KEY (HORSE_ID, TRAINER_ID)
)

CREATE TABLE HORSE_RACE(
RACE_ID INT REFERENCES RACE(RACE_ID) NOT NULL,
HORSE_ID INT REFERENCES HORSE(HORSE_ID) NOT NULL,
PRIMARY KEY (RACE_ID, HORSE_ID)
)

-- DATA MANIPULATION
-- SINGLE TABLE QUERIES (5)
---- Provide the first and last name of each trainer.
SELECT TRAINER_FNAME, TRAINER_LNAME
FROM TRAINER

---- Provide the average of the race purses.
------ Contains 1 Non-aggregate Function AVG
SELECT AVG(RACE_PURSE) AS PURSE_AVERAGE
FROM RACE

---- Add a jockey to the horse racing database.
INSERT INTO JOCKEY(JOCKEY_FNAME, JOCKEY_LNAME)
	        VALUES('Michael', 'Bluth')

---- Change the purse for the Kentucky Derby.
UPDATE RACE
   SET RACE_PURSE = 2000000.00
 WHERE RACE_NAME = 'Kentucky Derby'

---- Remove the race with an ID of 1.
DELETE RACE
 WHERE RACE_ID = 1

 -- MULTIPLE TABLE QUERIES(5)
 ---- Which horse(s) does Michael Bluth ride?
SELECT h.HORSE_NAME
  FROM HORSE h INNER JOIN HORSE_JOCKEY hj ON h.HORSE_ID = hj.HORSE_ID
                INNER JOIN JOCKEY j ON j.JOCKEY_ID = hj.JOCKEY_ID
 WHERE j.JOCKEY_FNAME = 'Michael' AND j.JOCKEY_LNAME = 'Bluth'

---- Which horse(s) are in the Kentucky Derby?
SELECT h.HORSE_NAME
  FROM HORSE h INNER JOIN HORSE_RACE hr ON h.HORSE_ID = hr.HORSE_ID
                INNER JOIN RACE r ON r.RACE_ID = hr.RACE_ID
 WHERE r.RACE_NAME = 'Kentucky Derby'

---- Which jockeys will be competing in a race with a $500,000 or above purse.
SELECT j.JOCKEY_FNAME, j.JOCKEY_LNAME, r.RACE_NAME
  FROM JOCKEY j INNER JOIN HORSE_JOCKEY hj ON j.JOCKEY_ID = hj.JOCKEY_ID
                INNER JOIN HORSE h ON h.HORSE_ID = hj.HORSE_ID
				INNER JOIN HORSE_RACE hr ON h.HORSE_ID = hr.HORSE_ID
				INNER JOIN RACE r ON hr.RACE_ID = r.RACE_ID
 WHERE r.RACE_PURSE >= 500000

---- Which trainer is training each horse?
------ Contains 3 Non-aggregate Functions LTRIM, UPPER and LOWER
SELECT UPPER(LTRIM(t.TRAINER_FNAME)), LOWER(LTRIM(t.TRAINER_LNAME)), h.HORSE_NAME 
FROM TRAINER t INNER JOIN HORSE_TRAINER ht ON t.TRAINER_ID = ht.TRAINER_ID
               INNER JOIN HORSE h ON h.HORSE_ID = ht.HORSE_ID

---- Which owner(s) has/have a horse in the Kentucky Derby?
SELECT o.OWNER_FNAME, o.OWNER_LNAME
  FROM OWNER o INNER JOIN HORSE_OWNER ho ON o.OWNER_ID = ho.OWNER_ID
               INNER JOIN HORSE h ON ho.HORSE_ID = h.HORSE_ID
			   INNER JOIN HORSE_RACE hr ON hr.HORSE_ID = h.HORSE_ID
			   INNER JOIN RACE r ON hr.RACE_ID = r.RACE_ID
 WHERE r.RACE_NAME = 'Kentucky Derby'

-- VIEWS
---- Create a view showing the name of each trainer with a fee under $1000.00.
CREATE VIEW AFFORDABLE_TRAINERS AS
	SELECT TRAINER_FNAME, TRAINER_LNAME
	FROM TRAINER
	WHERE TRAINER_FEE  < 1000

---- Create a view showing each race with a prize purse over $500,000.
CREATE VIEW MOST_REWARDING_RACES AS
	SELECT RACE_NAME
	FROM RACE
	WHERE RACE_PURSE > 500000

-- STORED PROCEDURES
---- Create a stored procedure to add a horse to the database.
CREATE PROCEDURE NEW_HORSE
	@name VARCHAR(100)
	AS
	INSERT INTO HORSE
	VALUES (@name)

---- Create a stored procedure to add a owner to the database.
CREATE PROCEDURE NEW_OWNER
	@first_name VARCHAR(50),
	@last_name VARCHAR(50)
	AS
	INSERT INTO OWNER
	VALUES (@first_name, @last_name)

-- TRIGGERS
---- Create a trigger to increase the prize purse of each race by $100,000 when a new horse is added to the database.
CREATE TRIGGER PURSE_INCREASE
            ON HORSE
			AFTER INSERT AS
					 UPDATE RACE
					    SET RACE_PURSE = RACE_PURSE + 100000

---- Create a trigger to increase the fee for a trainer by $100.00 when their horse wins (HORSE_WIN = 1).
------ Contains CURSOR
CREATE TRIGGER TRAINER_WIN
			ON TRAINER
		 AFTER UPDATE AS

		 DECLARE @trainerID INT
		 DECLARE UpdatedTrainers CURSOR FOR
							(SELECT i.TRAINER_ID
							FROM INSERTED i INNER JOIN DELETED d ON i.TRAINER_ID = d.TRAINER_ID
							WHERE i.HORSE_WIN = 1 AND d.HORSE_WIN = 0)
		OPEN UpdatedTrainers
		FETCH NEXT FROM UpdatedTrainers INTO @trainerID
		WHILE @@FETCH_STATUS = 0
		BEGIN
			UPDATE TRAINER
			SET TRAINER_FEE = TRAINER_FEE + 100, HORSE_WIN = 0
			WHERE TRAINER_ID = @trainerID
			FETCH NEXT FROM UpdatedTrainers INTO @trainerID
		END
		CLOSE UpdatedTrainers
		DEALLOCATE UpdatedTrainers
^