Portfolio, experiments, things learned, and things that I’m learning!
DYNAMIC CLIMBING LEADERBOARD (GOOGLE SHEETS INTEGRATION)
A dynamic leaderboard for a climbing gym challenge, pulling live data from a Google Sheet via GViz API. It aggregates feet climbed per participant, splits staff vs climbers, shows progress toward a mile, and includes filtering and highlighting features.
VUE DYNAMIC HEX COLOR CHART
This Vue.js application generates a dynamic grid of hex color swatches, displaying a range of colors from dark to light across rows and columns. By stepping through RGB values programmatically, it creates a visual color chart useful for designers, developers, or anyone selecting colors. The app leverages Vue’s reactivity and templating to render the table efficiently, with each cell showing its hex code on a contrasting background. This example demonstrates how Vue can build simple, interactive widgets for tasks like color picking, data visualization, or utility tools without complex setups.
LAZY LOADING IMAGES (INTERSECTION OBSERVER)
Lazy loading defers the loading of images until they are about to enter the viewport, improving page load times and reducing bandwidth usage. This demo uses the native loading="lazy" attribute on an <img> tag, which leverages the browser’s built-in Intersection Observer API for automatic lazy loading without custom JavaScript. Lazy loading is ubiquitous on the web, seen in image-heavy sites like e-commerce, galleries, and social media, where it enhances performance by loading content on demand. It’s essential for mobile users and slow connections, preventing unnecessary data transfer.
AWS CAPTION EDITOR (POST-PROCESSING TOOL)
I built a Vue.js tool to post-process AWS Transcribe JSON output into editable captions. It displays transcripts with confidence-based highlighting, allows word edits, and exports VTT/SRT files. Useful for refining AI-generated captions for accuracy and accessibility in videos.
TOASTR POPUP NOTIFICATION DEMO
Toastr is a lightweight JavaScript library designed for creating non-blocking notification popups, commonly known as “toast” messages. These notifications appear temporarily on the screen to convey information, alerts, or feedback without disrupting the user’s current task. In this demo, we explore a basic setup of Toastr, configuring its options for a polished user experience and demonstrating how to trigger an informational toast message. This approach enhances web applications by providing subtle, animated feedback that improves usability and user engagement.
BROWSER STATE CHANGE DETECTOR
I developed a JavaScript utility to detect and log browser state changes using Page Visibility API and lifecycle events. It tracks states like active, passive, hidden, frozen, and terminated, logging transitions for analytics or debugging. Useful for optimizing performance, user engagement, and resource management in web apps.
MOODLE BULK ENROLLMENT TOOLS (MULTI-COURSE IMPORT)
A client-side web tool for generating Moodle-compatible CSV files to bulk-enroll users across multiple courses. Built with Vue.js, it processes lists of emails and names, applies formatting rules, and generates downloadable enrollment CSVs for LMS administrators.
COUNTDOWN TIMER FOR VIRTUAL MEETINGS
I built this lightweight countdown timer as a clean, ad‑free “entry dashboard” for virtual meetings or conferences. When people join early, they immediately see a large timer over a subtle looping video background plus a short message about when we’ll start.
VIDEO TABLE OF CONTENTS
I built an interactive video table of contents that syncs playback with a clickable chapter list. As the video plays, the current section highlights automatically; click any chapter and it jumps straight there.
WEBVTT & SRT TO CLEAN TRANSCRIPT
I built a client-side converter using Vue.js to transform WebVTT or SRT subtitle files into clean, readable transcripts. It removes timings, HTML tags, and formatting artifacts, preserving speaker names for accessibility. Useful for content creators needing plain text transcripts from caption files.