Tooling Up: Rapidly Building an Image Optimization Workflow with AI

As I moved down my Project Roadmap, the next major task was Image Optimization. The goal? Improve Core Web Vitals by implementing responsive images (srcset) across the portfolio.

I looked at the task: Create resized versions of key assets (480w, 800w, 1200w).

I could have opened Photoshop and manually exported dozens of files. I could have used a command-line tool. But as a Creative Technologist, I saw an opportunity to build a workflow that I (and others) could use forever.

From Script to Suite in Hours

I had an old, basic script (v1.0.0) lying around that could convert a single image. It was functional but clunky.

Using the Human-AI collaboration workflow I've established with Gemini, we didn't just update the script; we completely overhauled it. In a matter of hours, we took a simple utility and evolved it into v2.2.1 of the Image to WebP Converter.

The Velocity of AI Development

The speed of iteration was staggering. Here is what we accomplished in a single "sprint":

• v2.0.0: Added responsive size generation (automatically creating 480px, 800px, and 1200px versions) and a real-time quality slider.
• v2.1.0: Refactored for offline capability, ensuring the tool works without an internet connection—perfect for secure environments.
• v2.2.0: Added "Force Aspect Ratio" tools (essential for uniform card layouts), custom width inputs, and a ZIP manifest generator.
• v2.2.1: Rapidly diagnosed and fixed a critical download bug by replacing external dependencies with native browser APIs, ensuring stability across all platforms.

Why Build Your Own Tools?

Why spend time building a tool when others exist?

1. Privacy: This tool runs 100% in the browser. No images are uploaded to a server.
2. Workflow Specificity: It is tailored exactly to my project's needs (the specific breakpoints defined in my scratchpad.md).
3. Learning: It serves as another case study in modern, AI-assisted web development.

Try It Out

The tool is open source and available for anyone to use.

• Live Demo: jasonbra1n.github.io/image-to-webp-converter
• Source Code: github.com/jasonbra1n/image-to-webp-converter

Now that the tooling is ready, I'm equipped to tackle the site-wide image optimization task with efficiency and precision.

Check out the full changelog on GitHub.

Announcing v1.5.0: The "Creative Technologist" Update

Following up on this morning's post about strategic content pivots, I'm thrilled to announce the official release of v1.5.0, a milestone update that solidifies the project's architecture and professional branding.

This release is themed around the "Creative Technologist" persona, focusing on standardizing the application's backend and formalizing the Human-AI collaborative workflow that has been so instrumental in this project's rapid development.

🏗️ Architectural Standardization: The Bootstrap Entrypoint

The most significant change in this release is the implementation of src/bootstrap.php. Previously, each page was responsible for loading its own configuration. Now, every page on the site starts with a single, unified entry point:

<?php
// Load application bootstrap
if (file_exists('src/bootstrap.php')) {
    require_once 'src/bootstrap.php';
}
?>

This architectural shift replaces scattered configuration checks with a clean, centralized initialization process. It paves the way for future enhancements like class autoloading and dependency management, making the entire application more robust and scalable.

🤖 AI & Development Workflow

This project is not just a portfolio; it's a living demonstration of a modern development process. Version 1.5.0 formalizes this:

• DJ Brain Project: I've officially added the DJ Brain project to my portfolio. This self-hosted AI jukebox system is a perfect showcase of my full-stack skills, combining Docker, Python, and PHP.
• AI Collaboration: The CONTRIBUTING.md and README.md files now explicitly document the use of Gemini and Google's "Antigravity" IDE as core components of my development stack. You can view my full background and credentials on my Resume.
• Starter Prompts: To streamline future AI coding sessions, I've created a prompt.md file in the repository root. This contains pre-built prompts to quickly bring Gemini up to speed on the project's context and standards.

---

What's Next?

With the architecture now standardized around bootstrap.php, the next phase will focus on the "Image Optimization" task from the roadmap, where we'll implement responsive images using srcset to further improve performance.

As always, you can view the full details in the v1.5.0 release notes on GitHub.

Portfolio Update: Strategic Pivots, Case Studies, and Performance Tuning

It has been a busy week of development on jasonbrain.com. As I continue to refine my digital presence to reflect the "Creative Technologist" persona, I've rolled out a series of significant updates focused on content strategy, technical performance, and deeper storytelling.

Here is a look at what shipped in version 1.4.2.

🌲 Strategic Pivot: Corporate Events

One of the biggest content shifts this week was on the Corporate Events page. Previously, the copy was generic and targeted the broad Toronto market.

I realized that my unique value proposition isn't just "another corporate DJ in the city"—it's my location and expertise in Haliburton and the Kawarthas. I've rewritten the entire section to focus on Corporate Retreats, Off-Site Summits, and Northern Events. This aligns perfectly with the "Tech in Nature" aesthetic of the brand and targets a specific, high-value niche.

📚 Deep Dives: Project Case Studies

A portfolio shouldn't just be a list of links; it should demonstrate how you solve problems. To that end, I've built dedicated Case Study pages for my two flagship web projects:

1. jasonbrain.com Monorepo: Detailing the custom PHP architecture, security hardening, and performance optimizations of this very site.
2. LAB: Digital Workshop: A deep dive into my Vanilla JS Single-Page Application (SPA), explaining the hybrid iframe/injection architecture.

These pages allow me to geek out on the technical details—like the "Facade Pattern" for iframes or the server-side include structure—without cluttering the main marketing pages.

⚡ Performance: The Iframe Facade Pattern

Speaking of technical details, I spent time optimizing the Wedding DJ and Music Production pages. These pages are media-heavy, featuring multiple Spotify and HearThis.at embeds.

To prevent these third-party scripts from tanking the initial page load speed (Core Web Vitals), I implemented a Facade Pattern.

Instead of loading the heavy iframe immediately, I render a lightweight HTML/CSS placeholder that looks like the player. The actual iframe is only injected into the DOM when the user clicks "Load Player." This simple change drastically improved the site's Lighthouse performance scores.

🎨 UI/UX Refinements

Finally, I polished the user experience across the board:

• FAQ Accordions: Converted long lists of text into interactive, collapsible accordions for better readability.
• Resume Expansion: Added my 6+ years of volunteer broadcast experience with Rogers TV (Oshawa Generals) to the Resume page.
• Spotify Placeholders: Styled the new lazy-loading placeholders to match the dark aesthetic of Spotify embeds for a seamless look.

---

What's Next?

With the foundation solid and the content aligned, the next phase will focus on Image Optimization (implementing srcset for responsive images) and potentially exploring some WebGL experiments for the homepage header.

Check out the full changelog on GitHub.

Lab Update: The Radio Stream Player Gets Its Own Stage

 Hey everyone,

I'm excited to share a significant update from the lab! If you've visited lab.jasonbrain.com before, you might have played around with the embedded Radio Stream Player. What started as a fun, integrated tool has grown and evolved, and today, it's taking a major step forward.

From Integrated Tool to Standalone Project

The Radio Stream Player was initially built as just one component of a larger Single Page Application. While this was great for a quick proof-of-concept, the player's feature set and complexity quickly outgrew its humble beginnings. To give it the attention it deserves, I've spun it out into its own standalone project!

This move allows for more focused development, better maintainability, and its very own roadmap for future features. It now lives in its own repository, which you can check out here: Radio-Stream-Player on GitHub.

The v1.1 Release: A Foundation for the Future

As part of this transition, the player just received its v1.1 release, which was all about building a rock-solid foundation. Here are the highlights:

• 🧹 Major Code Refactoring: The original monolithic JavaScript file was completely refactored into clean, modern ES modules (player.js, visualizer.js, stations.js). This makes the code much easier to manage and extend.
• ♿ Accessibility as a Priority: The player is now more accessible than ever, with full screen reader support via aria-label attributes and clear :focus-visible states for keyboard-only navigation.
• ✨ UI/UX Polish: The pop-out player is now more robust, and smaller touches, like a dynamic tooltip for the visualizer style button, have been added to improve the user experience.

The Best of Both Worlds: Re-integration via iFrame

So, what does this mean for the main lab site? The player is coming back, but in a much cleaner way. It will now be embedded as a self-contained <iframe>.

This is a huge win for modularity. The main lab site doesn't need to know anything about the player's internal workings, and the player can be updated and deployed independently. This change is part of a broader effort to modernize the entire lab, whose own progress you can follow on its dedicated GitHub repository.

What's Next?

With a solid foundation in place, the v1.2 roadmap for the Radio Stream Player is focused on exciting new features like allowing users to add their own custom stations and a system for marking favorites.

This has been a rewarding process of taking a small feature, recognizing its potential, and giving it the space to grow into a mature project. Thanks for following along!