From d2f774f01ff9b1232648837adba25117f0046199 Mon Sep 17 00:00:00 2001
From: srgg <srggal@gmail.com>
Date: Mon, 15 Sep 2025 15:19:57 -0600
Subject: [PATCH] feat(resume-skills): add dynamic columns with responsive
 breakpoints (#3260)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
```
---
 modules/blox-tailwind/blox/resume-languages/block.html | 2 +-
 modules/blox-tailwind/blox/resume-skills/block.html    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/modules/blox-tailwind/blox/resume-languages/block.html b/modules/blox-tailwind/blox/resume-languages/block.html
index 190cdd1d..ebd0bebc 100644
--- a/modules/blox-tailwind/blox/resume-languages/block.html
+++ b/modules/blox-tailwind/blox/resume-languages/block.html
@@ -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>
diff --git a/modules/blox-tailwind/blox/resume-skills/block.html b/modules/blox-tailwind/blox/resume-skills/block.html
index 53007806..4fe4bdfd 100644
--- a/modules/blox-tailwind/blox/resume-skills/block.html
+++ b/modules/blox-tailwind/blox/resume-skills/block.html
@@ -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 }}