John Pawlak


Welcome to my Portfolio!

Web Developer - Network Analyst - Aspiring Pen-Tester

Portfolio


About


I became interested in programming from a young age, before going to University I was already programming in C++, which lead me into taking a Computer Science Degree at the University of Toronto. At 16 years old I was part of a small indie game development team, making tiny changes to code and working more on the player experience. While in school I hosted a game server for a game called Whispers in Akarra, which was a local indie game mmorpg! We had over 1000 players playing at one time, and it was my job to maintain server uptime and monitor bugs and errors that could cause crashing.

Some of my apps are displayed above under the Portfolio section. While learning new languages and libraries, I also enjoy working on Javascript game development in my spare time. I have really enjoyed web developing but I have realized that my passion is networking and internet security. I have been studying and learning networking, pen testing, and ethical hacking for quite some time now, and have started trying to transition into an I.T. role. My goal is to join a company where I will give 110% and hope to grow in the future by constantly learning and becomimng a better asset while at the same time working in my passion of networking and security.

Contact


Whether you are looking for a web developer that can design kickass sites and makes sure that user interaction is key, or a passionate and dedicated IT Tech/ up and coming Network Analyst, look no further. My goal is to grow and immerse myself in Networking and Security. Currently I am studying for the Cisco CCNA and have just recently gotten my Network+ certification. I also have the CompTIA A+ Certification.

With an arsenal of experience with start ups, growth hacking, and working with both small and large teams, I am confident that you will be able to put me to good use. My dream is to find a company that will be willing to let me work for them while growing my skills so that I can become a valuable asset to them. I would love to work with you and become an integral part of your company. Below are some of the best ways to get a hold of me!

Ben the Ninja Mini-Game


#Javascript

#HTML5

#CSS

#Photoshop

View Project View Source

Ben the ninja is a game app written in Javascript using the HTML5 canvas element. Game development using the canvas allows for excellent practice in vanilla Javascript. The sprite graphics are used from a third party source and custom modified using Adobe Photoshop CC. Click on View Project to try out the game!

Close Window

Super Mario JS


#JavaScript

#HTML5

#OOP

Play View Project

Super Mario is currently being coded. I will update this once we have a working file with a decent level set up, enemies etc. Super Mario is being coded with an Object oriented programming style fully in JavaScript, by attaching it the canvas object on the DOM. Please click Play to try the current iteration of the game

Close Window

Battle Archery Website


#Wordpress

#PHP

#HTML

#CSS

#Plugins-API

#MailChimp

#Google-Analytics

View Project

Battle Archery was 6 months old when I joined their team as a Website and Marketing Manager, since then it has doubled its growth each year for the first 2 years and is currently growing at 30% for its third year mainly due to its physical capacity. While creating the Battle Archery website, I worked with both Wordpress plugins, PHP, HTML and CSS. I implemented Google Analytics for user tracking which was then used with a Google Adwords campaign for re-targeting. The re-targeting campaign is still a success, generating clients for Battle Archery. Emails are collected and email marketing is done via MailChimp. Content and timing for delivery is a key component of successful email campaigns which I tracked and created reports for.

Close Window

Yelp Camp


#Node.js

#Express

#MongoDB

#HTML

#CSS

#Passport

#Heroku

View Project View Source

Yelp Camp is an a review site built using Node.js as the server side code. Express is used for the routing component and data is stored using MongoDB. Users can upload new campsites with rates/night and anyone can view all uploaded campsite thumbnails on the home page. However, to be able to view the full postings, you need to be authenticated, which was done with the #Passport library. Once authenticated, users can view full postings, post their own campsites, and leave comments, all of which are stored using MongoDB. The Yelp Camp app is hosted on Heroku and can be viewed and interacted with by clicking: View Project


Close Window

SmartBrain API


#React

#Redux

#Node.js

#Express

#PostgresSQL

#HTML5

View App Project View Server Project

Smartbrain Api was built using #React and #Redux. Users must sign up, and then are prompted to upload photos of people so that the api can use facial recognition to show its ability to track faces. The facial recognition is mapped by using the Clarifai api and drawn in using CSS borders. The app stores users and their data via the #PostgresSQL database. The server is coded in #Node.js with #Express for the routing.


Close Window

Github Battle App


#React

#ReactRouter

#Redux

#Axios

Use App View Source

GitHub Battle App is a small app that uses React, React Router and Redux to pull information from github repositories and display to the user. You can choose to display the top repositories on Github by programming language, or you can choose to pit two accounts against each other in a one on one Github battle. Start by inputting two different usernames into the fields and the app will pull their profiles, and extract the necessary information to display. Click on Use App to navigate the app.


Close Window

Node Chat App


#Node.js

#Socket.IO

#HTML

#CSS

#JavaScript

Use App View Source

The Chat App is built using Node.js and the Socket.IO library. The app allows people to join specific rooms to be able to communicate with each other. As long as a specific user/client allows geolocation access, the app also allows the user to send their location to the chat room using longitude and latitude coords. To use the chat app click on Use App, you can even open multiple clients in your own browser by opening the app in multiple windows to test our the app. Remember that the room names are case sensitive and the way it is coded requires you to join the same room to chat.


Close Window

Expensify App


#React

#ReactRouter

#Redux

#FirebaseDB

#CSS

Use App View Source

The Expensify App uses Google Auth to authorize users and keep track of their expenses in the Firebase database. Once authenticated, the app pulls your expenses from the database and displays them on the main dashboard page. There is an option to Add an expense, and once an expense is created, you have the option to click on it to edit or remove it. The app allows to search and sort through your expenses. Search expense is a searchbox component, using moment.js the user is also able to sort by date and specifiy a time frame, or sort by amounts. Click Use App to play around with app.


Close Window

Twitch Streaming App


#React

#ReactRouter

#Node.js

#Lodash

#JsonServer

#RTMPServer

Use App View Source

The Twitch Streaming App clone, is an app built to mimick the concept of Twitch.com a streaming platform site. The main functionality I was creating for this app was to be able to create, show, edit, and delete streams. The user authentication is handled by google oAuth with the new auth2 version. This allows the client to track your userId with the userId of created streams in the JSON Server database. The most impressive functionality is showing the stream. This is done by creating a reference to a video player and attaching an flv to http converter. Afterwards, you can set up an RTMP Server and once that's done the user who is using a streaming program such as OBS, only has to modify their stream output to the RTMP server. Then anyone can watch the stream on the app since the client converts it to http for user consumption. Currently there is no public RTMP server set up, but if you wanted to run this functionality, I would recommend installing and setting up an rtmp server with npm node-media-server. Other than that, the app uses redux to manage state and axios for fetching data from the database.


Close Window

Tetris in JS


#Javascript

#HTML5

#CSS

Play App View Source

Tetris Clone using only Javascript and HTML to host canvas. Click Play to play the app, or View Source to see the code on my github.


Close Window

YouTube App


#React

#YouTube API

#Semantic UI

View Source

The Youtube app is a simple app employing React that uses the YouTube search API. When a user types in their search terms and hits submit, axios fetches the 5 results from the youtube API and displays them as a main video and sidebar videos. Currently this project is not hosted, but you can view the Source Code on my gitHub by clicking on View Source.


Close Window

Twitch Streaming App


#React

#Redux

#Jest

#Moxios

#Axios

#Enzyme

View Source

A full redux dive into testing React and Redux. The project uses facebook's Jest testing and Airbnb's enzyme library. For mock testing async requests I used moxios, a library that works well with axios to mock async requests. This project was aimed at testing all functionalities of action creators, reducers, async requests, as well as basic unit testing for each component. This project was the basis for employing unit testing in my future projects. To view Source please click on View Source.


Close Window