Enhance header component with translation support and improve navigation links

- Imported the getTranslation function to provide localized text for the contact link in the header.
- Updated the navigation link filtering to use href instead of text, ensuring language independence.
- Adjusted the translations for the contact link to enhance accessibility and user experience.
- Refined the translations for applied skills in the i18n module for consistency.

src/components/widgets/Header.astro

@@ -33,7 +33,7 @@ export interface Props {
   position?: string;
 }
 
-import { supportedLanguages } from '~/i18n/translations';
+import { supportedLanguages, getTranslation } from '~/i18n/translations';
 
 // Get current language from URL
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
@@ -67,10 +67,12 @@ if (!currentLang) {
 
 // Get translated header data - ensure we're using the current language
 const headerData = getHeaderData(currentLang);
+// Get translations for the current language
+const t = getTranslation(currentLang);
 
-// Filter out the Contact link for the main nav
+// Filter out the Contact link for the main nav - use href instead of text to be language-independent
-const navLinks = headerData.links.filter(link => link.text?.toLowerCase() !== 'contact');
+const navLinks = headerData.links.filter(link => !link.href?.includes('#contact'));
-const contactLink = headerData.links.find(link => link.text?.toLowerCase() === 'contact');
+const contactLink = headerData.links.find(link => link.href?.includes('#contact'));
 
 const {
   id = 'header',
@@ -189,9 +191,14 @@ const {
       <div class="items-center flex justify-between w-full md:w-auto">
         <div class="flex items-center">
           {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
-          {/* Contact Icon */}
+          {/* Contact Icon with proper translation */}
           {contactLink && (
-            <a href={contactLink.href} aria-label="Contact" title="Contact" class="hover:text-link dark:hover:text-white flex items-center hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2.5 transition-colors duration-200 mr-[10px]">
+            <a 
+              href={contactLink.href} 
+              aria-label={t.navigation.contact} 
+              title={t.navigation.contact} 
+              class="hover:text-link dark:hover:text-white flex items-center hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2.5 transition-colors duration-200 mr-[10px]"
+            >
               <Icon name="tabler:mail" class="w-6 h-6" />
             </a>
           )}
@@ -201,4 +208,4 @@ const {
       </div>
     </div>
   </div>
-</header>
+</header>

src/i18n/translations.ts

@@ -1156,7 +1156,7 @@ export const translations: Record<string, Translation> = {
       resume: 'Lebenslauf',
       certifications: 'Zertifizierungen',
       skills: 'Fähigkeiten',
-      appliedSkills: 'Angewandte Fähigkeiten',
+      appliedSkills: 'Fähigkeiten',
       education: 'Ausbildung',
       blog: 'Blog',
       services: 'Dienstleistungen',