Systems-Driven Engineering: The Auditor’s Archive
This gallery documents my transition from auditing physical systems to engineering digital ones. Every project here has been individually audited for structural integrity, semantic clarity, and technical scalability. I treat code as a living system that must remain as resilient, adaptive, and intuitive as the human body.
From implementing recursive AI algorithms to managing complex asynchronous data cycles, my focus remains on clean code architecture (BEM/DRY) and strict adherence to WCAG AA accessibility standards. By translating technical rigor into human-centered solutions, I ensure that high-performance engineering never comes at the cost of the user experience.
Initialize Handshake:
Credential Handshake:
Logic & State: Recursive Engineering
I engineered this "Cyber-Theme" environment to demonstrate recursive logic and defensive programming in Vanilla JavaScript. The core engine is designed to handle complex state evaluations without the overhead of external libraries.
The centerpiece is an unbeatable "Hard Mode" powered by the Minimax algorithm, which recursively evaluates every possible game outcome to ensure optimal computer moves. To bridge the gap between back-end logic and UX, I integrated the HTML5 Canvas API to handle dynamic win-line animations and utilized LocalStorage for persistent session state. This project demonstrates the intersection of high-fidelity visual feedback and rigorous mathematical problem-solving.
Inclusive Design: Persistent Task Architectures
TaskMaster is a deep-dive into state persistence and WCAG AA accessibility patterns. I engineered this system to bridge the gap between simple CRUD operations and a high-fidelity user experience.
The application features a robust History Buffer, allowing for non-destructive "Undo" actions by managing a secondary state array. I implemented Event Delegation to handle dynamic DOM updates efficiently and integrated a CSS Variable-driven Theme Engine for instant Light/Dark mode transitions. By prioritizing keyboard navigability and semantic ARIA labeling, I ensured the tool remains performant and accessible across all assistive technologies.
The Meta-Study: Systemic Design Engineering
I architected this environment to serve as a live prototyping engine for the transition from physical systems auditing to high-fidelity digital engineering. Built with a "vanilla-first" philosophy, the site functions as a real-world stress test for core components of my upcoming NERDS Framework. By prioritizing raw architectural integrity over heavy third-party dependencies, I achieved a 98/100/100 Lighthouse performance score, proving that complex UI metaphors—like the "Orange Wedge" tab masking—can coexist with elite-level loading speeds and SEO optimization.
The project operates as a time-boxed "Minimum Viable System," balancing rapid deployment with rigorous standards. The architecture utilizes an 11-tier fluid typography scale to ensure mathematical consistency across the device spectrum, paired with a custom 16px Safety Shelf navigation protocol. This "shelf" acts as a structural anchor, utilizing gradient masking to manage visual weight and provide clear state affordance for active navigation. This site is not just a gallery; it is a Forensic Lab where improvised code and experimental logic are audited in real-time to deliver performant, WCAG AA-compliant products.
Interface & Integration: Asynchronous Data Streams
The API Fun Center is a technical study in asynchronous middleware integration. I engineered this dashboard to demonstrate the seamless handling of multiple third-party data streams within a single unified interface.
I utilized the Fetch API and Promise-based architecture to manage concurrent requests from four unique endpoints. A key focus of this project was implementing robust exception handling—specifically managing API rate-limiting (HTTP 429) and network latency. By isolating the data-fetching logic from the UI rendering, I ensured that the application remains responsive and provides clear diagnostic feedback to the user during the request lifecycle.
Visual & Layout Studies
Beyond functional code, I use these visual studies to document the logic of a system. This collection represents my "Visual Lab," where I stress-test semantic architectures, WCAG AA compliance, and BEM-driven styling to ensure design systems are both scalable and accessible from the first pixel.