Portfolio, experiments, things learned, and things that I’m learning!
CSS AUTO HEADING NUMBERING
CSS counters provide a powerful way to automatically number headings in HTML documents without JavaScript or manual updates. This technique uses the counter-reset and counter-increment properties to create hierarchical numbering, such as 1., 1.1., 1.1.1., and so on. In this demo, we apply counters to h2 through h6 elements, resetting at each level for proper nesting. An optional “nocount” class allows skipping numbering for specific headings, maintaining continuity. This approach ensures consistent, dynamic numbering that updates automatically as content changes.
PASSCODE-GATED CONTENT (ANGULARJS CONCEPT)
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.
ELO RATING CALCULATOR
The Elo rating system is a method for calculating the relative skill levels of players in competitive games, particularly chess. It adjusts ratings based on game outcomes, rewarding wins against stronger opponents and penalizing losses to weaker ones. This calculator demonstrates Elo calculations, allowing users to input current ratings and game results to see rating changes. Elo is a form of pairwise comparison, evaluating players in head-to-head matchups. Beyond chess, it’s used in esports, online gaming platforms, and even non-gaming contexts like ranking algorithms. The widget’s simplicity highlights how binding frameworks like Angular or Vue enable quick development of interactive tools with minimal code.
ACCESSIBLE CHEMISTRY EQUATIONS (MATHJAX + MHCHEM)
Rendering chemistry notation online often meant choosing between fidelity and accessibility. Using MathJax 2.7 + the mhchem extension we get both: crisp typeset equations, semantic MathML for assistive tech, and concise authoring with \ce{} macros.
REVEAL.JS PRESENTATION WITH MATHJAX
An interactive presentation tool combining Reveal.js for slide navigation and MathJax for rendering LaTeX mathematical equations. This project demonstrates how to create engaging, step-by-step math presentations with fragment animations and proper equation formatting.
CLIPBOARD.JS COPY BUTTON
Clipboard.js is a lightweight JavaScript library that enables copying text to the clipboard without relying on Flash or complex workarounds. In this demo, it powers a simple copy button that targets an input field, allowing users to copy pre-filled content with a single click. Copy buttons and icons have become ubiquitous on the web, appearing in code snippets, shareable links, and form fields to enhance user experience by reducing manual selection and copying. This implementation uses Clipboard.js for broad browser support, with event handling to provide visual feedback like a “Copied!” message.
LOCALSTORAGE VISIT COUNTER
A simple JavaScript utility demonstrating localStorage usage by tracking user visit counts across browser sessions. This project showcases browser-based persistence without server-side databases, highlighting the power of the Web Storage API for client-side data retention.
BELL CURVE WITH SHADED REGIONS (GOOGLE CHARTS)
I built an interactive bell curve visualization using Google Charts API to display a normal distribution with customizable shaded regions. It leverages the jStat library for probability density calculations, allowing users to adjust mean, standard deviation, and shading bounds dynamically. The chart renders as an area chart with opacity styling for shading, providing a clear visual representation of statistical concepts like confidence intervals or hypothesis testing areas.
ACCESSIBLE MATH NOTES WITH ANSWER TOGGLE
I developed a simple JavaScript toggle for showing/hiding answers in math notes, using EM tags for semantic markup. It allows professors to maintain a single HTML document with embedded answers that can be toggled on/off for students, printing, or PDF exports. This reduces maintenance overhead by eliminating the need for separate versions of content with and without answers.
MARKDOWN PARSER DEMO
Markdown is a lightweight markup language that uses plain text formatting syntax to create rich text documents. It employs simple symbols like # for headings, * for emphasis, and for links, making it easy to write and read. Originally designed by John Gruber, Markdown is widely used for documentation, blogs, and README files on platforms like GitHub. This demo uses the Marked library to parse Markdown content from a script tag, tokenize it, and render it as HTML in the browser. A Markdown parser on the web is useful for real-time previews in editors, content management systems, and forums, enabling users to write in Markdown and see formatted output instantly without server-side processing.