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.
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.
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.
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.
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.
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.
I built a browser‑only course blueprinting tool that lets instructional designers rapidly structure modules, topics, objectives, notes, and media requirements—and then export clean outlines (PPT, agenda table, CSV, objective reports) without a backend. It uses Vue + Bootstrap 4, a small in‑memory schema, and the Web File & Storage APIs for persistence and export. Autosave, validation (word counts, flagged terms, spacing), and lightweight reporting make iteration fast while keeping content consistent.
An interactive multiplication table using Vue template bindings and minimal CSS. Adjust the bounds, and hover to trace products.
Handlebars.js is a templating engine that allows embedding expressions in HTML-like templates, compiling them into functions for rendering with data. This demo compiles a simple template, passes a context object, and inserts the rendered HTML into the page. Handlebars excels at generating static content from data, with features like helpers and partials for complex logic. While I’ve primarily used Vue.js for reactive components, Handlebars could be preferable for server-side rendering or static sites where reactivity isn’t needed, offering a lightweight alternative for templating without a full framework.
I built a web-based Syllabus Management Program to retire a mountain of PDFs and replace them with clean, accessible, versioned HTML. This was a solo build over multiple months; I partnered with the curriculum team for the canonical structure and content migration.
This Vue.js application serves as a binomial probability calculator, allowing users to input parameters like number of trials (n), probability (p), and successes (x) to compute and display probability distributions in a dynamic table. While the math behind binomial distributions is fascinating, the real focus here is Vue’s power in creating simple, single-purpose tools and widgets. Vue’s reactive data binding and declarative templates make it effortless to build interactive utilities without complex setups, enabling quick prototyping of calculators, converters, or data visualizers.
This interactive tool combines Vue.js for user inputs and probability calculations with Desmos graphing to visualize the normal distribution bell curve. Users enter a Z-score, and the app computes the cumulative probability using a custom Gaussian distribution library. Clicking “Update Graph” dynamically shades the area under the curve in Desmos, illustrating concepts like one-sided probabilities. The implementation focuses on JavaScript integration for real-time updates and Desmos’ API for embedding interactive math visualizations.
Custom Markdown Editor with Mathjax for LaTeX support and code highlighting.
A lightweight proof-of-concept for conditionally revealing content based on typed passcodes—useful for instructor answer keys, staged release of learning materials, or tiered access without full authentication. Originally built with AngularJS, easily adaptable to modern Vue or Angular.
This Vue.js application demonstrates dynamic form validation using regex patterns, providing real-time feedback as users type. It validates name and email fields, displaying error messages instantly without waiting for form submission. The form integrates with Firebase for data persistence, adding/removing users reactively. Dynamic validation enhances user experience by catching errors early, guiding corrections, and preventing invalid submissions. Benefits include reduced frustration, improved data quality, and a more interactive interface compared to traditional submit-time validation.