Full Stack JavaScript Developer

About Me

I am looking to transition into software development. I have over 10 years of experience in library related information technology of all types. My work has mainly revolved around integrated library system administration, including Sierra, Millennium, Symphony, and Polaris.

I have completed the Free Code Camp Front End Certification, graduated Epicodus bootcamp for Ruby on Rails, and Fullstack Academy for full stack JavaScript. If you want to know more about my professional background and skills, please feel free to click on the buttons in the section above and the projects listed below.

When not working with information technology, my interests include all things Michigan sports related, visiting new places, and spending time with my wife Melanie along with our kitty Monty.

Languages & Frameworks

Vanilla JS

jQuery

Ajax

Postgres

Sequelize

MySQL

CSS3

HTML5

Node.js

Express.js

React.js

Redux

React Router

Gulp

Bootstrap 3 & 4

Tools & Expertise

GitHub

Project Management

Chrome DevTools

JSON

npm

JavaScript Unit Testing

SQL Server Management Studio

pgAdmin

XML

Portfolio

*Buttons are clickable
Content and Pagination Filter

Employee Directory

12 random "employees" are pulled from randomuser.me api. Their basic data is put into "cards" that are displayed on the page. Each card is created with a modal with more employee detail. Once a modal is opened, arrow buttons are provided to allow seeing all employee modals by scrolling. Going from last to first and vis-versa is supported. There is a search function that searches the 12 users on each key-up in the employee name and userlogin. The search also brings back users when individual letters or the entire search is removed.

Website GitHub
Content and Pagination Filter

Pagination & Content Filter

This application counts the total number of students and creates the number of pages necessary to have 10 students per page with the remainder, if any, on the last page. There is also a full text search feature for searching the students and their associated data. If there are no students found in the search, a message tells you. The search completes on each key press. Search does not use pagination.

Website GitHub
interactive form

Interactive Form

Most projects have a form to take in user data. This form does that for a fictional JavaScript conference. Most fields have some sort of error checking with custom messages. The form is smart enough to know if you are signed up for one session that you cannot sign up for another session at the same time. Further shirt options are hidden until a size has been chosen.

Website GitHub
interactive form

Rat Quest

A group project from Fullstack Academy, Rat Quest is a learning gamified. Your challenge, if you choose to accept it, is to do JavaScript coding challenges. Completing a group of challenges and you get to move up a level. Move up enough levels your rat escapes the lab. Go to the website and play Rat Quest in single player or against a friend.

Website GitHub
Content scraper

Content Scaper

This application pulls information about the latest shirts on the website www.shirts4mike.com. Data scraped is the shirt page url, shirt img url, shirt title, price, and the time the data was gathered. The data is pulled by x-ray npm module and processed into csv format by json2csv npm module. A file is created for data, if one has not been already created. There is an error message configured for when the system is unable to retrieve data. The message is printed to a seperate log file. A custom start procedure has been created: npm start. There is no website, as the application runs on the command line.

GitHub
Content scraper

Github Battle

There are 2 parts of this project. The first allows 2 people to put in their Github accounts and "battle" with each other. The second part allows you to see the 30 most popular Github repos are along with the 30 top repos by language including JavaScript, Ruby, Java, CSS, and Python. Check out the app on the Website link below and battle your friends or see what is popular on Github.

Website GitHub
Tic-Tac-Toe

Tic-Tac-Toe

This game is a combination of the requirements for projects required by Free Code Camp and Team Treehouse Full Stack Tech Degree. It has the option for 2 human players or 1 human and 1 computer player. Names for the human players are customizable as are which player gets to be x or o. There are defaults in the system for each of these settings. The game default is for 2 human players.

Website GitHub
Content scraper

Twitter App

Twitter app that uses a real user account. Pulls down account's 5 most recents tweets, friends, and direct messages. The text box on the bottom has been disabled but can be reactivated. Uses Twitter's REST API to communicate with Twitter, retrieves JSON data, and displays the results using Pug.js HTML templating system. App uses credentials supplied in the config.js file (sample included).

GitHub
Content scraper

Gulp & Front End Site

Using Gulp to put a front end project into production ready status. The website itself for this project is not the focus. Instead it is the build tool Gulp that takes center stage. Gulp installs our dependencies, minifies & concats out javascript, converts Sass to CSS, removes our old production files, creates CSS and JS maps for debugging in DevTools, optimize our images, move all the files to the specified production folder, and watch for changes to Sass so the page can be auto updated.

Note that the production location is not in the current file structure but is created upon running the proper gulp commands. See the readme.md for more details.

GitHub
Simon Game

Simon Game

A JS version of the classic children's memory game. 4 different colors and matching sounds are played generated in random order by the game. The game starts with one color/sound and one is added until 20 where the game is won by the player. In normal mode, if the player makes a mistake the computer will repeat the steps so far until the player enters them in the right order. In strict mode, one mistake and the computer goes back to the first level and generates a new sequence.

Website GitHub
Card image cap

Random Quote Generator

Program rotates an array of predefined quote objects with 2 required and 3 optional properties. The system knows to change the required output based upon which fields are available in each object. The objects are rotated every five seconds by the system or upon the button click. The quotes do not repeat until all the quotes are used each rotation. Math.random was used to generate the random number to pick the quote.

Website GitHub
Card image cap

Local Weather

Application uses HTML5 geolocation and a weather API to give the weather in your current location. It also allows the user to switch between Celsius and Fahrenheit temps along with Meters/Sec and Miles/Hour for wind speed. Sunset and sunrise are calculated from Unix time. Wind direction is calculated based upon the retrieved degrees. There is ability on the backend to special CSS based on user latitude and longitude. This is currently set for Wilmington, NC. A pop-up will ask for permission to access your browser.Allow this or the api connection, and therefor the app, will not work.

Website GitHub
Card image cap

Wikipedia Viewer

Application that allows a user to search the Wikipedia API. The user can click a button to be returned a random Wikipedia article or enter text in a search box to view a list of up to 10 Wikipedia articles. Articles have a title, summary (if provided), and a link to click for direct access to the article.

Website GitHub
Card image cap

Calculator

Basic 4 function (+, -, *, /) Javascript calculator. Calculations can be chained to each other and there is a clear button. Decimals are supported.

Website GitHub
Card image cap

Timer

A countdown timer that shows days, hours, minutes, and seconds. Time inputed is done in minutes. It will accept partial minutes such as .5 for 30 seconds. A default time of 25 minutes is provided. When the timer is completed, another time may be entered without refreshing the page.

Website GitHub
XML

Convert XML to HTML Project

An intro to using XSL(T) to transform XML to HTML. There are multiple sorts/filters on the data: 1) On the select statement artists name Bob Dylan are excluded, 2) results are sorted by country and then artist, and 3) an if statement includes only those items with a price less than 10.

Website GitHub
Hank Greenberg

Hank Greenberg Tribute Site

Tribute site to Hank Greenberg. The site was created for the purpose of getting familiar with BootStrap 4. Set up the site with the proper CDN files. Uses various Bootstrap techniques including divs, wells, col-md-*, blockquote, container, container-fluid, and footer-copyright.

Website GitHub
GraphQL Logo

So What is GraphQL Anyway?

An article I wrote about the concepts around GraphQL. What it is. Why it was created. Why developers should care. The article is published on Medium. I wanted to learn more about GraphQL and strongly feel the best way to learn something is to teach it.

Article
React Router Logo

React Router 4.x Parameters: Match, Location, & History

While at Fullstack Academy we were introducted to React Router. I did not fully understand this package, especially the props that React Router can pass down. I wrote this article hoping to teach others what I have learned to give back to all of the learning I have done with the work others have provided. The article is published on Medium.

Article
React Router Logo

Using XML to Create Web Pages

Today’s web applications are data driven. The two most common formats for sharing data are JSON and XML. In this article, I will be covering how to convert raw XML into HTML (and CSS) that can be consumed by any browser.

Article
Hank Greenberg

Portfolio Site

The site was created to show case my development skills and was originally part of the Free Code Camp front end track. Structure of the page is done with Bootstrap and accentuated with CSS. The word cloud and project sorting buttons were adapted from "JavaScript and JQuery: Interactive Front-End Web Development".

Website GitHub