feat: introduce new components for improved structure and functionality

src/components/Intro.astro

@@ -6,6 +6,7 @@ import socialFacebook from "@/assets/images/social-facebook.svg";
 import socialGithub from "@/assets/images/social-github.svg";
 import socialLinkedIn from "@/assets/images/social-linkedin.svg";
 import socialX from "@/assets/images/social-x.svg";
+import SocialLink from "@/components/SocialLink.astro";
 ---
 
 <div class="flex flex-col min-h-full items-center justify-center">
@@ -18,44 +19,36 @@ import socialX from "@/assets/images/social-x.svg";
   <h1 class="text-5xl font-bold mt-4">Dhemas Nurjaya</h1>
   <h2 class="text-xl mt-2">Passionate Software Engineer</h2>
   <div class="flex flex-row gap-8 mt-8" aria-label="social links">
-    <a
+    <SocialLink
       href="https://www.linkedin.com/in/dhemas-nurjaya-030890bb"
-      aria-label="Linkedin"
-    >
-      <Image
-        src={socialLinkedIn}
-        alt="LinkedIn"
-        loading="eager"
-        class="w-6 h-6 invert"
-      />
-    </a>
-    <a href="https://github.com/dhemasnurjaya" aria-label="Github">
-      <Image
-        src={socialGithub}
-        alt="Github"
-        loading="eager"
-        class="w-6 h-6 invert"
-      />
-    </a>
-    <a href="https://x.com/dhemaseka" aria-label="X">
-      <Image src={socialX} alt="X" loading="eager" class="w-6 h-6 invert" />
-    </a>
-    <a href="https://www.facebook.com/Dhemas" aria-label="Facebook">
-      <Image
-        src={socialFacebook}
-        alt="Facebook"
-        loading="eager"
-        class="w-6 h-6 invert"
-      />
-    </a>
-    <a href="mailto:dhemasnurjaya@gmail.com" aria-label="Email">
-      <Image
-        src={socialEmail}
-        alt="Email"
-        loading="eager"
-        class="w-6 h-6 invert"
-      />
-    </a>
+      label="Linkedin"
+      icon={socialLinkedIn}
+      alt="LinkedIn"
+    />
+    <SocialLink
+      href="https://github.com/dhemasnurjaya"
+      label="Github"
+      icon={socialGithub}
+      alt="Github"
+    />
+    <SocialLink
+      href="https://x.com/dhemaseka"
+      label="X"
+      icon={socialX}
+      alt="X"
+    />
+    <SocialLink
+      href="https://www.facebook.com/Dhemas"
+      label="Facebook"
+      icon={socialFacebook}
+      alt="Facebook"
+    />
+    <SocialLink
+      href="mailto:dhemasnurjaya@gmail.com"
+      label="Email"
+      icon={socialEmail}
+      alt="Email"
+    />
   </div>
   <div class="mt-24"></div>
 </div>