bio: left-align all right-pane headings and content

[Copilot]

Right-pane section headings were visually offset from the left edge due to a decorative <span> line rendered via flex items-center gap-2, causing headings to appear indented relative to the content beneath them.

Changes

• src/_includes/bio.njk — Removed flex items-center gap-2 and the leading decorative <span class="w-8 h-[2px] bg-accent"> from all three right-pane h2 headings ("Professional Bio", "Technologies", "Mini-Game"), making them flush-left and consistent with their card content.

Before:

<h2 class="... flex items-center gap-2">
  <span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Professional Bio
</h2>

After:

<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">
  Professional Bio
</h2>

[jbampton]

/gemini review

[Copilot]

Pull request overview

This PR updates the bio page’s right-pane card headings to be flush-left by removing the decorative leading rule and the flex layout that caused visual indentation.

Changes:

• Removed the decorative <span> line from the “Professional Bio”, “Technologies”, and “Mini-Game” right-pane headings.
• Dropped flex items-center gap-2 from those headings so heading text aligns with the card content.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gemini-code-assist]

Code Review

This pull request simplifies the section headings in src/_includes/bio.njk by removing decorative accent lines and their associated layout classes. The review feedback suggests increasing the heading font size from text-xs to text-sm to resolve an inverted visual hierarchy where headings appear smaller than the body text, and also recommends consolidating these repeated styles into a shared utility.

[gemini-code-assist]

The heading font size (text-xs, 12px) is currently smaller than the body text it precedes (e.g., text-lg in the bio and text-sm in the mini-game description). This creates an inverted visual hierarchy where the section heading is less prominent than the content beneath it. Increasing the size to text-sm (14px) would improve readability and hierarchy while maintaining the intended 'eyebrow' style. Additionally, since these classes are repeated identically across three sections, consider consolidating them into a shared utility or variable if the project structure allows.

          <h2 class="text-sm font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">

[gemini-code-assist]

Consistent with the other sections, increasing the heading size to text-sm improves the visual hierarchy and ensures the heading is at least as large as the surrounding text.

          <h2 class="text-sm font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">

[gemini-code-assist]

Consistent with the other sections, increasing the heading size to text-sm improves the visual hierarchy, especially here where the description text is already text-sm.

          <h2 class="text-sm font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">