♻️ some more changes

src/components/tailwind-indicator.astro

@@ -1,23 +1,25 @@
-<div id="tailwind-indicator" class="fixed bottom-5 left-5 z-[9999999] flex h-6 items-center justify-center gap-2 rounded-full bg-black p-3 font-mono text-xs text-white">
-    <div id="xs" class="block sm:hidden">xs</div>
-    <div id="sm" class="hidden sm:block md:hidden">sm</div>
-    <div id="md" class="hidden md:block lg:hidden">md</div>
-    <div id="lg" class="hidden lg:block xl:hidden">lg</div>
-    <div id="xl" class="hidden xl:block 2xl:hidden">xl</div>
-    <div id="xxl" class="hidden 2xl:block xxl:hidden">2xl</div>
-    | <span id="media-size">0</span>px
+<div
+  id="tailwind-indicator"
+  class="fixed bottom-5 left-5 z-[9999999] flex h-6 items-center justify-center gap-2 rounded-full bg-black p-3 font-mono text-xs text-white">
+  <div id="xs" class="block sm:hidden">xs</div>
+  <div id="sm" class="hidden sm:block md:hidden">sm</div>
+  <div id="md" class="hidden md:block lg:hidden">md</div>
+  <div id="lg" class="hidden lg:block xl:hidden">lg</div>
+  <div id="xl" class="hidden xl:block 2xl:hidden">xl</div>
+  <div id="xxl" class="hidden 2xl:block xxl:hidden">2xl</div>
+  | <span id="media-size">0</span>px
 </div>
 
 <script>
-    document.addEventListener('astro:page-load', () => {
-        function updateMediaSize() {
-            const mediaSizeDisplay = document.getElementById('media-size')!;
-            mediaSizeDisplay.textContent = window.innerWidth.toString();
-        }
+  document.addEventListener("astro:page-load", () => {
+    function updateMediaSize() {
+      const mediaSizeDisplay = document.getElementById("media-size")!;
+      mediaSizeDisplay.textContent = window.innerWidth.toString();
+    }
 
-        window.addEventListener('resize', updateMediaSize);
+    window.addEventListener("resize", updateMediaSize);
 
-        // Initial call to set the media size on page load
-        updateMediaSize();
-    })
-</script>
+    // Initial call to set the media size on page load
+    updateMediaSize();
+  });
+</script>

src/pages/index.astro

@@ -10,9 +10,7 @@ const totalYearsXP = new Date().getFullYear() - 2021;
 const totalYearsDev = new Date().getFullYear() - 2017;
 
 const workExperiences = (await getCollection("work")).sort(
-  (a, b) =>
-    (b.data.endDate?.getTime() ?? new Date().getTime()) -
-    (a.data.endDate?.getTime() ?? new Date().getTime())
+  (a, b) => b.data.startDate.getTime() - a.data.startDate.getTime()
 );
 
 const projects = (await getCollection("projects")).sort(
@@ -81,15 +79,13 @@ const projects = (await getCollection("projects")).sort(
         </a>
       </li>
       <li>
-        <a
-          class="inline-flex gap-1.5 items-center"
-          href="mailto:[email protected]"
-          target="_blank"
-          rel="noopener noreferrer">
+        <button
+          class="inline-flex gap-1.5 items-center underline hover:decoration-wavy decoration-[0.1em]"
+          id="email">
           <Icon type="arobase" class="size-4" />
           <span>email</span>
           <Icon type="arrow-external" class="size-4" />
-        </a>
+        </button>
       </li>
       <li>
         <a
@@ -136,10 +132,12 @@ const projects = (await getCollection("projects")).sort(
           const xp = entry.data;
           const { Content } = await entry.render();
           const startDate = formattedDate(xp.startDate);
-          const endDate = xp.endDate ? formattedDate(xp.endDate) : "present";
+          const endDate = xp.endDate
+            ? `to ${formattedDate(xp.endDate)}`
+            : "present";
 
           const formattedDateRange =
-            startDate === endDate ? startDate : `${startDate} to ${endDate}`;
+            startDate === endDate ? startDate : `${startDate} ${endDate}`;
           return (
             <li>
               <article class="flex flex-col gap-2">
@@ -183,12 +181,29 @@ const projects = (await getCollection("projects")).sort(
                   </a>
                 </h3>
 
-                <div>TODO...</div>
+                <div class="text-zinc-700/90 dark:text-white/80 [&_ul]:ms-6 [&_ul>li]:list-disc">
+                  <Content />
+                </div>
               </article>
             </li>
           );
         })
       }
     </ul>
   </section>
+  <script>
+    document.addEventListener("astro:page-load", () => {
+      const emailBtn = document.querySelector(
+        "button#email"
+      ) as HTMLButtonElement;
+
+      console.log({ emailBtn });
+      if (emailBtn) {
+        emailBtn.addEventListener("click", () => {
+          window.location.href =
+            "mailto:[email protected]?subject=Contact+Website";
+        });
+      }
+    });
+  </script>
 </BaseLayout>