diff options
| author | Kyren223 <Kyren223@proton.me> | 2025-01-03 16:27:03 +0200 |
|---|---|---|
| committer | Kyren223 <Kyren223@proton.me> | 2025-01-03 16:27:03 +0200 |
| commit | 26a42509b92a7b0c4712e1496b614e2cbc3e68e2 (patch) | |
| tree | 53d062641bc12e7ef31850e94968b61958d49457 /src/pages | |
| parent | da9d30e16174f7a798544f025f21f04c85d3e1b2 (diff) | |
Added mobile support for skills
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/skills.astro | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/src/pages/skills.astro b/src/pages/skills.astro index 03f4df6..74a99ac 100644 --- a/src/pages/skills.astro +++ b/src/pages/skills.astro @@ -24,25 +24,25 @@ const frameworks = ["Spigot API", "Bubbletea", "Astro"]; --- <Terminal path="skills.md"> - <div class="flex"> - <div class="w-[60%] flex-column items-center"> + <div class="sm:flex"> + <div class="sm:w-[60%] flex-column items-center"> <TerminalBorder header="Languages"> - <div class="grid grid-cols-3 items-center gap-x-[0.625vw]"> + <div class="grid grid-cols-3 items-center gap-x-[5vw] sm:gap-x-[0.625vw]"> {langs.map((lang) => <p>{lang}</p>)} </div> </TerminalBorder> - <TerminalBorder header="Frameworks" extra="my-[2.25vw]"> - <div class="grid grid-cols-1 items-center gap-x-[0.625vw]"> + <TerminalBorder header="Frameworks" extra="my-[5vw] sm:my-[2.25vw]"> + <div class="grid grid-cols-3 sm:grid-cols-1 items-center gap-x-[5vw] sm:gap-x-[0.625vw]"> {frameworks.map((framework) => <p>{framework}</p>)} </div> </TerminalBorder> <TerminalBorder header="Tools"> - <div class="grid grid-cols-1 items-center gap-x-[0.625vw]"> + <div class="grid grid-cols-2 sm:grid-cols-1 items-center gap-x-[5vw] sm:gap-x-[0.625vw]"> {tools.map((tool) => <p>{tool}</p>)} </div> </TerminalBorder> </div> - <div class="w-[40%] pl-[1.25vw]"> + <div class="sm:w-[40%] pt-[5vw] sm:pt-0 sm:pl-[1.25vw]"> <RadarChart max={max} data={data} /> </div> </div> |