feat(home): mail and phone links and aria labels

app/[locale]/page.tsx

@@ -31,16 +31,24 @@ export default function Home() {
             filter: "drop-shadow(10px 0 25px rgb(from color-mix(in oklch, var(--foreground) 9%, transparent) r g b / .05))",
           }}
           className="mask-[linear-gradient(to_bottom,#000_80%,#0000)]"
+          loading="eager"
         />
         <div className="flex flex-col gap-4">
-          <div className="flex justify-center gap-3">
-            <Button variant="outline">
+          <div className="flex justify-center gap-3 flex-wrap">
+            <Button asChild variant="outline">
+              <a
+                href="mailto:nico@byhaider.dev"
+                aria-label={t("landingPage.contact.email")}
+              >
                 <Mail />
                 nico@byhaider.dev
+              </a>
             </Button>
-            <Button variant="outline">
+            <Button asChild variant="outline">
+              <a href="tel:+436702060140" aria-label={t("landingPage.contact.phone")}>
                 <Phone />
                 +43 670 2060140
+              </a>
             </Button>
           </div>
           <div className="flex gap-3 justify-center">
@@ -49,8 +57,8 @@ export default function Home() {
                 href="https://www.linkedin.com/in/nico-haider-164444316"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="LinkedIn"
               >
+                <span className="sr-only">{t("landingPage.social.linkedin")}</span>
                 <LinkedInIcon className="size-5" />
               </a>
             </Button>
@@ -59,8 +67,8 @@ export default function Home() {
                 href="https://www.instagram.com/nico.hdr8/"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Instagram"
               >
+                <span className="sr-only">{t("landingPage.social.instagram")}</span>
                 <InstagramIcon className="size-5" />
               </a>
             </Button>
@@ -69,8 +77,8 @@ export default function Home() {
                 href="https://www.facebook.com/nico.haider.33/"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Facebook"
               >
+                <span className="sr-only">{t("landingPage.social.facebook")}</span>
                 <FacebookIcon className="size-5" />
               </a>
             </Button>

messages/de.json

@@ -16,6 +16,15 @@
   "landingPage": {
     "title": "Hi, ich bin Nico Haider.",
     "subtitle": "Softwareentwickler für Webseiten, Web-Apps, Mobile-Apps, Desktop-Apps und vieles mehr.",
-    "location": "Dobersberg, Niederösterreich"
+    "location": "Dobersberg, Niederösterreich",
+    "contact": {
+      "email": "E-Mail senden",
+      "phone": "Telefonnummer anrufen"
+    },
+    "social": {
+      "linkedin": "LinkedIn-Profil öffnen",
+      "instagram": "Instagram-Profil öffnen",
+      "facebook": "Facebook-Profil öffnen"
+    }
   }
 }

messages/en.json

@@ -12,5 +12,19 @@
     "light": "Light",
     "dark": "Dark",
     "system": "System"
+  },
+  "landingPage": {
+    "title": "Hi, I'm Nico Haider.",
+    "subtitle": "Software developer for websites, web apps, mobile apps, desktop apps, and more.",
+    "location": "Dobersberg, Lower Austria",
+    "contact": {
+      "email": "Send email",
+      "phone": "Call phone number"
+    },
+    "social": {
+      "linkedin": "Open LinkedIn profile",
+      "instagram": "Open Instagram profile",
+      "facebook": "Open Facebook profile"
+    }
   }
 }