Portfolio, experiments, things learned, and things that I’m learning!
STRUCTURED COURSE BUILDER & PPT OUTLINE GENERATOR
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.
SELECTION WORD COUNT BOOKMARKLET
A zero-install browser tool that counts words in any selected text on any webpage. Drag it to your bookmarks bar once, use it everywhere—no extensions, no permissions, no server calls. Perfect for writers checking quotas, students verifying assignments, or anyone working with text limits.
RANDOM BACKGROUND COLORS PER DIV
This project assigns random background colors to all <div> elements on the page using JavaScript, triggered on page load. Refreshing the page generates new colors, creating a dynamic visual effect. The layout uses CSS Flexbox to arrange three main divs (header, middle, bottom) in a column, with responsive adjustments for larger screens. While this could be used for playful UI elements or color-themed designs, it was primarily built for fun and to experiment with how div placement and ordering behave under various Flexbox properties, offering insights into CSS layout mechanics.
INTERACTIVE MULTIPLICATION TABLE
An interactive multiplication table using Vue template bindings and minimal CSS. Adjust the bounds, and hover to trace products.
SHORT URL / PASSWORD BASE CONVERSION GENERATOR
This JavaScript project implements base conversion to generate short URLs or passwords from numerical IDs. It converts a random base-10 number to a custom base-32 representation, using a character set that avoids ambiguous letters (e.g., no ‘0’ vs ‘O’, ‘1’ vs ’l’). I enjoyed building this, exploring number systems and imagining a URL shortener backend where database indices translate to compact, readable codes. Concepts like removing similar-looking characters or using distinguishable fonts enhance usability, making short links or passwords more user-friendly and error-resistant.
CARD GAME
A lightweight “addition War” game in the browser. The UI uses Bootstrap 4 and jQuery for layout/interaction, while the game logic is plain JavaScript. Cards are rendered with Unicode playing-card glyphs, so no image sprites are required. Try it here: card game demo.
ACCESSIBLE MATH CONTENT
Accessible math content in HTML files using LaTeX or TeX code and converted during page load.
JQUERY LIVE SEARCH FILTER
This live search filter uses jQuery to provide instant, client-side filtering of a list as users type in an input field. It attaches data attributes to list items for case-insensitive matching and shows/hides items based on the search term. Live search enhances user experience in applications with large datasets, allowing quick narrowing without page reloads. Alternatives in Vue or Angular implement reactive data and computed properties for declarative filtering. Live search is useful in e-commerce product lists, documentation search, or contact directories. For server-side searches, implement a time delay (debouncing) to throttle requests, reducing load and improving performance.
HANDLEBARS.JS TEMPLATING BASICS
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.
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.