improve accessibility

Signed-off-by: rishichawda <[email protected]>

Author: rishichawda

src/components/footer.astro

@@ -10,6 +10,7 @@ const currentYear = new Date().getFullYear();
         target="_blank"
         rel="noopener noreferrer"
         class="text-gray-500 hover:text-gray-700 transition-colors"
+        aria-label="Visit Rishi's GitHub profile"
       >
         <span class="sr-only">GitHub</span>
         <svg viewBox="0 0 24 24" class="w-5 h-5 sm:w-6 sm:h-6 fill-current"
@@ -23,6 +24,7 @@ const currentYear = new Date().getFullYear();
         target="_blank"
         rel="noopener noreferrer"
         class="text-gray-500 hover:text-gray-700 transition-colors"
+        aria-label="Connect with Rishi on LinkedIn"
       >
         <span class="sr-only">LinkedIn</span>
         <svg viewBox="0 0 24 24" class="w-5 h-5 sm:w-6 sm:h-6 fill-current"
@@ -36,6 +38,7 @@ const currentYear = new Date().getFullYear();
         target="_blank"
         rel="noopener noreferrer"
         class="text-gray-500 hover:text-gray-700 transition-colors"
+        aria-label="Follow Rishi on Instagram"
       >
         <span class="sr-only">Instagram</span>
         <svg

src/components/landing/articles_preview.astro

@@ -208,9 +208,8 @@ const articles = allArticles
         if (dotsContainer) {
           dotsContainer.innerHTML = "";
           for (let i = 0; i < totalSlides; i++) {
-            const dot = document.createElement("button");
+            const dot = document.createElement("span");
             dot.className = `w-2 h-2 rounded-full ${i === currentIndex ? "bg-[#B7BEE7]" : "bg-[#B7BEE7]/40"}`;
-            dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
             dot.setAttribute("data-index", i.toString());
             dotsContainer.appendChild(dot);
           }

src/components/landing/call_to_action.astro

@@ -1,16 +1,22 @@
 <section class="bg-brand-900/[0.05] py-16 md:py-20 px-4">
   <div class="max-w-4xl mx-auto text-center">
-    <h2 class="text-3xl md:text-4xl font-['Red_Hat_Display_Variable'] font-medium text-brand-900 mb-4">
+    <h2
+      class="text-3xl md:text-4xl font-['Red_Hat_Display_Variable'] font-medium text-brand-900 mb-4"
+    >
       Let's Work Together
     </h2>
-    <p class="text-lg md:text-xl font-light text-brand-700 mb-8 font-['Montserrat_Variable']">
-      Have a project in mind or want to discuss potential opportunities? I'd love to hear from you.
+    <p
+      class="text-lg md:text-xl font-light text-brand-700 mb-8 font-['Montserrat_Variable']"
+    >
+      Have a project in mind or want to discuss potential opportunities? I'd
+      love to hear from you.
     </p>
     <a
+      transition:name="cta-cta-button"
       href="/contact/"
       class="bg-brand-700 text-white px-6 py-3 rounded font-['Red_Hat_Display_Variable'] text-sm font-medium uppercase tracking-wide hover:bg-brand-900 transition-colors text-center"
     >
       Get in touch
     </a>
   </div>
-</section>
+</section>

src/components/landing/hero.astro

@@ -64,7 +64,9 @@ import logo from "../../../content/assets/logo/Group 489.svg";
           the digital realm!
         </p>
 
-        <p class="text-white sm:text-md font-light font-['Montserrat_Variable'] leading-7">
+        <p
+          class="text-white sm:text-md font-light font-['Montserrat_Variable'] leading-7"
+        >
           Open to new freelance and open source adventures - feel free to reach
           out for any exciting projects that need some code magic.
         </p>
@@ -106,6 +108,7 @@ import logo from "../../../content/assets/logo/Group 489.svg";
         target="_blank"
         rel="noopener noreferrer"
         class="hover:opacity-80 transition-opacity hover:cursor-pointer"
+        aria-label="Visit Rishi's GitHub profile"
       >
         <svg
           width="32"
@@ -124,6 +127,7 @@ import logo from "../../../content/assets/logo/Group 489.svg";
         target="_blank"
         rel="noopener noreferrer"
         class="hover:opacity-80 transition-opacity hover:cursor-pointer"
+        aria-label="Connect with Rishi on LinkedIn"
       >
         <svg
           width="26"
@@ -142,11 +146,12 @@ import logo from "../../../content/assets/logo/Group 489.svg";
         target="_blank"
         rel="noopener noreferrer"
         class="hover:opacity-80 transition-opacity hover:cursor-pointer"
+        aria-label="Follow Rishi on Instagram"
       >
         <svg
-        width="26"
-        height="26"
-        fill="none"
+          width="26"
+          height="26"
+          fill="none"
           id="Layer_1"
           data-name="Layer 1"
           xmlns="http://www.w3.org/2000/svg"
@@ -163,8 +168,9 @@ import logo from "../../../content/assets/logo/Group 489.svg";
   <!-- Get in Touch Button -->
   <div class="relative z-20 mt-8 w-fit mx-auto mb-4">
     <a
+      transition:name="hero-cta-button"
       href="/contact/"
-      class="bg-brand-500 text-white px-6 py-3 rounded font-['Red_Hat_Display_Variable'] text-sm font-medium uppercase tracking-wide hover:bg-brand-600 transition-colors block text-center"
+      class="bg-brand-500 text-white px-6 py-3 rounded font-['Red_Hat_Display_Variable'] text-sm font-medium uppercase tracking-wide hover:bg-brand-500 transition-colors block text-center"
     >
       Get in Touch
     </a>