What is it?

A single page website.

Technologies and skills used

HTML, CSS, Flickity plugin

Reason for creation

To build a simple project that would test new front-end programming skills.

What I did

I achieved the CSS grid with just a handful of rules, managing to avoid including Bootstrap and the bloat that comes with it. The library Flickity provides the fluid touch scrolling for the image carousel.

Backstory

Unconventional Weddings was the first project I completed since learning front-end web development. The original attempt was actually scrapped because it wasn't captivating and felt too long. I built it with Bootstrap 3 but I found myself trying to undo default styling too often. This second attempt is simpler and cohesive.

I chose to build a website for a faux wedding planner business because (1) I've co-planned two weddings and (2) I have a lot of pictures from said weddings. I created 75% of the items featured. I wanted to show them off and have fun with them a second time.

This is by no means the first website I've created. My very first website was a fansite back when Geocities was around, <frame> tags were a thing and inline styles were how you styled HTML because CSS wasn't fully adopted yet. I taught myself website basics back when Google was an infant and Yahoo was the preferred search engine, long before YouTube was a thing. All my code was edited in a plain textarea in the browser without color aids. As a kid I felt super cool being able to program.

What is it?

An interactive dashboard for a faux web application.

Technologies and skills used

HTML, CSS, SASS, JavaScript, jQuery, Chart.js plugin, SVG manipulation

Reason for creation

To build a comprehensive project utilizing skills learned up to this point in the Treehouse Techdegree program.

What I did

This project matches the mockup provided for large screens. The small and medium screen size layouts were left to my discretion. The grid is supported with CSS Grid Layout. I utilized SASS to keep the styling manageable. The chart widgets are created with Chart.js. The interactivity is written in JavaScript and jQuery.

Backstory

Let me just say that of all nine projects, this was the most frustrating to build but the most satisfying after it was complete. See the image below that compares the mockup (left) to my project (right).

Figuring out Chart.js was a feat. Sure, I consulted the documentation, but like many documentations it doesn't contain every little capability or command. My charts match every mockup detail except two. I omitted these details because they weren't required for project completion and time was running out.

I should elaborate on two other aspects of the project. The SVGs in the Social Stats section required manual tweaking. Secondly, I chose to go with dynamically created content, instead of hard-coded static HTML. My content in this project is generated from an array of JavaScript objects and changing it to accept real, remote JSON would be straightforward.

What is it?

An interactive object that presents a quest to the user.

Technologies and skills used

HTML, CSS, JavaScript, jQuery, Bootstrap

Reason for creation

To create intermediate animations with CSS and jQuery.

What I did

The HTML is laid out in three phases, each containing a different content/animation grouping. Phase 2 utilizes Bootstrap's grid system. All animated elements are built with CSS animations alongside jQuery.

Backstory

The idea for this project was inspired by World of Warcraft. I thought it would be cool to come across a quest object that needed my attention. In my head I hear a gnome saying, "Take this to data extraction terminal ahead." You insert the card, the terminal extracts the data and an invitation appears on the screen.

The timing of the animations required an incredible amount of trial and error, especially with the monospace text readout and the blinking text cursor. The initial pacing was too slow, of course. After replaying the sequence about a hundred times and getting feedback from friends, I achieved a happy pace that could successfully hold the user's attention.

I did have one roadblock during this project and consequently learned about preventDefault(). Initializing the card insertion event in the second phase requires either click or touchstart. I didn't know that if one event was triggered that the other event could still be triggered. My mentor ever so graciously pointed out that I needed to prevent the other event from being triggered with preventDefault(). Thanks!

What is it?

A desktop app that replaces a user error-prone spreadsheet used in my previous accounts payable position.

Technologies and skills used

HTML, CSS, SASS, JavaScript, Vue.js, Vuex, Electron

Reason for creation

To learn a reactive framework.

What I did

This desktop accounting tool is setup for multiple modules allowing for future tool additions. The main module, Tax Accrual, takes user input from the main form and the multiple card inputs, stores the content with Vuex and displays real-time calculations. Bootstrap was utilized for input fields and grid system.

Backstory

I worked in accounts payable. We frequently needed to perform calculations for material purchases over a certain threshold. We had a spreadsheet for that.

This spreadsheet was unnecessarily difficult to learn and understand. We had multiple versions for different tax rate and freight scenarios. I thought to myself, "Maybe I could consolidate these and make one single spreadsheet that does everything and is easier on the eyes."

I saw this as the perfect opportunity to stretch my legs in a new framework—Vue.js. I asked my mentor if he could provide the foundation to start a new project in Vue.js as if it were a project he'd develop for his company. "Sure!" he said. "I'll even throw Electron in there so you can make a desktop app instead of a web app." Say what?

This was the first programming anything I learned through immersion. I didn't know how Vue.js worked let alone what a package.json file was. I stayed inside the Vue components for as long as I could. The day came when I needed input content to be usable for real-time calculation display. At the time I didn't understand how data sharing between components in plain Vue.js worked let alone retrieving state from Vuex. I understood how JavaScript objects worked! I understand their differences now but at the time I needed dear ol' mentor to point me to the right resource.

Once I got the hang of how to code and maneuver around this big, scary "real-world" project, I started to appreciate the simplicity of putting all relevant code in one self-contained Vue component. I could make the components talk to each other and, together, they became an app. How cool is that!

What is it?

A single page portfolio for myself.

Technologies and skills used

HTML, CSS, JavaScript, jQuery, Adobe XD

Reason for creation

To build a portfolio—the final project of the Treehouse Techdegree program.

What I did

It's a standard sectional single page website. I prototyped it in Adobe XD. The project information is displayed via modal overlays. The courses are inserted via $.getJSON. The contact form is inserted via iframe to prevent index.html refreshing upon PHP submit.

Backstory

This is the original version of my portfolio that was submitted as the final project for the Treehouse Techdegree program.

A notable issue I ran into pertains to fixed modal overlays on iOS devices. In modal overlays, you have the ability to scroll the body underneath the modal even though its styling is set to overflow: hidden. This issue does not appear, to the best of my knowledge, on any other device. The long scrolling of the body has mostly been mitigated. The user will only experience this if they are super awkwardly scrolling through the modal like I was trying to "break" it.

Note: My portfolio has evolved since I first created it.