Update navigation links and enhance section IDs for improved accessibility and organization

- Added a new navigation link for "Skills" in the header data.
- Updated section divs in the About Me page to include specific IDs for "About", "Resume", "Skills", "Certifications", and "Education" for better linking and accessibility.
- Ensured consistent structure across content sections to enhance user experience.

src/navigation.ts

@@ -27,12 +27,12 @@ export const getHeaderData = (lang = 'en') => {
         links: [
           { text: t.navigation.about, href: getPermalink('/aboutme', 'page', lang), isHashLink: false },
           { text: t.navigation.resume, href: getPermalink('/aboutme', 'page', lang) + '#resume', isHashLink: true },
+          { text: t.navigation.skills, href: getPermalink('/aboutme', 'page', lang) + '#skills', isHashLink: true },
           {
             text: t.navigation.certifications,
             href: getPermalink('/aboutme', 'page', lang) + '#certifications',
             isHashLink: true,
           },
-          { text: t.navigation.skills, href: getPermalink('/aboutme', 'page', lang) + '#skills', isHashLink: true },
           {
             text: t.navigation.education,
             href: getPermalink('/aboutme', 'page', lang) + '#education',

src/pages/[lang]/aboutme.astro

@@ -417,7 +417,7 @@ const metadata = {
   </Hero>
 
   <!-- Enhanced About Section -->
-  <div class="content-section stagger-animation">
+  <div id="about"class="content-section stagger-animation">
     <Content
       id="about"
       columns={2}
@@ -451,7 +451,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Work Experience -->
-  <div class="content-section stagger-animation">
+  <div id="resume" class="content-section stagger-animation" >
     <ModernWorkExperience
       id="resume"
       title={t.resume.title}
@@ -472,7 +472,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Skills Section with Modern Interactive Pills -->
-  <div class="content-section stagger-animation">
+  <div id="skills" class="content-section stagger-animation">
     <ModernSkills
       id="skills"
       title={t.skills.title}
@@ -489,7 +489,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Certifications with Modern Grid -->
-  <div class="content-section stagger-animation">
+  <div id="certifications" class="content-section stagger-animation">
     <ModernCertifications
       id="certifications"
       title={t.certifications.title}
@@ -508,7 +508,7 @@ const metadata = {
   </div>
 
   <!-- Enhanced Education -->
-  <div class="content-section stagger-animation">
+  <div id="education" class="content-section stagger-animation">
     <ModernEducation
       id="education"
       title={t.education.title}