feat: add social media link back

And use `simple-icons-astro` to import the icons from `simpleicons`.
Sadly, `twitter` icon is removed from `simpleicons`, so I have to use
the `x` icon

package.json

@@ -13,6 +13,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.10.1",
     "global": "^4.4.0",
+    "simple-icons-astro": "^13.12.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.4"
   }

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Navbar from "../components/Navbar.astro";
+import { Github, X as Twitter } from "simple-icons-astro";
 ---
 
 <Layout title="Barra Ihsan">
@@ -10,15 +11,29 @@ import Navbar from "../components/Navbar.astro";
       <div class="font-extrabold">
         <h1 class="text-4xl font-extrabold md:text-6xl 2xl:text-8xl">Hello!</h1>
         <h1 class="text-5xl font-extrabold md:text-8xl 2xl:text-9xl">
-          I'm Barra 👋
+          I'm Barra
         </h1>
       </div>
 
-      <p class="text-md md:text-3xl 2xl:text-4xl">
-        I’m a Front-End developer, currently interested at making useful website
+      <p class="text-md md:text-3xl 2xl:text-4xl md:mt-5">
+        I'm a Front-End developer, currently interested at making useful website
         and CLI tools using Rust.
       </p>
 
+      <div class="flex gap-4 md:gap-8">
+        <a href="https://github.com/barraIhsan" target="_blank">
+          <Github
+            class="size-7 fill-gray-50 transition-colors hover:fill-gray-300 md:size-12"
+          />
+        </a>
+
+        <a href="https://twitter.com/barrsan_" target="_blank">
+          <Twitter
+            class="size-7 fill-gray-50 transition-colors hover:fill-gray-300 md:size-12"
+          />
+        </a>
+      </div>
+
       <!-- Mesh Gradient Background-->
       <div
         class="absolute left-[-15%] top-[-30%] h-[60%] w-1/3 rounded-full bg-indigo-500/20 blur-3xl pointer-events-none"