Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/_includes/bio.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@
<div class="lg:col-span-2 space-y-8">
{% if bio %}
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Professional Bio
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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">

Professional Bio
</h2>
<div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
{{ bio }}
Expand All @@ -87,8 +87,8 @@

{% if languages is defined and languages is not null %}
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Technologies
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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">

Technologies
</h2>
<div class="flex flex-wrap gap-3">
{% set skills = languages.split(' ') %}
Expand All @@ -98,8 +98,8 @@
{% endif %}

<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Mini-Game
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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">

Mini-Game
</h2>
<p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
<button
Expand Down
Loading