refactor(i18n): update personal info and improve language switcher
- Update personal information in i18n files to reflect new user details - Remove hardcoded personal info from GlassHeader and use i18n instead - Simplify navigation items in GlassHeader by removing unused sections - Enhance LanguageSwitcher UI with better display and chevron icon
This commit is contained in:
@@ -1,7 +1,6 @@
|
|||||||
import ThemeToggle from "./ui/theme-toggle";
|
import ThemeToggle from "./ui/theme-toggle";
|
||||||
import LanguageSwitcher from "./LanguageSwitcher";
|
import LanguageSwitcher from "./LanguageSwitcher";
|
||||||
import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
|
import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
|
||||||
import { personalInfo } from "@/lib/data";
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Menu, X } from "lucide-react";
|
import { Menu, X } from "lucide-react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
@@ -25,7 +24,7 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
|
|||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
>
|
>
|
||||||
✨ {personalInfo.name}
|
✨ {t('personal.name')}
|
||||||
</motion.a>
|
</motion.a>
|
||||||
|
|
||||||
{/* Desktop Navigation */}
|
{/* Desktop Navigation */}
|
||||||
@@ -34,8 +33,6 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
|
|||||||
{ key: 'nav.experience', icon: '💼 ', sectionId: 'experience' },
|
{ key: 'nav.experience', icon: '💼 ', sectionId: 'experience' },
|
||||||
{ key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
|
{ key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
|
||||||
{ key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
|
{ key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
|
||||||
{ key: 'nav.awards', icon: '🏆 ', sectionId: 'awards' },
|
|
||||||
{ key: 'nav.education', icon: '🎓 ', sectionId: 'education' },
|
|
||||||
].map(
|
].map(
|
||||||
(item, index) => (
|
(item, index) => (
|
||||||
<motion.a
|
<motion.a
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { getLocalizedPath, type Lang } from "@/i18n/utils"; // getLangFromUrl is removed as Astro.currentLocale is used now.
|
import { getLocalizedPath, type Lang } from "@/i18n/utils"; // getLangFromUrl is removed as Astro.currentLocale is used now.
|
||||||
import { languages as i18nLanguages, defaultLang } from "@/i18n/ui";
|
import { languages as i18nLanguages, defaultLang } from "@/i18n/ui";
|
||||||
import { Languages, Check } from "lucide-react";
|
import { Languages, Check, ChevronDown } from "lucide-react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
|
||||||
const availableLanguages = Object.entries(i18nLanguages).map(([code, name]) => ({
|
const availableLanguages = Object.entries(i18nLanguages).map(([code, name]) => ({
|
||||||
@@ -73,11 +73,14 @@ export default function LanguageSwitcher({ lang: initialLang }: LanguageSwitcher
|
|||||||
<div className="relative">
|
<div className="relative">
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={toggleOpen}
|
onClick={toggleOpen}
|
||||||
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
className="flex items-center p-2 rounded-md hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-sm"
|
||||||
aria-label="Change language"
|
aria-label={`Change language, current language is ${selectedLanguage.name}`}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
>
|
>
|
||||||
<Languages size={20} />
|
<span className="mr-1.5">{selectedLanguage.icon}</span>
|
||||||
|
<span className="hidden sm:inline">{selectedLanguage.name}</span>
|
||||||
|
<span className="sm:hidden">{selectedLanguage.code.toUpperCase()}</span>
|
||||||
|
<ChevronDown size={16} className={`ml-1.5 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
|
||||||
</motion.button>
|
</motion.button>
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
|
|||||||
@@ -19,9 +19,9 @@ export const ui = {
|
|||||||
'page.home.title': 'Home',
|
'page.home.title': 'Home',
|
||||||
|
|
||||||
// Personal Info
|
// Personal Info
|
||||||
'personal.name': 'Rishikesh S',
|
'personal.name': 'Joy Zhao',
|
||||||
'personal.title': 'Software Engineer 👨💻',
|
'personal.title': 'Full Stack Engineer 👨💻',
|
||||||
'personal.location': 'Coimbatore, India',
|
'personal.location': 'China',
|
||||||
'personal.email': 'rkesh2003@gmail.com',
|
'personal.email': 'rkesh2003@gmail.com',
|
||||||
|
|
||||||
// Hero Section
|
// Hero Section
|
||||||
@@ -162,9 +162,9 @@ export const ui = {
|
|||||||
'page.home.title': '首页',
|
'page.home.title': '首页',
|
||||||
|
|
||||||
// Personal Info
|
// Personal Info
|
||||||
'personal.name': 'Rishikesh S',
|
'personal.name': 'Joy Zhao',
|
||||||
'personal.title': '软件工程师 👨💻',
|
'personal.title': '全栈工程师 👨💻',
|
||||||
'personal.location': '哥印拜陀,印度',
|
'personal.location': '中国',
|
||||||
'personal.email': 'rkesh2003@gmail.com',
|
'personal.email': 'rkesh2003@gmail.com',
|
||||||
|
|
||||||
// Hero Section
|
// Hero Section
|
||||||
|
|||||||
Reference in New Issue
Block a user