feat: use multiple column layout for experience section on larger scr…

…eens
thaddeuskkr · Feb 27, 2025 · 1803d9f · 1803d9f
2 parents f35d2a1 + 347bb5c
commit 1803d9f
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -95,19 +95,25 @@ const path = Astro.url.pathname.replace(/\//g, "");
         </div>
         <div class="mb-4 flex flex-col gap-2">
             <h2 class="mt-2 text-xl font-bold">Experience</h2>
-            <h3 class="font-semibold">Programming Languages</h3>
-            <ul class="list-inside list-disc">
-                <li>Astro (HTML/CSS)</li>
-                <li>Node.js & Bun (TypeScript/JavaScript)</li>
-                <li>Python</li>
-                <li>Bash</li>
-            </ul>
-            <h3 class="font-semibold">Tools</h3>
-            <ul class="list-inside list-disc">
-                <li>Docker</li>
-                <li>Caddy</li>
-                <li>Git & SSH</li>
-            </ul>
+            <div class="flex flex-col gap-2 md:flex-row md:gap-10">
+                <div class="flex flex-col gap-2">
+                    <h3 class="font-semibold">Programming Languages</h3>
+                    <ul class="list-inside list-disc">
+                        <li>Astro (HTML/CSS)</li>
+                        <li>Node.js & Bun (TypeScript/JavaScript)</li>
+                        <li>Python</li>
+                        <li>Bash</li>
+                    </ul>
+                </div>
+                <div class="flex flex-col gap-2">
+                    <h3 class="font-semibold">Tools</h3>
+                    <ul class="list-inside list-disc">
+                        <li>Docker</li>
+                        <li>Caddy</li>
+                        <li>Git & SSH</li>
+                    </ul>
+                </div>
+            </div>
         </div>
         <hr class="mx-auto my-8 text-zinc-700" />
         <div class="mb-4 flex flex-col gap-4">