The Portfolio of a pathological tinkerer.

AMGA Certification Progression Log and Statistics

IN PROGRESS - Tons to do

HTML + Foundation CSS + SCSS + Vanilla JS, PHP, MySQL

Temp URL: http://tradleadsql.jponeil.com

I wanted a project to put the SQL and PHP I have been learning into practice. I got more than I wanted. This project has required everything listed above and a considerable amount of research and tweaking. This is also a practical project as it doubles as a visual log and statistics of climbs I have completed and can send to prospective employers of me as a rock climbing guide, or simply share with friends. Its somewhat of a climbing and climbing guide resume though currently only traditional climbing specific (as opposed to sport climbing or bouldering). It has also inspired me to make a considerably more advanced version in the future.

The progress bars and graphs are currently hard coded and laborius to update. They will be switched to dynamic ones that change automatically as routes are added later. Google charts handles the charting (again hardcoded values), but there are significant drawbacks effecting the responsiveness of the site using this approach. May switch to D3.js or something else in the future. SQL queries are hard coded to protect against abuse and zero sensitive information is in the entire database. Table of trad leads is sorted via hard coded SQL queries, not through JS, which means more communication with the server, but its just text so it isn't much data. I may change this in the future. I took a little while to figure out a way to sort routes by difficultly as the Yosemite Decimal System is a little problematic. I figured out a solution which works OK right now, but I need to tweak it to handle +/- on the end of grades and some other minor details.

Resume Site (old, first one)

Finished, though deprecated - Better one soon-ish

HTML + Bootstrap CSS + Glyphicons + CSS + jQuery + JS

Temp URL: http://resume.jponeil.com

One page general resume site to showcase climbing/guiding, coding, and chemistry experience. Image carousel. Interesting CSS section backgrounds.

Looks pretty good, though a TON of room for improvement.

The carousel shouldn't be full viewport height and/or something drawing viewers to scroll down is needed. Unclickable buttons shouldn't be buttons. Font use and text size should be updated. Dreamhost logo needs to be removed. Section background patterns (CSS) look great and I'd love to keep some of this look in the future, but it could certainly use a little bit of tweaking. Skills and text content need to be updated.

Simon Game for FreeCodeCamp

IN PROGRESS - Logic mostly finished, needs visual overhaul - Image loading issues

Codepen.io - HTML + SCSS + Vanilla JS

Link: Simon Game for FCC - Image Map

Designed to function like the classic "Simon" game. I added a twist by using an image map and multiple separate images of the exact same dimensions with different regions colored that momentarily are displayed and hidden. Inspiration is Alice in Wonderland. This results in a very pleasing animation in my opinion.

Having issues with images not being loaded and pre-loaded properly. Links to images are fine, Codepen.io itself is the issue. I may have to move this project elsewhere to even be able to properly work on it.

I used vanilla Javascript for all the logic, which is mostly coded. Coded enough that you can actually play, when all the images load properly atleast. There are still cases though when the game will behave improperly though so I need to completely find a fix those by stepping through the code. I will also likely move the start/stop and reset buttons as to be part of the actual image map or maybe overlayed in its corner(s) for a more "fully contained" look. The dev mode / cheat mode box will dissapear completely or be a low profile option. I also want to find better sounds for mistakes and for winning. Due to the frustrating image loading issues I have been focusing my work on other projects that I'm more interested in.

This is the last project I need to complete the FreeCodeCamp Front End Developer section, though I'll polish up my other projects too before submitting this.

Tic-Tac-Toe Game for FreeCodeCamp

IN PROGRESS - Logic mostly finished, needs visual overhaul

Codepen.io - HTML + SCSS + Vanilla JS

Link: Tic-Tac-Toe for FCC

Tic-Tac-Toe game with "perfect" AI opponent. Possibly not perfect yet. Try it out! Interface is driven fully by mouse clicks on the board. Had some fun with this one. It could certainly use a graphical overhaul and some logic re-checking.

Forced myself to use vanilla Javascript for all the logic, and there is a ton of it.

Twitch.TV JSON API Viewer for FreeCodeCamp

Done - but API change has forced it back to IN PROGRESS... Needs visual overhaul, needs code overhaul to work with the newer API

Codepen.io - HTML + Bootstrap CSS + SASS + jQuery + JS

Link: Twitch.TV JSON API for FCC

From a hard-coded list of Twitch.TV users this will display which ones are online, streaming, offline, and deleted accounts... as well as some useful information about the users accounts. There are a lot of possibly improvements to be had here, such as alphabetical sorting of those online and offline and graphical overhaul.

Unfourtunately the API has changed a bit so nothing works as it should now. I have been more interested in other projects so I have not gotten around to going back and fixing this for the new API yet. The graphics before were OK, but I'd like to do something cleaner too.

Wikipedia Viewer for FreeCodeCamp

Done, but could improve a lot

Codepen.io - HTML + CSS + jQuery + JS

Link: Wikipedia Viewer for FCC

Simple API project to query wikipedia and display the results as links to articles.

There are some things I'd like to change visually as well as in the way this performs.

Local Weather for FreeCodeCamp

Done, but could improve a lot

Codepen.io - HTML + CSS + jQuery + JS

Link: Local Weather for FCC

Simple API project to get weather information for the current area via Weather Underground.

This project could use some cleaner graphics. It would look better without the Weather Underground logo, however that is a condition of the use of the free service.

Tribute Page for FreeCodeCamp

Finished

Codepen.io - HTML + Foundation CSS classes

Link: Tribute page for FCC

Minimal site, no hand coded CSS or JS, just used Foundation CSS classes in the HTML.

Just a basic clean page for a FCC assignment.

Pomodoro Timer for FreeCodeCamp

Finished, sorta

Codepen.io - HTML + Bootstrap CSS + CSS + jQuery + JS

Link: Pomodoro for FCC

Pomodoro time management clock.

I could update the code and graphics a bit. More interesting projects have my attention now.

JS Calculator for FreeCodeCamp

Finished, sorta

Codepen.io - HTML + Bootstrap CSS + CSS + jQuery + JS

Link: JS calculator for FCC

Simply used "eval(str)" a quick and lazy way to do it. Does not prevent things like multiple decimal places.

A JS calculator isn't something I'd actually expect to use for any future projects so I have not been in any hurry to update and fix this. I rather like the grayscale look.

Hazlitt Quoter for FreeCodeCamp

Finished, sorta

Codepen.io - HTML + Bootstrap CSS + CSS + jQuery + JS

Link: Hazlitt Quoter for FCC

I decided to use quotes that are way too long, made it so a button tweets a truncated quote instead of compromising on the quotes available. Could use some work.

Personal Portfolio for FreeCodeCamp

Finished, deprecated

Codepen.io - HTML + Bootstrap CSS FontAwesome (icons) + CSS + jQuery

Link: Personal Portfolio for FCC

Early FCC Project. Used fixed position section background images of metal textures, looked nice.