Refactor Logo component and enhance translations for applied skills

- Updated the Logo component to improve accessibility and visual design, replacing SVG elements with structured HTML and CSS for better responsiveness and styling.
- Introduced a new translations interface for applied skills, adding detailed descriptions and links for various skills across multiple languages.
- Enhanced the about me page to include a new section for applied skills, integrating the updated translations and improving the overall user experience.

src/pages/[lang]/aboutme.astro

@@ -7,11 +7,12 @@ import Content from '~/components/widgets/Content.astro';
 import ModernEducation from '~/components/widgets/ModernEducation.astro';
 import ModernWorkExperience from '~/components/widgets/ModernWorkExperience.astro';
 import ModernCertifications from '~/components/widgets/ModernCertifications.astro';
+import ModernAppliedSkills from '~/components/widgets/ModernAppliedSkills.astro';
 import ModernSkills from '~/components/widgets/ModernSkills.astro';
-import CallToAction from '~/components/widgets/CallToAction.astro';
 import HomePageImage from '~/assets/images/richardbergsma.png';
 
-import { getTranslation, supportedLanguages } from '~/i18n/translations';
+import { getTranslation } from '~/i18n/translations';
+import { getAboutMeTranslation, supportedLanguages } from '~/i18n/translations.aboutme';
 import { SITE } from 'astrowind:config';
 
 export async function getStaticPaths() {
@@ -25,7 +26,10 @@ if (!supportedLanguages.includes(lang)) {
   return Astro.redirect('/en/aboutme');
 }
 
-const t = getTranslation(lang);
+// Get main translations for shared components (navigation, footer, etc.)
+const mainT = getTranslation(lang);
+// Get about me specific translations
+const t = getAboutMeTranslation(lang);
 
 const metadata = {
   title: 'About Richard Bergsma | IT Systems & Automation Specialist | 365DevNet',
@@ -385,11 +389,11 @@ const metadata = {
       '@type': 'Person',
       name: 'Richard Bergsma',
       jobTitle: 'IT Systems and Automation Manager',
-      description: t.hero.subtitle,
+      description: mainT.hero.subtitle,
       image: SITE.site + '/images/richardbergsma.png',
       url: SITE.site,
       sameAs: ['https://www.linkedin.com/in/rrpbergsma', 'https://github.com/rrpbergsma'],
-      knowsAbout: t.skills.items.map((skill) => skill.title),
+      knowsAbout: mainT.skills.items.map((skill) => skill.title),
       worksFor: {
         '@type': 'Organization',
         name: 'COFRA Holding C.V.',
@@ -412,13 +416,13 @@ const metadata = {
     </Fragment>
     
     <Fragment slot="title">
-      <span class="hero-title-enhanced">{t.hero.greeting}</span>
+      <span class="hero-title-enhanced">{mainT.hero.greeting}</span>
     </Fragment>
     
     <Fragment slot="subtitle">
       <div class="hero-subtitle-container">
         <div class="hero-subtitle-enhanced">
-          {t.hero.subtitle}
+          {mainT.hero.subtitle}
         </div>
         <div class="cta-container">
           <a href="#about" class="cta-primary-enhanced">
@@ -452,7 +456,7 @@ const metadata = {
           {t.about.title}
         </h2>
         {
-          t.about.content.map((paragraph, index) => (
+          t.about.content.map((paragraph) => (
             <div class="mb-6">
               <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">{paragraph}</p>
             </div>
@@ -523,6 +527,24 @@ const metadata = {
     />
   </div>
 
+  <!-- Enhanced Applied Skills with Modern Grid -->
+  <div id="microsoft-applied-skills" class="content-section stagger-animation">
+    <ModernAppliedSkills
+      id="microsoft-applied-skills"
+      title={t.appliedSkills.title}
+      subtitle={t.appliedSkills.subtitle}
+      testimonials={t.appliedSkills.items.map((skill) => ({
+        name: skill.name,
+        issueDate: skill.issueDate,
+        description: skill.description,
+        linkUrl: skill.linkUrl,
+      }))}
+      classes={{
+        container: 'glass-enhanced'
+      }}
+    />
+  </div>
+
   <!-- Enhanced Education -->
   <div id="education" class="content-section stagger-animation">
     <ModernEducation