- Medialytics
- Vue3 APOD Search
- AWS Dashboards
- 3D/VR Solar System
- SpaceTrade
Welcome!
Curious about what I can do? Click the tabs above this section to view live demos and code examples.
Download this dashboard as a PDF
Technologies used: AWS S3, Glue, Quicksight
I'm an AWS Certified Cloud Practitioner and I have become a big fan of the dashboards you can create using their suite of data tools.
To create an interactive dashboard like the one in these screenshots, all you need is a data source and a free AWS account. For this particular dashboard, I started by downloading a free data dump (CSV) of US Congressional Member Social Media Statistics from 2015 through 2020 .
The data and its values weren't in the ideal format(s) for the AWS Quicksight visualization tools, so I chose to host the CSV on AWS S3. This allowed me to leverage AWS Glue for ETL calculations, and the transformed data was then imported as a Quicksight dataset. For the analysis, I chose to highlight comparisons in count of posts, followers, shares, and reactions, and I think the resulting dashboard displays some interesting trends and patterns.
Try the live demo or check out the code
Technologies used: VueJS, TailwindCSS, jQueryUI, Netlify
This is a single page application powered by VueJS (Vue3) that allows you to search for the official NASA Astronomy Picture of the Day via their free API.
I recently rebuilt this project using Vue3 and the live demo is hosted via Netlify. While I still find large frontend frameworks like Vue / React / Angular to be slightly overkill for projects like this, I took it as an opportunity to work through the most recent Vue documentation and "best-practice" posts.
I also took this opportunity to check out TailwindCSS, a library I had never worked with before. As a frontend engineer, I can see the benefit of using TailwindCSS for rapid prototyping and (sparingly) within design systems or component libraries. However, there are certain limitations, learning curves, and the ever-present HTML bloat to consider. I think I still prefer custom CSS/SCSS (and I may be biased), but I might start leveraging Tailwind in the early stages of a project.
I also have an older jQuery-only version available at the following links: Demo / Code
Medialytics is a single page app that shows you information about the content on your Plex server by parsing the XML feed that it generates.
If you have a hard drive full of media, you can download Plex Media Server (for free) to organize, watch, and/or share your media with friends. It comes with great diagnostic tools that tell you all about your server, e.g. who's watching what media, or which media gets watched the most. Unfortunately, it doesn't give you much information about your personal library of media, such as "Which genre holds the most movies in your collection?". That's where Medialytics comes in.
Instead of analyzing your server and its activity, Medialytics reports on your media library itself (TV & Movies only). Currently it reports on statistics such as longest duration, oldest release date, earliest addition (oldest file created date), and most popular genre / country of origin / release decade / actor / director / studio on a per-library basis.
Try the live demo or check out the code
Technologies used: A-Frame
This is a simple implementation of A-Frame, a client-side JS-based 3D/VR framework.
It's specifically designed to work easily with VR integration, or just simple 3D web applications, by providing a library of simple constructors and behavior that are more commonly reserved for desktop software / engines (e.g. lightbox effects or spacial geometry).
This demo creates a (scaled) representation of our solar system, including Pluto. I have comments in the code describing how and why I modified certain variables in order to create a realistic but also navigable scene. While it's definitely notable that the A-Frame code is so easily initialized (I had this up and running super fast), it's also worth noting that it's a very small amount of code that generates the entire scene (less than 200 lines of JS + JSON combined).
Try the live demo or check out the code
Technologies used: jQuery, Vue.js, transit.js
A small JavaScript game similar to Dope Wars and other resource management games, but also includes a randomized encounter system, a Choose-Your-Own-Adventure mechanic, and some experimental UI elements.
It was recently updated to use the awesome Vue.js for binding the frontend to the backend (which required a ground-up re-write) and I think the code benefited enormously from the addition.