feat: add i18n infrastructure for English and Vietnamese

behitek · claude · behitek · commit a6cbbf094802 · 2025-11-12T23:20:05.000+07:00
i18n Configuration: - Configured Astro i18n routing with 'en' (default) and 'vi' locales - Set prefixDefaultLocale: false (English URLs without /en prefix) - Updated tsconfig.json to add @i18n/* path alias Translation Files: - Created comprehensive translation files for English (en.ts) and Vietnamese (vi.ts) - Organized translations by page/section: nav, home, projects, contact, blog, footer, common - Vietnamese translations provided for all UI elements Components: - Created LanguageSwitcher component with toggle button (EN ⇄ VI) - Shows current language with globe icon - Preserves current path when switching languages - Integrated into Navbar (desktop & mobile) BaseLayout Updates: - Added dynamic lang attribute based on URL locale - Supports proper HTML lang tags for SEO and accessibility Build Status: - ✅ Dev server running successfully on http://localhost:4321/ - ✅ No errors, pages load correctly - ✅ TypeScript paths configured correctly Next Steps: - Update individual pages to use translation strings - Implement localized routing for all pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/new-site/astro.config.mjs b/new-site/astro.config.mjs
@@ -6,6 +6,13 @@ import tailwind from '@astrojs/tailwind';
 // https://astro.build/config
 export default defineConfig({
   site: 'https://behitek.com',
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'vi'],
+    routing: {
+      prefixDefaultLocale: false,
+    },
+  },
   integrations: [
     mdx(),
     sitemap(),
diff --git a/new-site/src/components/LanguageSwitcher.astro b/new-site/src/components/LanguageSwitcher.astro
@@ -0,0 +1,32 @@
+---
+import { languages, defaultLang, getLangFromUrl, getLocalizedPath } from '@i18n/utils';
+
+const currentLang = getLangFromUrl(Astro.url);
+const currentPath = Astro.url.pathname.replace(new RegExp(`^/${currentLang}`), '') || '/';
+
+// Generate alternate language URL
+const alternateLang = currentLang === 'en' ? 'vi' : 'en';
+const alternateUrl = getLocalizedPath(currentPath, alternateLang);
+---
+
+<div class="language-switcher">
+  <a
+    href={alternateUrl}
+    class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+    aria-label={`Switch to ${languages[alternateLang]}`}
+    title={`Switch to ${languages[alternateLang]}`}
+  >
+    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
+    </svg>
+    <span class="text-sm font-medium">
+      {currentLang === 'en' ? 'VI' : 'EN'}
+    </span>
+  </a>
+</div>
+
+<style>
+  .language-switcher {
+    display: inline-block;
+  }
+</style>
diff --git a/new-site/src/components/Navbar.astro b/new-site/src/components/Navbar.astro
@@ -1,6 +1,7 @@
 ---
 import { SITE, NAV_LINKS } from '@utils/constants';
 import ThemeToggle from './ThemeToggle.astro';
+import LanguageSwitcher from './LanguageSwitcher.astro';
 
 const currentPath = Astro.url.pathname;
 ---
@@ -25,11 +26,13 @@ const currentPath = Astro.url.pathname;
             {link.label}
           </a>
         ))}
+        <LanguageSwitcher />
         <ThemeToggle />
       </div>
 
       <!-- Mobile Menu Button -->
       <div class="md:hidden flex items-center space-x-2">
+        <LanguageSwitcher />
         <ThemeToggle />
         <button
           id="mobile-menu-button"
diff --git a/new-site/src/i18n/en.ts b/new-site/src/i18n/en.ts
@@ -0,0 +1,143 @@
+export default {
+  // Navigation
+  nav: {
+    blog: 'Blog',
+    projects: 'Projects',
+    contact: 'Contact',
+  },
+
+  // Homepage
+  home: {
+    welcome: '👋 Welcome to my portfolio',
+    greeting: "Hi, I'm",
+    name: 'Hieu Nguyen',
+    role: 'AI Engineer',
+    tagline: 'Building production-ready AI systems with NLP, RAG, and LLMs. Passionate about bringing AI into real-world applications.',
+    cta: {
+      viewWork: 'View My Work',
+      getInTouch: 'Get in Touch',
+    },
+    status: 'Available for hire',
+    stats: {
+      followers: 'Followers',
+      repositories: 'Repositories',
+      yearsExp: 'Years Exp',
+    },
+    about: {
+      title: 'About Me',
+      subtitle: 'AI Engineer with Master\'s degree from JAIST, specializing in production ML systems',
+      greeting: 'Hello there!',
+      bio1: 'I\'m Hieu Nguyen, an AI Engineer from Vietnam 🇻🇳 with a passion for transforming research into production-ready systems.',
+      bio2: 'My expertise lies in Natural Language Processing, RAG systems, and Large Language Models. I specialize in building scalable AI solutions that solve real-world problems.',
+      bio3: 'I hold a {degree} from {school} in Japan, where I deepened my knowledge in information retrieval and machine learning.',
+      bio4: 'When I\'m not coding, you\'ll find me exploring self-hosted solutions, contributing to open source, or writing about AI/ML on my blog.',
+    },
+    education: {
+      title: 'Education',
+    },
+    techStack: {
+      title: 'Tech Stack & Skills',
+    },
+    featuredProjects: {
+      title: '🚀 Featured Projects',
+      subtitle: 'Check out some of my recent work and contributions',
+      viewAll: 'View All Projects',
+    },
+    latestArticles: {
+      title: '✍️ Latest Articles',
+      subtitle: 'Thoughts on AI, ML, and software engineering',
+      viewAll: 'View All Articles',
+    },
+    cta2: {
+      title: 'Let\'s Build Something Amazing Together',
+      subtitle: 'Looking for an AI engineer to bring your ideas to life? I\'m available for consulting, collaboration, and full-time opportunities.',
+      getInTouch: '📧 Get in Touch',
+      viewWork: '🚀 View My Work',
+    },
+  },
+
+  // Projects Page
+  projects: {
+    title: 'Projects',
+    subtitle: 'Personal and open source projects I\'ve built',
+    filter: {
+      all: 'All',
+      product: 'Product',
+      research: 'Research',
+      tutorial: 'Tutorial',
+      tool: 'Tool',
+      fun: 'Fun',
+    },
+    links: {
+      website: 'Website',
+      github: 'GitHub',
+      blog: 'Read',
+    },
+  },
+
+  // Contact Page
+  contact: {
+    title: '💬 Let\'s Connect',
+    subtitle: 'Always happy to discuss AI, production ML, RAG systems, or self-hosted solutions',
+    getInTouch: 'Get in Touch',
+    quickInfo: {
+      title: 'Quick Info',
+      location: 'Location',
+      locationValue: 'Hanoi, Vietnam 🇻🇳',
+      role: 'Role',
+      roleValue: 'AI Engineer',
+      education: 'Education',
+      educationValue: 'Master\'s in Information Science (JAIST)',
+    },
+    interests: {
+      title: 'Interests',
+      aiml: 'AI/ML',
+      nlp: 'NLP',
+      rag: 'RAG',
+      llms: 'LLMs',
+      python: 'Python',
+      ir: 'IR',
+      teaching: 'Teaching',
+      selfHosting: 'Self-hosting',
+    },
+    availability: {
+      title: '📬 Response Time',
+      text: 'I typically respond to emails and LinkedIn messages within 24-48 hours. For quick questions, Twitter/X DMs work best!',
+    },
+    cta: {
+      title: 'Open to Collaboration',
+      subtitle: 'Interested in collaborating on AI/ML projects, writing guest posts, or speaking opportunities?',
+      button: '📧 Send me an email',
+    },
+  },
+
+  // Blog Page
+  blog: {
+    title: 'Blog',
+    subtitle: 'Articles about AI, ML, and software engineering',
+    filter: {
+      all: 'All',
+      aiml: 'AI/ML',
+      python: 'Python',
+      tutorial: 'Tutorial',
+      data: 'Data',
+    },
+    readMore: 'Read More',
+    minRead: 'min read',
+  },
+
+  // Footer
+  footer: {
+    builtWith: 'Built with',
+    and: 'and',
+    sourceCode: 'Source Code',
+    rights: 'All rights reserved.',
+  },
+
+  // Common
+  common: {
+    readMore: 'Read More',
+    viewAll: 'View All',
+    loading: 'Loading...',
+  },
+} as const;
diff --git a/new-site/src/i18n/utils.ts b/new-site/src/i18n/utils.ts
@@ -0,0 +1,31 @@
+import en from './en';
+import vi from './vi';
+
+export const languages = {
+  en: 'English',
+  vi: 'Tiếng Việt',
+} as const;
+
+export const defaultLang = 'en';
+
+export const translations = {
+  en,
+  vi,
+} as const;
+
+export function getLangFromUrl(url: URL) {
+  const [, lang] = url.pathname.split('/');
+  if (lang in translations) return lang as keyof typeof translations;
+  return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof translations) {
+  return translations[lang];
+}
+
+export function getLocalizedPath(path: string, lang: string) {
+  if (lang === defaultLang) {
+    return path;
+  }
+  return `/${lang}${path}`;
+}
diff --git a/new-site/src/i18n/vi.ts b/new-site/src/i18n/vi.ts
@@ -0,0 +1,143 @@
+export default {
+  // Navigation
+  nav: {
+    blog: 'Blog',
+    projects: 'Dự Án',
+    contact: 'Liên Hệ',
+  },
+
+  // Homepage
+  home: {
+    welcome: '👋 Chào mừng đến với portfolio của tôi',
+    greeting: 'Xin chào, tôi là',
+    name: 'Hiếu Nguyễn',
+    role: 'Kỹ Sư AI',
+    tagline: 'Xây dựng hệ thống AI production-ready với NLP, RAG và LLMs. Đam mê đưa AI vào các ứng dụng thực tế.',
+    cta: {
+      viewWork: 'Xem Dự Án',
+      getInTouch: 'Liên Hệ',
+    },
+    status: 'Sẵn sàng nhận việc',
+    stats: {
+      followers: 'Người Theo Dõi',
+      repositories: 'Repositories',
+      yearsExp: 'Năm Kinh Nghiệm',
+    },
+    about: {
+      title: 'Về Tôi',
+      subtitle: 'Kỹ sư AI với bằng Thạc sĩ từ JAIST, chuyên về hệ thống ML production',
+      greeting: 'Xin chào!',
+      bio1: 'Tôi là Hiếu Nguyễn, một Kỹ sư AI từ Việt Nam 🇻🇳 với đam mê chuyển đổi nghiên cứu thành các hệ thống production.',
+      bio2: 'Chuyên môn của tôi nằm ở Xử lý Ngôn ngữ Tự nhiên, hệ thống RAG và Mô hình Ngôn ngữ Lớn. Tôi chuyên xây dựng các giải pháp AI có khả năng mở rộng để giải quyết các vấn đề thực tế.',
+      bio3: 'Tôi có bằng {degree} từ {school} ở Nhật Bản, nơi tôi đã nâng cao kiến thức về truy xuất thông tin và học máy.',
+      bio4: 'Khi không code, bạn sẽ thấy tôi khám phá các giải pháp self-hosted, đóng góp cho open source, hoặc viết về AI/ML trên blog.',
+    },
+    education: {
+      title: 'Học Vấn',
+    },
+    techStack: {
+      title: 'Kỹ Năng & Công Nghệ',
+    },
+    featuredProjects: {
+      title: '🚀 Dự Án Nổi Bật',
+      subtitle: 'Một số dự án và đóng góp gần đây của tôi',
+      viewAll: 'Xem Tất Cả Dự Án',
+    },
+    latestArticles: {
+      title: '✍️ Bài Viết Mới Nhất',
+      subtitle: 'Suy nghĩ về AI, ML và kỹ thuật phần mềm',
+      viewAll: 'Xem Tất Cả Bài Viết',
+    },
+    cta2: {
+      title: 'Hãy Cùng Xây Dựng Điều Gì Đó Tuyệt Vời',
+      subtitle: 'Đang tìm kiếm một kỹ sư AI để hiện thực hóa ý tưởng của bạn? Tôi sẵn sàng cho tư vấn, hợp tác và cơ hội toàn thời gian.',
+      getInTouch: '📧 Liên Hệ',
+      viewWork: '🚀 Xem Dự Án',
+    },
+  },
+
+  // Projects Page
+  projects: {
+    title: 'Dự Án',
+    subtitle: 'Các dự án cá nhân và open source mà tôi đã xây dựng',
+    filter: {
+      all: 'Tất Cả',
+      product: 'Sản Phẩm',
+      research: 'Nghiên Cứu',
+      tutorial: 'Hướng Dẫn',
+      tool: 'Công Cụ',
+      fun: 'Giải Trí',
+    },
+    links: {
+      website: 'Website',
+      github: 'GitHub',
+      blog: 'Đọc',
+    },
+  },
+
+  // Contact Page
+  contact: {
+    title: '💬 Kết Nối',
+    subtitle: 'Luôn vui lòng thảo luận về AI, production ML, hệ thống RAG, hoặc giải pháp self-hosted',
+    getInTouch: 'Liên Hệ',
+    quickInfo: {
+      title: 'Thông Tin Nhanh',
+      location: 'Vị Trí',
+      locationValue: 'Hà Nội, Việt Nam 🇻🇳',
+      role: 'Vai Trò',
+      roleValue: 'Kỹ Sư AI',
+      education: 'Học Vấn',
+      educationValue: 'Thạc sĩ Khoa học Thông tin (JAIST)',
+    },
+    interests: {
+      title: 'Sở Thích',
+      aiml: 'AI/ML',
+      nlp: 'NLP',
+      rag: 'RAG',
+      llms: 'LLMs',
+      python: 'Python',
+      ir: 'IR',
+      teaching: 'Giảng Dạy',
+      selfHosting: 'Self-hosting',
+    },
+    availability: {
+      title: '📬 Thời Gian Phản Hồi',
+      text: 'Tôi thường phản hồi email và tin nhắn LinkedIn trong vòng 24-48 giờ. Với các câu hỏi nhanh, Twitter/X DM là tốt nhất!',
+    },
+    cta: {
+      title: 'Sẵn Sàng Hợp Tác',
+      subtitle: 'Quan tâm đến việc hợp tác trong các dự án AI/ML, viết bài khách mời, hoặc cơ hội diễn thuyết?',
+      button: '📧 Gửi email cho tôi',
+    },
+  },
+
+  // Blog Page
+  blog: {
+    title: 'Blog',
+    subtitle: 'Bài viết về AI, ML và kỹ thuật phần mềm',
+    filter: {
+      all: 'Tất Cả',
+      aiml: 'AI/ML',
+      python: 'Python',
+      tutorial: 'Hướng Dẫn',
+      data: 'Dữ Liệu',
+    },
+    readMore: 'Đọc Thêm',
+    minRead: 'phút đọc',
+  },
+
+  // Footer
+  footer: {
+    builtWith: 'Được xây dựng với',
+    and: 'và',
+    sourceCode: 'Mã Nguồn',
+    rights: 'Bản quyền thuộc về.',
+  },
+
+  // Common
+  common: {
+    readMore: 'Đọc Thêm',
+    viewAll: 'Xem Tất Cả',
+    loading: 'Đang tải...',
+  },
+} as const;
diff --git a/new-site/src/layouts/BaseLayout.astro b/new-site/src/layouts/BaseLayout.astro
diff --git a/new-site/tsconfig.json b/new-site/tsconfig.json
