feat(resume-skills): add dynamic columns with responsive breakpoints (#3260)

Implement configurable columns parameter (default 2) with progressive responsive grid: 1→2→3→4→5 columns across breakpoints. Replace the fixed flex layout with CSS Grid for better multi-column control.

Example to change the default layout from 2 cols to 3 cols:

```
  - block: skills
    content:
      title: Skills & Hobbies
      username: admin
    design:
      show_skill_percentage: false
      columns: 3
```
This commit is contained in:
srgg authored and GitHub committed 2025-09-15 22:19:57 +01:00
1 parent 1852d99718
commit d2f774f01f
2 files changed
+4 -3

No files matched your search

@@ -31,7 +31,7 @@
class="text-gray-200 dark:text-gray-700" />
<circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
class="text-primary-600 dark:text-primary-300"
style=stroke-dasharray: calc(2 * 22 / 7 * 120); stroke-dashoffset: calc((2 * 22 / 7 * 120) - ((2 * 22 / 7 * 120) * {{.percent}}/100))" />
style="stroke-dasharray: calc(2 * 22 / 7 * 120); stroke-dashoffset: calc((2 * 22 / 7 * 120) - ((2 * 22 / 7 * 120) * {{.percent}}/100))" />
</svg>
<span class="absolute text-3xl">{{.percent}}%</span>
</div>
@@ -24,12 +24,13 @@
{{ with $block.content.text }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
<div class="flex flex-col lg:flex-row items-start max-w-prose mx-auto gap-3 px-6 md:px-0">
{{ $columns := $block.design.columns | default 2 }}
<div class="grid grid-cols-1 {{ if ge $columns 2 }}md:grid-cols-2{{ end }} {{ if ge $columns 3 }}lg:grid-cols-3{{ end }} {{ if ge $columns 4 }}xl:grid-cols-4{{ end }} {{ if ge $columns 5 }}2xl:grid-cols-5{{ end }} items-start max-w-prose mx-auto gap-3 px-6 md:px-0">
{{ range $skills }}
{{ $color := .color | default "" }}
{{ $color_border := .color_border | default "" }}
<div class="w-full lg:w-1/2">
<div class="w-full">
<div class="mb-5 text-xl font-bold text-gray-900 dark:text-white">
{{ .name | markdownify | emojify }}
{{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}