fix: implement proper localized routing for all navigation links

Issue Fixed:
- Navigation links were hardcoded to English routes (/blog, /projects, /contact)
- When on Vietnamese page (/vi/), clicking nav links would switch back to English
- Language context was not preserved when navigating between pages

Solution:
- Updated Navbar to use getLocalizedPath() for all navigation links
- Updated Footer "Discover" section to use localized paths
- Updated all internal links on homepage (CTA buttons, View All links)
- Logo now links to correct language homepage (/ or /vi/)

How It Works:
- getLocalizedPath('/projects', 'en') → '/projects'
- getLocalizedPath('/projects', 'vi') → '/vi/projects'
- Language stays consistent when navigating through the site

Example Flow:
1. User on /vi/ (Vietnamese homepage)
2. Clicks "Dự Án" in navbar
3. Goes to /vi/projects (stays in Vietnamese) ✅
4. Previously went to /projects (switched to English) ❌

All Links Updated:
- ✅ Navbar: Blog, Projects, Contact, Logo
- ✅ Footer: Blog, Projects, Contact
- ✅ Homepage: All CTA buttons, View My Work, Get in Touch, View All Projects, View All Articles
- ✅ Mobile menu: All navigation links

Build Status:
- ✅ 19 pages built successfully
- ✅ 0 errors, 1 minor warning (unused import)
- ✅ All routes functional

Testing:
1. Visit http://localhost:4321/vi/
2. Click "Dự Án" → Goes to /vi/projects ✅
3. Click "Blog" → Goes to /vi/blog ✅
4. Click "Liên Hệ" → Goes to /vi/contact ✅
5. Language context preserved throughout navigation!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: behitek

new-site/src/components/Footer.astro

@@ -1,7 +1,7 @@
 ---
 import { SITE, SOCIAL_LINKS } from '@utils/constants';
 import SocialIcon from '@components/SocialIcon.astro';
-import { getLangFromUrl, useTranslations } from '@i18n/utils';
+import { getLangFromUrl, useTranslations, getLocalizedPath } from '@i18n/utils';
 
 const currentYear = new Date().getFullYear();
 const lang = getLangFromUrl(Astro.url);
@@ -43,17 +43,17 @@ const t = useTranslations(lang);
         <h4 class="font-semibold mb-3">Discover</h4>
         <ul class="space-y-2">
           <li>
-            <a href="/blog" class="text-[var(--color-text-muted)] hover:text-primary-600 transition-colors text-sm">
+            <a href={getLocalizedPath('/blog', lang)} class="text-[var(--color-text-muted)] hover:text-primary-600 transition-colors text-sm">
               {t.nav.blog}
             </a>
           </li>
           <li>
-            <a href="/projects" class="text-[var(--color-text-muted)] hover:text-primary-600 transition-colors text-sm">
+            <a href={getLocalizedPath('/projects', lang)} class="text-[var(--color-text-muted)] hover:text-primary-600 transition-colors text-sm">
               {t.nav.projects}
             </a>
           </li>
           <li>
-            <a href="/contact" class="text-[var(--color-text-muted)] hover:text-primary-600 transition-colors text-sm">
+            <a href={getLocalizedPath('/contact', lang)} class="text-[var(--color-text-muted)] hover:text-primary-600 transition-colors text-sm">
               {t.nav.contact}
             </a>
           </li>

new-site/src/components/Navbar.astro

@@ -2,24 +2,24 @@
 import { SITE } from '@utils/constants';
 import ThemeToggle from './ThemeToggle.astro';
 import LanguageSwitcher from './LanguageSwitcher.astro';
-import { getLangFromUrl, useTranslations } from '@i18n/utils';
+import { getLangFromUrl, useTranslations, getLocalizedPath } from '@i18n/utils';
 
 const currentPath = Astro.url.pathname;
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 
 const NAV_LINKS = [
-  { label: t.nav.blog, href: '/blog' },
-  { label: t.nav.projects, href: '/projects' },
-  { label: t.nav.contact, href: '/contact' },
+  { label: t.nav.blog, href: getLocalizedPath('/blog', lang) },
+  { label: t.nav.projects, href: getLocalizedPath('/projects', lang) },
+  { label: t.nav.contact, href: getLocalizedPath('/contact', lang) },
 ];
 ---
 
 <nav class="fixed top-0 left-0 right-0 z-40 glass border-b border-[var(--color-border)]">
   <div class="container">
     <div class="flex items-center justify-between h-16">
       <!-- Logo -->
-      <a href="/" class="flex items-center space-x-2 font-bold text-xl hover:text-primary-600 transition-colors">
+      <a href={getLocalizedPath('/', lang)} class="flex items-center space-x-2 font-bold text-xl hover:text-primary-600 transition-colors">
         <span class="gradient-text">{SITE.title}</span>
       </a>
 

new-site/src/pages/index.astro

@@ -6,7 +6,7 @@ import ProjectCard from '@components/ProjectCard.astro';
 import SocialIcon from '@components/SocialIcon.astro';
 import { SITE, EDUCATION, TECH_STACK, STATS, SOCIAL_LINKS } from '@utils/constants';
 import { readingTime } from '@utils/helpers';
-import { getLangFromUrl, useTranslations } from '@i18n/utils';
+import { getLangFromUrl, useTranslations, getLocalizedPath } from '@i18n/utils';
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -66,13 +66,13 @@ const recentPosts = allPosts
 
             <!-- CTA Buttons -->
             <div class="flex flex-wrap items-center gap-4 mb-8">
-              <a href="/projects" class="btn-primary">
+              <a href={getLocalizedPath('/projects', lang)} class="btn-primary">
                 {t.home.cta.viewWork}
                 <svg class="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                 </svg>
               </a>
-              <a href="/contact" class="btn-secondary">
+              <a href={getLocalizedPath('/contact', lang)} class="btn-secondary">
                 {t.home.cta.getInTouch}
               </a>
             </div>
@@ -227,7 +227,7 @@ const recentPosts = allPosts
       </div>
 
       <div class="text-center">
-        <a href="/projects" class="btn-primary">
+        <a href={getLocalizedPath('/projects', lang)} class="btn-primary">
           {t.home.featuredProjects.viewAll}
           <svg class="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
@@ -263,7 +263,7 @@ const recentPosts = allPosts
         </div>
 
         <div class="text-center">
-          <a href="/blog" class="btn-primary">
+          <a href={getLocalizedPath('/blog', lang)} class="btn-primary">
             {t.home.latestArticles.viewAll}
             <svg class="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
@@ -289,10 +289,10 @@ const recentPosts = allPosts
         {t.home.cta2.subtitle}
       </p>
       <div class="flex items-center justify-center gap-4 flex-wrap">
-        <a href="/contact" class="btn bg-white text-primary-600 hover:bg-slate-50 text-lg px-8 py-4">
+        <a href={getLocalizedPath('/contact', lang)} class="btn bg-white text-primary-600 hover:bg-slate-50 text-lg px-8 py-4">
           {t.home.cta2.getInTouch}
         </a>
-        <a href="/projects" class="btn border-2 border-white text-white hover:bg-white/10 text-lg px-8 py-4">
+        <a href={getLocalizedPath('/projects', lang)} class="btn border-2 border-white text-white hover:bg-white/10 text-lg px-8 py-4">
           {t.home.cta2.viewWork}
         </a>
       </div>

new-site/src/pages/vi/index.astro

@@ -6,7 +6,7 @@ import ProjectCard from '@components/ProjectCard.astro';
 import SocialIcon from '@components/SocialIcon.astro';
 import { SITE, EDUCATION, TECH_STACK, STATS, SOCIAL_LINKS } from '@utils/constants';
 import { readingTime } from '@utils/helpers';
-import { getLangFromUrl, useTranslations } from '@i18n/utils';
+import { getLangFromUrl, useTranslations, getLocalizedPath } from '@i18n/utils';
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -66,13 +66,13 @@ const recentPosts = allPosts
 
             <!-- CTA Buttons -->
             <div class="flex flex-wrap items-center gap-4 mb-8">
-              <a href="/projects" class="btn-primary">
+              <a href={getLocalizedPath('/projects', lang)} class="btn-primary">
                 {t.home.cta.viewWork}
                 <svg class="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                 </svg>
               </a>
-              <a href="/contact" class="btn-secondary">
+              <a href={getLocalizedPath('/contact', lang)} class="btn-secondary">
                 {t.home.cta.getInTouch}
               </a>
             </div>
@@ -227,7 +227,7 @@ const recentPosts = allPosts
       </div>
 
       <div class="text-center">
-        <a href="/projects" class="btn-primary">
+        <a href={getLocalizedPath('/projects', lang)} class="btn-primary">
           {t.home.featuredProjects.viewAll}
           <svg class="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
@@ -263,7 +263,7 @@ const recentPosts = allPosts
         </div>
 
         <div class="text-center">
-          <a href="/blog" class="btn-primary">
+          <a href={getLocalizedPath('/blog', lang)} class="btn-primary">
             {t.home.latestArticles.viewAll}
             <svg class="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
@@ -289,10 +289,10 @@ const recentPosts = allPosts
         {t.home.cta2.subtitle}
       </p>
       <div class="flex items-center justify-center gap-4 flex-wrap">
-        <a href="/contact" class="btn bg-white text-primary-600 hover:bg-slate-50 text-lg px-8 py-4">
+        <a href={getLocalizedPath('/contact', lang)} class="btn bg-white text-primary-600 hover:bg-slate-50 text-lg px-8 py-4">
           {t.home.cta2.getInTouch}
         </a>
-        <a href="/projects" class="btn border-2 border-white text-white hover:bg-white/10 text-lg px-8 py-4">
+        <a href={getLocalizedPath('/projects', lang)} class="btn border-2 border-white text-white hover:bg-white/10 text-lg px-8 py-4">
           {t.home.cta2.viewWork}
         </a>
       </div>