Dynamic columns in resume-skills block

[srgg]

NOTE: This PR depends on changes from #3259

Purpose

Add dynamic columns configuration to the resume-skills block with responsive breakpoints.

Uses standard design.columns parameter (default 2) that creates a progressive responsive grid layout: 1→2→3→4→5 columns across breakpoints (sm→md→lg→xl→2xl). Replaces fixed 2-column flex layout with CSS Grid for better multi-column control and flexibility.

Testing

Ensure setting three columns in experience.md:

  - block: skills
    content:
      title: Skills & Hobbies
      username: admin
    design:
      show_skill_percentage: false
      spacing: "3rem 0 0 0"
      columns: 3

Add a third item with several sub-items under skills:

skills:
  - name: Technical Skills
    items:
      - name: Python & PyTorch
        description: 'Some description text to consume space demonstrating the column start position unevenness'
        percent: 90
        icon: python
      - name: R
        description: 'Some description text to consume space demonstrating the column start position unevenness'
        percent: 80
        icon: r-project
      - name: SQL
        description: 'Some description text to consume space demonstrating the column start position unevenness'
        percent: 70
        percent: 95
        icon: code-bracket
      - name: Machine Learning
        description: ''
        percent: 100
        icon: chart-bar
      - name: Cloud Computing (AWS/GCP)
        description: ''
        percent: 85
        icon: cloud
  - name: Hobbies
    color: '#eeac02'
    color_border: '#f0bf23'
    items:
      - name: Hiking in the Rockies
        description: ''
        percent: 80
        icon: person-simple-walk
      - name: Building Custom PCs
        description: ''
        percent: 90
        icon: cpu-chip
      - name: Sci-Fi Reading
        description: ''
        percent: 70
        icon: book-open
  - name: 'Something else'
    items:
      - name: 'Sub-item #1'
      - name: 'Sub-item #2'
      - name: 'Sub-item #3'

Screenshots

Large screen:

Medium:

Small:

Documentation

Uses the standard design.columns parameter is available across Hugo Blox blocks. No additional documentation changes required as this follows existing design parameter conventions.

[netlify]

✅ Deploy Preview for academic-demo canceled.

Name	Link
🔨 Latest commit	50a1905
🔍 Latest deploy log	https://app.netlify.com/projects/academic-demo/deploys/68c87e9051938800084b0797

[gcushen]

@srgg please rebase / resolve conflicts. Thx

[srgg]

@srgg please rebase / resolve conflicts. Thx

@gcushen Done — ready for another review when you get a chance.

[gcushen]

Thanks, I'll merge and we can trial it out and see what user feedback we get. Most users likely won't customise the grid, and some users who do may complain that they set the value to '5', for example, but didn't see 5 columns (intentionally by design, to prioritise responsiveness for end user).

[srgg]

Thanks, I'll merge and we can trial it out and see what user feedback we get. Most users likely won't customise the grid, and some users who do may complain that they set the value to '5', for example, but didn't see 5 columns (intentionally by design, to prioritise responsiveness for end user).

@gcushen Honestly, I needed three columns, but I decided to add support for five, just in case, considering that should be more than enough even on retina displays.

Thank you for the review.