SYLLABUS MANAGEMENT PROGRAM
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.
HIGHLIGHT.JS SYNTAX HIGHLIGHTING DEMO
Highlight.js is a lightweight JavaScript library that automatically detects and highlights syntax in code blocks on web pages. This demo loads Highlight.js via CDN, initializes it on page load, and showcases highlighted code in multiple languages like HTML, CSS, JavaScript, Java, and SQL. It’s essential for blogs, documentation, and tutorials to make code readable and professional. Use cases include developer sites, educational platforms, and any content with code snippets. Alternatives like Prism.js offer similar features with different themes and plugins.
VIDEO PLAYLIST MANAGER
This custom video playlist manager was built for a professor needing to embed self-hosted videos in an LMS course without relying on external platforms like YouTube. It features an HTML5 video player with a scrollable list of video titles; clicking a title loads and autoplays the corresponding MP4 file. The setup ensures videos play directly from the institution’s server, avoiding potential blocks or ads. It supports start times for specific clips, enhancing navigation in educational content.
BINOMIAL PROBABILITY CALCULATOR
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.
BRIGHTSPACE SEMESTER CHECKLIST WIDGET
I created a personalized checklist widget for Brightspace D2L LMS, conditionally released to professors based on user role. It uses injected variables like {OrgUnitId} and {FirstName} to provide course-specific navigation links for semester start/end tasks. This helps professors quickly access tools for course setup, management, and closure.
INTRO.JS GUIDED PAGE TOUR
Intro.js is a lightweight JavaScript library for creating interactive, step-by-step guided tours on web pages, helping users navigate and understand new interfaces. In this demo, it highlights elements like buttons or sections with tooltips, guiding users through a sequence of steps. This onboarding technique reduces confusion in complex apps, improving user adoption and satisfaction. The library supports customization for positioning, themes, and callbacks, making it versatile for tutorials, feature introductions, or walkthroughs.
NORMAL PROBABILITY BELL CURVE TOOL
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.
DYNAMIC FONT AWESOME CHEAT SHEET
Font Awesome is a popular icon library that provides scalable vector icons via CSS classes, enabling easy integration into web projects without images. It offers thousands of icons for common UI elements like arrows, social media, and symbols, loaded via CDN or locally. This dynamic cheat sheet displays Font Awesome icons in a grid, showing each icon with its class name for quick reference. Built with modern frameworks like Vue or Angular, it could loop through an icons array to generate the layout reactively. I created this tool for personal reference, consolidating icons in one place, and even printed it as a large poster on a plotter at work for easy desk access.
DOORBELL.IO LMS HELP WIDGET
Doorbell.io is a lightweight feedback and support tool that allows users to send messages directly from a website, with options for customization like pre-filled user data and contextual properties. In this LMS integration, the widget is conditionally embedded based on the user’s role (e.g., instructors only), using Brightspace variables injected into the page. This captures details like name, email, course info, and quick links to LMS tools, enabling personalized support for professors. The setup provides an easy way for educators to ask questions during course support, streamlining communication without sharing sensitive student data.
CUSTOM MARKDOWN EDITOR
Custom Markdown Editor with Mathjax for LaTeX support and code highlighting.