Skip to Main Content

Changelog

A running log of changes to mattrugamas.com since the April 2026 redesign.

April 25, 2026

Changed

  • Rewrote the code syntax theme to align with the site's brand palette. Block code (pre.highlight) and inline code (code.highlighter-rouge) now consume CSS variables, so light and dark modes share one cohesive scheme: keywords use highlight (cyan in dark / deep teal in light), strings use links (pink / deep rose), numbers and names use dates (sage / dark teal), and comments use a mode-specific muted tone.
  • Added --code-bg, --code-comment, --inline-code-bg, and --inline-code-border custom properties to _settings.scss, with values defined for dark, light, and print modes.
  • Removed the hardcoded rose border on pre.highlight blocks; the themed background now defines the well on its own.
  • Redesigned the post footer. The two-column flex layout is now a 1fr auto grid: the left rail (next/previous/random) absorbs slack, the right rail (RSS / about / reply via email) sits flush at content width. Section headings are dropped — structure carries the meaning. The left rail is now a <table> with Next/Previous/Random labels and post-title links; the right rail is an <ol> with visible numerals.
  • The post footer's random link now picks a post on page load and renders its actual title in the footer (rather than a generic "Random post" label that picks at click time).

Fixed

  • Fixed inline code chips (--safe, .travis.yml, etc.) rendering as cream text on a dark slab in light mode, failing WCAG contrast. Light mode now uses dark text on a near-transparent $light-selected tint with a hairline $light-inactive border.

April 23, 2026

Added

  • Added a post footer below Giscus comments on every blog post with two columns: Navigate (next/previous/random post links) and Elsewhere (RSS, about page, reply via email).
  • Added tag system infrastructure: tag filter bar include, tag archive page layout, and inline tag display on posts and homepage. Ready to use once tags are assigned to posts.
  • Added email obfuscation across the site. Contact email is now constructed at runtime via JavaScript data attributes, keeping it out of the HTML source to deter scrapers. Falls back to the about page for no-JS visitors.
  • Added event tracking for tag filter clicks and post footer link clicks.
  • Added an RSS icon (SVG) to the navigation bar actions, to the left of the theme toggle. Visible on all screen sizes.
  • Added a "MR" home wordmark on the left side of the mobile navigation bar for quick tap-to-home navigation. Hidden on desktop where the full nav is visible.

Changed

  • Replaced the plaintext mailto: link on the about page with the new obfuscated email include.
  • Replaced the sun/moon theme toggle icons with an iOS-style toggle switch. Pill-shaped track with a sliding circular thumb; track highlights on light mode.
  • Moved the RSS link from the site footer to the navigation bar.
  • Scoped site navigation CSS from bare nav to header > nav to prevent styles leaking into the tag filter <nav> element.
  • Bumped addressable from 2.8.7 to 2.9.0 and json from 2.15.1 to 2.15.2.1 (transitively pulling public_suffix from 6.0.2 to 7.0.5).
  • Resized the navigation RSS icon from 16px to 20px so it visually matches the height of the theme toggle track.

Fixed

  • Fixed the nav link hover underline animation appearing on touch devices (phones/tablets) where hover is not supported. Wrapped the ::after underline in @media (hover: hover).

April 21, 2026

Fixed

  • Browser URL bar now matches the active color scheme. The theme-color meta tag updates on page load (from stored preference) and on every toggle click, so the chrome reflects dark or light mode in real time.

April 20, 2026

Added

  • Added a third Résumé testimonial from Daren Nkomo (Software Engineer – Trello, Atlassian) highlighting resilience, energy, and ownership under pressure.

Fixed

  • Fixed résumé print output on iOS Safari rendering with a black background and black text when the device is in dark mode. Added color-scheme declarations and forced light-palette CSS custom properties in the print media query.

Changed

  • Tightened wording across five résumé Skills rows for clarity and industry-standard terminology: Frontend now reads "step-through debugging" instead of "live breakpoint tracing," Local development replaced the task-description phrasing with "Full-stack local environments, codebase navigation, feature branch UAT," Observability splits out "distributed tracing" as its own keyword, Incidents leads with "Critical incidents (Sev-1/2)" for context, and Product uses "Pre-release validation" and "release readiness" instead of the redundant "UAT (pre-release testing)" and vague "release feedback."

April 16, 2026

Changed

  • Rebuilt the About page as a single-column layout on all viewports. The previous CSS grid (text-left / image-right on desktop) was replaced with a simple flex column ordered H1 → photo → body. The hero photo now spans the full container width and preserves its native 4:3 aspect ratio at every breakpoint. Container max-width is 900px.
  • Updated the About page H1 to "Hey, I'm Matthew Rugamas," and lightly polished the body copy: combined the opener into a value-forward sentence, surfaced a quantified outcome from the Atlassian role (15% YoY escalation reduction), and added a one-line tools/keywords mention (Splunk, Jira, Postman, LaunchDarkly, MongoDB).
  • Revised the Résumé across most sections: tightened the profile opener to match the About page voice, broadened the tagline with a "debugging, escalations, customer engineering" keyword bridge, dropped a page-specific SEO description into the front matter, tightened the Atlassian role summary to remove duplication with the first bullet, reordered the Atlassian summary bullets so enterprise customer impact leads, trimmed long bullets on incidents and product-influence, and swept verbs so Reduced no longer opens consecutive bullets.
  • Specific dates across the résumé are now month + year on every role for consistency: Atlassian March 2022 – March 2026, Accessibility Lead (Edlio) February 2020 – February 2022, Lead Technical Support Engineer (Edlio) February 2019 – January 2020. Tenure framing on both the résumé profile and the About page moved from "8 years" to "nearly a decade" to match the actual timeline.
  • Expanded the résumé Skills section with a clearer breakdown that surfaces work done on Halp / JSM Chat: added Languages (TypeScript, JavaScript, HTML, CSS, SQL, Bash), Frontend (React, GraphQL, Chrome DevTools, live breakpoint tracing), Local development (running product instances locally, tracing through code, UAT against feature branches), and Observability rows, and split Accessibility (WCAG 2.1 AA, ADA, ARIA) out of the old "Web" row so a full role of accessibility work isn't undersold.
  • Consolidated the Accessibility Lead bullets from 8 to 5, merged overlap, and folded in concrete scale (50+ templates, 100+ audits, 100+ districts).
  • Flipped the Lead Technical Support Engineer opener so ownership of the hardest escalations leads and case volume (80–120 / month) trails as a qualifier. Named the stakeholder type ("non-technical school district administrators and IT staff") on the translation bullet for Customer/Solutions Engineer keyword coverage.
  • Constrained the résumé .cv-tagline to max-width: 75% at the md breakpoint and above so the now-longer tagline ("Senior Support Engineer · Debugging, escalations, customer engineering · Los Angeles, CA") no longer runs the full header width on desktop. Mobile layout is unchanged.
  • Narrowed prose containers to portfolio-standard widths: About page container 900px → 720px, and blog post article container 1000px → 760px. The Giscus .post-comments widget was re-pegged to match the article body. The About hero photo (#selfie) is now capped at max-width: 480px and centered via align-self: center, so it no longer pushes the body copy below the fold on desktop. Post images (figure.shadow_image img.img-responsive) got a max-height: 75vh cap so tall screenshots can't dominate the viewport.
  • Introduced content-width design tokens as CSS custom properties in :root: --content-hero (675px), --content-prose (720px), --content-post (760px), --content-cv (800px), --content-wide (1000px). Replaced all magic-number max-width values across _settings.scss, about.scss, posts.scss, index.scss, resume.scss, and changelog.scss with the corresponding token. Content widths are now defined in one place and reusable sitewide.
  • Scoped posts.scss from bare article selectors to article.blogpost so blog-post styles no longer bleed into homepage article cards. The .blogpost class was added to the <article> element in post.html. Backfilled explicit font-size and line-height on the homepage article header p rule in index.scss to replace values that were previously leaking from the unscoped posts.scss.

Added

  • Added a primary "Get in touch →" CTA (mailto:) and a secondary LinkedIn button to the About page so visitors hiring out of the page have an unambiguous next action.
  • Added a print-only expanded contact row to the résumé header (email, site URL, GitHub) so the saved/printed PDF stands on its own even though screen viewers already have those links on the About page. Implemented via a .print-only utility that's hidden on screen and inline inside @media print.
  • Added two short testimonial blocks to the résumé, pulled from LinkedIn recommendations. The first (Don Pierce, Manager of Cloud Growth Products, Atlassian) sits between Profile and Skills as an opening hook. The second (Al Lawlor, Director / Sr. Manager, CX & Support Operations, Atlassian) closes the page after Experience, introducing a concrete project reference — legacy product sunset ownership and customer migration — that doesn't appear elsewhere on the page. Styled as left-bordered blockquotes on screen with a tightened variant in print. Each citation links to the LinkedIn recommendations page (view on LinkedIn) so readers can verify the quotes; the URL suffix otherwise appended to print links is suppressed for these to keep the printed attribution line readable.
  • Added an @page { margin: 0.6in; } rule and break-inside: avoid on testimonials to keep print margins comfortable and prevent quotes from orphaning across a page break.

Removed

  • Removed the "See what I've been playing →" music link from the About page. The Music page is already reachable from the nav, and the contact CTAs now occupy that visual slot.

April 11, 2026

Added

  • Added Giscus reactions and comments to all blog posts, powered by GitHub Discussions. Visitors with a GitHub account can leave emoji reactions (👍 ❤️ 🎉 etc.) and comments directly on each post. The widget reads from localStorage on load and responds to the dark/light theme toggle via the Giscus postMessage API. Data lives entirely in the repository's Discussions tab — no third-party tracking.

Fixed

  • Centered code blocks in blog posts and constrained them to the same 1000px max-width as prose content. Previously pre.highlight had no width constraint and appeared left-aligned relative to body text.
  • Changed pre.highlight from overflow: scroll to overflow: auto so scrollbars only appear when content actually overflows. On macOS this restores the native overlay scrollbar behavior — bars appear on scroll and fade when idle.
  • Constrained .post-comments (Giscus widget) to 1000px max-width so it aligns with post content rather than stretching to full container width.

Updated

  • Updated résumé: revised Skills section to use more concise, role-aligned categories (Debugging, Incidents, Enablement, Product, Tools, Web). Expanded Accessibility Lead role with a summary paragraph and additional detail bullets. Refreshed Lead Technical Support Engineer bullet wording. Updated Atlassian start date to March 2022.

April 10, 2026

Fixed

  • Eliminated a chained CSS request that was adding ~120ms to the critical render path. styles.scss was using @import "syntax.css", which SASS passes through as a literal CSS @import — causing the browser to download syntax.css sequentially after styles.css. Removed the @import and added syntax.css as a direct <link> in base.html so both files download in parallel.
  • Fixed render-blocking Google Fonts. Replaced rel="stylesheet" with the rel="preload" + onload non-blocking pattern (with a <noscript> fallback) in base.html. Fonts now load asynchronously and do not block initial render.
  • Moved preconnect hints for fonts.googleapis.com and fonts.gstatic.com before the stylesheet links in base.html so connections warm up earlier in the page load sequence.

April 9, 2026

Changed

  • Switched the site font from the OS system stack to Inter (Google Fonts) across all pages. Both $fonts-body and $fonts-titles in _sass/_settings.scss now use Inter with the system stack as a fallback. Weights 400, 500, 600, and 700 are loaded via a single Google Fonts request in the base layout alongside Source Code Pro. Source Code Pro is retained as the monospace face for code and CV metadata. A --font-weight-medium: 500 token was added to the design-token set in :root.

April 8, 2026

Changed

  • Résumé content fully updated. Profile rewritten to position as Senior Support Engineer with 8 years of experience; split into two paragraphs leading with the value proposition. Header tagline updated from "Support Engineer" to "Senior Support Engineer".
  • Atlassian role rewritten with a new structure: opening summary paragraph, three high-signal overview bullets, then three sub-sections — Debugging & Incident Ownership, Product & Engineering Impact, and Process & Team Impact. Dates simplified to 2022–2026. Old sub-sections (Core Responsibilities, Product & Engineering Partnership, Process & Impact, Team Enablement) removed.
  • Accessibility Lead and Lead Technical Support Engineer roles at Edlio condensed: removed summary paragraphs from both, updated bullets to match tighter, outcome-focused copy.

April 7, 2026 · fa87257

Added

  • GA4 custom event tracking across all pages via _includes/event-tracking.html, injected through the base layout. Tracks: navigation link clicks (with desktop vs. hamburger context), theme toggle direction, blog post clicks from the homepage listing, music page external link clicks with platform detection (Spotify / YouTube / SoundCloud / Instagram), social link clicks from the Elsewhere section, the About page music CTA, the résumé LinkedIn link, footer links, the résumé print button, and scroll depth at 25 / 50 / 75 / 100%. All gtag() calls are guarded with a typeof check, making the script a no-op in local development.
  • Save/Print button on the résumé page, placed inside the cv-header grid alongside the name. Triggers window.print() and fires a resume_print_click GA4 event. Styled to match the existing CTA button pattern from the About page. Hidden in print.
  • @media print stylesheet for the résumé. Hides site chrome, resets to black-on-white, sets print-appropriate font sizes and spacing, and appends full link URLs inline — suppressed on the contact link, which already displays as a URL.
  • This changelog page (/changelog), styled in the site theme with a dedicated SCSS partial (_sass/changelog.scss).

Changed

  • Résumé .cv-header restructured from a flexbox row into a two-column CSS grid. Name and Save/Print button share the top row; tagline and LinkedIn link sit below. Mobile stacks all items centered.
  • Footer year is now rendered dynamically via {{ 'now' | date: '%Y' }} instead of a hardcoded value.
  • All external links on the Music page and in the Elsewhere section on About now include target="_blank" rel="noopener noreferrer". Previously, clicking any of them navigated away from the site with no new-tab behavior.

Fixed

  • Hardcoded <link rel="canonical" href="https://mattrugamas.com"/> removed from base.html. Every page was incorrectly declaring the homepage as its canonical URL. The jekyll-seo-tag plugin already handles per-page canonicals correctly via the {% seo %} tag.
  • Print stylesheet was targeting header { display: none }, which hid all semantic <header> elements on the résumé — including the name/contact row and every job title header. Corrected to body > header to target only the site navigation wrapper.
  • Résumé .cv-role entries had break-inside: avoid set, which caused the Atlassian role (the longest entry) to push entirely to page two, leaving a blank gap on page one. Removed the rule from roles; added break-after: avoid on .cv-role-header instead, keeping each role's title attached to its content without blocking mid-role page breaks.

April 3, 2026 · 99181d7

Changed

  • Converted all SCSS placeholder selectors (%content-base, %link-setup, %nav-animate, etc.) to @mixin and added @use 'settings' as * imports to every SCSS partial, aligning with the Dart Sass module system.
  • Added --text-2xl, --text-3xl, and --content-gap to the design token set in _settings.scss.
  • Content area padding switched to clamp() for fluid responsive spacing instead of a fixed value.
  • Homepage blog listing redesigned: posts are now grouped by year, each row shows the date in a right-aligned aside alongside the post title and excerpt, and the full row gets a left-border highlight on hover at desktop widths. Markup in index.html restructured with group_by_exp to generate the year groups.
  • scrollbar-gutter: stable added to the root to prevent layout shift when the scrollbar appears on long pages.
  • Site description in _config.yml updated to reflect current role and location.

April 2, 2026 · 94e6ffa

Changed

  • Added --font-weight-normal, --font-weight-semi, and --font-weight-bold tokens; replaced all hardcoded font-weight values with token references.
  • Corrected --text-sm from 0.875rem to 0.8125rem.
  • Blog post typography overhauled: explicit h2/h3 styles with correct size, weight, and spacing; post date styled using --color-dates and body font; paragraph line-height set to 1.7; removed legacy breakpoint overrides that were fighting the new system.
  • Both blog posts converted from bold-text section headings (**Bold**) to proper Markdown H2s, which now render with the correct semantic hierarchy and visual treatment.

April 2, 2026 · c063f77

Added

  • Music page (music.html) with a full archive of projects, roles, and links to Spotify, YouTube, SoundCloud, and Instagram.
  • Résumé page (resume.html) as a proper web CV: semantic HTML with <article> per role, a <dl> for skills, and full employment history replacing placeholder content.
  • Music and Résumé added to site navigation in _data/navigation.yml.
  • Light/dark mode theme toggle with localStorage persistence. A flash-prevention script in <head> reads the stored preference before first paint. System prefers-color-scheme is used as the default when no stored value exists.
  • Hamburger navigation for mobile viewports, with animated icon, aria-expanded state tracking, and close-on-outside-click behavior.
  • Skip-to-main-content link for keyboard and assistive technology navigation.
  • Two blog posts: The Redesign (March 31) and Still on Jekyll, Probably Forever (April 2).
  • Music-specific SCSS partial (_sass/music.scss) and corresponding @use import in main.scss.

Changed

  • Full CSS rebuild. All stylesheets converted to mobile-first, all color values replaced with CSS custom properties, a spacing scale and type scale established. Dark mode is the default; light mode maps the same palette to warm-background equivalents via a data-theme attribute on the root element.
  • About page rebuilt with CSS Grid (heading → photo → text on mobile; two-column on desktop) in place of the previous column-reverse flexbox approach.
  • Font stack simplified: removed Rubik and Work Sans, retained Source Code Pro for monospace use only. Body and UI text now use the system font stack.
  • Google Fonts loading updated to use preconnect hints and the modern display=swap API.
  • Jekyll updated from 4.2.0 to 4.4.1. jekyll-sass-converter updated from 2.x to 3.x (Dart Sass via sass-embedded). Rouge updated from 3.x to 4.x. Various other dependency bumps in Gemfile.lock.