Michael Lauridsen's Portfolio

Knowledge

2008-2013

BS - Information Sciences and Technology

Rochester Institute of Technology

Languages / Core Skills

PHP
Javascript
MySQL
CSS
HTML5
Redis
Memcache
Beanstalkd

Frameworks / Libraries

Phalcon
Vue
Astro
jQuery
Bootstrap
Bulma

Architecture / Methodology

Object Oriented Programming
Database Design
Data Modeling & Normalization
MVC Architecture
RESTful API
Web Components
Systems Analysis
UI/UX Design
Responsive Design
Templating
AJAX

Tools / Tech / Misc

Database Migrations
LAMP Administration
Git
Flyway
Sentry
Performance Profiling
NPM / Composer
Iconify

Some Experience / Learning

Alpine

Typescript

Nuxt

Laravel

Livewire

React

Vite

Docker/Devcontainers

Microservices

MongoDB

Node

Sass

Vagrant

Saltstack

Wordpress

Cloudflare

Meteor

Retired

Yarn

Bower

KnockoutJS

Handlebars

Backbone

Webpack

CakePHP

Codeigniter

Dart

C/C++

Java

Just Basic

Experience

January 2014 - October 2023
Internet Marketing Ninjas
Senior Full Stack Engineer
11 Major Projects
Conceptualized and engineered a highly scalable language-agnostic worker system for distributed data mining, normalization, and analysis for dozens of applications and reports
Spearheaded the programming team to adopt best practices by using modern, maintainable, and scalable solutions, enhancing efficiency and effectiveness across all projects
Architected and developed 11 significant projects focused on in-depth data analysis and reporting by harnessing data mining techniques and integrating data from third-party APIs
Launched and developed the company's first premium SEO tool for public sale
Built an SEO reporting dashboard, catering to both internal use and clients with dozens of reports
Led the design and normalization of the primary reporting database, which manages and stores 3 terabytes of data, supporting numerous tools and applications for over 100 clients and websites
Overhauled application logging and error tracking by optimizing data collection and implementing diverse alerting strategies in conjunction with Sentry, resulting in streamlined error resolution, and fostering a more efficient developer workflow
Analyzed performance using profiling techniques to optimize and improve both PHP and Javascript, resulting in faster reports and page loads
Drove initiatives to incorporate AI technology into existing reports, resulting in enhanced quality and effectiveness in delivering additional value and insights to end users
Facilitated the onboarding process and delegated tasks to remote third-party engineers
November 2011 - May 2013
E. Phillip Saunders College of Business
Web Developer Assistant
3 Major Projects
Engineered 3 new major projects to solve software needs for distinct departments while maintaining the public website and other internal web applications
Maintained and completed updates to the public-facing Saunders College of Business websites
Research and learn new web technologies to update legacy codebase and improve performance

Projects

HTML

CSS

Javascript

PHP

MVC

OOP

jQuery

MySQL

Bootstrap

Database Design

Data Modeling

Phalcon

Components

Vue

Beanstalkd

Memcache

Headless Chrome

Alpine

Serverless

Sass

Iconify

Mongo

Bulma

RESTful API

Cloudflare

Datatables

Redis

Typescript

Astro

SVG

Meteor

Microservices

KnockoutJs

Dart

CakePHP

Codeigniter

Localstorage

Wordpress

Underscores Theme

Nuxt

Milligram

Laravel

Livewire

AWS

Bref

XML

2023

Simple application to search the NPI registry

NPI Registry Browser (Nuxt)

Personal Projects

NPI Registry Browser (Laravel)

Personal Projects

NPI Registry Browser (Laravel)

Personal Projects

HTML

CSS

PHP

Javascript

Components

MVC

OOP

Laravel

Livewire

Alpine

Bootstrap

AWS

Bref

Serverless

Sass

Iconify

Search Form

Search Results

Result details

You can click on each row and a modal like this will show more details

Loading Next Page of Results

This is a project I was tasked with doing as part of an interview process. The requirement was that I had to create an application that could query the API for the NPI registry from a backend and then display the results with pagination. Additionally, it was best to use the company’s stack (Laravel, Livewire, Alpine/Vue) to achieve this. I followed a few quick tutorials to get up to speed with Laravel and Livewire quickly since I didn’t have any experience with either. I then used Bref.sh to deploy the project to AWS since that was also something I needed to familiarize myself with.

Try it out here See the project here

Blog

Personal Projects

Portfolio

Personal Projects

IT Vendor Manager

Internet Marketing Ninjas

IT Vendor Manager

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

OOP

MVC

Database Design

Data Modeling

jQuery

Alpine

Phalcon

Bootstrap

Main Dashboard

Here, a quick overview is offered of some statistics and services with upcoming payments due.

All Accounts

Each account is listed with quick access to login credentials.

All Services

All Servers

All Domains

All Payment Methods

Service Calendar

The calendar allows for easy visualization of when services are due.

Service View

Here, service information can be viewed and updated. Additionally, payment history and a change log exist for additional insight into a service.

Account View

Here, accounts can be viewed and updated. Any changes are tracked and displayed in the change log.

Stats

New Payment Method

New Service Form

New Hosting Service Form

Internet Marketing Ninjas manages and owns many services and websites. I developed a database and reporting dashboard to improve how data related to these services is tracked. This information was previously tracked with a multi-tabbed Excel spreadsheet. While this worked, it’s unwieldy to maintain. Additionally, reports were occasionally required for other departments, which was time-consuming. I designed a database to normalize the data in logically appropriate tables. The front end manages the data, exports records when necessary, and creates reports. Due to the number of services being managed, I made sure it was easy to keep track of any that had payments due so that nothing expired or went unpaid.

Paid AI Sensei Tool

Internet Marketing Ninjas

AI Sensei Tool

Internet Marketing Ninjas

AI Sensei Tool

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

Components

OOP

MVC

Database Design

Data Modeling

Vue

Phalcon

Bootstrap

Main Tool Dashboard

Pre-made prompt manager

Prompt Run Manager

Template Profile Manager

Here, admins can create profiles that will be used to fill in any templated fields automatically for pre-made prompts.

Prompt Playlist Manager

I was tasked to create an AI tool for the Client Reporting Dashboard, so I incorporated an AI chatbot that clients could use. To add value, I made an admin panel where Ninjas could add pre-made prompts and categorize them for ease of use. These prompts could also include template fields, some of which would pull from the information stored in the database for the client or that the user would have to fill out. After seeing the kinds of pre-made prompts being made and how they were used, I created prompt playlists. Prompt playlists allowed Ninjas to create pre-made prompts that were intended to be used together. A user can select a playlist, which would automatically slot in the prompts as they are run. One final feature I added was a way for pre-made prompts to be run simultaneously on command for all clients in the Client Reporting Dashboard.

2022

Super Suggest Tool

Internet Marketing Ninjas

2021

Site Performance Tool

Internet Marketing Ninjas

Site Performance Tool

Internet Marketing Ninjas

HTML

CSS

Javascript

MySQL

PHP

MVC

OOP

Database Design

Data Modeling

jQuery

Phalcon

Bootstrap

Headless Chrome

Beanstalkd

Memcache

Site Performance Overview

At a glance, charts and graphs of key metrics are displayed here.

New Data Compilation

When new data is available, the tool will compile it when the user loads the page.

Analyzed Page Listing

Some overview statistics are displayed above the analyzed page listing, where you can see key metrics and quickly find what you're looking for with pre-made filtering.

Site Recommendation & Issues

Each page is analyzed against a checklist of various criteria to determine where improvements can be made or issues might exist.

Site Recommendation & Issues

Each recommendation can be opened up to see details about it and resources on how to resolve it. Additionally, a listing of pages that trigger the recommendation is listed.

Request Listing

Every request made across all pages analyzed is shown here with filters to help find potential issues.

File Listing

Every file brought in across all pages analyzed is shown here with filters to help find potential issues.

CDN Listing

Here, all CDNs detected are listed with some statistics.

Host Breakdown

Here, you can easily find all the hosts of the requests made on your site and some information about them.

Historic Comparison

Here, you can see changes in Core Web Vitals over time.

Page Analysis Card

Individual page cards display Core Web Vital metrics, recommendations, and issues for that specific page.

Page Analysis Stats

Relative performance assessment helps show if this page is an outlier. Additional overview statistics about the page and its performance are shown here.

Page Analysis Requests

A table of requests allows you to easily see what requests were made when the page was loaded with some information about each.

Page Analysis Resource Summary

This is a breakdown of each type of resource included on the page and data about them.

Page Analysis Guide

All of the recommendations and issues for the page are grouped and ordered based on time and difficulty. This provides an easy-to-follow guideline of how to improve the web page.

Page Analysis Task List

All of the recommendations and issues for the page are listed with a breakdown of difficulty.

With the rise in the importance of page speed performance and the core web vital metrics, I was tasked with creating a tool to track performance for a client site in bulk. The first task was to determine how to gather performance statistics. We had already upgraded our crawler with a headless browser system, so I turned to that. After digging into the documentation, I learned that many metrics used for determining the core web vital stats can be gathered when loading a web page with a headless browser. This prompted some tweaking of our crawler workers to gather these stats while performing the necessary throttling that core web vital testing requires. We also needed to have options for mobile crawling. We were ready to collect the necessary data once these changes were implemented.

With a couple hundred pages of a site analyzed, we could offer many insights into the performance and how to fix any potential issues. Much like the YouTube Tracker I made, I created a list of criteria to check to offer advice on resolving specific problems. Recognizing the complex nature of site performance issues, I created a to-do list of fixes and ordered them in such a way as to provide maximum value for time, effort, and scope of results.

2020

Youtube Tracker

Internet Marketing Ninjas

Youtube Tracker

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

MVC

OOP

Database Design

Data Modeling

jQuery

Phalcon

Beanstalkd

Datatables

Bootstrap

Channel Overview

Here, overview information and metrics are displayed for the channel.

Tracked Videos

Listed here are videos that are being tracked along with key metrics.

Channel Timeline

Data gathered every two weeks is used to determine any changes in the channel.

Channel Recommendations

Based on gathered data and analysis of key metrics, issues are highlighted, and recommendations are made to improve the channel.

Recommendation Advice

For each item, advice is given along with a table of videos that result in this recommendation.

YouTube Search Phrase Tracking

To give better insight into competitors for phrases relevant to your channel, we track several search results by analyzing the videos and channels that appear within them.

Competitor Analysis

Suggestions

Here, you can quickly filter and sort videos to gain more insights into their performance.

Video Analysis Card

Information and analysis of individual videos can be seen via these cards.

Video Analysis Card Analytics

Here, in-depth analytics data and performance assessment can be seen.

Video Analysis Card Recommendations

Issues and recommendations are made based on various parameters of the video to help give insight into how to improve videos in the future.

I was given the open-ended task of creating a tool to gather data about YouTube channels and videos; this tool was what I came up with. No specific directions were given, so I researched what metrics are crucial to success on YouTube and other techniques to improve videos. Utilizing data from two different API data sources, the Youtube data v3 and the Youtube analytics API, I gather as much information as possible for a client’s YouTube Channel. I used this data and what I learned in my research to create a list of checks to be performed against both the channel as a whole and individual videos; this allowed me to provide feedback on how to improve. In addition to the checklists, I compiled overview statistics that can be quickly referred to to get an idea of overall performance.

The next part was to determine what “ideal” performance was. This required a comparison against other videos. I started by comparing videos against channel statistics to determine if a video under-performed within its channel. Next, I determined competitor channels and compared them against those. Using the competitor data gave a more complete picture of how videos performed. Using all I have done thus far, I developed a performance rating system to make it even easier to see what videos were doing well and where others needed improvement.

Content Planner

Internet Marketing Ninjas

Content Planner

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

Components

OOP

MVC

Database Design

Data Modeling

jQuery

Headless Chrome

Phalcon

Vue

Beanstalkd

Memcache

Main View

Super Suggest Tool Embedded

AI Generated Phrase Suggestions

Selected Phrase Categorization

Here, users can categorize phrases for a specific page or other pages and set whether it's a commercial or information phrase.

Content Optimization Editor

Here, users can write or edit content and track how well-optimized targeted keyphrases are.

Keyphrase Link Creator

Targeted Phrase Word Cloud

Competitor Stats

Competitor Page Analysis

Content across all competitor sites is analyzed to give important insights into the performance of their content.

Competitor Page Analysis

Here, commonly cited links are compiled from the competitor sites.

The CEO requested that I make a tool that takes several individual tools and combines the results with a few extra features; thus, this tool was born. Using the Featured Snippet tool as a base, a competitor key phrase ranking tool, a competitor page analysis tool, a competitor stat tool, and a keyword suggestion tool were used for sourcing data and comparisons. The goal was to use all of this data to find phrases you want to optimize one of your web pages for or create a web page to capture that traffic.

In addition to using a content editor like the one in the Featured Snippet tool, a tool was included for creating link sets that can be included on the page to link out to other resources with relevant keywords.

As part of the suite of competitor analysis tools, I also created a content analysis tool that utilized a headless browser to scrape just the main content of pages to compare against one another. I used a natural language processing library to create scores, relevancy ratings, and importance ratings for pages and commonly shared terms.

2018

Paid Snippet Tool

Internet Marketing Ninjas

Paid Snippet Tool

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

Components

OOP

MVC

Database Design

Data Modeling

jQuery

Beanstalkd

Memcache

Phalcon

Redis

Vue

Bootstrap

Bulma

Dashboard

Here, all recurring runs are listed along with all reports run.

New Run Form

Ticket Dashboard

Knowledge Center Admin

Here, the knowledge center could be managed. Various stats are also displayed.

User Settings

Public Ticket Page

Knowledge Center

User Admin Overview

Here, a wide array of metrics are displayed about the application usage along with a user list.

The CEO was very satisfied with the Featured Snippet tool, so he tasked me with preparing it for sale. This required me to create a new and separate system for the tool and users. The Client Reporting System was used as a template for this project and copied many aspects. The actual tool itself remained the same for sale, but the platform to host it was what I needed to build out. Besides designing a system to manage users, I built a knowledge base, a ticket system, various other admin tools, and a payment system using third-party APIs. If you want to know more specifics about the tool, see the Featured Snippet Tool project.

Featured Snippet Tool

Internet Marketing Ninjas

Featured Snippet Tool

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

Components

MVC

OOP

Database Design

Data Modeling

jQuery

Headless Chrome

Phalcon

Bootstrap

Memcache

Vue

Beanstalkd

Overview of Results

Besides tab-based navigation to various results sections, overview statistics are compiled here.

Loading Results

Asynchronous loading of results were utilized to keep the report performing well.

Most Common People Also Ask Results

Interactive Guide for Understanding the Report

Historical Comparisons to Past Reports

Loading Client Page Results

Advanced Filtering of Results

Due to the sheer amount of data, many filtering, sorting and searching criteria was added to make finding what you want as easy as possible.

Client Page Results

Each client page would have multiple relevant keyphrases Google search results analyzed, and the data would be broken down into various sections along with a summary.

Featured Snippet Result Data

Video Results

Any video results found in the search results is listed here.

Client Page Image Analysis

As part of a full-page optimization strategy, this tab analyzes the images on your page.

Page Optimizer Editor

This tool allowed you to create or edit content for a page while offering assistance and tracking any keyphrases you marked for optimization.

The Featured Snippet tool was a project that started as a request from one of the reporters who had a clever idea of extracting featured snippets from Google search results for research purposes. Utilizing an API to get raw Google search result HTML, I wrote parsing to extract the data and then display this. Within a work day, I had the first version of this tool ready for him to use. Shortly after, the CEO found out about this project and was excited to incorporate it and more features into the Client Report Dashboard.

Over time, this tool became a full-page optimization tool using data gathered from Google search results. Instead of extracting Featured Snippets, People Also ask, Searches Related to, and videos were extracted for a full suite of potential optimization targets. This move towards optimization led to creating an editor where you could write or edit content for a page, and it would help ensure you included the keywords you checked from the other areas to optimize for. Another noteworthy feature of the editor was that I developed functionality using a headless browser to scrape just the main content of a web page for the editor.

This tool gathered a tremendous amount of data, so it was imperative to create an intuitive interface and make it easy to filter, search, and sort data. Additionally, past reports were compared to offer a historic change section to make it easy to see what has changed since search results are fluid.

2016

Client Reporting Dashboard

Internet Marketing Ninjas

Client Reporting Dashboard

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

Mongo

Components

MVC

OOP

Database Design

Data Modeling

jQuery

Beanstalkd

Memcache

Phalcon

Redis

Vue

KnockoutJs

Bootstrap

Home View for a Client Site

Internet Marketing Ninjas provides clients with a reporting dashboard to showcase information about their services and sites, along with reports and tools. After I finished the first version of my web crawler, I was tasked with creating a new reporting dashboard meant to replace our aging one. This project would be a significant undertaking, and some other developers supported me in its creation. I built the initial barebones version of the dashboard, and my co-workers worked on adding reports. I used the crawler project as a foundation for the database and the worker system. I designed other aspects of the database that would be necessary for client information and the new reports that were being created.

This dashboard is integral to clients and internal reporting, still used today, having had hundreds of client sites and thousands of reports run in it. I have helped maintain and add to it over the years. The database contains roughly three terabytes of data.

2014

Web Crawler

Internet Marketing Ninjas

Web Crawler

Internet Marketing Ninjas

HTML

CSS

Javascript

PHP

MySQL

Mongo

MVC

OOP

Database Design

Data Modeling

jQuery

Beanstalkd

Memcache

Headless Chrome

Phalcon

Bootstrap

Datatables

Overview of a website crawl results

Here, some basic stats are provided on crawl results for a website along with filters and display settings for the data.

Table of Crawl Results

Here, you can see actual crawl results along with various meta data associated with the URLs.

The web crawler was my most ambitious project at Internet Marketing Ninjas. I designed and developed it, starting with planning the architecture and database. The goal was to create a flexible and scalable system that could expand to meet our company’s needs. I made a worker system that utilized a job queuing system called Beanstalkd. This system was language agnostic, providing workers could communicate with the job queue and MySQL. The benefit of this was that it allowed us to use different languages if it was better suited for a particular task. Initially, the only workers that were made explicitly dealt with parsing and processing different parts of a web page. This separation of concern for the workers allowed us to scale different parts of the system independently of each other, depending on how process-intensive a particular aspect was, as well as process things in parallel.

Parallel processing, of course, presented its issues. Care was needed with database interactions to prevent data corruption due to race conditions. Additionally, it became harder to control, which, as we ramped up the number of workers, led to problems with overwhelming a target web server. Using Memcache and the job queuing system, I implemented throttling mechanisms to keep the workers that scrape pages from disrupting a website’s service.

Crawling web pages, while on the surface simple, proved to be a challenging task due to the unpredictable nature of the web. Over the years, we ran into many problematic websites that caused issues with different parts of the crawler. Some pages would cause the crawler to get stuck in a loop due to it being a spider trap, and others had poorly formatted HTML that broke the parsing of the page.

Later, this system became the foundation for a full-fledged client reporting dashboard with workers for other reports and tasks. Additionally, over time, upgrades were made to include using headless browsers to scrape modern web pages that rely on JavaScript to render correctly, measure web page performance, and scrape just the content of articles.

2013

Subject Matter Expert Catalog

Saunders College of Business

Subject Matter Expert Catalog

Saunders College of Business

HTML

CSS

Javascript

MySQL

RESTful API

PHP

MVC

OOP

Database Design

Data Modeling

jQuery

Subject expert catalog search

A search in the subject matter expert catalog.

The Saunders College of Business dean and dean’s assistant requested a web service to allow media members to contact faculty for interviews; the Subject Matter Expert Catalog was born from this need. I worked closely with the dean’s assistant to determine the system’s needs. I created a design that is novel, pleasing, and functional.

The catalog features several overarching categories with sub-tags for further specificity and filtering of experts. Clicking on a category will cause a panel with tags to slide out with checkboxes and a search button. Data regarding faculty members was obtained through a RESTful API. The faculty cards will flip over by clicking for more information, showing a small blurb about them. Clicking request contact opens up a modal with a form that allows input of contact information.

All requests are stored in a database, which is managed by an admin interface I developed from the ground up. From this interface, requests can be addressed and tracked via unique identifiers generated based on information from the request. Requesters can be allowed or blocked. Once a request is approved, the faculty member is emailed and texted with contact details.

Blox Monochrome WordPress Theme

Personal Projects

Blox Monochrome WordPress Theme

Personal Projects

HTML

CSS

Javascript

PHP

Wordpress

Underscores Theme

Home Page

Here posts are displayed with blurbs, dates, categories and counts of comments. Widgets are available on the right side.

Image Post and Dropdowns

Multi-level dropdowns are entirely css and large images can be embedded in posts.

Full Width Template

Full width pages and posts are possible via the full width template.

Comment Form

Threaded Comments

Multi-leveled comments are possible when replied to.

Home Page

Here, posts with multiple categories are displayed, along with the empty footer.

This is my first WordPress theme designed and developed from the ground up using Underscores as a foundation. Blox Monochrome is a light, clean monochrome-based theme with a flat block-based design. This theme is responsive and plays well with mobile devices. Blox Monochrome can be used for blogs that aren’t image-based, though images can be used.

Features

Responsive
2 Widget areas (Sidebar and footer)
Threaded comments
Full width no sidebar layout or right sidebar layout
Multi level dropdown menu (Pure CSS)
Lightweight
Post formats: Standard, Aside, Image, Video, Quote, Link
Social media bio links support: RSS, Google+, Twitter, Facebook, LinkedIn

Links

Download WordPress Theme WordPress Theme License

World of Tanks Match Maker

Personal Projects

World of Tanks Match Maker

Personal Projects

HTML

CSS

Javascript

jQuery

Bootstrap

Home Page

Simulator Info

Here a detailed explanation of the simulator can be found.

Controls and Stats

Here the simulation can be started and overview stats can be seen.

Population Info

Here listings of the population can be found.

Made Matches Details

All made matches can be found and inspected here.

Made Matches Details

Overview of a matches stats.

Matches Listing

An overview of all matches are listed here.

This is a personal project I took on after finishing college. World of Tanks, an online multiplayer game, uses a matchmaker to put players together into matches. I felt the matchmaker could be improved, so I set out to develop an improved proof of concept. The result is two variants: a static matchmaker and a more realistic real-time simulator. This simulator is entirely client-side built using javascript/JQuery.

Shopping List App

Independent Study

Meteor.js Game

Client-Server Programming

Meteor.js Game

Client-Server Programming

HTML

CSS

Javascript

Mongo

Meteor

Login & Registration

Main Lobby

Real time chat, player list, challenges, and stats are all here.

Main Lobby

Sending Challenge

Clicking on an active user will send that user a challenge request.

Game Room

Here the game is rendered along with controls to play the game. Chat is also available for the game.

In my Client-Server Programming course, we had one project: make a multiplayer game using any web technology you wish. Instead of using traditional technologies like PHP/MySQL/Javascript, I decided to go with something more experimental and new, Meteorjs. Meteorjs is a Nodejs framework that provides features such as data synchronization, latency compensation, and hot code pushes, among other features. I set out by first learning how Meteor works and then by applying what I learned to build each component of the game. Unfortunately, due to time constraints and the nature of bleeding-edge technology like Meteor, the project isn’t 100% complete but is useable. This project also included real time lobby chat while playing the game.

Wine Tasting Repository

Wines of the World

E-Commerce Project 3

Server-Side Programming

E-Commerce Project 2

Server-Side Programming

E-Commerce Project 2

Server-Side Programming

HTML

CSS

Javascript

PHP

MVC

XML

OOP

jQuery

Index Catalog Page

This page contains the catalog of products for sale. At the top is the sales; below that is a paginated standard catalog.

Product Page

The product page contains all of the information for a product as well as a small gallery of images.

Shopping Cart

Simple shopping cart page.

Admin Page

The admin page allows new items to be added to the catalog as well as existing items to be edited.

Services Page

Any items on sale from the student shops are displayed here.

After the first project, this Server Side Programming project utilizes the first one as a base in which we include additional features such as product pages. In addition to new features, instead of using a flat file for product information, this data was required to be stored in an XML file instead. Utilizing a custom MVC framework I had made, the project didn’t require too many modifications to the PHP.

2012

Online EMBA Database Project

Saunders College of Business

Online EMBA Database Project

Saunders College of Business

HTML

CSS

Javascript

MySQL

PHP

MVC

OOP

Database Design

Data Modeling

jQuery

Online EMBA Student Home

Here, the current class of students is listed. The navigation above provides access to all sub-sections.

Class Schedule Form

Courses can be dragged and dropped between terms and are autosaved once dropped.

Class Schedule Form

Hovering over a course displays a tooltip with the professor who is teaching the course.

Class Schedule Form

Courses can quickly be swapped with another course of the same name but in a different section.

Schedule Class Selection

This is what a typical selection modal looks like.

Tuition Reports

This is a quick view of the tuition report. An Excel version is also available for download.

Course Evaluation Upload System

Course evaluations in csv format can be uploaded and automatically entered into the database. This new feature saves time previously used to enter them manually.

HR Report System

HR reports are automatically generated for the selected term.

Student Data Form

This form allows entry and viewing of all information for a student. Several sections that are less used are collapsible.

Student Data Form

This part of the student data form allows tracking of all previous and future courses and any changes to their academic status.

This project resulted from the Saunders College of Business Online EMBA department outgrowing a Microsoft Access Database they use for storing and accessing records for the program. The department required changes and new features; however, making the needed changes was impossible due to permissions issues. It was my task to perform a complete needs assessment to determine the needs and understand the existing system so that I could build a new web service from the ground up.

Having complete control over the project, I frequently met with the subject matter experts to learn the system’s needs. I began replicating the functionality of the access database but with improved usability using drag & drop UI elements as well as modals and tooltips. I improved the workflow by automating tasks by adding functionality for faculty course evaluation uploads during this process. The faculty course evaluation upload system reads CSV files and enters the information into the database. This feature alone saves several hours each month. I took the opportunity to improve tuition tracking and hr reporting.

Technical Support Overhaul

Saunders College of Business

Technical Support Overhaul

Saunders College of Business

HTML

CSS

Javascript

PHP

MySQL

Database Design

Data Modeling

jQuery

Tech Support Home Page

Accordions on this page allow quick access to various services.

Tech Support Home Page

Admin dropdown consolidates all admin options in one place.

Add Equipment Form

This is the form for adding equipment to the inventory for tracking.

Purchase Section

The purchase database accordion has outstanding line items and access to other purchase database functionality.

Inventory Verification System

This lists all equipment that has and needs to be verified.

Equipment Reservation System

Faculty & staff can use self service page to reserve equipment in advance.

The Technical Support overhaul project was my first project while on co-op for Saunders College of Business at Rochester Institute of Technology. The goals of this project were to improve existing functionality, add new functionality, and improve the UI. Because the existing codebase was dated and messy, I rewrote most of it following current standards. I updated the MySQL database with new fields and tables to accommodate the new functionality I was adding. The previous system wasn’t user-friendly, so I redesigned nearly all the pages for a better user experience. I worked closely with the tech support team using this application to ensure it met all their needs and made operations smoother. Overall, the project took about three months. The result was a user-friendly modern web application.

E-Commerce Project 1

Server-Side Programming

E-Commerce Project 1

Server-Side Programming

HTML

CSS

Javascript

PHP

MVC

OOP

jQuery

Index Catalog Page

This page contains the catalog of products for sale. At the top is the sales; below that is a paginated standard catalog.

Product Page

The product page contains all of the information for a product as well as a small gallery of images.

Shopping Cart

Simple shopping cart page.

Admin Page

The admin page allows new items to be added to the catalog as well as existing items to be edited.

The Server Side Programming course had three projects, each built on the last. The first one was to create an E-Commerce site with PHP. The company I made up sells electronic devices like phones and tablets. Due to the project’s time constraints, I didn’t manage to get images for each product.

I created a clean and simple design using a monochromatic color scheme with some color thrown in to make it interesting. Since each project builds off the previous one, it was essential to get a good foundation. I developed a custom PHP MVC framework to help make future modifications easier.

Since this was the first project, products, and transaction data was stored in a flat file. The method of storing data will be improved with each project. The home page displayed a paginated catalog and a reduced-price sales section. Clicking on an item brings you to a dynamic item page with a small image gallery. There is an admin page where the inventory can be added to and modified.

Bootstrap Project

Rapid Online Presence

jQuery Mashup

Client-Side Programming

SVG Project

Client-Side Programming

Javascript App

Client-Side Programming

Javascript App

Client-Side Programming

HTML

CSS

Javascript

Main Screen

Garage Naming

This is the garage name modal.

Garage & Car Selection

This shows the garage dropdown with a car in it.

Animations

This shows off both image and option selection animations in action.

Final Screen

After all options are chosen you are presented with an image, specs, and a purchase car button.

This first client-side programming project was to build a web application with pure JavaScript. The use of libraries and plugins was not permitted. This app parsed JSON to populate form fields from which the user can choose. Things that were chosen were to be saved on the client side and re-displayed.

I chose to make the app based around car shopping and selecting various options on the cars available. Animations, dropdowns, and modals were used to make the app fancy.

2011

Final Project

Website Design & Implementation

Project 2

Website Design & Implementation

Landing Page Project

Website Design & Implementation

Contact Me

Do you like what you see? I'm glad to hear that! If you have any job opportunities, projects, or other ideas in mind, don't hesitate to contact me. Simply fill out the form below, and I will respond to you as soon as possible.