Jason Brain's Tech Blog

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

by Jason Brain

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.

Comments