From 3282e5ebe374717d3bb00049189dfd1b633e84eb Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Sat, 14 Sep 2024 06:26:15 +0700
Subject: [PATCH] refactor: experience sections

---
 src/components/sections/Experience.astro | 142 +++++++++++------------
 src/pages/about.astro                    |   2 +-
 2 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro
index 19724b6..e831303 100644
--- a/src/components/sections/Experience.astro
+++ b/src/components/sections/Experience.astro
@@ -5,7 +5,7 @@ import { work } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Experience">
-  <ul class="flex flex-col">
+  <div>
     {
       work.map(
         (
@@ -27,83 +27,81 @@ import { work } from "@cv";
           const isLastItem = index === work.length - 1;
 
           return (
-            <li class="relative">
-              <div class="group grid transition-all sm:grid-cols-12 sm:gap-8">
-                <header class="mt-1 text-xs font-bold text-black/50 dark:text-white/50 sm:col-span-2">
-                  <time datetime={startDate}>{startYear}</time>
-                  <span class="mx-1">-</span>
-                  <time datetime={endDate}>{endYear}</time>
-                </header>
-                <div class="relative flex flex-col pb-8 sm:col-span-10">
-                  {!isLastItem && (
-                    <div class="hidden before:absolute before:-ml-6 before:mt-2 before:h-full before:w-px before:bg-black dark:before:bg-white md:block" />
-                  )}
-                  <div class="absolute mt-2 hidden h-2 w-2 -translate-x-[1.71rem] rounded-full bg-black dark:bg-white md:block" />
-                  <h3 class="text-base font-medium leading-snug text-black dark:text-white">
-                    {position}
-                    <span>@</span>
-                    {url ? (
-                      <a
-                        class="inline-flex items-center hover:text-black/75 dark:hover:text-white/75"
-                        href={url}
-                        target="_blank"
-                        rel="noopener noreferrer"
+            <div class="group grid transition-all sm:grid-cols-12 sm:gap-8">
+              <div class="mt-1 text-xs font-bold text-black/50 dark:text-white/50 sm:col-span-2">
+                <time datetime={startDate}>{startYear}</time>
+                <span class="mx-1">-</span>
+                <time datetime={endDate}>{endYear}</time>
+              </div>
+              <div class="relative flex flex-col sm:col-span-10">
+                {!isLastItem && (
+                  <div class="hidden before:absolute before:-ml-6 before:mt-2 before:h-full before:w-px before:bg-black dark:before:bg-white md:block" />
+                )}
+                <div class="absolute mt-2 hidden h-2 w-2 -translate-x-[1.71rem] rounded-full bg-black dark:bg-white md:block" />
+                <h3 class="text-base font-medium leading-snug text-black dark:text-white">
+                  {position}
+                  <span>@</span>
+                  {url ? (
+                    <a
+                      class="inline-flex items-center hover:text-black/75 dark:hover:text-white/75"
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {name}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        class="ml-1 h-4 w-4 shrink-0 translate-y-px"
+                        aria-hidden="true"
                       >
-                        {name}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                          class="ml-1 h-4 w-4 shrink-0 translate-y-px"
-                          aria-hidden="true"
-                        >
-                          <path
-                            fill-rule="evenodd"
-                            d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
-                            clip-rule="evenodd"
-                          />
-                        </svg>
-                      </a>
-                    ) : (
-                      name
-                    )}
-                  </h3>
-                  {(location || location_type) && (
-                    <p class="mt-2 text-sm">
-                      {location}
-                      {location && location_type && " - "}
-                      {location_type}
-                    </p>
+                        <path
+                          fill-rule="evenodd"
+                          d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
+                          clip-rule="evenodd"
+                        />
+                      </svg>
+                    </a>
+                  ) : (
+                    name
+                  )}
+                </h3>
+                {(location || location_type) && (
+                  <p class="mt-2 text-sm">
+                    {location}
+                    {location && location_type && " - "}
+                    {location_type}
+                  </p>
+                )}
+                <div class="mt-2 flex flex-col gap-4 text-sm">
+                  {summary && (
+                    <ul class="text-black/50 dark:text-white/50">
+                      {Array.isArray(summary) ? (
+                        summary.map((item) => <li>{item}</li>)
+                      ) : (
+                        <li>{summary}</li>
+                      )}
+                    </ul>
+                  )}
+                  {responsibilities && (
+                    <ExpandButton client:load>
+                      <div>
+                        <h4 class="font-medium">Responsibilities:</h4>
+                        <ul class="list-inside list-disc space-y-1 text-black/50 dark:text-white/50">
+                          {responsibilities.map((responsibility) => (
+                            <li>{responsibility}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    </ExpandButton>
                   )}
-                  <div class="mt-2 flex flex-col gap-4 text-sm">
-                    {summary && (
-                      <ul class="text-black/50 dark:text-white/50">
-                        {Array.isArray(summary) ? (
-                          summary.map((item) => <li>{item}</li>)
-                        ) : (
-                          <li>{summary}</li>
-                        )}
-                      </ul>
-                    )}
-                    {responsibilities && (
-                      <ExpandButton client:load>
-                        <div>
-                          <h4 class="font-medium">Responsibilities:</h4>
-                          <ul class="list-inside list-disc space-y-1 text-black/50 dark:text-white/50">
-                            {responsibilities.map((responsibility) => (
-                              <li>{responsibility}</li>
-                            ))}
-                          </ul>
-                        </div>
-                      </ExpandButton>
-                    )}
-                  </div>
                 </div>
               </div>
-            </li>
+            </div>
           );
         },
       )
     }
-  </ul>
+  </div>
 </Section>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 30177d5..ddef9f7 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -22,7 +22,7 @@ import { SITE } from "@/consts";
     />
   </TopLayout>
   <BottomLayout>
-    <div class="flex flex-col gap-5">
+    <div class="space-y-8 md:col-span-4">
       <Experience />
       <Skills />
       <Awards class="order-first" />